/* ===== Hero Animations - Pure CSS (No GSAP) ===== */

/* ===========================================
   ANIMATION CONFIGURATION
   All timing values are in config.css as CSS variables
   Easy to adjust without touching this file!
   =========================================== */

/* ===========================================
   KEYFRAME DEFINITIONS
   Reusable animation patterns
   =========================================== */

/* Fade in only (no movement) - Used for title */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* Fade up from below - Used for most text elements */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Fade up (medium distance) - Used for fighters */
@keyframes fadeUpMedium {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===========================================
   WORD WRAPPER STYLING
   Used to wrap individual words for stagger effect
   =========================================== */

.hero-title .word-wrapper {
  display: inline-block;
  overflow: hidden;
  vertical-align: top;
  margin-right: 0.15em;
}

.hero-title .word-wrapper:last-child {
  margin-right: 0;
}

.hero-title .word {
  display: inline-block;
}

/* ===========================================
   INITIAL STATES
   Hide elements before animation starts
   =========================================== */

/* Hide all animated hero content until i18n translations load */
html:not(.i18n-ready) .hero-title,
html:not(.i18n-ready) .hero-coming-year,
html:not(.i18n-ready) .hero-tagline,
html:not(.i18n-ready) .social {
  visibility: hidden;
  opacity: 0;
}

html:not(.i18n-ready) .hero-coming-year,
html:not(.i18n-ready) .hero-tagline,
html:not(.i18n-ready) .social {
  transform: translateY(20px);
}

html:not(.i18n-ready) .hero-fighter--left,
html:not(.i18n-ready) .hero-fighter--right {
  visibility: hidden;
  opacity: 0;
  transform: translateY(24px);
}

/* Initial state for title words (before animation) */
.hero-title .word {
  opacity: 0;
}

/* Initial state for other elements (before animation) */
.hero-coming-year,
.hero-tagline,
.social {
  opacity: 0;
  transform: translateY(20px);
}

.hero-fighter--left,
.hero-fighter--right {
  opacity: 0;
  transform: translateY(24px);
}

/* ===========================================
   ANIMATION APPLICATION
   Applied when .animate class is added by JS
   =========================================== */

/* Title words - Staggered reveal */
/* Target word-wrappers for nth-child, animate the words inside */
.hero-title.animate .word-wrapper:nth-child(1) .word { animation-delay: calc(0 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(2) .word { animation-delay: calc(1 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(3) .word { animation-delay: calc(2 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(4) .word { animation-delay: calc(3 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(5) .word { animation-delay: calc(4 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(6) .word { animation-delay: calc(5 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(7) .word { animation-delay: calc(6 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(8) .word { animation-delay: calc(7 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(9) .word { animation-delay: calc(8 * var(--hero-word-stagger)); }
.hero-title.animate .word-wrapper:nth-child(10) .word { animation-delay: calc(9 * var(--hero-word-stagger)); }

.hero-title.animate .word {
  animation: fadeIn var(--hero-anim-duration) var(--hero-anim-ease) forwards;
}

/* "COMING 2026" subtitle */
.hero-coming-year.animate {
  animation: fadeUp var(--hero-anim-duration) var(--hero-anim-ease) var(--hero-subtitle-delay) forwards;
}

/* Tagline text */
.hero-tagline.animate {
  animation: fadeUp var(--hero-anim-duration) var(--hero-anim-ease) var(--hero-tagline-delay) forwards;
}

/* Social section (icons + text) */
.social.animate {
  animation: fadeUp var(--hero-anim-duration) var(--hero-anim-ease) var(--hero-social-delay) forwards;
}

/* Fighters - Staggered left then right */
.hero-fighter--left.animate {
  animation: fadeUpMedium var(--hero-anim-duration) var(--hero-anim-ease) var(--hero-fighters-delay) forwards;
}

.hero-fighter--right.animate {
  animation: fadeUpMedium var(--hero-anim-duration) var(--hero-anim-ease) calc(var(--hero-fighters-delay) + var(--hero-fighter-stagger)) forwards;
}

/* ===========================================
   ACCESSIBILITY - REDUCED MOTION
   Disable animations for users who prefer reduced motion
   =========================================== */

@media (prefers-reduced-motion: reduce) {
  .hero-title .word,
  .hero-coming-year,
  .hero-tagline,
  .social,
  .hero-fighter--left,
  .hero-fighter--right {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  
  .hero-title .word-wrapper {
    overflow: visible !important;
  }
}

/* ===========================================
   HOW TO CUSTOMIZE ANIMATIONS:
   
   1. CHANGE TIMING: Edit variables in config.css
      --hero-anim-duration: How long animations take
      --hero-word-stagger: Delay between words
      --hero-subtitle-delay: When subtitle appears
      etc.
   
   2. CHANGE ANIMATION STYLE: Edit @keyframes above
      fadeUp, fadeUpShort, fadeUpMedium
   
   3. ADD NEW ELEMENTS: 
      - Add initial state (opacity: 0, transform: translateY(...))
      - Add .animate rule with animation property
      - Set appropriate delay
   
   4. CHANGE STAGGER ORDER:
      Edit :nth-child() rules for .hero-title.animate .word
   
   =========================================== */