/* ============================================
   HERO INTRO ANIMATION STYLES
   Premium first-visit animation system
   ============================================ */

/* ===========================================
   CSS CUSTOM PROPERTIES (Timing Configuration)
   Adjust these values to fine-tune the animation
   =========================================== */
:root {
  /* Durations (in seconds) */
  --intro-phase1-duration: 0.8s;    /* 0.0–0.8s: Initial fade in */
  --intro-phase2-duration: 1.2s;    /* 0.8–2.0s: Crest animation */
  --intro-phase3-duration: 1.5s;    /* 2.0–3.5s: Title reveal */
  --intro-phase4-duration: 1.3s;    /* 3.5–4.8s: Subtitle/tagline */
  --intro-phase5-duration: 1.4s;    /* 4.8–6.2s: Buttons appear */
  --intro-phase6-duration: 1.8s;    /* 6.2–8.0s: Idle animations */
  
  /* Delays (cumulative) */
  --intro-delay-crest: 0.8s;
  --intro-delay-title: 2.0s;
  --intro-delay-subtitle: 3.5s;
  --intro-delay-tagline: 4.0s;
  --intro-delay-buttons: 4.8s;
  --intro-delay-idle: 6.2s;
  
  /* Easings */
  --intro-ease-smooth: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --intro-ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --intro-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --intro-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
}

/* ===========================================
   VIGNETTE OVERLAY
   =========================================== */
.hero-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, transparent 0%, rgba(0,0,0,0.3) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ===========================================
   CREST GLOW EFFECT - Premium Light Halo
   =========================================== */
.hero-logo-badge {
  position: relative;
}

.crest-glow {
  position: absolute;
  inset: -20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,215,0,0.35) 0%, rgba(255,215,0,0.15) 40%, rgba(255,215,0,0) 70%);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
}

/* Outer ring glow */
.crest-ring {
  position: absolute;
  inset: -25px;
  border-radius: 50%;
  border: 2px solid transparent;
  background: linear-gradient(135deg, rgba(255,215,0,0.05), rgba(255,255,255,0.05)) padding-box,
              linear-gradient(135deg, rgba(255,215,0,0.5), rgba(255,255,255,0.3), rgba(255,215,0,0.5)) border-box;
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  box-shadow: 
    0 0 15px rgba(255,215,0,0.25),
    0 0 30px rgba(255,215,0,0.15),
    inset 0 0 10px rgba(255,215,0,0.1);
}

/* Inner bright ring */
.crest-inner-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  opacity: 0;
  pointer-events: none;
  z-index: -1;
  box-shadow: 
    0 0 10px rgba(255,255,255,0.4),
    0 0 20px rgba(255,215,0,0.25),
    inset 0 0 8px rgba(255,255,255,0.15);
}

/* Light rays emanating from center */
.crest-rays {
  position: absolute;
  inset: -35px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: -2;
  background: 
    conic-gradient(
      from 0deg,
      transparent 0deg,
      rgba(255,215,0,0.15) 5deg,
      transparent 10deg,
      transparent 35deg,
      rgba(255,215,0,0.12) 40deg,
      transparent 45deg,
      transparent 80deg,
      rgba(255,215,0,0.15) 85deg,
      transparent 90deg,
      transparent 125deg,
      rgba(255,215,0,0.12) 130deg,
      transparent 135deg,
      transparent 170deg,
      rgba(255,215,0,0.15) 175deg,
      transparent 180deg,
      transparent 215deg,
      rgba(255,215,0,0.12) 220deg,
      transparent 225deg,
      transparent 260deg,
      rgba(255,215,0,0.15) 265deg,
      transparent 270deg,
      transparent 305deg,
      rgba(255,215,0,0.12) 310deg,
      transparent 315deg,
      transparent 350deg,
      rgba(255,215,0,0.15) 355deg,
      transparent 360deg
    );
  filter: blur(2px);
}

/* Particle sparkles container */
.crest-sparkles {
  position: absolute;
  inset: -30px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* Simplified - remove old rays definition below */
.crest-rays-placeholder {
      transparent 300deg,
      rgba(255,215,0,0.3) 305deg,
      transparent 310deg,
      transparent 320deg,
      rgba(255,215,0,0.4) 325deg,
      transparent 330deg,
      transparent 340deg,
      rgba(255,215,0,0.3) 345deg,
      transparent 350deg,
      transparent 360deg
    );
  filter: blur(3px);
}

/* Particle sparkles container */
.crest-sparkles {
  position: absolute;
  inset: -50px;
  border-radius: 50%;
  opacity: 0;
  pointer-events: none;
  z-index: 1;
}

/* ===========================================
   LIGHT SWEEP SVG OVERLAY
   =========================================== */
.hero-sweep {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  opacity: 0;
  overflow: hidden;
}

.hero-sweep svg {
  width: 100%;
  height: 100%;
  transform: translateX(-100%);
}

/* ===========================================
   BUTTON SHEEN EFFECT (Gold button shine)
   =========================================== */
.btn-primary {
  position: relative;
  overflow: hidden;
}

.btn-primary::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,0.3) 50%,
    transparent 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

/* ===========================================
   INITIAL STATES (When intro is active)
   Applied via JavaScript before animation starts
   =========================================== */
body.is-intro #hero {
  --initial-opacity: 0;
}

body.is-intro .hero-bg-wrapper {
  opacity: 0;
  filter: blur(8px) brightness(0.6);
  will-change: opacity, filter;
}

body.is-intro #crest {
  opacity: 0;
  transform: scale(0.96) translateY(6px);
  will-change: opacity, transform;
}

body.is-intro .crest-glow {
  opacity: 0;
  transform: scale(0.8);
  will-change: opacity, transform;
}

body.is-intro .crest-ring {
  opacity: 0;
  transform: scale(0.6);
  will-change: opacity, transform, box-shadow;
}

body.is-intro .crest-inner-ring {
  opacity: 0;
  transform: scale(0.8);
  will-change: opacity, transform, box-shadow;
}

body.is-intro .crest-rays {
  opacity: 0;
  transform: scale(0.5) rotate(-30deg);
  will-change: opacity, transform;
}

body.is-intro #title {
  opacity: 0;
  transform: translateY(10px);
  will-change: opacity, transform;
}

body.is-intro #subtitle {
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
}

body.is-intro #tagline {
  opacity: 0;
  transform: translateY(6px);
  will-change: opacity, transform;
}

body.is-intro #ctaPrimary,
body.is-intro #ctaSecondary {
  opacity: 0;
  transform: translateY(12px);
  will-change: opacity, transform;
}

body.is-intro .hero-sweep {
  opacity: 1;
}

/* ===========================================
   FINAL STATES (After animation completes)
   These are the stable, final styles
   =========================================== */
body.intro-complete .hero-bg-wrapper,
body:not(.is-intro) .hero-bg-wrapper {
  opacity: 1;
  filter: blur(0) brightness(1);
}

body.intro-complete #crest,
body:not(.is-intro) #crest {
  opacity: 1;
  transform: scale(1) translateY(0);
}

body.intro-complete #title,
body:not(.is-intro) #title,
body.intro-complete #subtitle,
body:not(.is-intro) #subtitle,
body.intro-complete #tagline,
body:not(.is-intro) #tagline,
body.intro-complete #ctaPrimary,
body:not(.is-intro) #ctaPrimary,
body.intro-complete #ctaSecondary,
body:not(.is-intro) #ctaSecondary {
  opacity: 1;
  transform: translateY(0);
}

body.intro-complete .hero-sweep,
body:not(.is-intro) .hero-sweep {
  opacity: 0;
}

/* ===========================================
   IDLE ANIMATIONS (Post-intro subtle effects)
   =========================================== */
@keyframes crestBreathing {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.01);
  }
}

@keyframes bgParallax {
  0%, 100% {
    transform: scale(1) translate(0, 0);
  }
  50% {
    transform: scale(1.015) translate(-0.5%, -0.3%);
  }
}

@keyframes buttonSheen {
  0% {
    left: -100%;
  }
  100% {
    left: 200%;
  }
}

/* Apply idle animations after intro completes */
body.intro-complete #crest {
  animation: crestBreathing 6s var(--intro-ease-in-out) infinite;
  animation-delay: 0.5s;
}

body.intro-complete .hero-bg {
  animation: bgParallax 12s var(--intro-ease-in-out) infinite;
}

/* Disable the default float animation during intro */
body.is-intro .hero-logo-badge {
  animation: none;
}

body.intro-complete .hero-logo-badge {
  animation: float 4s ease-in-out infinite;
  animation-delay: 1s;
}

/* ===========================================
   REDUCED MOTION PREFERENCES
   Respect user's accessibility settings
   =========================================== */
@media (prefers-reduced-motion: reduce) {
  body.is-intro .hero-bg-wrapper,
  body.is-intro #crest,
  body.is-intro #title,
  body.is-intro #subtitle,
  body.is-intro #tagline,
  body.is-intro #ctaPrimary,
  body.is-intro #ctaSecondary,
  body.is-intro .crest-glow,
  body.is-intro .hero-sweep {
    transition: opacity 0.3s ease !important;
    transform: none !important;
    filter: none !important;
  }
  
  body.intro-complete #crest,
  body.intro-complete .hero-bg,
  body.intro-complete .hero-logo-badge {
    animation: none !important;
  }
  
  .btn-primary::before {
    display: none;
  }
}

/* ===========================================
   BUTTON SHEEN ANIMATION CLASS
   Applied via JavaScript
   =========================================== */
.btn-primary.sheen-active::before {
  animation: buttonSheen 0.8s var(--intro-ease-out) forwards;
}

/* ===========================================
   SWEEP ANIMATION CLASS
   Applied via JavaScript
   =========================================== */
.hero-sweep.sweep-active svg {
  animation: sweepMove 1.5s var(--intro-ease-out) forwards;
}

@keyframes sweepMove {
  0% {
    transform: translateX(-100%);
    opacity: 0;
  }
  20% {
    opacity: 1;
  }
  80% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0;
  }
}

/* ===========================================
   GLOW PULSE ANIMATION
   =========================================== */
@keyframes glowPulse {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }
  50% {
    opacity: 0.8;
    transform: scale(1.1);
  }
  100% {
    opacity: 0.3;
    transform: scale(1);
  }
}

.crest-glow.glow-active {
  animation: glowPulse 1.2s var(--intro-ease-out) forwards;
}

/* ===========================================
   PREMIUM LIGHT RING ANIMATIONS
   =========================================== */
@keyframes ringExpand {
  0% {
    opacity: 0;
    transform: scale(0.7);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0.8;
    transform: scale(1);
  }
}

@keyframes ringPulse {
  0%, 100% {
    box-shadow: 
      0 0 15px rgba(255,215,0,0.2),
      0 0 30px rgba(255,215,0,0.1),
      inset 0 0 10px rgba(255,215,0,0.08);
  }
  50% {
    box-shadow: 
      0 0 20px rgba(255,215,0,0.35),
      0 0 40px rgba(255,215,0,0.2),
      inset 0 0 15px rgba(255,215,0,0.12);
  }
}

@keyframes innerRingGlow {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.02);
  }
  100% {
    opacity: 0.9;
    transform: scale(1);
  }
}

@keyframes raysRotate {
  0% {
    opacity: 0;
    transform: rotate(0deg) scale(0.8);
  }
  30% {
    opacity: 0.6;
  }
  100% {
    opacity: 0.4;
    transform: rotate(15deg) scale(1);
  }
}

@keyframes raysSpin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.crest-ring.ring-active {
  animation: ringExpand 1s var(--intro-ease-out) forwards;
}

.crest-inner-ring.ring-active {
  animation: innerRingGlow 0.8s var(--intro-ease-out) forwards;
}

.crest-rays.rays-active {
  animation: raysRotate 1.2s var(--intro-ease-out) forwards;
}

/* Continuous subtle animations after intro */
body.intro-complete .crest-ring,
.crest-ring.glow-active {
  animation: ringPulse 3s ease-in-out infinite;
}

body.intro-complete .crest-rays,
.crest-rays.glow-active {
  animation: raysSpin 60s linear infinite;
}

body.intro-complete .crest-inner-ring,
.crest-inner-ring.glow-active {
  animation: innerRingPulse 4s ease-in-out infinite;
}

body.intro-complete .crest-glow,
.crest-glow.glow-active {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes innerRingPulse {
  0%, 100% {
    box-shadow: 
      0 0 8px rgba(255,255,255,0.3),
      0 0 16px rgba(255,215,0,0.15),
      inset 0 0 6px rgba(255,255,255,0.1);
  }
  50% {
    box-shadow: 
      0 0 12px rgba(255,255,255,0.5),
      0 0 24px rgba(255,215,0,0.25),
      inset 0 0 10px rgba(255,255,255,0.2);
  }
}

@keyframes glowPulse {
  0%, 100% {
    opacity: 0.25;
    transform: scale(1);
  }
  50% {
    opacity: 0.45;
    transform: scale(1.02);
  }
}

/* ===========================================
   SPARKLE ANIMATIONS
   =========================================== */
@keyframes sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

.sparkle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 4px 1px rgba(255,255,255,0.6), 0 0 8px 2px rgba(255,215,0,0.3);
}