/**
 * Front-page scroll motion: rise-on-view and the opening shot.
 * Loaded beside site.css on the product site (decision: front-page-people-and-rooms).
 */
/* ── Motion: things arrive as they scroll into view ─────────────────────── */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .rv, .mk-beat { animation: rise linear both; animation-timeline: view(); animation-range: entry 0% entry 70%; }
  }
}
/* The room's typing dots rise in turn, as the app's do. */
@media (prefers-reduced-motion: no-preference) {
  .mk-typing-dots i { animation: mk-typing-dot 1.2s var(--ease) infinite; }
  .mk-typing-dots i:nth-child(2) { animation-delay: 0.15s; }
  .mk-typing-dots i:nth-child(3) { animation-delay: 0.3s; }
}
@keyframes mk-typing-dot { 0%, 60%, 100% { opacity: 0.35; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
/* The opening as one continuous shot, where the window is tall enough to hold it: the hero lifts,
   the orb comes to rest above Maya's greeting and Meet Archon rolls through its four chapters
   (0-80 of the stage's scroll); then everything comes back to Archon (80-100): the app folds into
   the orb, the orb rises to the middle, the team's Archons come back round it, "This is Archon."
   lands and what it does gathers under it. `site-stage.js` follows the same marks. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-height: 560px) {
    .stage { height: 450svh; view-timeline: --stage; }
    .stage-pin { --rest: 0.56; --win-top: calc(var(--nav) + 15svh); --win-w: min(1120px, calc(100% - 2 * var(--pad))); --win-h: calc(100svh - var(--win-top) - 3svh); --o: min(34svh, 380px, 70vw); }
    .stage-pin { position: sticky; top: 0; display: block; height: 100svh; padding: 0; overflow: hidden; }
    .stage-orb { position: absolute; top: calc(var(--nav) + 5svh); left: calc(50% - var(--o) / 2); animation: orb-life linear both; animation-timeline: --stage; animation-range: contain 0% contain 100%; }
    /* The team's Archons part as the words lift away, before Archon goes to its place. */
    .stage-moons { animation: moons-in 1.6s var(--ease) 0.5s both, moons-away linear both, moons-back linear forwards; animation-timeline: auto, --stage, --stage; animation-range: normal, contain 0.8% contain 5.6%, contain 85% contain 92%; }
    .hero-copy { position: absolute; top: calc(var(--nav) + 7svh + var(--o)); left: 0; right: 0; margin: 0; padding: 0 var(--pad); animation: lift-away linear both; animation-timeline: --stage; animation-range: contain 2.4% contain 10.4%; }
    .stage-caption { position: absolute; top: calc(var(--nav) + 3svh); left: 0; right: 0; margin: 0; padding: 0 var(--pad); animation: caption-out linear forwards; animation-timeline: --stage; animation-range: contain 80% contain 83%; }
    .stage-lines { display: grid; }
    .stage-lines span { grid-area: 1 / 1; }
    /* A drawing, never a control: while it is still arriving it lies over the
       hero's buttons, and it must not take their clicks. It rests unseen: the scroll
       alone brings it in, in one animation over the whole stage. Two stacked on one
       element let the second's opening frame (the app, fully shown) lie over the hero
       in Safari before the reader had scrolled at all. */
    .stage-window { pointer-events: none; }
    .stage-window { opacity: 0; }
    .stage-window { position: absolute; z-index: 2; top: var(--win-top); left: calc(50% - var(--win-w) / 2); width: var(--win-w); height: var(--win-h); margin: 0; transform-origin: calc(50% + var(--side) / 2) calc(var(--slot-top) + var(--o) * var(--k) / 2); animation: window-life linear both; animation-timeline: --stage; animation-range: contain 0% contain 100%; }
    .ui-slot archon-orb { display: none; }
    .ui-ch[data-c="1"], .ui-ch[data-c="3"], .ui-ch[data-c="4"] { display: grid; }
    .ui-state { display: grid; justify-items: center; flex: none; margin: var(--space-3) 0 0; font-size: var(--site-mock-sm); font-weight: 500; }
    .ui-state > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border-radius: var(--radius-pill); background: var(--blue-wash); color: var(--blue); opacity: 0; transform: translateY(4px) scale(0.96); transition: opacity var(--site-slow) var(--ease), transform var(--site-slow) var(--ease); }
    .ui-state > span::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
    .ui-state > [data-s="thinking"]::before, .ui-state > [data-s="working"]::before { animation: pulse 1.2s ease-in-out infinite; }
    .ui-state > [data-s="working"] { background: color-mix(in oklab, var(--working) 12%, transparent); color: var(--working); }
    .ui-state > [data-s="attention"] { background: var(--needs-wash); color: var(--needs); box-shadow: var(--soft-needs); }
    .ui-state > [data-s="done"] { background: color-mix(in oklab, var(--working) 12%, transparent); color: var(--working); }
    .stage[data-story="thinking"] .ui-state > [data-s="thinking"],
    .stage[data-story="working"] .ui-state > [data-s="working"],
    .stage[data-story="attention"] .ui-state > [data-s="attention"],
    .stage[data-story="done"] .ui-state > [data-s="done"] { opacity: 1; transform: none; }
    .vision-title { animation: rise-in linear both; animation-timeline: --stage; animation-range: contain 21.6% contain 25.6%; }
    .stage-lines span, .ui-ch { animation-timeline: --stage; animation-timing-function: linear; animation-fill-mode: both; animation-range: contain 0% contain 80%; }
    .stage-lines span[data-c="1"], .ui-ch[data-c="1"] { animation-name: chapter-1; }
    .stage-lines span[data-c="2"], .ui-ch[data-c="2"] { animation-name: chapter-2; }
    .stage-lines span[data-c="3"], .ui-ch[data-c="3"] { animation-name: chapter-3; }
    .stage-lines span[data-c="4"], .ui-ch[data-c="4"] { animation-name: chapter-4; }
    .ui-entry, .ui-ask, .ui-work, .ui-step, .ui-paused, .ui-ask-send, .ui-done, .ui-saved { animation: rise-in linear both; animation-timeline: --stage; }
    .ui-entry:nth-child(2) { animation-range: contain 28% contain 30.4%; }
    .ui-entry:nth-child(3) { animation-range: contain 30.4% contain 32.8%; }
    .ui-entry:nth-child(4) { animation-range: contain 32.8% contain 35.2%; }
    .ui-ask { animation-range: contain 40.8% contain 42.4%; }
    .ui-work { animation-range: contain 42.4% contain 44%; }
    .ui-step:nth-child(3) { animation-range: contain 44% contain 45.6%; }
    .ui-step:nth-child(4) { animation-range: contain 46.4% contain 48%; }
    .ui-step:nth-child(5) { animation-range: contain 48.8% contain 50.4%; }
    .ui-work .scene-progress span { animation: fill-up linear both; animation-timeline: --stage; animation-range: contain 42.4% contain 51.2%; }
    .ui-paused { animation-range: contain 53.6% contain 55.2%; }
    .ui-ask-send { animation: rise-in linear both, ask-glow linear both; animation-timeline: --stage, --stage; animation-range: contain 55.2% contain 57.6%, contain 55.2% contain 64%; }
    /* Maya says yes: the button gives under the press, and answers. */
    .ui-approve { animation: approve-press linear both; animation-timeline: --stage; animation-range: contain 60% contain 63.2%; }
    .ui-swap > span { animation-timeline: --stage; animation-timing-function: linear; animation-fill-mode: both; animation-range: contain 0% contain 80%; }
    .ui-swap > span:first-child { animation-name: approve-was; }
    .ui-swap > span + span { animation-name: approve-now; }
    .ui-paused .scene-work-status { animation: approve-pill linear both; animation-timeline: --stage; animation-range: contain 61.6% contain 62.4%; }
    .ui-done { animation-range: contain 68% contain 69.6%; }
    .ui-saved { animation-range: contain 70.4% contain 73.6%; }
    .ui-then > span { animation-timeline: --stage; animation-timing-function: linear; animation-fill-mode: both; animation-range: contain 0% contain 80%; }
    .ui-then > span:nth-child(1) { animation-name: then-1; }
    .ui-then > span:nth-child(2) { animation-name: then-2; }
    .ui-then > span:nth-child(3) { animation-name: then-3; }
@keyframes moons-away { to { --ring-o: 0; --ring: 1.35; visibility: hidden; } }
@keyframes lift-away { to { opacity: 0; transform: translateY(-48px); visibility: hidden; } }
/* The hero's orb comes to rest in its slot above Maya's greeting; at the close it rises out of it to the middle of the screen. */
@keyframes orb-life {
  0%, 3.2% { transform: none; }
  24%, 81.5% { transform: translate(calc(var(--side) / 2), calc(var(--win-top) - var(--nav) - 5svh + var(--slot-top) - var(--o) * (1 - var(--k)) / 2)) scale(var(--k)); }
  89.5%, 100% { transform: translate(0, calc(33svh - var(--nav) - var(--o) / 2)) scale(var(--rest)); }
}
/* The app rises in under the orb, holds through the story, and folds into the orb at the close. */
@keyframes window-life {
  0%, 10.4% { opacity: 0; transform: translateY(8svh) scale(0.94); visibility: visible; }
  22.4%, 80.5% { opacity: 1; transform: none; visibility: visible; }
  85.05% { opacity: 0.4; }
  87%, 100% { opacity: 0; transform: scale(0.2); visibility: hidden; }
}
@keyframes rise-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes fill-up { from { transform: scaleX(0.04); } to { transform: scaleX(1); } }
/* The brief in the sidebar follows the Work: drafting, waiting on Maya, done. */
@keyframes then-1 { 0%, 66% { opacity: 1; } 67.5%, 100% { opacity: 0; visibility: hidden; } }
@keyframes then-2 { 0%, 66% { opacity: 0; visibility: hidden; } 67.5%, 78% { opacity: 1; visibility: visible; } 79.5%, 100% { opacity: 0; visibility: hidden; } }
@keyframes then-3 { 0%, 78% { opacity: 0; visibility: hidden; } 79.5%, 100% { opacity: 1; visibility: visible; } }
@keyframes ask-glow { 0% { box-shadow: var(--soft-needs); } 50% { box-shadow: var(--soft-needs), 0 0 0 4px color-mix(in oklab, var(--needs) 22%, transparent); } 100% { box-shadow: var(--soft-needs); } }
@keyframes approve-press { 0%, 40% { transform: none; } 55% { transform: scale(0.9); box-shadow: 0 0 0 5px color-mix(in oklab, var(--solid) 18%, transparent); } 75%, 100% { transform: none; background: var(--working); color: var(--solid-ink); } }
@keyframes approve-pill { to { background: color-mix(in oklab, var(--working) 12%, transparent); color: var(--working); } }
@keyframes approve-was { 0%, 77% { opacity: 1; } 78%, 100% { opacity: 0; visibility: hidden; } }
@keyframes approve-now { 0%, 77% { opacity: 0; visibility: hidden; } 78%, 100% { opacity: 1; visibility: visible; } }
/* Each chapter of Meet Archon holds the screen in turn: its line above, its moment in the app. */
@keyframes chapter-1 { 0%, 31% { opacity: 0; transform: translateY(10px); } 34%, 46% { opacity: 1; transform: none; } 48%, 100% { opacity: 0; transform: translateY(-8px); visibility: hidden; } }
@keyframes chapter-2 { 0%, 47.5% { opacity: 0; transform: translateY(10px); visibility: hidden; } 50%, 64% { opacity: 1; transform: none; visibility: visible; } 66%, 100% { opacity: 0; transform: translateY(-8px); visibility: hidden; } }
@keyframes chapter-3 { 0%, 65.5% { opacity: 0; transform: translateY(10px); visibility: hidden; } 68%, 81% { opacity: 1; transform: none; visibility: visible; } 83%, 100% { opacity: 0; transform: translateY(-8px); visibility: hidden; } }
@keyframes chapter-4 { 0%, 82.5% { opacity: 0; transform: translateY(10px); visibility: hidden; } 85%, 100% { opacity: 1; transform: none; visibility: visible; }     /* The close: everything comes back to Archon. Its line lands under the orb, and one line more under that. */ }
    .stage-close { position: absolute; z-index: 3; top: calc(38svh + var(--o) * var(--rest) / 2 + 4svh); left: 0; right: 0; display: grid; justify-items: center; gap: var(--space-5); margin: 0; padding: 0 var(--pad); }
    .stage-close-h { animation: rise-in linear both; animation-timeline: --stage; animation-range: contain 88% contain 93%; }
    .stage-close-line { animation: rise-in linear both; animation-timeline: --stage; animation-range: contain 92% contain 96%; }
  }
}
@keyframes moons-back { from { --ring-o: 0; --ring: 1.35; visibility: visible; } to { --ring-o: 1; --ring: 1; visibility: visible; } }
@keyframes caption-out { to { opacity: 0; transform: translateY(-8px); visibility: hidden; } }
@keyframes chip-in { from { opacity: 0; transform: translateY(10px) scale(0.9); } 60% { opacity: 1; transform: translateY(-2px) scale(1.02); } to { opacity: 1; transform: none; } }
@keyframes call-out { to { opacity: 0; transform: scale(0.97); visibility: hidden; } }
@keyframes stage-in { from { opacity: 0; transform: translateY(calc(var(--space-2) * -1)) scale(0.92); } }
@keyframes press { 0%, 40% { transform: none; } 55% { transform: scale(0.9); box-shadow: 0 0 0 5px color-mix(in oklab, var(--solid) 14%, transparent); } 75%, 100% { transform: none; } }
@keyframes press-on { 0%, 40% { transform: none; } 55% { transform: scale(0.88); } 75%, 100% { transform: none; background: var(--ink); color: var(--bg); } }
@keyframes hand-up { from { opacity: 0; transform: translateY(var(--space-1)) scale(0.6); } }
@keyframes menu-pop { 0% { opacity: 0; transform: translateY(calc(var(--space-1) * -1)); visibility: hidden; } 15%, 80% { opacity: 1; transform: none; visibility: visible; } 100% { opacity: 0; visibility: hidden; } }
/* As the shell's own dialog: the dim fades and the panel moves; the panel never fades, so it is never see-through. */
@keyframes dialog-pop { 0% { background-color: transparent; visibility: hidden; } 10%, 88% { background-color: var(--ap-scrim); visibility: visible; } 100% { background-color: transparent; visibility: hidden; } }
@keyframes dialog-move { 0%, 100% { transform: translateY(8px) scale(0.985); } 10%, 88% { transform: none; } }
@keyframes rise { from { transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  .stage-orb archon-orb, .stage-moons { animation: none; }
  .mk-work li.is-now i::before, .mk-duty-last.is-working i, .people-state::before { animation: none; }
}