/* IDO — motion layer (Phase 6). Sources: handoff/MOTION-SPEC.md + Figma Motion page (#141:1027, get_motion_context).
   Everything is gated by html.motion, which the inline <head> script sets only when JS runs and the visitor has not
   asked for reduced motion (and removes again if animations.js never starts). Without it = the static design.
   Rules: transform + opacity only; entrances once at 20 % visible (JS adds .is-in); loops pause off-screen.
   Times in comments are seconds from the section's entrance, as in Figma. */

:root { --ease-io: cubic-bezier(.5, 0, .5, 1); }
.is-init .motion *, .motion.is-init * { transition: none !important; }   /* interactions.js: first setup applies instantly */

/* ---------- shared keyframes (from = start state, to = the element's own resting style) ---------- */
@keyframes ido-fade   { from { opacity: 0; } }
@keyframes ido-rise12 { from { translate: 0 12px; } }
@keyframes ido-rise16 { from { translate: 0 16px; } }
@keyframes ido-rise24 { from { translate: 0 24px; } }
@keyframes ido-pop    { from { scale: 0; } }
@keyframes ido-pop6   { from { scale: .6; } }

/* split text (JS): letters for typewriters, words for word-by-word reveals; --d delay, --cd duration */
.motion :is(.hero__title, .hero__statement, .bio__title, .whatido__words .whatido__word, .st-key--word):not(.is-split) { opacity: 0; }
.motion .ch, .motion .wd { opacity: 0; }
.motion .is-in .ch { opacity: 1; animation: ido-fade var(--cd, 75ms) linear var(--d, 0s) both; }
.motion .is-in .wd { opacity: 1; animation: ido-fade var(--cd, 118ms) cubic-bezier(0, 0, .58, 1) var(--d, 0s) both; }

/* ---------- NAV: fades in with the hero, 0.4–1.2 s, no movement ---------- */
.motion:not(.is-started) .nav { opacity: 0; }
.motion.is-started .nav { animation: ido-fade .8s ease-out .4s both; }   /* an animation, not a transition: the start can
   come before the first style pass (WebKit), and a transition would then be skipped */

/* ---------- 01 HERO ---------- */
/* The stack assembles from its 3 layers (960×1040 PNGs shown at 480×520). Resting offsets from the middle card
   (Figma 141:1589): top (−34, −34), bottom (+31, +30) → as % of the 480×520 box. Static design = the flattened render. */
.hero__stack { display: none; }
.motion .hero { overflow-x: clip; }   /* the top layer slides in from the left: no sideways scroll (RTL) */
.motion .hero__render { visibility: hidden; }   /* keeps the box (same layout as the static page), layers sit on it */
@media (max-width: 1199px) { .motion .hero__visual { position: relative; } }
.motion .hero__stack { display: block; position: absolute; inset: 0; pointer-events: none; }
.hero__layer { position: absolute; inset: 0; transition: translate .6s var(--ease-reveal); }
.hero__layer img { display: block; width: 100%; height: auto; }
.hero__layer--1 { translate: -7.0833% -6.5385%; }
.hero__layer--3 { translate: 6.4583% 5.7692%; }
@keyframes hero-c3 { from { transform: translate(31.25%, 28.077%); } }        /* from down-right (+150, +146) */
@keyframes hero-c2 { from { transform: translateY(6.923%) scale(.94); } }     /* rises 36 + scale .94 */
@keyframes hero-c1 { from { transform: translate(-31.25%, -28.462%); } }      /* from up-left (−150, −148) */
@keyframes hero-click { 32% { transform: translateY(2px); } }                 /* the last card locks */
@keyframes hero-float { 50% { transform: translateY(-8px); } }
@keyframes hero-nudge { 50% { transform: translateY(6px); } }
.motion .hero:not(.is-in) :is(.hero__layer-in, .hero__scroll) { opacity: 0; }
.motion .hero.is-in .hero__layer--3 .hero__layer-in { animation: ido-fade .3s linear .2s both, hero-c3 .75s var(--ease-reveal) .2s both; }
.motion .hero.is-in .hero__layer--2 .hero__layer-in { animation: ido-fade .3s linear .65s both, hero-c2 .65s var(--ease-reveal) .65s both; }
.motion .hero.is-in .hero__layer--1 .hero__layer-in { animation: ido-fade .3s linear 1.1s both, hero-c1 .75s var(--ease-reveal) 1.1s both; }
.motion .hero.is-in .hero__stack { animation: hero-click .25s ease-in-out 1.85s both; }
.motion .hero.is-in .hero__scroll { animation: ido-fade .4s ease-out 1.8s both; }
.motion .hero.is-in .hero__mouse { animation: hero-nudge 1.6s ease-in-out 2.2s infinite; }
@media (hover: hover) and (pointer: fine) {
  /* idle float from 2.1 s; hover spreads the layers (top −54,−54 · bottom +50,+48) once the stack has settled */
  .motion .hero.is-in .hero__visual { animation: hero-float 2.4s ease-in-out 2.1s infinite; }
  .motion .hero.is-settled .hero__visual:hover .hero__layer--1 { translate: -11.25% -10.385%; }
  .motion .hero.is-settled .hero__visual:hover .hero__layer--3 { translate: 10.417% 9.231%; }
  .motion .hero__visual:hover { animation-play-state: paused; }
}
.motion .hero:not(.is-visible) :is(.hero__visual, .hero__mouse) { animation-play-state: paused; }
/* statement scroll-fill: the grey sentence turns text/primary word by word as the hero scrolls out (JS) */
.motion .hero__statement .dim-disabled .wd { transition: color .3s ease-out; }
.motion .hero__statement .dim-disabled .wd.is-filled { color: var(--color-text-primary); }

/* ---------- 02 WHO / WHAT / WHERE: word snap (900 ms big move) on each scroll step / swipe; the text cross-fades ---------- */
.motion .who__word { transition: transform var(--dur-big) var(--ease-big-move), color var(--dur-big) var(--ease-big-move); }
@keyframes who-swipe { 0%, 60%, 100% { transform: translateX(0); } 30% { transform: translateX(6px); } }
@media (min-width: 1200px) {
  .motion .who__col { transition: opacity var(--dur-base) var(--ease-reveal) .25s, visibility 0s; }       /* new text after the words start moving */
  .motion .who__col:not(.is-active) { transition: opacity .2s ease-out, visibility 0s .2s; }
}
@media (max-width: 1199px) {
  .motion .who__col.is-active { animation: ido-fade var(--dur-base) var(--ease-reveal) both; }   /* cross-fade */
  /* the pagination appears subtly; the swipe cue nudges until the first swipe */
  .motion .who:not(.is-in) .who__dots { opacity: 0; }
  .motion .who.is-in .who__dots { animation: ido-fade .8s ease-out .5s both; }
  .motion .who.is-in .who__swipe { animation: who-swipe 1.6s ease-in-out 1.3s infinite; }
  .motion .who.has-swiped .who__swipe { animation: none; opacity: 0; transition: opacity .3s ease-out; }
  .motion .who:not(.is-visible) .who__swipe { animation-play-state: paused; }
}

/* ---------- 03 BIO ---------- */
.bio__brush { display: none; }
.motion .bio__brush { display: block; pointer-events: none; }
.bio__brush > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.bio__sketch { object-fit: cover; }
.motion .bio__brush-path { stroke-dasharray: 1 1; stroke-dashoffset: 1; }
@keyframes bio-sketch { 0% { opacity: 0; } 21.875% { opacity: .7; } 71.875% { opacity: .7; } 100% { opacity: 0; } }
@keyframes bio-brush { to { stroke-dashoffset: 0; } }
@keyframes bio-pill { from { transform: rotate(1deg) scaleX(.4); } }
@keyframes bio-loop { from { transform: rotate(20deg) scale(.8); } }
.motion .bio:not(.is-in) :is(.bio__sketch, .bio__pill, .bio__loop, .bio__statement, .bio__detail, .bio__cta > *) { opacity: 0; }
.motion .bio__portrait { opacity: 0; }                                                   /* the brushed copy shows first */
.motion .bio.is-in .bio__portrait { opacity: 1; animation: ido-fade .3s ease-out 1.35s both; } /* + its shadow */
.motion .bio.is-in .bio__sketch { animation: bio-sketch 1.6s ease-in-out .1s both; }
.motion .bio.is-in .bio__brush-path { animation: bio-brush 1.05s ease-in-out .3s both; }
.motion .bio.is-in .bio__pill { animation: ido-fade .3s ease-out .5s both, bio-pill .7s var(--ease-reveal) .5s both; }
.motion .bio.is-in .bio__loop { animation: ido-fade .2s ease-out .9s both, bio-loop .5s cubic-bezier(.45, 1.45, .8, 1) .9s both; }
.motion .bio.is-in .bio__statement { animation: ido-fade .8s var(--ease-io) .7s both; }
.motion .bio.is-in .bio__detail { animation: ido-fade .36s ease-out var(--d) both, ido-rise16 .6s var(--ease-reveal) var(--d) both; }
.bio__detail:nth-child(1) { --d: 1.6s; }
.bio__detail:nth-child(2) { --d: 1.72s; }
.bio__detail:nth-child(3) { --d: 1.84s; }
.motion .bio.is-in .bio__cta > p { animation: ido-fade .3s ease-out 2.1s both, ido-rise12 .5s var(--ease-reveal) 2.1s both; }
.motion .bio.is-in .bio__cta > .btn { animation: ido-fade .3s ease-out 2.2s both, ido-rise12 .5s var(--ease-reveal) 2.2s both; }

/* ---------- 04 WHAT I DO ---------- */
@keyframes wi-line { from { transform: scaleX(.02); } }
.whatido__underline { transform-origin: right center; }
.motion .whatido:not(.is-in) .whatido__underline { transform: scaleX(.02); }
.motion .whatido:not(.is-in) .whatido__intro > * { opacity: 0; }
.motion .whatido.is-in .whatido__underline { animation: wi-line .6s var(--ease-reveal) 1.55s both; }
.motion .whatido.is-in .whatido__intro > p:first-child { animation: ido-fade .8s var(--ease-io) 1.6s both; }
.motion .whatido.is-in .whatido__intro > .btn { animation: ido-fade .3s ease-out 2.1s both, ido-rise12 .5s var(--ease-reveal) 2.1s both; }
.motion .whatido.is-in .whatido__intro > p:last-child { animation: ido-fade .5s var(--ease-io) 2.3s both; }

/* ---------- 05 CARD STACK (desktop pin) ---------- */
@media (min-width: 1200px) {
  /* a card rises y +640 with 8° extra tilt to its resting angle, 900 ms big move; the ones under it step back */
  .motion .card {
    transform: translateY(0) rotate(var(--rot)) scale(var(--depth-scale, 1));
    transition: transform var(--dur-big) var(--ease-big-move), opacity var(--dur-big) var(--ease-big-move), visibility 0s;
  }
  .motion .card[data-state="waiting"] {
    transform: translateY(calc(640 * var(--px))) rotate(calc(var(--rot) - 8deg)) scale(1);
    visibility: hidden;
    transition: transform var(--dur-big) var(--ease-big-move), opacity var(--dur-big) var(--ease-big-move), visibility 0s var(--dur-big);
  }
  /* badge pops .6 → 1 as its card lands (0.7 s into the rise, 400 ms) */
  .motion .card .card__badge { transition: opacity .4s var(--ease-io) .7s, transform .4s var(--ease-io) .7s; }
  .motion .card[data-state="waiting"] .card__badge { opacity: 0; transform: scale(.6); transition: none; }
  /* 04 → 05 hand-off (one stage): 04's words fade as 05's blurred copy fades in, the intro leaves upward — 900 ms big move */
  .motion .pin__stage :is(.whatido__words, .whatido__underline, .whatido__intro, .stack__blur) { transition: opacity var(--dur-big) var(--ease-big-move), transform var(--dur-big) var(--ease-big-move), visibility 0s; }
  .motion .pin__stage[data-phase="cards"] .whatido__intro, .motion .pin__stage[data-phase="intro"] .stack__blur { transition: opacity var(--dur-big) var(--ease-big-move), transform var(--dur-big) var(--ease-big-move), visibility 0s var(--dur-big); }
  .motion .pin__stage .stack__skip { transition: opacity .4s ease-out .6s, visibility 0s; }
  .motion .pin__stage[data-phase="intro"] .stack__skip { transition: opacity .2s ease-out, visibility 0s .2s; }
  .motion .stack.is-last .stack__skip { opacity: 0; visibility: hidden; transition: opacity .4s ease-out, visibility 0s .4s; }
}

/* ---------- 06 TOOLS ---------- */
.motion .tools:not(.is-in) .tools__track { opacity: 0; }
.motion .tools.is-in .tools__track { transition: opacity 1s var(--ease-io) .3s, transform 1s var(--ease-io) .3s; }
@media (min-width: 768px) {
  .motion .tools:not(.is-in) .tools__track { transform: translateY(16px); }
  /* the ring (JS places every pill each frame: translate + scale + opacity, z by depth) */
  .motion .tools__track.is-ring .tools__pill { position: absolute; left: 0; top: 0; margin: 0; transition: border-color var(--dur-micro) var(--ease-reveal); }
  .motion .tools__track.is-ring { touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab; }
  .motion .tools__track.is-ring.is-dragging { cursor: grabbing; }
  .motion .tools__pill.is-hover { border-color: var(--color-text-primary); }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .motion .tools__track.is-ring { display: block; position: relative; max-width: none; height: 170px; }   /* = the static 3 × 2 grid */
}

/* ---------- 07 STATEMENT — key words (6 s, once) ---------- */
.statement__text :is(.st-open, .st-key, .st-finale) { display: inline-block; }
.st-key { position: relative; }
@keyframes st-marker { from { transform: scaleY(.02); } }
@keyframes st-stamp { from { scale: 1.22; } }
@keyframes st-brace-l { 0% { opacity: 0; transform: translateX(var(--from)); } 31.8%, 63.6% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(-10px); } }
@keyframes st-brace-r { 0% { opacity: 0; transform: translateX(calc(-1 * var(--from))); } 31.8%, 63.6% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateX(10px); } }
@keyframes st-caret-move { to { transform: translateX(var(--w)); } }
@keyframes st-caret-blink {
  0% { opacity: 0; } .1%, 32.4% { opacity: 1; } 32.5%, 44.8% { opacity: 0; } 44.9%, 57.2% { opacity: 1; }
  57.3%, 69.6% { opacity: 0; } 69.7%, 82% { opacity: 1; } 100% { opacity: 0; }
}
@keyframes st-stray { 0% { opacity: 0; transform: translateY(4px); } 15% { opacity: 1; } 35% { opacity: .2; } 55% { opacity: 1; } 100% { opacity: 0; transform: translateY(-6px); } }
.statement__marker { transform-origin: center top; }
.st-brace, .st-caret, .st-scramble, .st-stray, .st-cover { position: absolute; pointer-events: none; }
.st-brace { top: 0; direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono, "Geist Mono", monospace); font-weight: 500; color: var(--color-yellow-green-700); opacity: 0; }
.st-brace--l { right: calc(100% + .12em); }
.st-brace--r { left: calc(100% + .12em); }
.st-scramble { top: 0; left: 50%; transform: translateX(-50%); white-space: nowrap; }
.st-caret { right: 0; top: 50%; width: 4px; height: 1em; margin-top: -.5em; background: var(--color-yellow-green-500); opacity: 0; }
.st-stray { background: var(--color-yellow-green-500); opacity: 0; }
.st-cover { inset: -.08em -.06em; width: calc(100% + .12em); height: calc(100% + .16em); }
.motion .statement:not(.is-in) .statement__marker { transform: scaleY(.02); }
.motion .statement:not(.is-in) :is(.st-open, .st-comma, .st-finale, .st-code-real) { opacity: 0; }
.motion :is(.st-key--pixel, .st-key--code):not(.is-ready) { opacity: 0; }
.motion .statement.is-in .statement__marker { animation: st-marker .5s var(--ease-io) both; }
.motion .statement.is-in .st-open { animation: ido-fade .6s var(--ease-reveal) var(--d) both, ido-rise16 .6s var(--ease-reveal) var(--d) both; }
.st-open--1 { --d: .15s; } .st-open--2 { --d: 1.55s; } .st-open--3 { --d: 3s; } .st-open--4 { --d: 4.35s; }
.motion .statement.is-in .st-comma { animation: ido-fade .2s ease-out var(--d) both; }
.st-comma--1 { --d: 1.48s; } .st-comma--2 { --d: 2.75s; } .st-comma--3 { --d: 4.05s; }
.motion .statement.is-in .st-code-real { animation: ido-fade .05s linear 2.65s both; }
.motion .statement.is-in .st-brace--l { animation: st-brace-l 1.1s var(--ease-reveal) 2.05s both; }
.motion .statement.is-in .st-brace--r { animation: st-brace-r 1.1s var(--ease-reveal) 2.05s both; }
.motion .statement.is-in .st-caret { animation: st-caret-move .6s linear 3.45s both, st-caret-blink 1.85s linear 3.45s both; }
.motion .statement.is-in .st-finale { animation: ido-fade .15s linear 4.85s both, st-stamp .6s var(--ease-stamp) 4.85s both; }
.motion .statement.is-in .st-stray { animation: st-stray .7s ease-out var(--d) both; }
@media (max-width: 767px) { .st-caret { width: 3px; } }

/* ---------- 08 WORK ---------- */
@media (min-width: 1200px) {
  @keyframes work-scale-in { from { scale: .94; } }
  @keyframes work-in  { from { opacity: 0; translate: 0 calc(30 * var(--px)); } }
  @keyframes work-out { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: 0 calc(-30 * var(--px)); } }
  @keyframes work-slide12 { from { translate: -12px 0; } }
  .motion .work__carousel:not(.is-in) :is(.work__slot, .work__info.is-active > *, .work__disc-dot, .work__arrow, .work__disc-text, .work__ctas) { opacity: 0; }
  .motion .work__carousel.is-entering .work__slot[data-slot="current"] { animation: ido-fade .9s var(--ease-big-move) both, work-scale-in .9s var(--ease-big-move) both; }
  .motion .work__carousel.is-entering .work__slot:not([data-slot="current"]) { animation: ido-fade .6s var(--ease-big-move) .4s both; }
  .motion .work__carousel.is-in .work__info.is-active > .work__title { animation: work-in .8s var(--ease-reveal) var(--tin, .3s) both; }
  .motion .work__carousel.is-in .work__info.is-active > .work__line { animation: work-in .8s var(--ease-reveal) calc(var(--tin, .3s) + .1s) both; }
  .motion .work__carousel.has-stepped { --tin: .45s; }
  .motion .work__info.is-leaving { animation: work-out .45s var(--ease-io) both; }
  .motion .work__carousel.is-entering .work__disc-dot { animation: ido-fade .15s var(--ease-io) .8s both, ido-pop .5s var(--ease-out-back) .8s both; }
  .motion .work__carousel.is-entering .work__arrow { animation: ido-fade .3s ease-in 1s both, ido-pop6 .5s var(--ease-out-back) 1s both; }
  .motion .work__carousel.is-entering .work__disc-text { animation: ido-fade .6s var(--ease-io) 1.1s both, work-slide12 .6s var(--ease-io) 1.1s both; }
  /* the arrow points the way in: a left-right nudge, on a loop (Ido, 2026-10-19); pauses off-screen and on hover */
  @keyframes work-point { 0%, 100% { translate: 0 0; } 50% { translate: calc(-8 * var(--px)) 0; } }
  .motion .work__carousel.is-in .work__arrow { animation: work-point 1.4s ease-in-out 1.6s infinite; }
  .motion .work__carousel.is-entering .work__arrow { animation: ido-fade .3s ease-in 1s both, ido-pop6 .5s var(--ease-out-back) 1s both, work-point 1.4s ease-in-out 1.6s infinite; }
  .motion .work__carousel:not(.is-visible) .work__arrow, .motion .work__disc:hover .work__arrow { animation-play-state: paused; }
  .motion .work__carousel.is-entering .work__ctas { animation: ido-fade .6s var(--ease-io) .9s both, work-slide12 .6s var(--ease-io) .9s both; }
  .work__ghost { pointer-events: none; }
}
@media (max-width: 1199px) {
  /* stacked list: each card rises 24 + fades on entering, its text 0.1 s later */
  .motion .work__item:not(.is-in) :is(.work__card-surface, .work__card-text, .work__card-disc) { opacity: 0; }
  .motion .work__item.is-in :is(.work__card-surface, .work__card-disc) { animation: ido-fade .8s var(--ease-reveal) both, ido-rise24 .8s var(--ease-reveal) both; }
  .motion .work__item.is-in .work__card-text { animation: ido-fade .8s var(--ease-reveal) .1s both, ido-rise24 .8s var(--ease-reveal) .1s both; }
}

/* ---------- 09 CONTACT — fades only (0.6 s) ---------- */
.motion .contact:not(.is-in) :is(.contact__title, .contact__intro, .contact__disc, .contact__arrow, .step, .consent, .contact__send .btn) { opacity: 0; }
.motion .contact.is-in :is(.contact__title, .contact__intro, .contact__disc, .contact__arrow, .step, .consent, .contact__send .btn) { animation: ido-fade .6s var(--ease-io) var(--d) both; }
.contact__title { --d: .1s; } .contact__intro { --d: .3s; } .contact__disc, .contact__arrow { --d: .4s; }
.step--budget { --d: .55s; } .step--info { --d: .67s; } .consent { --d: .85s; } .contact__send .btn { --d: .95s; }

/* ---------- 10 FOOTER — fades only (0.6 s) ---------- */
@keyframes ft-pattern { from { opacity: 0; } to { opacity: .07; } }
.motion .footer:not(.is-in)::before { opacity: 0; }
.motion .footer.is-in::before { animation: ft-pattern .8s var(--ease-io) both; }
.motion .footer:not(.is-in) .canvas > * { opacity: 0; }
.motion .footer.is-in .canvas > * { animation: ido-fade .6s var(--ease-io) var(--d, 0s) both; }
.footer__logo { --d: .1s; } .footer__tagline { --d: .2s; } .footer__col--menu { --d: .35s; } .footer__col--contact { --d: .59s; }
.footer__rule { --d: .8s; } .footer__copy, .footer__privacy { --d: .9s; }

/* ---------- CASE PAGES — quiet system (PROPOSED: not animated in Figma) ---------- */
@keyframes cs-mock { from { opacity: 0; scale: .96; } }
@keyframes cs-shape { from { opacity: 0; scale: .4 1; } }
.motion .cs:not(.is-in) :is(.cs-back, .cs-index, .cs-label, .t-h2, .cs-hero__title, .cs-hero__statement, .cs-meta, .cs-text__intro, .cs-text__role, .cs-facts, .cs-challenge__p, .cs-solution__p, .cs-result__p, .cs-decision, .cs-card, .cs-details__list, .cs-highlights__caption, .cs-result__buttons, .mockup-laptop, .mockup-phone, .cs-band__panel, .shape) { opacity: 0; }
.motion .cs.is-in :is(.cs-index, .cs-label) { animation: ido-fade .8s var(--ease-reveal) both; }
.motion .cs.is-in .cs-back { animation: ido-fade .6s ease-out .5s both; }
.motion .cs.is-in :is(.t-h2, .cs-hero__title, .cs-hero__statement) { animation: ido-fade .8s var(--ease-reveal) .1s both, ido-rise16 .8s var(--ease-reveal) .1s both; }
.motion .cs.is-in :is(.cs-meta, .cs-text__intro, .cs-text__role, .cs-facts, .cs-challenge__p, .cs-solution__p, .cs-result__p, .cs-details__list, .cs-highlights__caption, .cs-result__buttons) { animation: ido-fade .8s var(--ease-reveal) .3s both; }
.motion .cs.is-in :is(.mockup-laptop, .mockup-phone, .cs-band__panel) { animation: cs-mock .9s var(--ease-reveal) .2s both; }
.motion .cs.is-in .shape--solid { animation: cs-shape .7s var(--ease-reveal) .3s both; }
.motion .cs.is-in .shape--line { animation: ido-fade .5s ease-out .6s both; }
.motion .cs.is-in :is(.cs-decision, .cs-card) { animation: ido-fade .8s var(--ease-reveal) var(--d, .3s) both, ido-rise16 .8s var(--ease-reveal) var(--d, .3s) both; }
:is(.cs-decision, .cs-card):nth-child(2) { --d: .42s; }
:is(.cs-decision, .cs-card):nth-child(3) { --d: .54s; }
:is(.cs-decision, .cs-card):nth-child(4) { --d: .66s; }
/* the hero is on screen at load: it starts at 1 % (not 0) so the browser counts its first paint as the page's largest
   paint (LCP) — an element first painted at opacity 0 is never counted, and Lighthouse then fails the page (Phase 7) */
@keyframes cs-lcp-fade { from { opacity: .01; } }
@keyframes cs-lcp-mock { from { opacity: .01; scale: .96; } }
.motion .cs-hero:not(.is-in) :is(.cs-hero__title, .cs-hero__statement, .mockup-laptop) { opacity: .01; }
.motion .cs-hero.is-in :is(.cs-hero__title, .cs-hero__statement) { animation-name: cs-lcp-fade, ido-rise16; }
.motion .cs-hero.is-in .mockup-laptop { animation-name: cs-lcp-mock; }

/* ---------- page transition: cross-document fade 0.4 s (home ↔ case pages) ---------- */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .4s; }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }