/* Story frame: loader, wordmark, progress rail, grain + vignette.
   Same language as the industrial-design story pages (Aqua Nova). Transform/opacity only. */
:root {
  --fr-ground: #1B2554;
  --fr-ink: #EDEBE6;
  --fr-quiet: rgba(237,235,230,.62);
  --fr-faint: rgba(237,235,230,.45);
  --fr-accent: #F8DB21;
}

/* the loader paints first: the page stays hidden under it until the assets are decoded */
html.ld { overflow: hidden; background: var(--fr-ground); }
html.ld body > :not(.ldr) { visibility: hidden; }
.ldr { position: fixed; inset: 0; z-index: 1000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px;
       background: var(--fr-ground); color: var(--fr-ink); transition: opacity .7s ease, visibility 0s linear .7s; }
html:not(.ld) .ldr { opacity: 0; visibility: hidden; pointer-events: none; }
.ldr p { margin: 0; opacity: 0; transition: opacity .5s; }
.ldr.f p { opacity: 1; }
.ldr-t { font: 600 16px/1 'Archivo', system-ui, sans-serif; font-stretch: 80%; letter-spacing: .01em; }
.ldr-b { width: min(220px, 52vw); height: 1px; background: color-mix(in srgb, var(--fr-ink) 14%, transparent); }
.ldr-b i { display: block; height: 100%; background: var(--fr-accent); transform-origin: 0 0; transform: scaleX(var(--ld, 0)); transition: transform .3s ease-out; }
.ldr-n { font: 400 11px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .04em; color: var(--fr-faint); font-variant-numeric: tabular-nums; }

/* a project's own loader (mountFrame({ loader })): its mark moving gently, its wordmark, the hairline bar in its
   accent, the %. Its ground shows from the first paint: the page puts class="ld xp-ldc" and --ldr-ground on <html>. */
html.ld.xp-ldc { background: var(--ldr-ground); }
.ldr.ldr-c { --ldr-size: 96px; background: var(--ldr-ground, var(--fr-ground)); color: var(--ldr-ink, var(--fr-ink)); }
.ldr-c .ldr-m { width: var(--ldr-w, var(--ldr-size)); height: var(--ldr-size); margin-bottom: 10px; position: relative; transition: opacity .5s; }
.ldr-c .ldr-m > svg, .ldr-c .ldr-m > img { display: block; width: 100%; height: 100%; overflow: visible; }
.ldr-c .ldr-wait { opacity: 0 !important; }
.ldr-c .ldr-t { transition: opacity .4s; }
.ldr-c .ldr-t span { color: var(--ldr-accent, var(--fr-accent)); }
.ldr-c .ldr-b { background: color-mix(in srgb, var(--ldr-ink, var(--fr-ink)) 14%, transparent); }
.ldr-c .ldr-b i { background: var(--ldr-accent, var(--fr-accent)); transition: none; } /* frame.js eases the number itself */
.ldr-c .ldr-n { font: 400 11px/1 'Martian Mono', ui-monospace, monospace; letter-spacing: .06em; color: var(--ldr-faint, var(--fr-faint)); }
/* turn: the Think First sway; spin: a slow full turn; bob: a hop over its own flat shadow */
.ldr-a-turn > * { animation: ldr-turn 3.2s ease-in-out infinite; }
@keyframes ldr-turn { 0%, 100% { transform: rotate(-8deg) scale(.96); } 50% { transform: rotate(8deg) scale(1.04); } }
.ldr-a-spin > * { animation: ldr-spin 9s linear infinite; }
@keyframes ldr-spin { to { transform: rotate(360deg); } }
.ldr-a-bob > * { transform-origin: 50% 100%; animation: ldr-bob 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
.ldr-a-bob::after { content: ''; position: absolute; left: 30%; right: 22%; bottom: -7px; height: 6px; border-radius: 50%;
  background: var(--ldr-ink, var(--fr-ink)); opacity: .1; animation: ldr-bob-s 1.5s cubic-bezier(.45, 0, .55, 1) infinite; }
@keyframes ldr-bob { 0%, 100% { transform: translateY(0) scale(1.03, .97); } 12% { transform: translateY(0) scale(1, 1); } 50% { transform: translateY(-12px) scale(.99, 1.01); } 88% { transform: translateY(0) scale(1, 1); } }
@keyframes ldr-bob-s { 0%, 100% { transform: scaleX(1); opacity: .12; } 50% { transform: scaleX(.72); opacity: .06; } }
/* rise: [data-fly] leaves up and to the right and comes back in from the lower left; [data-trace] draws with the load */
.ldr-a-rise [data-fly] { animation: ldr-fly 2.4s cubic-bezier(.6, 0, .3, 1) infinite; }
@keyframes ldr-fly { 0%, 48% { transform: translate(0, 0); opacity: 1; } 70% { transform: translate(26px, -26px); opacity: 0; }
  70.01% { transform: translate(-26px, 26px); opacity: 0; } 100% { transform: translate(0, 0); opacity: 1; } }
.ldr-a-rise [data-trace] { stroke-dasharray: 1 1; stroke-dashoffset: calc(1 - var(--ld, 0)); }

/* chrome around the story */
.fr-mark, .fr-rail { position: fixed; pointer-events: none; transition: opacity .7s ease; }
.mark.fr-mark { z-index: 9; left: 5vw; top: 4.2vh; margin: 0; color: var(--fr-ink); font: 600 16px/1 'Archivo', system-ui, sans-serif; font-stretch: 80%; letter-spacing: .01em; opacity: 0; }
.rail.fr-rail { z-index: 9; right: 18px; top: 30vh; height: 40vh; width: 1px; background: color-mix(in srgb, var(--fr-ink) 12%, transparent); opacity: 0; }
.rail.fr-rail i { position: absolute; left: 0; top: 0; width: 1px; height: 100%; background: var(--fr-accent); transform-origin: 0 0; transform: scaleY(var(--p, 0)); will-change: transform; }
html.fr-on .mark.fr-mark, html.fr-on .rail.fr-rail { opacity: .9; }

/* atmosphere */
.fr-vignette, .fr-grain { position: fixed; pointer-events: none; }
.fr-vignette { inset: 0; z-index: 8; background: radial-gradient(120% 95% at 50% 46%, transparent 52%, rgba(6,5,4,.38) 82%, rgba(4,3,2,.62)); }
@keyframes fr-grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-5.17%, 3.45%); } 40% { transform: translate(3.45%, -5.17%); } 60% { transform: translate(-3.45%, -1.72%); } 80% { transform: translate(5.17%, 5.17%); } }
.fr-grain { inset: -8%; z-index: 8; opacity: .085; mix-blend-mode: overlay;
  will-change: transform;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

@media (max-width: 700px) { .rail.fr-rail { right: 8px; } .mark.fr-mark { left: 6vw; } }
@media (prefers-reduced-motion: reduce) {
  .ldr, .ldr p, .ldr-b i, .fr-mark, .fr-rail { transition: none; }
  .ldr-m > *, .ldr-m::after, .ldr-m [data-fly] { animation: none !important; }
  .ldr-m [data-move] { display: none; }
  .ldr-a-rise [data-trace] { transition: none; }
}
/* touch: the chapter ticks are 44px targets (a 9px dash drawn in the middle), the rail in from the screen edge;
   on an upright phone the chapter names stay off (they would sit on the slide) */
@media (pointer: coarse) {
  .rail.fr-rail { right: max(14px, calc(env(safe-area-inset-right, 0px) + 10px)); }
  .fr-rail .rail__t { width: 44px; height: 44px; margin-top: -22px; right: -22px; }
  .fr-rail .rail__t::before { left: 50%; right: auto; width: 9px; margin-left: -4.5px; top: 21px; }
  .fr-rail .rail__t span { right: 30px; }
  .mark.fr-mark { left: max(5vw, calc(env(safe-area-inset-left, 0px) + 12px)); top: max(4.2vh, calc(env(safe-area-inset-top, 0px) + 14px)); }
}
html.xp-phone .fr-rail .rail__t span { display: none; }