/* ============================================================
   Hibyte Graphics — animations.css

   GSAP Animation Initial States and GPU hints.
   GSAP overrides these values during ScrollTrigger animations.

   This file only sets will-change for GPU compositing.
   No visual styles here — those live in main.css.

   Elements targeted by GSAP:
   - .hero__line          hero heading lines (load animation, stagger)
   - .hero__sub           hero subline (load animation)
   - .hero__scroll-cue    scroll cue (load animation)
   - .intro-statement__text  intro statement (ScrollTrigger pin + scrub)
   - .panel__content      panel content wrapper (ScrollTrigger pin + scrub)
   - .panel__label        service number label
   - .panel__service      service name (key size-contrast element)
   - .panel__desc         service description
   - .panel__binding-types binding type labels (Spiral, Wire-O, Perfect)
   - .about__heading      about section heading (ScrollTrigger reveal)
   - .about__body         about body text + CTA
   - .footer__card        footer card (ScrollTrigger reveal)
   ============================================================ */

/* ============================
   Hero load animation targets
   ============================ */
/* GSAP animates .hero__line elements: y: 80→0, opacity: 0→1, stagger */
.hero__line {
  display: block;
  will-change: transform, opacity;
}

/* GSAP animates: opacity: 0→1 */
.hero__sub {
  will-change: opacity;
}

/* GSAP animates: opacity: 0→1, y: 10→0 */
.hero__scroll-cue {
  will-change: transform, opacity;
}

/* ============================
   Intro statement
   ============================ */
/* GSAP: pin + scrub, y: 40→0→-30, opacity: 0→1→0, scale: 1→1.04 */
.intro-statement__text {
  will-change: transform, opacity;
}

/* ============================
   Size-contrast service panels
   GSAP ScrollTrigger pins each .panel then animates its children in/out
   ============================ */
/* Panel content wrapper — animated out as a unit on exit */
.panel__content {
  will-change: transform, opacity;
}

/* Individual panel children — animated in with stagger */
.panel__label,
.panel__service,
.panel__desc,
.panel__binding-types {
  will-change: transform, opacity;
}

/* ============================
   About section reveal
   ============================ */
/* GSAP: y: 50→0, opacity: 0→1 on scroll-enter */
.about__heading,
.about__body {
  will-change: transform, opacity;
}

/* ============================
   Footer reveal
   ============================ */
/* GSAP: y: 30→0, opacity: 0→1 on scroll-enter */
.footer__card {
  will-change: transform, opacity;
}