/* =========================================================
   THEFITNESS — ANIMATIONS.CSS
   Base states for GSAP-driven reveals + pure-CSS micro-interactions.
   GSAP (animations.js) toggles the classes below; this file only
   defines what each state looks like.
   ========================================================= */

/* =========================================================
   SCROLL REVEAL
   IMPORTANT: elements are visible by default (no CSS opacity:0 here).
   animations.js sets the hidden starting point itself via gsap.set()
   right before it animates each element in. This way, if JS is slow,
   blocked, or fails to load, the page still shows all of its content
   instead of staying blank. Never hide content in CSS by default —
   only JS should hide what JS is responsible for revealing.
   ========================================================= */
.reveal-up,
.reveal-fade,
.reveal-scale {
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}

/* Stagger children of a .card-grid — GSAP applies incremental delay,
   this just guarantees a sane fallback if JS is slow to attach. */
.card-grid > * { transition-delay: 0ms; }

/* =========================================================
   HERO ENTRANCE
   Visible by default. animations.js applies the entrance animation
   on load; if JS doesn't run, the hero simply appears static (never
   hidden).
   ========================================================= */
.hero-loaded .hero-title span,
.hero-loaded .hero-sub,
.hero-loaded .hero-actions,
.hero-loaded .hero-trust {
  animation: heroRise 0.9s var(--ease) forwards;
}
.hero-loaded .hero-title span:nth-child(1) { animation-delay: 0.05s; }
.hero-loaded .hero-title span:nth-child(2) { animation-delay: 0.15s; }
.hero-loaded .hero-sub { animation-delay: 0.28s; }
.hero-loaded .hero-actions { animation-delay: 0.38s; }
.hero-loaded .hero-trust { animation-delay: 0.48s; }

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

/* =========================================================
   SCROLL SEQUENCE STORY TEXT
   ========================================================= */
.story-step {
  transition: opacity 0.5s var(--ease);
}

/* =========================================================
   STATS COUNTER PULSE
   Tiny pulse when a counter finishes animating (triggered by JS)
   ========================================================= */
.stat-num.is-counted {
  animation: statPulse 0.4s var(--ease);
}
@keyframes statPulse {
  0% { transform: scale(1); }
  40% { transform: scale(1.06); }
  100% { transform: scale(1); }
}

/* =========================================================
   BUTTON MICRO-INTERACTIONS
   ========================================================= */
.btn {
  position: relative;
  overflow: hidden;
}
.btn::after {
  content: "→";
  display: inline-block;
  margin-left: 2px;
  transform: translateX(-4px);
  opacity: 0;
  transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
.btn:hover::after {
  transform: translateX(0);
  opacity: 1;
}
.btn-outline::after,
.btn-ghost::after { content: ""; display: none; }

/* =========================================================
   CARD HOVER LIFT (shared)
   ========================================================= */
.why-card,
.program-card,
.trainer-card .trainer-photo,
.transform-card,
.plan-card {
  will-change: transform;
}

/* =========================================================
   IMAGE / MEDIA HOVER SCALE
   ========================================================= */
.program-media,
.trainer-photo,
.transform-media,
.classes-preview-media {
  overflow: hidden;
}
.program-media,
.transform-media {
  transition: transform 0.5s var(--ease);
}
.program-card:hover .program-media,
.transform-card:hover .transform-media {
  transform: scale(1.03);
}

/* =========================================================
   TESTIMONIAL SLIDE TRANSITION
   ========================================================= */
.testimonial-card {
  transform: translateY(10px);
  transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
}
.testimonial-card.is-active { transform: translateY(0); }

/* =========================================================
   MOBILE MENU LINK STAGGER
   ========================================================= */
.mobile-nav li {
  opacity: 0;
  transform: translateX(16px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}
.mobile-nav.is-open li {
  opacity: 1;
  transform: translateX(0);
}
.mobile-nav.is-open li:nth-child(1) { transition-delay: 0.05s; }
.mobile-nav.is-open li:nth-child(2) { transition-delay: 0.1s; }
.mobile-nav.is-open li:nth-child(3) { transition-delay: 0.15s; }
.mobile-nav.is-open li:nth-child(4) { transition-delay: 0.2s; }
.mobile-nav.is-open li:nth-child(5) { transition-delay: 0.25s; }
.mobile-nav.is-open li:nth-child(6) { transition-delay: 0.3s; }
.mobile-nav.is-open li:nth-child(7) { transition-delay: 0.35s; }
.mobile-nav.is-open li:nth-child(8) { transition-delay: 0.4s; }

/* =========================================================
   FAQ ACCORDION (shared across faq.html + membership.html)
   ========================================================= */
.accordion-item { border-bottom: 1px solid var(--color-border); }
.accordion-panel {
  height: 0;
  overflow: hidden;
  transition: height 0.4s var(--ease);
}
.accordion-item.is-open .accordion-icon { transform: rotate(45deg); }
.accordion-icon { transition: transform 0.3s var(--ease); display: inline-block; }

/* =========================================================
   LIGHTBOX (gallery.html)
   ========================================================= */
.lightbox {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s var(--ease);
}
.lightbox.is-open { opacity: 1; pointer-events: auto; }
.lightbox-img {
  transform: scale(0.96);
  transition: transform 0.35s var(--ease);
}
.lightbox.is-open .lightbox-img { transform: scale(1); }