/* ============================================================
   Generic scroll-reveal system (replaces Framer Motion's
   initial/animate/whileInView props). main.js adds "is-visible"
   to any element with a "reveal" class once it enters the
   viewport (via IntersectionObserver); the transition here does
   the animating. Reduced-motion users get the end state directly.
   ============================================================ */
.reveal {
  opacity: 0;
  transition:
    opacity 0.7s var(--ease-soft),
    transform 0.7s var(--ease-soft);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal--up {
  transform: translateY(24px);
}
.reveal--up-sm {
  transform: translateY(16px);
}
.reveal--left {
  transform: translateX(-30px);
}
.reveal--right {
  transform: translateX(30px);
}
.reveal--scale {
  transform: scale(0.96);
}
.reveal--dot {
  transform: scale(0);
}

.reveal.is-visible {
  opacity: 1;
  transform: none;
}

/* ============================================================
   Hero + Final page-load entrance (these sections are the very
   first thing visible on their page, so they animate on load
   rather than waiting for a scroll-triggered observer)
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInUpScale {
  from {
    opacity: 0;
    transform: translateY(24px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.enter-fade-up {
  opacity: 0;
  animation: fadeInUp 1s var(--ease-soft) forwards;
  animation-delay: var(--enter-delay, 0s);
}

.enter-fade-up-scale {
  opacity: 0;
  animation: fadeInUpScale 1.1s var(--ease-soft) forwards;
  animation-delay: var(--enter-delay, 0s);
}

.enter-fade {
  opacity: 0;
  animation: fadeIn 1s var(--ease-soft) forwards;
  animation-delay: var(--enter-delay, 0s);
}

/* ============================================================
   Hero particles
   ============================================================ */
.hero__particle {
  animation-name: floatUp;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
}

@keyframes floatUp {
  0% {
    transform: translateY(0) translateX(0);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  90% {
    opacity: 0.3;
  }
  100% {
    transform: translateY(-110vh) translateX(12px);
    opacity: 0;
  }
}

/* ============================================================
   Final page stars
   ============================================================ */
@keyframes twinkle {
  0%,
  100% {
    opacity: 0.15;
  }
  50% {
    opacity: 0.85;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    transition-duration: 0.001ms !important;
  }
  .enter-fade-up,
  .enter-fade-up-scale,
  .enter-fade {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}