/* flick.media — the desktop app's "Signal" language, at landing-page scale.
   Tokens mirror ui/src/app.css: green-cast near-blacks, one bright accent for
   state, monospace for every piece of data, corner brackets instead of zoom,
   and hairline rails that run a heading out to the edge. */

:root {
  color-scheme: dark;

  --background: #070b09;
  --card: #0f1512;
  --card-raised: #131b17;
  --foreground: #e6ede9;
  --muted: #83958b;
  --border: #202c27;
  --edge: rgb(255 255 255 / 10%);
  --hairline: rgb(255 255 255 / 6%);

  --primary: #2bff88;
  --primary-foreground: #04120b;
  --signal-deep: #0f7d45;

  --radius: 4px;
  --radius-media: 2px;

  --font-ui: "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, "Noto Sans", sans-serif;
  --font-data: "Cascadia Mono", "JetBrains Mono", "SF Mono", ui-monospace, Consolas, monospace;

  --shell: 1200px;
  --gutter: clamp(1.1rem, 4vw, 2.5rem);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

/* The app's accent choices, applied to the page by the swatches. */
[data-accent="cobalt"] { --primary: #5da8ff; --primary-foreground: #05152a; --signal-deep: #2868ba; }
[data-accent="amber"] { --primary: #ffbd4a; --primary-foreground: #261500; --signal-deep: #b87814; }
[data-accent="violet"] { --primary: #b69cff; --primary-foreground: #160b31; --signal-deep: #6f54be; }

@property --countdown {
  syntax: "<integer>";
  initial-value: 5;
  inherits: false;
}
/* The hero readouts combine two motions on one translate: a time-based bob
   and a scroll-linked drift. Each is a registered length so both can animate. */
@property --bob {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}
@property --drift {
  syntax: "<length>";
  initial-value: 0px;
  inherits: false;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; scroll-padding-top: 80px; }

body {
  min-width: 320px;
  margin: 0;
  overflow-x: clip;
  background: var(--background);
  color: var(--foreground);
  font: 400 1rem/1.6 var(--font-ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: var(--primary); color: var(--primary-foreground); }

img,
video,
svg { display: block; max-width: 100%; }

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: var(--radius);
}

h1,
h2,
h3 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: -0.025em;
  text-wrap: balance;
}

p { margin: 0; text-wrap: pretty; }

code {
  padding: 0.05em 0.35em;
  border: 1px solid var(--edge);
  border-radius: var(--radius-media);
  background: rgb(255 255 255 / 4%);
  font: 0.88em var(--font-data);
}

.data {
  font-family: var(--font-data);
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.shell {
  width: min(100%, calc(var(--shell) + var(--gutter) * 2));
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.skip-link {
  position: absolute;
  top: -100px;
  left: 1rem;
  z-index: 100;
  padding: 0.6rem 1rem;
  background: var(--primary);
  color: var(--primary-foreground);
  font-weight: 600;
}
.skip-link:focus { top: 1rem; }

/* ---------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  border: 1px solid transparent;
  border-radius: var(--radius);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out), box-shadow 160ms ease;
}
.btn svg { width: 1.15em; height: 1.15em; }
.btn-sm { padding: 0.45rem 0.9rem; font-size: 0.9rem; }
.btn-lg { padding: 0.85rem 1.35rem; font-size: 1.02rem; }
.btn-primary {
  background: var(--primary);
  color: var(--primary-foreground);
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--primary) 40%, transparent);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 34px -10px color-mix(in srgb, var(--primary) 70%, transparent);
}
.btn-ghost { border-color: var(--edge); background: rgb(255 255 255 / 3%); }
.btn-ghost:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--edge)); background: rgb(255 255 255 / 6%); }

.icon-btn,
.icon-link {
  display: inline-grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 3%);
  color: var(--foreground);
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease;
}
.icon-btn:hover,
.icon-link:hover { border-color: color-mix(in srgb, var(--primary) 50%, var(--edge)); background: rgb(255 255 255 / 6%); }
.icon-btn svg,
.icon-link svg { width: 1.15rem; height: 1.15rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-link svg { stroke: none; }

/* ----------------------------------------------------------------- chrome */

.chrome {
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid transparent;
  transition: background-color 200ms ease, border-color 200ms ease, backdrop-filter 200ms ease;
}
.chrome[data-scrolled] {
  border-color: var(--hairline);
  background: color-mix(in srgb, var(--background) 78%, transparent);
  backdrop-filter: blur(14px) saturate(1.3);
}
.chrome-row { display: flex; align-items: center; gap: 1.5rem; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; text-decoration: none; }
.brand-icon { border-radius: 7px; }
.wordmark { font-weight: 600; font-size: 1.08rem; letter-spacing: -0.01em; }
.wordmark b { color: var(--primary); font-weight: 600; }
.chrome-nav { position: relative; display: flex; gap: 0.2rem; margin-inline: auto; }
.chrome-nav a {
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius);
  color: var(--muted);
  font-size: 0.92rem;
  text-decoration: none;
  transition: color 160ms ease, background-color 160ms ease;
}
.chrome-nav a:hover { color: var(--foreground); background: rgb(255 255 255 / 4%); }
.chrome-nav a[aria-current="true"] { color: var(--foreground); }
/* The current section's underline slides between links instead of jumping. */
.nav-ink {
  position: absolute;
  bottom: -1px;
  left: 0;
  width: var(--ink-w, 0px);
  height: 2px;
  border-radius: 1px;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
  opacity: 0;
  translate: var(--ink-x, 0px) 0;
  transition: translate 420ms var(--ease-out), width 420ms var(--ease-out), opacity 240ms ease;
}
.chrome-nav[data-ink] .nav-ink { opacity: 1; }
.chrome-actions { display: flex; align-items: center; gap: 0.6rem; }

@media (max-width: 860px) {
  .chrome-nav { display: none; }
  .chrome-actions { margin-left: auto; }
}

/* ------------------------------------------------------------------ spine */

/* A fixed rail of section numbers on wide screens. The line fills with the
   accent as the page is read; the current section shows its name. */
.spine {
  position: fixed;
  top: 50%;
  left: clamp(1.2rem, 2.5vw, 2.5rem);
  z-index: 40;
  display: none;
  grid-template-columns: auto;
  gap: 1.25rem;
  padding-left: 1.1rem;
  translate: 0 -50%;
}
@media (min-width: 1400px) {
  .spine { display: grid; }
}
.spine-line {
  position: absolute;
  top: 0.4rem;
  bottom: 0.4rem;
  left: 0;
  width: 1px;
  background: var(--hairline);
}
.spine-line i {
  display: block;
  height: 100%;
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 30%, transparent), var(--primary));
  box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 60%, transparent);
  transform-origin: top;
  scale: 1 0;
}
@supports (animation-timeline: scroll()) {
  .spine-line i { animation: grow linear both; animation-timeline: scroll(root); }
}
.spine a {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--muted);
  font-size: 0.62rem;
  text-decoration: none;
  transition: color 240ms ease;
}
.spine a::before {
  position: absolute;
  top: 50%;
  left: -1.1rem;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--border);
  translate: -2px -50%;
  transition: background-color 240ms ease, box-shadow 240ms ease, scale 320ms var(--ease-out);
  content: "";
}
.spine a::after {
  overflow: hidden;
  max-width: 0;
  color: var(--foreground);
  font-size: 0.6rem;
  white-space: nowrap;
  opacity: 0;
  transition: max-width 420ms var(--ease-out), opacity 300ms ease;
  content: attr(data-name);
}
.spine a:hover,
.spine a[aria-current="true"] { color: var(--primary); }
.spine a[aria-current="true"]::before { background: var(--primary); box-shadow: 0 0 10px var(--primary); scale: 1.5; }
.spine a:hover::after,
.spine a[aria-current="true"]::after { max-width: 8rem; opacity: 1; }

/* ------------------------------------------------------------------- hero */

.hero { position: relative; padding-top: clamp(2.2rem, 5vw, 3.6rem); }

.hero-glow {
  position: absolute;
  inset: -64px 0 auto;
  height: 1100px;
  background:
    radial-gradient(60% 45% at 50% 62%, color-mix(in srgb, var(--primary) 16%, transparent), transparent 70%),
    radial-gradient(40% 30% at 18% 8%, color-mix(in srgb, var(--signal-deep) 22%, transparent), transparent 70%);
  pointer-events: none;
  z-index: -1;
}
.hero-glow::after {
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(var(--hairline) 1px, transparent 1px),
    linear-gradient(90deg, var(--hairline) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: radial-gradient(70% 55% at 50% 30%, #000, transparent 75%);
  content: "";
}

.hero-copy { text-align: center; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.35rem 0.85rem;
  border: 1px solid var(--edge);
  border-radius: 999px;
  background: rgb(255 255 255 / 3%);
  color: var(--muted);
  font: 500 0.72rem/1.4 var(--font-data);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pulse {
  position: relative;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
}
.pulse::after {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--primary);
  content: "";
  animation: ping 2.2s var(--ease-out) infinite;
}

.hero h1 {
  margin-top: 1.2rem;
  font-size: clamp(2.5rem, 6vw, 4.6rem);
  font-weight: 800;
  line-height: 0.98;
  letter-spacing: -0.045em;
}
/* Each line clips its words so they can rise into place one after another. */
.hero h1 .line { display: block; overflow: hidden; margin-bottom: -0.12em; padding: 0.04em 0.1em 0.12em; }
.hero h1 .w { display: inline-block; }
.hero h1 .line:nth-child(2) .w { --l: 3; }
.hero h1 .w:nth-child(1) { --i: 0; }
.hero h1 .w:nth-child(2) { --i: 1; }
.hero h1 .w:nth-child(3) { --i: 2; }
.hero h1 .w:nth-child(4) { --i: 3; }
.accent-text {
  color: var(--primary);
  text-shadow: 0 0 60px color-mix(in srgb, var(--primary) 35%, transparent);
}

/* The copy recedes as the window takes over the viewport. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero-copy {
      animation: recede linear both;
      animation-timeline: view();
      animation-range: exit 0% exit 90%;
    }
  }
}
.lede {
  max-width: 62ch;
  margin: 1.25rem auto 0;
  color: color-mix(in srgb, var(--foreground) 78%, var(--muted));
  font-size: clamp(1rem, 1.5vw, 1.12rem);
}
.hero-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: 1.6rem; }
.hero-meta { display: flex; justify-content: center; gap: 0.7rem; margin-top: 1rem; color: var(--muted); font-size: 0.68rem; }

.hero-stage { position: relative; margin-top: clamp(2rem, 4vw, 2.75rem); padding-bottom: 2rem; }

/* ------------------------------------------------------------ app screens */

.screen {
  position: relative;
  margin: 0;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--card);
  box-shadow:
    0 1px 0 rgb(255 255 255 / 6%) inset,
    0 30px 80px -30px rgb(0 0 0 / 80%);
}
.screen-media,
.screen > img { width: 100%; height: auto; background: #050806; }
.screen figcaption {
  position: absolute;
  left: 0.8rem;
  bottom: 0.8rem;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(8px);
  color: var(--foreground);
  font-size: 0.66rem;
}
.screen-bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  height: 34px;
  padding: 0 0.9rem;
  border-bottom: 1px solid var(--hairline);
  background: #0b110e;
  color: var(--muted);
}
.screen-bar .data { font-size: 0.64rem; }
.dots { display: flex; gap: 6px; }
.dots i { width: 9px; height: 9px; border-radius: 50%; background: rgb(255 255 255 / 12%); }
.dots i:first-child { background: color-mix(in srgb, var(--primary) 70%, transparent); }

/* Corner brackets: the app's hover frame, drawn as eight slivers. */
.brackets {
  position: absolute;
  inset: 10px;
  z-index: 3;
  background:
    linear-gradient(var(--primary), var(--primary)) 0 0 / 22px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) 0 0 / 2px 22px no-repeat,
    linear-gradient(var(--primary), var(--primary)) 100% 0 / 22px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) 100% 0 / 2px 22px no-repeat,
    linear-gradient(var(--primary), var(--primary)) 0 100% / 22px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) 0 100% / 2px 22px no-repeat,
    linear-gradient(var(--primary), var(--primary)) 100% 100% / 22px 2px no-repeat,
    linear-gradient(var(--primary), var(--primary)) 100% 100% / 2px 22px no-repeat;
  opacity: 0;
  scale: 1.02;
  transition: opacity 200ms ease, scale 260ms var(--ease-out);
  pointer-events: none;
}
.screen:hover .brackets,
.screen:focus-within .brackets { opacity: 1; scale: 1; }
.screen-hero .brackets { inset: 44px 12px 12px; }

.screen-hero {
  border-color: color-mix(in srgb, var(--primary) 22%, var(--edge));
  box-shadow:
    0 1px 0 rgb(255 255 255 / 8%) inset,
    0 0 0 1px rgb(0 0 0 / 60%),
    0 50px 120px -40px color-mix(in srgb, var(--primary) 40%, transparent),
    0 40px 100px -30px rgb(0 0 0 / 90%);
}

/* The hero window leans back and settles flat as it scrolls into view. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .screen-hero {
      transform-origin: 50% 100%;
      animation: settle linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 40%;
    }
  }
}
@keyframes settle {
  from { transform: perspective(1800px) rotateX(18deg) scale(0.9); }
  to { transform: perspective(1800px) rotateX(0deg) scale(1); }
}

/* Floating readouts around the hero window. They bob on their own clock and
   drift at different rates with the scroll, which gives the stage depth. */
.float-chip {
  position: absolute;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.65rem 0.9rem;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: color-mix(in srgb, var(--card) 80%, transparent);
  backdrop-filter: blur(14px) saturate(1.4);
  box-shadow: 0 18px 50px -18px rgb(0 0 0 / 80%);
  font-size: 0.88rem;
  line-height: 1.25;
  pointer-events: none;
  translate: 0 calc(var(--bob) + var(--drift));
  animation: bob 7s ease-in-out infinite;
  transition: opacity 500ms var(--ease-out), scale 700ms var(--ease-out);
  transition-delay: var(--chip-in, 0ms);
}
.float-chip b { display: block; font-weight: 600; }
.float-chip small { display: block; margin-top: 0.15rem; color: var(--muted); font-size: 0.62rem; }
.float-chip > svg { width: 1.9rem; height: 1.9rem; padding: 0.45rem; border-radius: var(--radius); background: var(--primary); color: var(--primary-foreground); }
.chip-a { top: 18%; left: -1%; }
.chip-b { top: 46%; right: -2%; --chip-in: 320ms; animation-delay: -2.4s; }
.chip-c { bottom: 6%; left: 6%; --chip-in: 640ms; animation-delay: -4.6s; }
.chip-d { top: 14%; right: -1%; animation-delay: -1.2s; }
.chip-e { bottom: 16%; left: -1%; --chip-in: 320ms; animation-delay: -3.5s; }

/* With scripts, the stage knows which part of the recording is playing and
   shows only the readouts that belong to it. */
[data-phase="browse"] .chip-play,
[data-phase="play"] .chip-browse { opacity: 0; scale: 0.92; transition-delay: 0ms; }

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .float-chip { animation: bob 7s ease-in-out infinite, drift linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 110vh; }
    .chip-a, .chip-e { --drift-to: -90px; }
    .chip-b, .chip-d { --drift-to: 50px; }
    .chip-c { --drift-to: -40px; }
  }
}

/* The screen bar's title changes with what the window shows. */
[data-swapped] { animation: text-in 420ms var(--ease-out); }

.sync-dot { position: relative; width: 12px; height: 12px; margin: 0 0.4rem; border-radius: 50%; background: var(--primary); }
.sync-dot::after { position: absolute; inset: 0; border-radius: 50%; background: var(--primary); content: ""; animation: ping 1.8s var(--ease-out) infinite; }

.skip-ring { position: relative; display: grid; place-items: center; width: 2.2rem; height: 2.2rem; }
.skip-ring svg { position: absolute; inset: 0; rotate: -90deg; }
.skip-ring circle { fill: none; stroke: var(--primary); stroke-width: 3; stroke-dasharray: 94.3; animation: drain 5s linear infinite; }
/* The digit is a registered integer counted down with the ring; the static
   "5" in the markup is only there for browsers without @property. */
.skip-ring b { font-size: 0.8rem; letter-spacing: 0; }
@supports (counter-reset: countdown var(--countdown)) {
  .skip-ring b { font-size: 0; counter-reset: countdown var(--countdown); animation: count 5s steps(5, end) infinite; }
  .skip-ring b::after { font-size: 0.8rem; content: counter(countdown); }
}

@media (max-width: 1320px) {
  .chip-a, .chip-e { left: 0.5rem; }
  .chip-b, .chip-d { right: 0.5rem; }
}
@media (max-width: 900px) {
  .float-chip { display: none; }
}

/* ----------------------------------------------------------------- ticker */

.ticker {
  overflow: hidden;
  margin-top: clamp(2.5rem, 6vw, 4rem);
  padding-block: 1.1rem;
  border-block: 1px solid var(--hairline);
  background: rgb(255 255 255 / 1.5%);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.ticker-track { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker-list { display: flex; margin: 0; padding: 0; list-style: none; color: var(--muted); }
.ticker-list li { display: flex; align-items: center; padding-inline: 1.6rem; white-space: nowrap; }
.ticker-list li::before { width: 6px; height: 6px; margin-right: 1.6rem; border-radius: 1px; background: var(--primary); content: ""; opacity: 0.7; rotate: 45deg; }

/* --------------------------------------------------------------- sections */

.section { padding-block: clamp(4.5rem, 10vw, 8rem); }
.section-tint {
  background:
    radial-gradient(60% 50% at 80% 0%, color-mix(in srgb, var(--signal-deep) 14%, transparent), transparent 70%),
    linear-gradient(180deg, transparent, rgb(255 255 255 / 1.5%) 30%, transparent);
  border-block: 1px solid var(--hairline);
}

.rail { display: flex; align-items: center; gap: 0.75rem; color: var(--primary); }
.rail p { font-size: 0.72rem; }
.rail-mark { width: 3px; height: 1.1rem; border-radius: 1px; background: var(--primary); box-shadow: 0 0 14px var(--primary); }
.rail-rule { flex: 1; height: 1px; background: linear-gradient(90deg, var(--border), transparent); }

.section-head { display: grid; gap: 1rem; max-width: 760px; margin-top: 1.4rem; margin-bottom: clamp(2rem, 5vw, 3.5rem); }
.section-head h2,
.split-copy h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); line-height: 1.04; }
.section-head p,
.split-copy > p { color: var(--muted); font-size: 1.08rem; max-width: 62ch; }
.section-head-row { display: flex; align-items: end; justify-content: space-between; max-width: none; }

/* --------------------------------------------------------- player switch */

.segmented {
  position: relative;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  margin-bottom: 1.6rem;
  padding: 4px;
  border: 1px solid var(--edge);
  border-radius: 6px;
  background: rgb(255 255 255 / 3%);
}
.segmented button {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.6rem 1.2rem;
  border: 0;
  border-radius: var(--radius);
  background: none;
  color: var(--muted);
  font: 600 0.95rem var(--font-ui);
  cursor: pointer;
  transition: color 200ms ease;
}
.segmented button svg { width: 1.1rem; height: 1.1rem; }
.segmented button[aria-selected="true"] { color: var(--primary-foreground); }
.segmented-thumb {
  position: absolute;
  inset: 4px auto 4px 4px;
  width: calc(50% - 4px);
  border-radius: var(--radius);
  background: var(--primary);
  box-shadow: 0 6px 24px -6px color-mix(in srgb, var(--primary) 70%, transparent);
  transition: translate 320ms var(--ease-out);
}
[data-switch][data-active="external"] .segmented-thumb { translate: 100% 0; }

.switch-panel {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center;
  animation: panel-in 420ms var(--ease-out);
}
.switch-panel[hidden] { display: none; }

.checklist { display: grid; gap: 1.1rem; margin: 0; padding: 0; list-style: none; }
.checklist li {
  position: relative;
  padding-left: 2rem;
  color: var(--muted);
}
.checklist li b { color: var(--foreground); font-weight: 600; }
.checklist li::before {
  position: absolute;
  top: 0.3rem;
  left: 0;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 45%, transparent);
  content: "";
}
.checklist li::after {
  position: absolute;
  top: 0.55rem;
  left: 0.33rem;
  width: 0.45rem;
  height: 0.25rem;
  border-bottom: 2px solid var(--primary);
  border-left: 2px solid var(--primary);
  content: "";
  rotate: -45deg;
}

.handoff { display: grid; gap: 1.2rem; }

.terminal {
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: #050806;
  box-shadow: 0 30px 70px -30px rgb(0 0 0 / 80%);
}
.terminal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--hairline);
  color: var(--muted);
}
.terminal-bar .data { font-size: 0.66rem; text-transform: none; letter-spacing: 0.02em; }
.badge {
  padding: 0.2rem 0.45rem;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  color: var(--primary);
  font-size: 0.6rem;
}
.terminal pre {
  min-height: 11.5em;
  margin: 0;
  padding: 1rem 1.1rem 1.2rem;
  overflow-x: auto;
  color: color-mix(in srgb, var(--foreground) 85%, var(--muted));
  font-size: 0.82rem;
  line-height: 1.75;
  letter-spacing: 0.01em;
  text-transform: none;
}
.terminal pre[data-typing] code::after {
  display: inline-block;
  width: 0.55em;
  height: 1.1em;
  margin-left: 1px;
  background: var(--primary);
  vertical-align: text-bottom;
  content: "";
  animation: caret 1s steps(1) infinite;
}

/* ------------------------------------------------------------ diagrams */

.handoff-diagram,
.topology { width: 100%; height: auto; overflow: visible; }
.node rect,
.service rect { fill: var(--card); stroke: var(--border); stroke-width: 1.2; }
.node-accent rect { fill: color-mix(in srgb, var(--primary) 8%, var(--card)); stroke: color-mix(in srgb, var(--primary) 65%, transparent); }
.node text,
.service text {
  fill: var(--foreground);
  font: 600 13px var(--font-ui);
  text-anchor: middle;
}
.node text.sub { fill: var(--muted); font: 500 9.5px var(--font-data); letter-spacing: 0.08em; text-transform: uppercase; }
.service text { font: 500 11.5px var(--font-data); letter-spacing: 0.06em; }
.lock rect,
.lock path { fill: none; stroke: var(--primary); stroke-width: 1.8; stroke-linecap: round; }
.lock rect { fill: color-mix(in srgb, var(--primary) 18%, transparent); }
.wire {
  fill: none;
  stroke: color-mix(in srgb, var(--primary) 55%, transparent);
  stroke-width: 1.4;
  stroke-dasharray: 4 5;
  animation: dash 1.2s linear infinite;
}
.wire-dim { stroke: color-mix(in srgb, var(--muted) 45%, transparent); animation-duration: 2s; }
.wire-back { stroke: color-mix(in srgb, var(--primary) 35%, transparent); }
.packet { fill: var(--primary); filter: drop-shadow(0 0 5px var(--primary)); }
.packet-dim { fill: color-mix(in srgb, var(--primary) 70%, var(--muted)); }
.packet-back { fill: var(--foreground); filter: drop-shadow(0 0 5px var(--foreground)); }
.label { fill: var(--muted); font: 500 9.5px var(--font-data); letter-spacing: 0.1em; text-anchor: middle; text-transform: uppercase; }

/* ---------------------------------------------------------------- library */

.split {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
}
.split-copy { display: grid; gap: 1.4rem; align-content: center; }

.pipeline { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-top: 0.4rem; }
.key {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.3rem;
  border: 1px solid var(--edge);
  border-bottom-width: 3px;
  border-radius: 5px;
  background: var(--card-raised);
  font-size: 0.9rem;
  text-transform: lowercase;
  animation: keypress 3.6s ease-in-out infinite;
}
.key:nth-child(2) { animation-delay: 0.18s; }
.key:nth-child(3) { animation-delay: 0.36s; }
.pipe-arrow { width: 2.2rem; height: 0.8rem; }
.pipe-arrow path { fill: none; stroke: var(--primary); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 3 4; animation: dash 0.8s linear infinite; }
.db { display: grid; justify-items: center; gap: 0.2rem; color: var(--primary); }
.db svg { width: 2rem; height: 2rem; fill: none; stroke: currentColor; stroke-width: 1.5; animation: glow 3.6s ease-in-out infinite 0.5s; }
.db small { font-size: 0.55rem; color: var(--muted); letter-spacing: 0.06em; text-transform: none; }
.hits {
  padding: 0.35rem 0.6rem;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 10%, transparent);
  color: var(--primary);
  font-size: 0.66rem;
  animation: pop 3.6s var(--ease-out) infinite 0.8s;
}

.facts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  margin: 0.6rem 0 0;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: var(--hairline);
  list-style: none;
}
.facts li { display: grid; gap: 0.3rem; padding: 0.9rem 1rem; background: var(--background); font-size: 0.92rem; }
.facts .data { color: var(--primary); font-size: 0.62rem; }

/* ------------------------------------------------------- browse walkthrough */

/* The window sticks while the steps scroll past it. Each step, once it
   reaches the middle of the viewport, becomes the frame the window shows. */
.walk-body {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: clamp(2rem, 5vw, 5rem);
  align-items: start;
}
.walk-stage { position: sticky; top: calc(64px + clamp(1rem, 5vh, 3.5rem)); }
.walk-frames { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #050806; }
.walk-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  opacity: 0;
  scale: 1.04;
  transition: opacity 600ms var(--ease-out), scale 1100ms var(--ease-out);
}
.walk-frame.is-active { z-index: 1; opacity: 1; scale: 1; }

.walk-steps { margin: 0; padding: 0; list-style: none; }
.walk-step {
  position: relative;
  display: grid;
  gap: 0.6rem;
  align-content: center;
  min-height: 64vh;
  padding: 3rem 0 3rem 1.6rem;
  opacity: 0.32;
  transition: opacity 500ms ease;
}
.walk-step.is-active { opacity: 1; }
.walk-step:first-child { min-height: 52vh; padding-top: 0; }
.walk-step:last-child { min-height: 52vh; padding-bottom: 0; }
.walk-step::before,
.walk-step::after {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 2px;
  border-radius: 1px;
  content: "";
}
.walk-step::before { background: var(--hairline); }
.walk-step::after { background: var(--primary); box-shadow: 0 0 12px var(--primary); transform-origin: top; scale: 1 0; }
.walk-step.is-active::after { transition: scale 600ms var(--ease-out); scale: 1 1; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The line fills as the step crosses the middle of the viewport. */
    .walk-step::after { animation: grow linear both; animation-timeline: view(); animation-range: cover 25% cover 65%; }
    .walk-step.is-active::after { transition: none; }
  }
}
.walk-step .data { color: var(--primary); font-size: 0.66rem; }
.walk-step h3 { font-size: clamp(1.45rem, 2.4vw, 1.95rem); letter-spacing: -0.02em; }
.walk-step p { max-width: 42ch; color: var(--muted); font-size: 1.02rem; }

/* --------------------------------------------------------------- playstate */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-bottom: 1.2rem; }
.panel {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: clamp(1.3rem, 3vw, 2rem);
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: linear-gradient(180deg, var(--card), color-mix(in srgb, var(--card) 40%, var(--background)));
}
.panel h3 { margin-top: 0.8rem; font-size: 1.25rem; }
.panel p { color: var(--muted); }

.sync-demo,
.skip-demo {
  display: grid;
  gap: 0.9rem;
  padding: 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background: #060a08;
}
.sync-row { display: grid; grid-template-columns: 6.2rem 1fr 3.4rem; align-items: center; gap: 0.9rem; }
.sync-label { color: var(--muted); font-size: 0.62rem; }
.sync-time,
.sync-state { justify-self: end; font-size: 0.66rem; color: var(--foreground); }
.sync-state { color: var(--primary); }
.bar { position: relative; height: 5px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / 8%); }
.bar-fill { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: inherit; background: var(--primary); animation: fill 9s linear infinite; }
.bar-fill-lag { animation-timing-function: steps(9, end); opacity: 0.75; }
.sync-beam { display: flex; justify-content: center; gap: 0.35rem; height: 1.2rem; }
.sync-beam i { width: 4px; height: 4px; margin-top: 0; border-radius: 50%; background: var(--primary); animation: beam 1s linear infinite; }
.sync-beam i:nth-child(2) { animation-delay: 0.33s; }
.sync-beam i:nth-child(3) { animation-delay: 0.66s; }

.seek { position: relative; height: 8px; margin-top: 0.6rem; border-radius: 4px; background: rgb(255 255 255 / 9%); }
.seg { position: absolute; top: 0; bottom: 0; border-radius: 2px; }
.seg-intro { left: 3%; width: 12%; background: color-mix(in srgb, var(--primary) 55%, transparent); }
.seg-recap { left: 17%; width: 6%; background: rgb(255 255 255 / 30%); }
.seg-credits { left: 88%; width: 11%; background: color-mix(in srgb, var(--primary) 55%, transparent); }
.seek-head {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px;
  height: 14px;
  margin: -7px 0 0 -7px;
  border: 2px solid var(--background);
  border-radius: 50%;
  background: var(--foreground);
  box-shadow: 0 0 0 1px var(--edge);
  animation: seek 6s ease-in-out infinite;
}
.seek-legend { display: grid; grid-template-columns: 3% 14% 71% 12%; color: var(--muted); font-size: 0.56rem; }
.seek-legend span:first-child { grid-column: 2; }
.seek-legend span:last-child { grid-column: 4; }
.skip-button {
  position: relative;
  justify-self: end;
  overflow: hidden;
  margin-top: 0.4rem;
  padding: 0.55rem 1rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 6%);
  font-weight: 600;
  font-size: 0.9rem;
}
.skip-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--primary) 26%, transparent); animation: skipfill 6s linear infinite; }
.skip-text { position: relative; }

.wide { max-width: 1100px; margin-inline: auto; }
/* The player bar is the subject here, so the caption moves to the top. */
.wide figcaption { top: 0.8rem; right: 0.8rem; bottom: auto; left: auto; }

/* --------------------------------------------------------------- companion */

.companion {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
}
.topology { max-width: 520px; }

.showcase-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.showcase-tabs button {
  padding: 0.45rem 0.8rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius);
  background: rgb(255 255 255 / 3%);
  color: var(--muted);
  font: 600 0.84rem var(--font-ui);
  cursor: pointer;
  transition: color 160ms ease, border-color 160ms ease, background-color 160ms ease;
}
.showcase-tabs button:hover { color: var(--foreground); }
.showcase-tabs button[aria-selected="true"] {
  border-color: color-mix(in srgb, var(--primary) 55%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--foreground);
}
.showcase-progress { height: 2px; margin: 0.9rem 0; overflow: hidden; border-radius: 1px; background: var(--hairline); }
.showcase-progress i { display: block; width: 0; height: 100%; background: var(--primary); }
.showcase-progress i[data-running] { animation: fill var(--showcase-ms, 6000ms) linear forwards; }
.showcase-stage { display: grid; }
.showcase-panel { grid-area: 1 / 1; animation: panel-in 480ms var(--ease-out); }
.showcase-panel[hidden] { display: none; }
.showcase-panel figcaption {
  position: static;
  padding: 0.9rem 1.1rem 1rem;
  border: 0;
  border-top: 1px solid var(--hairline);
  border-radius: 0;
  background: var(--card);
  backdrop-filter: none;
  color: var(--muted);
  font: 400 0.95rem/1.5 var(--font-ui);
  letter-spacing: 0;
  text-transform: none;
}
.showcase-panel figcaption b { color: var(--foreground); }

/* ------------------------------------------------------------------ bento */

.bento { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.tile {
  position: relative;
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 0.5rem;
  overflow: hidden;
  padding: 1.1rem 1.1rem 1.3rem;
  border: 1px solid var(--hairline);
  border-radius: 8px;
  background: var(--card);
  transition: border-color 200ms ease, translate 200ms var(--ease-out);
}
.tile:hover { border-color: color-mix(in srgb, var(--primary) 35%, var(--hairline)); translate: 0 -2px; }
/* A soft light follows the pointer across the tile. */
.tile::before {
  position: absolute;
  inset: 0;
  background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 0%), color-mix(in srgb, var(--primary) 13%, transparent), transparent 70%);
  opacity: 0;
  transition: opacity 320ms ease;
  content: "";
  pointer-events: none;
}
.tile:hover::before { opacity: 1; }
.tile > * { position: relative; }
.tile h3 { margin-top: 0.4rem; font-size: 1.05rem; letter-spacing: -0.01em; }
.tile p { color: var(--muted); font-size: 0.92rem; line-height: 1.5; }
.pict {
  display: grid;
  place-items: center;
  height: 118px;
  overflow: hidden;
  border: 1px solid var(--hairline);
  border-radius: 6px;
  background:
    radial-gradient(80% 90% at 50% 100%, color-mix(in srgb, var(--primary) 9%, transparent), transparent 70%),
    #060a08;
}

.pict-quick .code { display: flex; gap: 0.3rem; }
.pict-quick i {
  display: grid;
  place-items: center;
  width: 1.55rem;
  height: 2rem;
  border: 1px solid var(--edge);
  border-radius: 3px;
  background: var(--card-raised);
  font-style: normal;
  font-size: 0.9rem;
  opacity: 0.15;
  animation: digit 4.8s ease-out infinite;
}
.pict-quick i:nth-child(2) { animation-delay: 0.15s; }
.pict-quick i:nth-child(3) { animation-delay: 0.3s; }
.pict-quick i:nth-child(4) { animation-delay: 0.45s; }
.pict-quick i:nth-child(5) { animation-delay: 0.6s; }
.pict-quick i:nth-child(6) { animation-delay: 0.75s; }

.pict-spoiler { grid-template-columns: auto 1fr; gap: 0.8rem; padding-inline: 1.2rem; place-items: center start; }
.pict-spoiler .thumb {
  width: 5.2rem;
  height: 3.1rem;
  border-radius: var(--radius-media);
  background: linear-gradient(135deg, #2f5d48, #0d2419 45%, #6b3d1f);
  filter: blur(6px);
  animation: unblur 5s ease-in-out infinite;
}
.pict-spoiler .lines { display: grid; gap: 0.4rem; width: 100%; }
.pict-spoiler .lines i { height: 7px; border-radius: 2px; background: rgb(255 255 255 / 12%); }
.pict-spoiler .lines i:last-child { width: 60%; }
.pict-spoiler .reveal-chip {
  position: absolute;
  margin: 3.6rem 0 0 1.2rem;
  padding: 0.18rem 0.4rem;
  border-radius: var(--radius-media);
  background: var(--primary);
  color: var(--primary-foreground);
  font-size: 0.52rem;
}
.pict-spoiler { position: relative; }

.pict-quality { gap: 0.7rem; padding-inline: 1.3rem; }
.pict-quality .track { position: relative; width: 100%; height: 5px; border-radius: 3px; background: rgb(255 255 255 / 10%); }
.pict-quality .track i {
  position: absolute;
  top: 50%;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 12px var(--primary);
  animation: quality 6s var(--ease-out) infinite;
}
.pict-quality .scale { display: flex; justify-content: space-between; width: 100%; color: var(--muted); font-size: 0.56rem; }

.pict-keys { grid-auto-flow: column; gap: 0.4rem; }
.pict-keys kbd {
  display: grid;
  place-items: center;
  min-width: 2.3rem;
  height: 2.3rem;
  padding-inline: 0.5rem;
  border: 1px solid var(--edge);
  border-bottom-width: 3px;
  border-radius: 5px;
  background: var(--card-raised);
  font-size: 0.7rem;
  animation: keypress 3s ease-in-out infinite;
}
.pict-keys kbd:nth-of-type(2) { animation-delay: 0.5s; }
.pict-keys kbd:nth-of-type(3) { animation-delay: 1s; }
.pict-keys .key-w { animation-delay: 1.5s; color: var(--primary); }

.pict-accent .swatches { display: flex; gap: 0.65rem; }
.swatch {
  width: 2.3rem;
  height: 2.3rem;
  border: 2px solid transparent;
  border-radius: 6px;
  cursor: pointer;
  transition: transform 160ms var(--ease-out), border-color 160ms ease;
}
.swatch:hover { transform: translateY(-2px); }
.swatch[aria-pressed="true"] { border-color: var(--foreground); box-shadow: 0 0 22px -2px currentColor; }
.swatch-signal { background: #2bff88; color: #2bff88; }
.swatch-cobalt { background: #5da8ff; color: #5da8ff; }
.swatch-amber { background: #ffbd4a; color: #ffbd4a; }
.swatch-violet { background: #b69cff; color: #b69cff; }

.pict-next .next-card {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: var(--card-raised);
  font-size: 0.62rem;
}
.pict-next .ring { position: relative; width: 1.7rem; height: 1.7rem; }
.pict-next svg { rotate: -90deg; }
.pict-next circle { fill: none; stroke: var(--primary); stroke-width: 3.5; stroke-dasharray: 94.3; animation: drain 4s linear infinite; }

.pict-update svg { width: 3.4rem; height: 3.4rem; animation: spin 3.2s var(--ease-out) infinite; }
.pict-update path { fill: none; stroke: var(--primary); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

.pict-admin .menu {
  display: grid;
  gap: 2px;
  min-width: 12rem;
  padding: 0.35rem;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: var(--card-raised);
  box-shadow: 0 14px 30px -10px rgb(0 0 0 / 80%);
  font-size: 0.56rem;
}
.pict-admin i { padding: 0.45rem 0.55rem; border-radius: 3px; color: var(--muted); font-style: normal; }
.pict-admin i.on { background: color-mix(in srgb, var(--primary) 16%, transparent); color: var(--foreground); animation: highlight 3s ease-in-out infinite; }

/* ------------------------------------------------------------- highlights */

/* What sets MediaFlick apart. Same tiles as Details, larger, with
   a tag that says whether the Companion is needed. Each pictogram acts out
   the feature: a request moves through its states, a franchise's gaps ask to
   be filled, the timeline's "today" marker pulses between past and next. */
.feature-grid { margin-top: 0; }
.feature-wide { grid-column: span 2; }
.feature { grid-template-rows: auto auto auto 1fr; }
.feature .pict { height: 150px; }
.feature h3 { margin-top: 0.1rem; font-size: 1.2rem; line-height: 1.25; }
.feature p a { color: var(--foreground); text-decoration-color: color-mix(in srgb, var(--primary) 60%, transparent); text-underline-offset: 3px; }
.section-head p b { color: var(--foreground); font-weight: 600; }
.feature-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.6rem;
  color: var(--muted);
  font-size: 0.6rem;
}
.feature-tag::before { width: 6px; height: 6px; border-radius: 50%; background: var(--muted); content: ""; }
.feature-tag[data-needs="companion"] { color: var(--primary); }
.feature-tag[data-needs="companion"]::before { background: var(--primary); box-shadow: 0 0 8px var(--primary); }

/* Poster stand-ins share one gradient so the pictograms read as artwork. */
.pict-status .poster,
.pict-franchise .posters i {
  border-radius: var(--radius-media);
  background: linear-gradient(160deg, #2f5d48, #0d2419 55%, #6b3d1f);
  box-shadow: inset 0 0 0 1px var(--edge);
}

.pict-status { grid-template-columns: auto minmax(0, 15rem); gap: 1rem; justify-content: center; }
.pict-status .poster { width: 4.2rem; height: 6.2rem; }
.pict-status .status-card { display: grid; gap: 0.7rem; }
.status-title { display: grid; gap: 0.35rem; }
.status-title i { height: 7px; border-radius: 2px; background: rgb(255 255 255 / 16%); }
.status-title i:last-child { width: 55%; background: rgb(255 255 255 / 9%); }
.states { display: grid; font-size: 0.62rem; }
.states b {
  grid-area: 1 / 1;
  justify-self: start;
  padding: 0.3rem 0.55rem;
  border: 1px solid var(--edge);
  border-radius: var(--radius-media);
  background: rgb(255 255 255 / 6%);
  font-weight: 500;
  opacity: 0;
  animation: state 8s var(--ease-out) infinite;
}
.states b:nth-child(2) { animation-delay: 2s; }
.states b:nth-child(3) { animation-delay: 4s; }
.states b.done { border-color: transparent; background: var(--primary); color: var(--primary-foreground); animation-delay: 6s; }
.status-bar { height: 4px; overflow: hidden; border-radius: 2px; background: rgb(255 255 255 / 8%); }
.status-bar i { display: block; width: 0; height: 100%; background: var(--primary); box-shadow: 0 0 10px var(--primary); animation: download 8s linear infinite; }

.pict-franchise { gap: 0.8rem; align-content: center; }
.pict-franchise .posters { display: flex; gap: 0.45rem; }
.pict-franchise .posters i { width: 2.6rem; height: 3.9rem; }
.pict-franchise .posters i.miss {
  border: 1px dashed color-mix(in srgb, var(--muted) 70%, transparent);
  background: transparent;
  box-shadow: none;
  animation: gap 4s ease-in-out infinite;
}
.pict-franchise .posters i.miss:last-child { animation-delay: 0.3s; }
.franchise-row { display: flex; align-items: center; gap: 0.9rem; color: var(--muted); font-size: 0.58rem; }
.franchise-row .ask {
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
  animation: highlight 4s ease-in-out infinite;
}

.pict-timeline { gap: 0.8rem; align-content: center; padding-inline: 1.2rem; }
.timeline { position: relative; display: flex; align-items: center; justify-content: space-between; width: 100%; }
.timeline::before { position: absolute; inset: 50% 0 auto; height: 1px; background: var(--border); content: ""; }
.timeline i { position: relative; width: 12px; height: 12px; border-radius: 50%; }
.timeline .got { background: var(--primary); box-shadow: 0 0 10px color-mix(in srgb, var(--primary) 70%, transparent); }
.timeline .gap { border: 1px dashed var(--foreground); background: var(--background); animation: gap 4s ease-in-out infinite; }
.timeline .soon { border: 1.5px solid color-mix(in srgb, var(--primary) 60%, transparent); background: var(--background); }
.timeline .today {
  position: relative;
  padding: 0.2rem 0.4rem;
  border-radius: var(--radius-media);
  background: var(--foreground);
  color: var(--background);
  font-size: 0.52rem;
}
.timeline .today::after { position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 1px var(--foreground); content: ""; animation: ping 2.4s var(--ease-out) infinite; }
.timeline-legend { display: flex; justify-content: space-between; width: 100%; color: var(--muted); font-size: 0.52rem; }

.pict-seasons { gap: 0.9rem; align-content: center; }
.seasons { display: flex; gap: 0.35rem; }
.seasons i {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 1.7rem;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--foreground);
  font-style: normal;
  font-size: 0.58rem;
}
.seasons i.miss { border: 1px dashed color-mix(in srgb, var(--muted) 70%, transparent); background: transparent; color: var(--muted); animation: gap 5s ease-in-out infinite; }
.season-ask {
  position: relative;
  overflow: hidden;
  padding: 0.4rem 0.75rem;
  border: 1px solid color-mix(in srgb, var(--primary) 45%, transparent);
  border-radius: var(--radius);
  color: var(--foreground);
  font-size: 0.56rem;
}
.season-ask span:last-child { position: relative; }
.season-fill { position: absolute; inset: 0 auto 0 0; width: 0; background: color-mix(in srgb, var(--primary) 26%, transparent); animation: skipfill 5s linear infinite; }

.pict-lists { gap: 0.55rem; align-content: center; padding-inline: 1.1rem; }
.list-row { display: grid; grid-template-columns: 4.6rem 1fr 1.4rem; align-items: center; gap: 0.6rem; width: 100%; }
.list-row b { color: var(--foreground); font-size: 0.52rem; font-weight: 500; }
.list-row small { justify-self: end; color: var(--primary); font-size: 0.56rem; }
.meter { height: 5px; overflow: hidden; border-radius: 3px; background: rgb(255 255 255 / 8%); }
.meter i { display: block; width: var(--to); height: 100%; border-radius: inherit; background: var(--primary); animation: meter 6s var(--ease-out) infinite; }
.list-row:nth-child(1) .meter i { --to: 58%; }
.list-row:nth-child(2) .meter i { --to: 82%; animation-delay: 0.25s; }
.list-row:nth-child(3) .meter i { --to: 36%; animation-delay: 0.5s; }

.pict-letterboxd { grid-template-columns: auto 1fr; gap: 0.9rem; padding-inline: 1.2rem; place-items: center start; }
.pict-letterboxd .avatar {
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #6b3d1f, #2f5d48);
  box-shadow: 0 0 0 2px var(--background), 0 0 0 3px color-mix(in srgb, var(--primary) 55%, transparent);
}
.review { display: grid; gap: 0.35rem; width: 100%; }
.review > .data { color: var(--muted); font-size: 0.52rem; }
/* Muted stars with lit ones drawn over them, wiped in to four and a half. */
.stars { position: relative; justify-self: start; color: rgb(255 255 255 / 14%); font-size: 1rem; letter-spacing: 0.1em; line-height: 1; }
.stars::after {
  position: absolute;
  inset: 0;
  color: var(--primary);
  clip-path: inset(0 100% 0 0);
  content: attr(data-stars);
  animation: stars 5s var(--ease-out) infinite;
}
.review .lines { display: grid; gap: 0.35rem; }
.review .lines i { height: 6px; border-radius: 2px; background: rgb(255 255 255 / 12%); }
.review .lines i:last-child { width: 70%; }

.pict-search .pipeline { margin: 0; justify-content: center; }

.pict-mpv { gap: 0.9rem; align-content: center; }
.mini-switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 3px;
  border: 1px solid var(--edge);
  border-radius: 5px;
  background: rgb(255 255 255 / 3%);
  font-size: 0.6rem;
}
.mini-switch span { position: relative; padding: 0.45rem 0.9rem; text-align: center; }
.mini-thumb {
  position: absolute;
  inset: 3px auto 3px 3px;
  width: calc(50% - 3px);
  border-radius: var(--radius);
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--primary) 60%, transparent);
  animation: toggle 6s var(--ease-out) infinite;
}
.mpv-notes { display: flex; gap: 1rem; color: var(--muted); font-size: 0.52rem; }

/* ---------------------------------------------------------------- gallery */

.gallery {
  display: grid;
  grid-auto-columns: min(78vw, 560px);
  grid-auto-flow: column;
  gap: 1rem;
  margin: 0;
  padding: 0.5rem max(var(--gutter), calc((100vw - var(--shell)) / 2)) 1.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-padding-inline: max(var(--gutter), calc((100vw - var(--shell)) / 2));
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  list-style: none;
}
.gallery li { scroll-snap-align: start; }
.shot {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
  cursor: zoom-in;
  transition: border-color 200ms ease, translate 260ms var(--ease-out);
}
.shot:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--edge)); translate: 0 -3px; }
.shot img { width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover; }
/* Each shot pans slightly as it crosses the strip, so the row has depth. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .shot img { scale: 1.1; animation: pan linear both; animation-timeline: view(inline); }
  }
}
.shot span {
  position: absolute;
  left: 0.7rem;
  bottom: 0.7rem;
  padding: 0.28rem 0.5rem;
  border-radius: var(--radius-media);
  background: color-mix(in srgb, var(--background) 82%, transparent);
  backdrop-filter: blur(8px);
  font-size: 0.62rem;
}
.gallery-nav { display: flex; gap: 0.5rem; }

.lightbox {
  width: min(96vw, 1600px);
  max-width: none;
  max-height: 94vh;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--card);
  color: var(--foreground);
}
.lightbox::backdrop { background: rgb(2 4 3 / 82%); backdrop-filter: blur(6px); }
.lightbox[open] { animation: panel-in 300ms var(--ease-out); }
.lightbox img { width: 100%; height: auto; max-height: 92vh; object-fit: contain; border-radius: 8px; }
.lightbox-close { position: absolute; top: -0.9rem; right: -0.9rem; z-index: 1; background: var(--card); }

/* With view transitions, the thumbnail itself grows into the lightbox and
   shrinks back on close; the dialog's own entrance would fight that. */
:root:active-view-transition .lightbox[open] { animation: none; }
::view-transition-group(shot) { animation-duration: 460ms; animation-timing-function: var(--ease-out); }
::view-transition-old(shot),
::view-transition-new(shot) { height: 100%; object-fit: cover; animation-duration: 200ms; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 300ms; }

/* --------------------------------------------------------------- download */

.download { position: relative; overflow: hidden; text-align: center; }
.download::before {
  position: absolute;
  inset: 20% 10% auto;
  height: 520px;
  background: radial-gradient(50% 50% at 50% 50%, color-mix(in srgb, var(--primary) 14%, transparent), transparent 70%);
  content: "";
  z-index: -1;
}
.download-head { display: grid; justify-items: center; gap: 1rem; }
.download-icon { width: 88px; height: 88px; filter: drop-shadow(0 20px 40px color-mix(in srgb, var(--primary) 25%, transparent)); translate: 0 var(--bob); animation: bob 6s ease-in-out infinite; }
.download-head h2 { font-size: clamp(2.4rem, 6vw, 4.2rem); letter-spacing: -0.04em; }
.download-head p { color: var(--muted); font-size: 1.08rem; }
.download-head p .data { display: inline-block; margin-left: 0.4rem; color: var(--primary); }

.platforms { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin-top: 2.6rem; text-align: left; }
.platform {
  position: relative;
  display: grid;
  gap: 0.35rem;
  padding: 1.4rem;
  border: 1px solid var(--edge);
  border-radius: 8px;
  background: var(--card);
  text-decoration: none;
  transition: border-color 200ms ease, translate 200ms var(--ease-out), box-shadow 200ms ease;
}
.platform:hover { border-color: color-mix(in srgb, var(--primary) 55%, var(--edge)); translate: 0 -3px; }
.platform > svg { width: 2rem; height: 2rem; margin-bottom: 0.5rem; color: var(--foreground); }
.platform-name { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; }
.platform .data { color: var(--muted); font-size: 0.64rem; }
.platform-note { margin-top: 0.4rem; color: var(--muted); font-size: 0.92rem; }
.platform[data-recommended] {
  border-color: color-mix(in srgb, var(--primary) 60%, transparent);
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 9%, var(--card)), var(--card));
  box-shadow: 0 30px 70px -40px color-mix(in srgb, var(--primary) 60%, transparent);
}
.platform[data-recommended]::after {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  padding: 0.25rem 0.5rem;
  border-radius: var(--radius-media);
  background: var(--primary);
  color: var(--primary-foreground);
  font: 600 0.58rem var(--font-data);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  content: "Your system";
}
.download-more { margin-top: 2rem; color: var(--muted); }
.download-more a { color: var(--foreground); text-decoration-color: color-mix(in srgb, var(--primary) 60%, transparent); text-underline-offset: 3px; }

/* ----------------------------------------------------------------- footer */

.footer { padding-block: 3rem 3.5rem; border-top: 1px solid var(--hairline); color: var(--muted); }
.footer-grid { display: grid; grid-template-columns: 1.2fr auto; gap: 2rem 3rem; }
.footer-note { max-width: 44ch; margin-top: 0.8rem; font-size: 0.92rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-content: start; }
.footer-links a { font-size: 0.92rem; text-decoration: none; }
.footer-links a:hover { color: var(--foreground); }
.footer-credits { grid-column: 1 / -1; padding-top: 1.5rem; border-top: 1px solid var(--hairline); font-size: 0.8rem; }

/* ------------------------------------------------------------ responsive */

@media (max-width: 1080px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .companion { grid-template-columns: 1fr; }
  .topology { margin-inline: auto; }
}

@media (max-width: 900px) {
  .split,
  .switch-panel,
  .walk-body,
  .duo { grid-template-columns: 1fr; }
  /* The window pins under the chrome and the steps read beneath it. */
  .walk-body { gap: 1.5rem; }
  .walk-stage { top: 64px; z-index: 2; padding-bottom: 1rem; background: linear-gradient(180deg, var(--background) 88%, transparent); }
  .walk-step { align-content: start; min-height: 46vh; padding-block: 1.5rem 2rem; }
  .walk-step:first-child,
  .walk-step:last-child { min-height: 40vh; }
  .platforms { grid-template-columns: 1fr; }
  .section-head-row { align-items: start; }
}

@media (max-width: 560px) {
  .bento { grid-template-columns: 1fr; }
  .feature-wide { grid-column: auto; }
  .pict-search .pipeline { transform: scale(0.85); }
  .facts { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .segmented button { padding-inline: 0.8rem; font-size: 0.86rem; }
  .gallery-nav { display: none; }
  .hero-meta { flex-wrap: wrap; }
}

/* ------------------------------------------------------------- reveal */

/* Hidden only when scripts run, so a page without JavaScript is complete. A
   late fallback reveals everything if the observer never fires.

   Elements enter the way they are built: blocks rise, rails draw from their
   mark, headings wipe up out of their baseline, words rise one by one, screens
   lock on with the app's corner brackets, and the topology's services pop in
   along their wires. */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  .reveal:not(.is-visible) {
    opacity: 0;
    translate: 0 28px;
    animation: reveal-fallback 0s 4s forwards;
  }
  .reveal {
    transition: opacity 700ms var(--ease-out), translate 800ms var(--ease-out);
    transition-delay: var(--reveal-delay, 0ms);
  }

  /* draw: the rule extends from the mark, then the label follows. */
  .reveal[data-reveal="draw"]:not(.is-visible) { opacity: 1; translate: 0 0; }
  .reveal[data-reveal="draw"] .rail-rule { transform-origin: left; transition: scale 1000ms var(--ease-out) 100ms; }
  .reveal[data-reveal="draw"] .rail-mark { transition: opacity 400ms ease, box-shadow 700ms ease 300ms; }
  .reveal[data-reveal="draw"] p { transition: opacity 500ms ease 220ms, translate 600ms var(--ease-out) 220ms; }
  .reveal[data-reveal="draw"]:not(.is-visible) .rail-rule { scale: 0 1; }
  .reveal[data-reveal="draw"]:not(.is-visible) .rail-mark { opacity: 0; box-shadow: none; }
  .reveal[data-reveal="draw"]:not(.is-visible) p { opacity: 0; translate: -10px 0; }

  /* clip: the heading wipes up; whatever sits with it fades in after. The
     clip sits on the heading, not the observed wrapper: a clipped box does
     not intersect the viewport as far as the observer is concerned. */
  .reveal[data-reveal="clip"]:not(.is-visible) { opacity: 1; translate: 0 0; }
  .reveal[data-reveal="clip"] > h2 {
    clip-path: inset(-0.25em -0.1em -0.25em -0.1em);
    transition: clip-path 900ms var(--ease-out), translate 900ms var(--ease-out);
  }
  .reveal[data-reveal="clip"]:not(.is-visible) > h2 {
    clip-path: inset(-0.25em -0.1em 100% -0.1em);
    translate: 0 0.35em;
  }
  .reveal[data-reveal="clip"] > :not(h2) { transition: opacity 700ms var(--ease-out) 250ms, translate 800ms var(--ease-out) 250ms; }
  .reveal[data-reveal="clip"]:not(.is-visible) > :not(h2) { opacity: 0; translate: 0 20px; }

  /* words: each word rises out of its line, left to right, line by line. */
  .reveal[data-reveal="words"]:not(.is-visible) { opacity: 1; translate: 0 0; }
  .reveal[data-reveal="words"] .w { transition: translate 1000ms var(--ease-out), opacity 600ms ease; transition-delay: calc((var(--l, 0) + var(--i, 0)) * 85ms); }
  .reveal[data-reveal="words"]:not(.is-visible) .w { translate: 0 115%; opacity: 0; }

  /* lock: the screen settles from slightly large and the brackets flash once. */
  .reveal[data-reveal="lock"] { transition: opacity 800ms var(--ease-out), translate 900ms var(--ease-out), scale 1100ms var(--ease-out); }
  .reveal[data-reveal="lock"]:not(.is-visible) { translate: 0 24px; scale: 0.97; }
  .reveal[data-reveal="lock"].is-visible .brackets { animation: lock-on 1300ms var(--ease-out) 350ms; }

  /* wire: the services arrive one after another along their wires. */
  .reveal[data-reveal="wire"] .service { transition: opacity 500ms ease, translate 700ms var(--ease-out); }
  .reveal[data-reveal="wire"] .service:nth-of-type(2) { transition-delay: 90ms; }
  .reveal[data-reveal="wire"] .service:nth-of-type(3) { transition-delay: 180ms; }
  .reveal[data-reveal="wire"] .service:nth-of-type(4) { transition-delay: 270ms; }
  .reveal[data-reveal="wire"] .service:nth-of-type(5) { transition-delay: 360ms; }
  .reveal[data-reveal="wire"]:not(.is-visible) .service { opacity: 0; translate: -24px 0; }
}

/* --------------------------------------------------------------- motion */

@keyframes ping { 0% { opacity: 0.7; scale: 1; } 100% { opacity: 0; scale: 3; } }
@keyframes bob { 0%, 100% { --bob: 0px; } 50% { --bob: -10px; } }
@keyframes drift { to { --drift: var(--drift-to, 0px); } }
@keyframes recede { to { opacity: 0; translate: 0 -48px; scale: 0.96; } }
@keyframes grow { from { scale: 1 0; } to { scale: 1 1; } }
@keyframes pan { from { translate: -4.5% 0; } to { translate: 4.5% 0; } }
@keyframes text-in { from { opacity: 0; translate: 0 7px; } }
@keyframes lock-on { 0% { opacity: 0; scale: 1.08; } 22% { opacity: 1; scale: 1; } 68% { opacity: 1; scale: 1; } 100% { opacity: 0; scale: 1.02; } }
@keyframes drain { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 94.3; } }
@keyframes count { from { --countdown: 5; } to { --countdown: 0; } }
@keyframes marquee { to { transform: translateX(-50%); } }
@keyframes panel-in { from { opacity: 0; translate: 0 14px; } }
@keyframes caret { 50% { opacity: 0; } }
@keyframes dash { to { stroke-dashoffset: -18; } }
@keyframes keypress { 0%, 8%, 100% { translate: 0 0; border-bottom-width: 3px; } 4% { translate: 0 2px; border-bottom-width: 1px; border-color: var(--primary); } }
@keyframes glow { 0%, 10%, 100% { filter: none; } 20% { filter: drop-shadow(0 0 8px var(--primary)); } }
@keyframes pop { 0%, 20% { opacity: 0; scale: 0.85; } 30%, 90% { opacity: 1; scale: 1; } 100% { opacity: 0; } }
@keyframes fill { to { width: 100%; } }
@keyframes beam { from { translate: 0 0; opacity: 1; } to { translate: 0 1rem; opacity: 0; } }
@keyframes seek { 0% { left: 1%; } 20% { left: 15%; } 24%, 40% { left: 15.5%; } 100% { left: 86%; } }
@keyframes skipfill { 0%, 10% { width: 0; } 45% { width: 100%; } 46%, 100% { width: 0; } }
@keyframes digit { 0% { opacity: 0.15; translate: 0 6px; } 10%, 80% { opacity: 1; translate: 0 0; border-color: color-mix(in srgb, var(--primary) 55%, transparent); } 100% { opacity: 0.15; } }
@keyframes unblur { 0%, 45% { filter: blur(6px); } 55%, 90% { filter: blur(0); } 100% { filter: blur(6px); } }
@keyframes quality { 0%, 15% { left: 100%; } 30%, 50% { left: 50%; } 65%, 85% { left: 8%; } 100% { left: 100%; } }
@keyframes spin { from { rotate: 0deg; } to { rotate: 360deg; } }
@keyframes highlight { 0%, 100% { background: color-mix(in srgb, var(--primary) 16%, transparent); } 50% { background: color-mix(in srgb, var(--primary) 30%, transparent); } }
@keyframes reveal-fallback { to { opacity: 1; translate: 0 0; } }
@keyframes state { 0% { opacity: 0; translate: 0 6px; } 4%, 23% { opacity: 1; translate: 0 0; } 27%, 100% { opacity: 0; translate: 0 -6px; } }
@keyframes download { 0%, 50% { width: 0; } 74%, 100% { width: 100%; } }
@keyframes gap { 0%, 100% { border-color: color-mix(in srgb, var(--muted) 70%, transparent); } 50% { border-color: var(--primary); box-shadow: 0 0 12px -2px var(--primary); } }
@keyframes meter { 0% { width: 0; } 30%, 100% { width: var(--to); } }
@keyframes stars { 0%, 10% { clip-path: inset(0 100% 0 0); } 45%, 90% { clip-path: inset(0 10% 0 0); } 100% { clip-path: inset(0 100% 0 0); } }
@keyframes toggle { 0%, 40% { translate: 0 0; } 50%, 90% { translate: 100% 0; } 100% { translate: 0 0; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .ticker-track { animation: none; }
  .packet { display: none; }
  .spine-line i,
  .walk-step::after { animation: none; }
  .spine-line i { scale: 1 1; opacity: 0.35; }
  .walk-frame,
  .walk-step,
  .float-chip { transition: none; }
  /* The pictograms rest on their end state: the request in the library, the
     review at four and a half stars. */
  .states b,
  .stars::after { animation: none; }
  .states b.done { opacity: 1; }
  .stars::after { clip-path: inset(0 10% 0 0); }
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}