/* ============================================================
   SELR AI — MOTION, PAGE-OPEN EXTENSION
   The Install Day VSL page choreography. Pairs with motion-page.js
   and EXTENDS the base motion.css/motion.js — load those first.

   Every timing value is from the Kora motion spec
   (~/active/kora-capture/docs/MOTION-SPEC.md — the 32-transition
   census, read out of the shipped Framer chunks, not eyeballed):

     settle   spring 1.20s bounce 0          background/media, t=0
     hero     spring 0.46s bounce .29        h1/h2/sub at 1.50/1.55/1.60s
     cta      tween  0.50s cubic(.4,0,.2,1)  at 1.80s
     section  spring 0.86s bounce .29        +0.10s for second of a pair
     cards    spring 0.36s bounce .29        50ms sibling step
     soft     spring 1.00s bounce .20        oversized zoom, +0.05s delay
     heavy    spring 0.635s k825 d84 m3.2    +0.75s delay (census row)
     reveal   tween  0.60s cubic(.56,.22,.05,.99)  small zoom-outs

   THE SPRINGS AS CSS linear() EASINGS
   Generated from the real spring step response (gen-springs.py in
   this folder; maths per selr-design-language/references/
   07-motion-graphics.md §2): zeta = 1 - bounce for bounce springs,
   zeta = d/(2*sqrt(k*m)) for the physical heavy spring. 32 samples
   per curve. Sampled overshoot vs analytic:
     b29    4.20% sampled / 4.21% analytic  (all .29-bounce durations
            share one normalised shape — overshoot depends only on zeta)
     b20    1.52% / 1.52%
     settle 0% (critically damped, monotonic)
     heavy  1.15% / 1.16%   (wn=16.06 rad/s, zeta=0.817)

   Travel distances (y px, start scales) are NOT in the census —
   Framer's effect objects were not part of the capture. They are
   adopted from the base Selr tiers in motion.css (hero y50/scale.9,
   body y40, chrome y10/scale.9) and flagged as such:
     settle scale 1.04->1 · hero lines y24 · cta y16 ·
     section y40 · cards y18 · heavy y50 scale .9
   ============================================================ */

:root {
  /* spring 0.86/0.46/0.36 bounce .29 — zeta .71, wn*T 6.486, overshoot 4.21% */
  --selr-pg-spring-b29: linear(0, 0.0198, 0.0715, 0.145, 0.2318, 0.3253, 0.4202, 0.5126, 0.5997, 0.6795, 0.7508, 0.8133, 0.8667, 0.9114, 0.948, 0.9771, 0.9996, 1.0164, 1.0282, 1.0359, 1.0403, 1.042, 1.0417, 1.0399, 1.0371, 1.0336, 1.0297, 1.0257, 1.0218, 1.018, 1.0145, 1);
  /* spring 1.0 bounce .2 ("soft") — zeta .8, wn*T 5.756, overshoot 1.52% */
  --selr-pg-spring-b20: linear(0, 0.0156, 0.0565, 0.1149, 0.1847, 0.2607, 0.3392, 0.4172, 0.4925, 0.5635, 0.6293, 0.6891, 0.7429, 0.7904, 0.832, 0.8679, 0.8985, 0.9242, 0.9456, 0.9631, 0.9772, 0.9884, 0.997, 1.0035, 1.0082, 1.0115, 1.0136, 1.0147, 1.0152, 1.015, 1.0145, 1);
  /* spring 1.2 bounce 0 ("settle") — critically damped, zero overshoot */
  --selr-pg-spring-settle: linear(0, 0.0199, 0.0693, 0.1361, 0.2117, 0.2902, 0.3678, 0.4418, 0.5108, 0.574, 0.6309, 0.6818, 0.7267, 0.7662, 0.8006, 0.8304, 0.8561, 0.8782, 0.8972, 0.9133, 0.9271, 0.9387, 0.9486, 0.957, 0.964, 0.9699, 0.9749, 0.9791, 0.9826, 0.9855, 0.988, 1);
  /* spring 0.635 k825 d84 m3.2 ("heavy") — zeta .817, overshoot 1.16% */
  --selr-pg-spring-heavy: linear(0, 0.0452, 0.1507, 0.2828, 0.4194, 0.5474, 0.6596, 0.7534, 0.8287, 0.8868, 0.9302, 0.9613, 0.9827, 0.9966, 1.005, 1.0095, 1.0113, 1.0115, 1.0106, 1.0092, 1.0076, 1.0061, 1.0047, 1.0035, 1.0025, 1.0017, 1.0011, 1.0006, 1.0003, 1.0001, 1, 1);

  /* census tween curves */
  --selr-pg-ease-std:    cubic-bezier(0.4, 0, 0.2, 1);      /* CTA + fades */
  --selr-pg-ease-reveal: cubic-bezier(0.56, 0.22, 0.05, 0.99); /* scroll reveal */
}

/* ------------------------------------------------------------
   1. HERO OPEN CHOREOGRAPHY — load-triggered, not scroll.
   The page sits STILL until 1.5s, then resolves:
     0.00s settle  spring 1.2 bounce 0
     1.50s h1      spring 0.46 bounce .29
     1.55s h2      spring 0.46 bounce .29
     1.60s sub     spring 0.46 bounce .29
     1.80s cta     tween 0.5 [.4,0,.2,1]
   motion-page.js adds .selr-pg-run on load. Delays live here.

   Composition with the base word-split: if the h1 also carries
   data-selr-in="words", the words animation OWNS the reveal (660ms
   b29 per word, from motion.css) and this file's h1 animation is
   suppressed — motion-page.js re-bases the word delays to
   1500ms + i*20ms so the choreography owns the DELAY.
   ------------------------------------------------------------ */

@keyframes selr-pg-settle {
  from { opacity: .001; transform: scale(1.04); }
  to   { opacity: 1;    transform: none; }
}
@keyframes selr-pg-rise {
  from { opacity: .001; transform: translateY(24px); }
  to   { opacity: 1;    transform: none; }
}
@keyframes selr-pg-cta {
  from { opacity: .001; transform: translateY(16px); }
  to   { opacity: 1;    transform: none; }
}

/* Held invisible until the runtime says go — same convention as the
   base layer (opacity .001, never true 0). Words-tier containers are
   exempt: their .selr-word children carry the opacity instead. */
[data-selr-page="settle"],
[data-selr-page="h1"]:not([data-selr-in="words"]),
[data-selr-page="h2"]:not([data-selr-in="words"]),
[data-selr-page="sub"]:not([data-selr-in="words"]),
[data-selr-page="cta"] { opacity: .001; }

[data-selr-page="settle"].selr-pg-run {
  animation: selr-pg-settle 1.2s var(--selr-pg-spring-settle) both;
}
[data-selr-page="h1"]:not([data-selr-in="words"]).selr-pg-run {
  animation: selr-pg-rise .46s var(--selr-pg-spring-b29) 1.5s both;
}
[data-selr-page="h2"]:not([data-selr-in="words"]).selr-pg-run {
  animation: selr-pg-rise .46s var(--selr-pg-spring-b29) 1.55s both;
}
[data-selr-page="sub"]:not([data-selr-in="words"]).selr-pg-run {
  animation: selr-pg-rise .46s var(--selr-pg-spring-b29) 1.6s both;
}
[data-selr-page="cta"].selr-pg-run {
  animation: selr-pg-cta .5s var(--selr-pg-ease-std) 1.8s both;
}

/* ------------------------------------------------------------
   2. OVERSIZED DECORATIVE ZOOM REVEALS — scroll-triggered
   (IntersectionObserver, once, ~0.3 visibility; the whileInView
   equivalent per MOTION-SPEC rebuild notes).

   Census animate-targets:
     {opacity:0, scale:1.2} {opacity:0, scale:1.5}  -> small zooms:
        scale 1 -> target while fading OUT, in one move
        (reveal tween 0.6 [.56,.22,.05,.99] — the census scroll-reveal
        curve; the census does not pin a per-target transition for
        these two, so the reveal tier is the grounded choice)
     {opacity:1, scale:2.2} {opacity:1, scale:10}   -> oversized:
        GROW past the box at full opacity on the soft spring
        (1.0s bounce .2, +0.05s census delay), THEN fade on the
        standard 0.40s tween — "remaining visible then fade".

   data-selr-zoom="1.2|1.5|2.2|10"
   data-selr-zoom-dir="in" reverses it: enter from the scale,
   settling down to 1 while fading in (the entrance reading of the
   same targets).
   ------------------------------------------------------------ */

[data-selr-zoom] {
  will-change: transform, opacity;
  pointer-events: none; /* decorative — never traps a click at scale 10 */
}
[data-selr-zoom]:not([data-selr-zoom-dir="in"]) { opacity: 1; }
[data-selr-zoom][data-selr-zoom-dir="in"]       { opacity: .001; }

@keyframes selr-pg-zoom-12  { from { transform: none; opacity: 1; } to { transform: scale(1.2);  opacity: .001; } }
@keyframes selr-pg-zoom-15  { from { transform: none; opacity: 1; } to { transform: scale(1.5);  opacity: .001; } }
@keyframes selr-pg-grow-22  { from { transform: none; } to { transform: scale(2.2); } }
@keyframes selr-pg-grow-10x { from { transform: none; } to { transform: scale(10);  } }
@keyframes selr-pg-fade-out { from { opacity: 1; } to { opacity: .001; } }

[data-selr-zoom="1.2"].selr-pg-run:not([data-selr-zoom-dir="in"]) {
  animation: selr-pg-zoom-12 .6s var(--selr-pg-ease-reveal) both;
}
[data-selr-zoom="1.5"].selr-pg-run:not([data-selr-zoom-dir="in"]) {
  animation: selr-pg-zoom-15 .6s var(--selr-pg-ease-reveal) both;
}
/* grow 1.0s soft spring (+0.05s), stay visible, then the 0.40s house fade */
[data-selr-zoom="2.2"].selr-pg-run:not([data-selr-zoom-dir="in"]) {
  animation: selr-pg-grow-22 1s var(--selr-pg-spring-b20) .05s both,
             selr-pg-fade-out .4s var(--selr-pg-ease-std) 1.05s both;
}
[data-selr-zoom="10"].selr-pg-run:not([data-selr-zoom-dir="in"]) {
  animation: selr-pg-grow-10x 1s var(--selr-pg-spring-b20) .05s both,
             selr-pg-fade-out .4s var(--selr-pg-ease-std) 1.05s both;
}

/* entrance direction: from the scale down to 1, fading in */
@keyframes selr-pg-zoomin-12  { from { transform: scale(1.2); opacity: .001; } to { transform: none; opacity: 1; } }
@keyframes selr-pg-zoomin-15  { from { transform: scale(1.5); opacity: .001; } to { transform: none; opacity: 1; } }
@keyframes selr-pg-zoomin-22  { from { transform: scale(2.2); opacity: .001; } to { transform: none; opacity: 1; } }
@keyframes selr-pg-zoomin-10x { from { transform: scale(10);  opacity: .001; } to { transform: none; opacity: 1; } }

[data-selr-zoom="1.2"][data-selr-zoom-dir="in"].selr-pg-run { animation: selr-pg-zoomin-12 .6s var(--selr-pg-ease-reveal) both; }
[data-selr-zoom="1.5"][data-selr-zoom-dir="in"].selr-pg-run { animation: selr-pg-zoomin-15 .6s var(--selr-pg-ease-reveal) both; }
[data-selr-zoom="2.2"][data-selr-zoom-dir="in"].selr-pg-run { animation: selr-pg-zoomin-22 1s var(--selr-pg-spring-b20) .05s both; }
[data-selr-zoom="10"][data-selr-zoom-dir="in"].selr-pg-run  { animation: selr-pg-zoomin-10x 1s var(--selr-pg-spring-b20) .05s both; }

/* ------------------------------------------------------------
   3. SECTION-ENTRANCE SPRINGS — scroll-triggered, once, 0.3.

   section  spring 0.86 bounce .29; the second [data-selr-page=
            "section"] sharing a parent gets +0.10s automatically
            (motion-page.js sets animation-delay from sibling index)
   cards    parent marker; children enter on spring 0.36 bounce .29,
            50ms per sibling (delays set by motion-page.js)
   heavy    spring 0.635 k825 d84 m3.2, +0.75s census delay
   ------------------------------------------------------------ */

@keyframes selr-pg-section {
  from { opacity: .001; transform: translateY(40px); }
  to   { opacity: 1;    transform: none; }
}
@keyframes selr-pg-card {
  from { opacity: .001; transform: translateY(18px); }
  to   { opacity: 1;    transform: none; }
}
@keyframes selr-pg-heavy {
  from { opacity: .001; transform: translateY(50px) scale(.9); }
  to   { opacity: 1;    transform: none; }
}

[data-selr-page="section"],
[data-selr-page="heavy"],
[data-selr-page="cards"] > * { opacity: .001; }

[data-selr-page="section"].selr-pg-run {
  animation: selr-pg-section .86s var(--selr-pg-spring-b29) both;
}
[data-selr-page="cards"].selr-pg-run > * {
  animation: selr-pg-card .36s var(--selr-pg-spring-b29) both;
}
[data-selr-page="heavy"].selr-pg-run {
  animation: selr-pg-heavy .635s var(--selr-pg-spring-heavy) .75s both;
}

/* ------------------------------------------------------------
   4. CAPABILITY PANEL CHOREOGRAPHY
   Uses the page-open spring and standard Selr tween. The panel
   resolves as one composed move, then its evidence settles in.
   ------------------------------------------------------------ */

@keyframes selr-cap-panel-in {
  from { opacity: .001; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes selr-cap-piece-in {
  from { opacity: .001; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: none; }
}
@keyframes selr-cap-bar-in {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
@keyframes selr-cap-line-in {
  from { opacity: .001; transform: translateX(-10px); }
  to { opacity: 1; transform: none; }
}

.selr-cap-panel.is-active {
  animation: selr-cap-panel-in .4s var(--selr-pg-ease-std) both;
}
.selr-cap-panel.is-active .selr-cap-copy > *,
.selr-cap-panel.is-active .selr-cap-visual {
  opacity: .001;
  animation: selr-cap-piece-in .55s var(--selr-pg-spring-b29) both;
}
.selr-cap-panel.is-active .selr-cap-copy > :nth-child(1) { animation-delay: .04s; }
.selr-cap-panel.is-active .selr-cap-copy > :nth-child(2) { animation-delay: .09s; }
.selr-cap-panel.is-active .selr-cap-copy > :nth-child(3) { animation-delay: .14s; }
.selr-cap-panel.is-active .selr-cap-visual { animation-delay: .1s; }
.selr-cap-panel.is-active .selr-cap-doc-row,
.selr-cap-panel.is-active .selr-cap-bubble,
.selr-cap-panel.is-active .selr-cap-brief-grid > div,
.selr-cap-panel.is-active .selr-cap-source,
.selr-cap-panel.is-active .selr-cap-draft,
.selr-cap-panel.is-active .selr-cap-research-row,
.selr-cap-panel.is-active .selr-cap-ready {
  opacity: .001;
  animation: selr-cap-line-in .4s var(--selr-pg-ease-std) both;
}
.selr-cap-panel.is-active .selr-cap-doc-row:nth-of-type(1),
.selr-cap-panel.is-active .selr-cap-bubble:nth-of-type(1),
.selr-cap-panel.is-active .selr-cap-brief-grid > div:nth-child(1),
.selr-cap-panel.is-active .selr-cap-source:nth-child(1),
.selr-cap-panel.is-active .selr-cap-research-row:nth-child(1) { animation-delay: .22s; }
.selr-cap-panel.is-active .selr-cap-doc-row:nth-of-type(2),
.selr-cap-panel.is-active .selr-cap-bubble:nth-of-type(2),
.selr-cap-panel.is-active .selr-cap-brief-grid > div:nth-child(2),
.selr-cap-panel.is-active .selr-cap-source:nth-child(2),
.selr-cap-panel.is-active .selr-cap-research-row:nth-child(2) { animation-delay: .28s; }
.selr-cap-panel.is-active .selr-cap-doc-row:nth-of-type(3),
.selr-cap-panel.is-active .selr-cap-brief-grid > div:nth-child(3),
.selr-cap-panel.is-active .selr-cap-draft,
.selr-cap-panel.is-active .selr-cap-research-row:nth-child(3) { animation-delay: .34s; }
.selr-cap-panel.is-active .selr-cap-brief-grid > div:nth-child(4),
.selr-cap-panel.is-active .selr-cap-ready { animation-delay: .4s; }
.selr-cap-panel.is-active .selr-cap-research-row i {
  animation: selr-cap-bar-in .55s var(--selr-pg-spring-b29) .38s both;
}

/* ------------------------------------------------------------
   5. REDUCED MOTION — jump to final state, nothing moves.
   Entrances resolve to visible. Decorative zoom-OUTS resolve to
   their resting state (scale 1, visible) rather than their faded
   end state — reduced motion must never hide content that full
   motion would have shown.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  [data-selr-page],
  [data-selr-page="cards"] > *,
  [data-selr-zoom],
  .selr-cap-panel,
  .selr-cap-panel *,
  .selr-cap-research-row i {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}