/* ============================================================
   GUICHET 9 — gsap.css
   Applies ONLY when body.gsap-on is present (i.e. the GSAP CDN
   loaded and js/gsap-motion.js is driving the motion layer).

   Purpose: hand the entrance motion over to GSAP cleanly so the
   old CSS-driven reveals don't fire at the same time (no double
   animation). The resting / visible state is forced here; GSAP
   tweens FROM a hidden state TO these values. Everything stays
   identical when GSAP is absent or motion is disabled.
   ============================================================ */

/* --- Reveal containers: GSAP owns opacity/transform. ---------
   We keep the base opacity:0 from components.css (so below-the-fold
   content stays hidden until GSAP triggers it) but kill the CSS
   transition so only GSAP animates. */
body.gsap-on .reveal { transition: none !important; }
body.gsap-on .reveal[data-d] { transition-delay: 0s !important; }

/* --- Section heads: drop the clip-path wipe; GSAP cascades the
   kicker / title / lead instead. ----------------------------- */
body.gsap-on .sec-head.reveal h2,
body.gsap-on .sec-head.reveal:not(.in) h2 {
  clip-path: none !important;
  transition: none !important;
}
body.gsap-on .section-num::before,
body.gsap-on .reveal:not(.in) .section-num::before {
  transform: none !important;
  transition: none !important;
}

/* --- Cards / facts / gallery: neutralise the CSS pre-states so
   they don't stay stuck (we never add .in under GSAP). -------- */
body.gsap-on .guichet.reveal,
body.gsap-on .facts .fact.reveal { transform: none !important; }
body.gsap-on .fact.reveal:not(.in) .fact__k,
body.gsap-on .fact__k { transform: none !important; opacity: 1 !important; }
body.gsap-on .gallery__item.reveal:not(.in) img,
body.gsap-on .gallery__item img { filter: none !important; transform: none !important; }

/* --- Procedure timeline: connector shown statically; GSAP
   staggers the steps + pops the numbered keys. --------------- */
body.gsap-on .tl-block.reveal .timeline::before { transform: scaleY(1) !important; transition: none !important; }
body.gsap-on .tl-block.reveal .tl { opacity: 1 !important; transform: none !important; transition: none !important; }
body.gsap-on .tl-block.reveal.in .tl__k { animation: none !important; }

/* --- Hero: GSAP owns the load choreography (disable CSS keyframes). */
body.gsap-on .hero__logo img,
body.gsap-on .hero h1 span,
body.gsap-on .hero__eyebrow .stamp,
body.gsap-on .hero__eyebrow .eyebrow,
body.gsap-on .hero__col .doc--bare,
body.gsap-on .doc__stamp--hero,
body.gsap-on .topbar { animation: none !important; }

/* Hide hero pieces before GSAP animates them in — but ONLY when
   motion is actually allowed, so reduced-motion / Tweaks-off and
   any JS failure leave the hero fully visible. */
@media (prefers-reduced-motion: no-preference) {
  body.gsap-on:not(.no-anim) .hero .reveal { opacity: 0; transform: none; }
}

/* --- Bulle (Note du bureau): GSAP owns the entrance fade/rise. */
body.gsap-on .bulle { transition: none !important; }

/* --- Sim verdict: GSAP owns the pop. --------------------------- */
body.gsap-on .sim__verdict { animation: none !important; }

/* ============================================================
   CLICK STAMP — the light "tampon" that slams on an important
   button. Spawned + animated by gsap-motion.js, removed after.
   ============================================================ */
.g9-stamp {
  position: fixed;
  z-index: 200;
  transform: translate(-50%, -50%) rotate(-8deg);
  pointer-events: none;
  font-family: var(--display, "Oswald", sans-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: clamp(20px, 3.4vw, 30px);
  line-height: 1;
  color: var(--red);
  border: 3.5px solid var(--red);
  border-radius: 6px;
  padding: 7px 16px 6px;
  background: color-mix(in srgb, var(--red) 6%, transparent);
  white-space: nowrap;
  will-change: transform, opacity;
}
[data-theme="dark"] .g9-stamp { background: color-mix(in srgb, var(--red) 12%, transparent); }

/* ink shock-ring that expands out of the stamp */
.g9-stamp__ring {
  position: fixed;
  z-index: 199;
  width: 12px; height: 12px;
  border: 2.5px solid var(--red);
  border-radius: 7px;
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

@media (prefers-reduced-motion: reduce) {
  .g9-stamp, .g9-stamp__ring { display: none !important; }
}