/* ============================================================
   videnda.app PHASE 2 — "flow" layer.
   Additive: everything is scoped to html.flow, so removing the
   class restores the shipped sticky-pinned build byte-for-byte.
   Rule of the layer: scroll response ratio is 1.0 EVERYWHERE.
   Nothing pins. Nothing scrubs. Motion runs on its own clock.
   ============================================================ */

/* ---------- 1. unpin ---------- */
.flow .scene{height:auto !important;min-height:0}
.flow .scene-stage{
  position:static;height:auto;min-height:0;
  overflow:visible;
  /* the stage was a flex centring box for a pinned screen; in flow it is
     just a band of the page, and the tick must sit UNDER the grid, not
     beside it as a second flex item */
  display:block;
  /* section rhythm comes from breathing room, not scroll runway.
     Measures 1.01 x viewport per scene at 1440x900 (framer.com: 0.91–3.51),
     i.e. one idea per screen with nothing left over. */
  padding:clamp(72px,11vh,132px) 0;
}
.flow .scene-grid{align-items:center}

/* the per-scene tick used to hang off the pinned stage */
.flow .sc-tick{position:static;margin:26px auto 0;text-align:center}

/* ---------- 2. the entrance vocabulary ----------
   Two curves only.
   ARRIVE  350ms easeOutCubic + 16px rise   — text, chips, rows (app value)
   SETTLE  420ms easeOutCubic + 24px rise + .985 scale — whole devices
   Both are transform+opacity only: no layout, no paint, compositor-safe. */
.flow .cue{opacity:0;transform:translate3d(0,16px,0)}
.flow .cue.on{opacity:1;transform:translate3d(0,0,0)}

.flow .scene-device{
  opacity:0;transform:translate3d(0,24px,0) scale(.985);
  transition:opacity .28s cubic-bezier(.215,.61,.355,1),
             transform .52s cubic-bezier(.16,1,.3,1);
  will-change:transform,opacity;
}
.flow .scene-device.settled{opacity:1;transform:translate3d(0,0,0) scale(1)}
@supports (transition-timing-function:linear(0,1)){
  .flow .scene-device{
    transition-timing-function:cubic-bezier(.215,.61,.355,1),
      linear(0,.028 3.6%,.104 7.7%,.214 12.1%,.35 16.8%,.492 21.8%,.626 27%,.741 32.7%,.833 38.9%,.903 45.6%,.952 53.3%,.981 62.7%,.995 74.8%,1)
  }
}
/* drop the hint the moment the arrival is over — a permanent will-change
   pins a compositor layer per phone for the life of the page */
.flow .scene-device.parked{will-change:auto}

/* the phone keeps its papercraft tilt; the old scrubbed micro-drift is gone */
.flow .phone{transform:rotate(.5deg)}

/* ---------- 3. the one permitted ambient loop ----------
   A 2px, 9s drift on the device shadow plane. Compositor-only, and it
   is the ONLY infinite animation on the page (framer.com runs exactly one
   infinite keyframe too, 0.75s linear, 16 instances). */
@media (prefers-reduced-motion: no-preference){
  .flow .scene.active-motion .scene-device.parked .phone{animation:v-breathe 9s ease-in-out infinite}
}
@keyframes v-breathe{
  0%,100%{transform:rotate(.5deg) translate3d(0,0,0)}
  50%    {transform:rotate(.5deg) translate3d(0,-3px,0)}
}

/* ---------- 4. scroll-driven parallax (progressive enhancement) ----------
   The ONLY thing we tie to scroll is continuous ambience, never a beat.
   Chromium 115+ / Safari 26+ run this off the main thread. Firefox 152
   still has it behind layout.css.scroll-driven-animations.enabled, so it
   is a pure garnish with no fallback: absence changes nothing. */
@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    .flow .scene-copy{
      view-timeline:--copy block;
      animation:v-copy-drift linear both;
      animation-timeline:--copy;
      animation-range:entry 5% exit 95%;
    }
    @keyframes v-copy-drift{
      from{transform:translate3d(0,7px,0)}
      to  {transform:translate3d(0,-7px,0)}
    }
    /* the Me tab pans its own screen; re-ranged for a flowing scene
       (the shipped `contain 0% contain 100%` range is degenerate once the
       subject is no longer viewport-sized) */
    .flow .scene[data-scene="me"]{view-timeline:none}
    .flow .scene[data-scene="me"] .screen{view-timeline:--me-track block}
    .flow .me-scroll{animation-timeline:--me-track;animation-range:entry 70% exit 30%}
  }
}

/* ---------- 5. the stamp ceremony, unpinned ---------- */
/* the ghost's pressure ramp used to be scrubbed off scroll position;
   it is now a 260ms lead-in on the ceremony's own clock */
.flow .seal-ghost{opacity:.06;transform:scale(1.06)}
.flow .aui-ceremony.pressing .seal-ghost{
  opacity:.16;transform:scale(1);
  transition:opacity .26s cubic-bezier(.215,.61,.355,1),
             transform .26s cubic-bezier(.215,.61,.355,1);
}

/* replay affordance — the pin used to guarantee you saw the ceremony;
   in a flowing page this does, and doubles as the gesture that unlocks
   audio (autoplay policy: a thunk needs a real user gesture) */
/* base rule: the control must be invisible in the SHIPPED (pinned) build
   too — flow.css ships to every visitor, .flow does not */
.sc-replay{display:none}
.flow .sc-replay{
  margin-top:18px;align-items:center;gap:8px;
  font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--accent-text);
  background:none;border:0;padding:6px 0;cursor:pointer;
  opacity:0;transform:translate3d(0,16px,0);
  transition:opacity .35s cubic-bezier(.215,.61,.355,1),
             transform .35s cubic-bezier(.215,.61,.355,1);
}
.flow .sc-replay.avail{display:inline-flex}
.flow .sc-replay.avail.on{opacity:1;transform:none}
.flow .sc-replay:hover{color:var(--navy)}
@media (max-width:1020px){
  .flow .sc-replay.avail{display:flex;width:100%;justify-content:center;margin-top:14px}
}
.flow .sc-replay .g{font-size:.95rem;line-height:1}

/* ---------- 6. reduced motion / no-JS ---------- */
@media (prefers-reduced-motion: reduce){
  .flow .cue,.flow .scene-device{opacity:1;transform:none;transition:none}
  .flow .scene-device.parked .phone{animation:none}
  .flow .sc-replay{display:none !important}
}
.flow.no-js .cue,.flow.no-js .scene-device{opacity:1;transform:none}