/* mk.css — single CSS entry; one <link> on any mk page.
   Each file is a single-purpose module; edit the right one, not everything.

   ─── design language: three scene patterns ────────────────────────────

   The site has EXACTLY three ways a scene can behave. Every page picks
   one per section — never mix them, never "scroll through a long list
   of unrelated beats."

   [A] Linear swipe — `.mk-quote` and its variants (`--ocean`, `--ridge`,
       etc). One full viewport per scene, scroll advances you to the next.
       On phone you see ONE scene at a time, not two. Text + media land
       together, then the next scene takes over. Use this when the flow
       is "here's a thought → next thought."

   [B] Sticky progression — `.mk-timeflow`, `.mk-neural`. The scene is
       pinned (sticky stage) while the user scrolls. Nothing exits the
       viewport; the scene itself *progresses* — a cursor moves, a node
       lights up, a phase advances. Use this when the flow is "here's
       one idea; watch it unfold." Brain firing in place, not scrolling
       through a list.

   [C] Autoplay — `.scene-stage[data-scene-mode="autoplay"]`. A single
       viewport that plays a short cinematic beat on its own timeline
       the moment it enters view. The camera holds; the scene plays
       itself. Scroll does not drive the beats — it only carries the
       viewer off once the closing frame has landed and a scroll-hint
       cue has faded in. Canonical example: `scenes/build-dont-listen`.
       rAF timeline, IntersectionObserver gate, visibilitychange pause,
       reduced-motion skip to end. Use when the beat is short (<10s)
       and a scroll driver would only get in the way.

   Avoid: a long vertical document where one linear block follows another
   with no scene break. If the story is that long, split it into multiple
   [A] scenes, pull it into a [B] progression with in-place change, or
   collapse a short self-contained beat into a [C] autoplay.
*/

@import url('./tokens.css');
@import url('./layout.css');
@import url('./scene.css');
@import url('./wordmark.css');
@import url('./components/terminal.css');
@import url('./components/header.css');
@import url('./components/project-card.css');
@import url('./components/carousel.css');
@import url('./components/coverflow.css');
@import url('./components/cave.css');
@import url('./components/ocean.css');
@import url('./components/ridge.css');
@import url('./components/about.css');
@import url('./components/timeline-flow.css');
@import url('./components/neural.css');
@import url('./components/thought.css');
@import url('./components/scenes.css');