/* ============================================================
   GUICHET 9 — fx.css
   v2: send states, waitlist, launch info, how-it-plays,
   and the "impressive" motion layer (stamp slams, wipes,
   tilt, saturation shake). Everything honors body.no-anim
   and prefers-reduced-motion.
   ============================================================ */

/* ------------------------------------------------------------
   SEND STATES — sending button, failure notice
   ------------------------------------------------------------ */
.btn .btn__sending { display: none; }
form.is-sending button[type="submit"] { pointer-events: none; }
form.is-sending button[type="submit"] .btn__label { display: none; }
form.is-sending button[type="submit"] .btn__sending {
  display: inline-flex; animation: fx-blink 1.1s ease-in-out infinite;
}
@keyframes fx-blink { 50% { opacity: .45; } }

.send-fail {
  border: 1.5px solid var(--red);
  background: color-mix(in srgb, var(--red) 7%, var(--paper));
  border-radius: 6px; padding: 14px 16px; margin-bottom: 16px;
  animation: fx-reject .4s var(--ease);
}
.send-fail b {
  display: block; font-family: var(--display); font-weight: 700;
  text-transform: uppercase; font-size: 17px; color: var(--red); margin-bottom: 4px;
}
.send-fail p { font-size: 13.5px; color: var(--ink-soft); }
.send-fail__mail {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 10px;
  font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); border-bottom: 1.5px solid currentColor; padding-bottom: 2px;
}
.send-fail__mail:hover { color: var(--red-deep); }
@keyframes fx-reject {
  0% { opacity: 0; transform: translateX(0); }
  30% { transform: translateX(-5px); } 50% { transform: translateX(4px); }
  70% { transform: translateX(-2px); } 100% { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------
   COLLECTOR WAITING LIST
   ------------------------------------------------------------ */
.waitlist { margin-top: 12px; }
.waitlist__cta {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--red); border-bottom: 1.5px dashed currentColor; padding-bottom: 2px;
  transition: color .2s var(--ease);
}
.waitlist__cta:hover { color: var(--red-deep); }
.waitlist__cta .arrow { transition: transform .2s var(--ease); }
.waitlist__cta:hover .arrow { transform: translateX(3px); }
[dir="rtl"] .waitlist__cta .arrow { transform: scaleX(-1); }
.waitlist__form { display: flex; gap: 8px; margin-top: 12px; }
.waitlist__form input {
  flex: 1; min-width: 0; font-family: var(--body); font-size: 14px; color: var(--ink);
  background: var(--paper); border: 1.5px solid var(--panel-line-2); border-radius: 4px;
  padding: 9px 12px; transition: border-color .2s;
}
.waitlist__form input:focus { outline: none; border-color: var(--red); }
.waitlist__form .btn { padding: 9px 14px; font-size: 11px; letter-spacing: .08em; }
.waitlist .po-error { margin: 8px 0 0; }
.waitlist__ok {
  display: flex; align-items: center; gap: 12px; margin-top: 12px;
  font-size: 11.5px; letter-spacing: .04em; color: var(--ink-soft);
  animation: fx-pop-in .45s var(--ease);
}
.waitlist__ok .stamp.sm { font-size: 12px; flex: none; }
@keyframes fx-pop-in { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
.edition--soon { cursor: pointer; }

/* ------------------------------------------------------------
   LAUNCH INFO
   ------------------------------------------------------------ */
.chip--launch { border-color: color-mix(in srgb, var(--red) 55%, transparent); }
.chip--launch b { color: var(--red); }
.po-launch {
  font-size: 12px; letter-spacing: .06em; color: var(--red);
  border: 1.5px dashed color-mix(in srgb, var(--red) 45%, transparent);
  background: color-mix(in srgb, var(--red) 5%, transparent);
  border-radius: 4px; padding: 9px 16px; margin-top: 4px;
}
.receipt__email { font-family: var(--mono); font-size: 12px !important; letter-spacing: .03em; color: var(--ink-mute) !important; margin-top: 8px; }

/* ------------------------------------------------------------
   HOW IT PLAYS — three table moments
   ------------------------------------------------------------ */
.howto__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.howto__shot {
  margin: 0; display: flex; flex-direction: column;
  border: 1.5px solid var(--panel-line); border-radius: 8px; overflow: hidden;
  background: var(--panel);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.howto__shot:hover { transform: translateY(-4px); box-shadow: 0 20px 40px -26px rgba(0,0,0,.5); }
.howto__shot image-slot { display: block; width: 100%; aspect-ratio: 4 / 3; }
.howto__shot figcaption { padding: 16px 18px 18px; border-top: 1px solid var(--hairline); }
.howto__shot figcaption b {
  display: block; font-family: var(--display); font-weight: 700; text-transform: uppercase;
  font-size: 21px; line-height: 1; margin-bottom: 6px;
}
.howto__shot figcaption span { color: var(--ink-soft); font-size: 14.5px; }
@media (max-width: 880px) { .howto__grid { grid-template-columns: 1fr; max-width: 460px; margin-inline: auto; } }

/* ============================================================
   MOTION LAYER
   ============================================================ */

/* ---- 1. Hero entrance choreography ---- */
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-anim) .hero__logo img {
    animation: fx-drop-in calc(.7s / var(--anim-scale, 1)) var(--ease) backwards;
  }
  body:not(.no-anim) .hero h1 span {
    display: block;
    animation: fx-wipe-up calc(.9s / var(--anim-scale, 1)) cubic-bezier(.22,.8,.22,1) backwards;
  }
  body:not(.no-anim) .hero h1 span:nth-child(2) { animation-delay: .18s; }
  body:not(.no-anim) .hero__eyebrow .stamp {
    --fx-rot: -4deg;
    animation: fx-stamp-slam .6s cubic-bezier(.2,1.3,.35,1) .85s backwards;
  }
  body:not(.no-anim) .hero__eyebrow .eyebrow {
    animation: fx-fade calc(.8s / var(--anim-scale, 1)) var(--ease) .1s backwards;
  }
  body:not(.no-anim) .hero__col .doc--bare {
    animation: fx-photo-in 1.1s var(--ease) .25s backwards;
  }
  body:not(.no-anim) .doc__stamp--hero {
    --fx-rot: -8deg;
    animation: fx-stamp-slam .6s cubic-bezier(.2,1.3,.35,1) 1.15s backwards;
  }
  body:not(.no-anim) .topbar { animation: fx-bar-down .6s var(--ease) backwards; }
}
@keyframes fx-drop-in { from { opacity: 0; transform: translateY(-18px); } to { opacity: 1; transform: none; } }
@keyframes fx-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes fx-bar-down { from { transform: translateY(-100%); } to { transform: none; } }
@keyframes fx-wipe-up {
  from { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(.35em); }
  to   { opacity: 1; clip-path: inset(-0.2em 0 -0.2em 0); transform: none; }
}
@keyframes fx-photo-in {
  from { opacity: 0; transform: scale(1.05) translateY(14px); filter: grayscale(.8) contrast(.9); }
  to   { opacity: 1; transform: none; filter: none; }
}
/* the stamp hits the paper */
@keyframes fx-stamp-slam {
  0%   { opacity: 0; transform: scale(2.8) rotate(calc(var(--fx-rot, -4deg) + 10deg)); }
  55%  { opacity: 1; transform: scale(.94) rotate(calc(var(--fx-rot, -4deg) - 2deg)); }
  75%  { transform: scale(1.05) rotate(var(--fx-rot, -4deg)); }
  100% { opacity: .85; transform: scale(1) rotate(var(--fx-rot, -4deg)); }
}
/* ink shock-ring on slam */
.hero__eyebrow .stamp::after, .receipt .big-stamp::after {
  content: ""; position: absolute; inset: -6px; border-radius: inherit;
  border: 2px solid var(--red); opacity: 0; pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-anim) .hero__eyebrow .stamp::after { animation: fx-ring .55s var(--ease) 1.15s; }
  body:not(.no-anim) .receipt.show .big-stamp::after { animation: fx-ring .55s var(--ease) .45s; }
}
@keyframes fx-ring {
  0% { opacity: .7; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.45); }
}

/* ---- 2. Section headers: rule draws, title wipes ---- */
.section-num::before { transform-origin: left center; transition: transform .8s var(--ease) .15s; }
[dir="rtl"] .section-num::before { transform-origin: right center; }
.reveal:not(.in) .section-num::before { transform: scaleX(0); }
.sec-head.reveal h2 { transition: clip-path .9s var(--ease) .12s, opacity .7s var(--ease), transform .7s var(--ease); }
.sec-head.reveal:not(.in) h2 { clip-path: inset(0 100% 0 0); }
.sec-head.reveal.in h2 { clip-path: inset(0 -2% 0 0); }
[dir="rtl"] .sec-head.reveal:not(.in) h2 { clip-path: inset(0 0 0 100%); }
[dir="rtl"] .sec-head.reveal.in h2 { clip-path: inset(0 0 0 -2%); }

/* ---- 3. Guichet cards: filed-in cascade ---- */
.guichet.reveal { transform: translateY(34px) rotate(1.4deg) scale(.97); transition-timing-function: cubic-bezier(.18,.9,.26,1.08); }
.guichet.reveal.in { transform: none; }

/* ---- 4. Photos develop as they enter ---- */
.gallery__item img { transition: transform .55s var(--ease), filter 1s var(--ease); }
.gallery__item.reveal:not(.in) img { filter: grayscale(.75) sepia(.18) contrast(.9); transform: scale(1.06); }
.box-photo img { transition: filter 1.1s var(--ease); }

/* ---- 5. Saturation 9: the System cracks ---- */
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-anim) [data-zone="max"] .satscroll__inner { animation: fx-shake .4s linear infinite; }
  body:not(.no-anim) [data-zone="crit"] .satscroll__num { animation: fx-jitter 2.4s steps(2) infinite; }
}
@keyframes fx-shake {
  0%,100% { transform: translate(0,0); }
  20% { transform: translate(-1.5px,1px) rotate(-.08deg); }
  40% { transform: translate(2px,-1px); }
  60% { transform: translate(-2px,-1.5px) rotate(.08deg); }
  80% { transform: translate(1.5px,1.5px); }
}
@keyframes fx-jitter {
  0%,100% { transform: translate(0,0); }
  50% { transform: translate(1px,-1px); }
}
/* number tick on change (class re-armed from fx.js) */
.satscroll__num.tick { animation: fx-numpop .3s var(--ease); }
@keyframes fx-numpop { 35% { transform: scale(1.07); } }
body.no-anim .satscroll__num.tick { animation: none; }

/* ---- 6. Receipt: stamp slams down ---- */
@media (prefers-reduced-motion: no-preference) {
  body:not(.no-anim) .receipt.show .big-stamp {
    --fx-rot: -5deg;
    animation: fx-stamp-slam .55s cubic-bezier(.2,1.3,.35,1) .12s backwards;
  }
  body:not(.no-anim) .receipt.show h4,
  body:not(.no-anim) .receipt.show p,
  body:not(.no-anim) .receipt.show .ref,
  body:not(.no-anim) .receipt.show .btn { animation: fx-rise .5s var(--ease) backwards; }
  body:not(.no-anim) .receipt.show h4 { animation-delay: .3s; }
  body:not(.no-anim) .receipt.show p { animation-delay: .38s; }
  body:not(.no-anim) .receipt.show .ref { animation-delay: .46s; }
  body:not(.no-anim) .receipt.show .btn { animation-delay: .54s; }
}
@keyframes fx-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- 7. Marquee reacts to scroll velocity (set from fx.js) ---- */
.marquee { transition: transform .25s var(--ease); transform: skewY(0deg); }

/* ---- 8. 3D tilt host (transform set from fx.js) ---- */
.hero__col .doc--bare { transform-style: preserve-3d; will-change: transform; }
.hero__col { perspective: 1100px; }

/* ---- 9. Procedure timelines: line draws, steps file in, keys stamp ---- */
.tl { --i: 0; }
.tl:nth-child(1){--i:0} .tl:nth-child(2){--i:1} .tl:nth-child(3){--i:2}
.tl:nth-child(4){--i:3} .tl:nth-child(5){--i:4} .tl:nth-child(6){--i:5}
.tl:nth-child(7){--i:6} .tl:nth-child(8){--i:7} .tl:nth-child(9){--i:8}
@media (prefers-reduced-motion: no-preference) {
  /* the connector rule draws down as the block enters */
  body:not(.no-anim) .tl-block.reveal .timeline::before {
    transform: scaleY(0); transform-origin: top;
    transition: transform .85s var(--ease) .1s;
  }
  body:not(.no-anim) .tl-block.reveal.in .timeline::before { transform: scaleY(1); }
  /* each step files in, staggered */
  body:not(.no-anim) .tl-block.reveal .tl {
    opacity: 0; transform: translateY(15px);
    transition: opacity .5s var(--ease), transform .55s var(--ease);
    transition-delay: calc(var(--i) * .07s + .12s);
  }
  body:not(.no-anim) .tl-block.reveal.in .tl { opacity: 1; transform: none; }
  /* the numbered key gets stamped on */
  body:not(.no-anim) .tl-block.reveal.in .tl__k {
    animation: fx-key-pop .5s cubic-bezier(.2,1.2,.35,1) calc(var(--i) * .07s + .16s) backwards;
  }
}
@keyframes fx-key-pop {
  0%   { opacity: 0; transform: scale(.4) rotate(-12deg); }
  60%  { opacity: 1; transform: scale(1.12) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* ---- safety: motion off ---- */
@media (prefers-reduced-motion: reduce) {
  .sec-head.reveal:not(.in) h2 { clip-path: none; }
  .reveal:not(.in) .section-num::before { transform: none; }
  .guichet.reveal { transform: none; }
  .gallery__item.reveal:not(.in) img { filter: none; transform: none; }
}
body.no-anim .sec-head.reveal h2 { clip-path: none !important; }
body.no-anim .section-num::before { transform: none !important; }
body.no-anim .gallery__item img { filter: none !important; }