/* ============================
   KEYFRAME ANIMATIONS
   ============================ */

@keyframes aurora-shift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 100%;
    filter: hue-rotate(0deg);
  }
  50% {
    background-position: 100% 50%, 0% 100%, 30% 0%;
    filter: hue-rotate(8deg);
  }
  100% {
    background-position: 50% 100%, 50% 0%, 80% 50%;
    filter: hue-rotate(15deg);
  }
}

@keyframes logo-entrance {
  from {
    opacity: 0;
    transform: scale(0.9) translateY(20px);
    filter: drop-shadow(0 0 40px rgba(126, 200, 227, 0));
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
    filter: drop-shadow(0 0 40px rgba(126, 200, 227, 0.15));
  }
}

@keyframes text-reveal-up {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes gold-line-grow {
  from {
    transform: scaleX(0);
  }
  to {
    transform: scaleX(1);
  }
}

@keyframes bounce-scroll {
  0%, 100% {
    transform: translateY(0);
    opacity: 0.6;
  }
  50% {
    transform: translateY(8px);
    opacity: 1;
  }
}

@keyframes glow-pulse {
  0% {
    filter: drop-shadow(0 0 30px rgba(126, 200, 227, 0.1));
  }
  100% {
    filter: drop-shadow(0 0 50px rgba(126, 200, 227, 0.22));
  }
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  100% {
    transform: translateY(-6px);
  }
}

@keyframes shimmer {
  from {
    background-position: 200% 0;
  }
  to {
    background-position: -200% 0;
  }
}

@keyframes fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes curtain-reveal {
  from {
    clip-path: inset(0 0 0 0);
  }
  to {
    clip-path: inset(0 0 0 100%);
  }
}

@keyframes success-pop {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes easter-egg-pop {
  0% {
    opacity: 0;
    transform: translate(-50%, 0) scale(0) rotate(-20deg);
  }
  60% {
    opacity: 1;
    transform: translate(-50%, -30px) scale(1.3) rotate(10deg);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -25px) scale(1) rotate(0deg);
  }
}

@keyframes hamburger-line1 {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(8px) rotate(0); }
  100% { transform: translateY(8px) rotate(45deg); }
}

@keyframes hamburger-line3 {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8px) rotate(0); }
  100% { transform: translateY(-8px) rotate(-45deg); }
}

@keyframes hamburger-line1-reverse {
  0% { transform: translateY(8px) rotate(45deg); }
  50% { transform: translateY(8px) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes hamburger-line3-reverse {
  0% { transform: translateY(-8px) rotate(-45deg); }
  50% { transform: translateY(-8px) rotate(0); }
  100% { transform: translateY(0) rotate(0); }
}

/* ============================
   SCROLL-TRIGGERED CLASSES
   ============================ */

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              transform 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}

.reveal-up.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger delays via data-delay attribute */
.reveal-up[data-delay="100"] { transition-delay: 0.1s; }
.reveal-up[data-delay="200"] { transition-delay: 0.2s; }
.reveal-up[data-delay="300"] { transition-delay: 0.3s; }
.reveal-up[data-delay="400"] { transition-delay: 0.4s; }

/* Section title shimmer */
.section-title.is-visible {
  background: linear-gradient(
    90deg,
    #fff 0%, #fff 40%,
    #c9a84c 50%,
    #fff 60%, #fff 100%
  );
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 2s ease-out forwards;
}

/* Image curtain reveal */
.experience__image-reveal {
  position: absolute;
  inset: 0;
  background: var(--color-navy);
  z-index: 2;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.2s cubic-bezier(0.16, 1, 0.3, 1);
}

.experience__image-wrapper.is-visible .experience__image-reveal {
  clip-path: inset(0 0 0 100%);
}

/* ============================
   REDUCED MOTION
   ============================ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.2s !important;
    transition-delay: 0s !important;
  }

  .reveal-up {
    opacity: 1;
    transform: none;
  }

  .hero__particles {
    display: none;
  }
}