/* ==========================================================================
   The brand splash, version « La tuile » (splash-scene-tuile.js,
   splash-scene-tuile.test.mjs). The owner's film from 9.0 s to its end,
   compressed for the web: a faint calendar of the current month under a
   light beam, a square seed that becomes the blank tile in 3D, the N written
   onto it, the tile sliding to its place with O·T·A rising in behind it, the
   period and the whispered QUÉBEC above it, a star glint and a sheen, then
   the stage clears while the lockup pulls back to its rest size and
   « Votre date. Votre acte. Votre prix. » blurs in on one line.
   The exit is « La coupe · Trame »'s (owner, 2026-10-07: « phase in tuile,
   phase out one »): the phrases retract into slots slanted at the coupe's
   T/A cut, the blade reopens along that cut, the lockup lifts into the
   header's #page-logo and the navy stage parts in two panels. Its tokens are
   the coupe's (styles.css .s14), held equal by splash-scene-tuile.test.mjs.

   Every value is a token of the scene block below. Every time is a token
   multiplied by --tu-tempo: 1 is the web's ~4.85 s; 1.25 matches the film.
   The adapter's DURATION / REST_AT are recomputed from this block by the test.
   ========================================================================== */

.tu {
  /* Lockup sizing: the coupe's splash scale (styles.css .s14). The build
     plays at the film's size (~57 % of a 1280 px stage); during the clear the
     row pulls back to --tu-rest-scale (~45 %), about its own centre. */
  --tu-logo-scale: 1;
  --tu-rest-scale: .8;
  --lockup-tile: calc(clamp(100px, 15vw, 240px) * var(--tu-logo-scale));
  --lockup-logo-height: calc(var(--lockup-tile) * var(--logo-height-ratio));
  --lockup-logo-width: calc(var(--lockup-logo-height) * var(--logo-ratio));

  /* The master lockup, in its own pixels (assets/*-full.webp, 2189 × 728). */
  --tu-master-w: 2189; --tu-master-h: 728;
  --tu-n-w: 840;
  --tu-tile-x0: 179; --tu-tile-x1: 823; --tu-tile-y0: 91; --tu-tile-y1: 668;
  --tu-ink-l: 178; --tu-ink-r: 2012;
  --tu-dot-x0: 1909; --tu-dot-y0: 490; --tu-dot-w: 111; --tu-dot-h: 102;
  --tu-star-x: 449; --tu-star-y: 98;
  --tu-optic: calc(.5 - (var(--tu-ink-l) + var(--tu-ink-r)) / 2 / var(--tu-master-w));
  /* While the N is alone, the TILE sits at the stage centre. */
  --tu-shift-x: calc(var(--lockup-logo-width) * (.5 - (var(--tu-tile-x0) + var(--tu-tile-x1)) / 2 / var(--tu-master-w) - var(--tu-optic)));
  --tu-shift-y: calc(var(--lockup-logo-height) * (.5 - (var(--tu-tile-y0) + var(--tu-tile-y1)) / 2 / var(--tu-master-h)));

  /* Ink: the stage is always the navy canvas, whatever the page theme. */
  --tu-ink: var(--brand-canvas-ink);
  --tu-light: var(--nota-blue-100);
  --tu-on: var(--paper);
  --tu-off: transparent;
  --tu-beam-core: color-mix(in srgb, var(--tu-light) 50%, transparent);
  --tu-beam-glow: rgb(var(--nota-blue-400-rgb) / .2);
  --tu-ray: rgb(var(--nota-blue-400-rgb) / .13);
  --tu-ray-soft: color-mix(in srgb, var(--tu-light) 6%, transparent);
  --tu-ray-fade: color-mix(in srgb, var(--tu-on) 35%, transparent);
  --tu-cal-line: rgb(var(--nota-blue-400-rgb) / .09);
  --tu-cal-ink: color-mix(in srgb, var(--tu-ink) 15%, transparent);
  --tu-cal-title-ink: color-mix(in srgb, var(--tu-ink) 22%, transparent);
  --tu-cal-edge: color-mix(in srgb, var(--tu-on) 30%, transparent);
  --tu-today-ink: color-mix(in srgb, var(--tu-ink) 32%, transparent);
  --tu-lit-bg: rgb(var(--nota-blue-400-rgb) / .05);
  --tu-chip-ink: color-mix(in srgb, var(--tu-ink) 20%, transparent);
  --tu-mote-ink: color-mix(in srgb, var(--tu-ink) 30%, transparent);
  --tu-floor-ink: rgb(var(--nota-blue-400-rgb) / .1);
  /* The blank tile: the N tile's own blues (assets/part-n-full.webp reads
     ~#407598 at its top, ~#2a4f67 through its body, a lighter bottom rim). */
  --tu-tile-top: var(--nota-blue-500);
  --tu-tile-mid: var(--nota-blue-800);
  --tu-tile-rim: var(--nota-blue-700);
  /* QUÉBEC in the film: small, plain, light — no plate. */
  --tu-badge-ink: color-mix(in srgb, var(--tu-ink) 82%, transparent);
  --tu-seed-core: var(--splash-signal);
  --tu-seed-halo: color-mix(in srgb, var(--splash-signal) 70%, transparent);
  --tu-flash-ink: color-mix(in srgb, var(--paper) 70%, transparent);
  --tu-flash-halo: color-mix(in srgb, var(--tu-light) 80%, transparent);
  --tu-star-core: var(--paper);
  --tu-star-ray: color-mix(in srgb, var(--tu-light) 70%, transparent);
  --tu-star-halo: color-mix(in srgb, var(--tu-light) 30%, transparent);
  --tu-gleam-wing: color-mix(in srgb, var(--tu-light) 9%, transparent);
  --tu-gleam-hi: color-mix(in srgb, var(--tu-light) 22%, transparent);
  --tu-gleam-core: color-mix(in srgb, var(--paper) 46%, transparent);

  /* Stage geometry. */
  --tu-z: 12000;
  --tu-hair: 1px;
  --tu-gap: clamp(18px, 3vh, 34px);
  --tu-beam-r: 75vmin;
  --tu-ray-a: 1.4deg; --tu-ray-b: 3deg; --tu-ray-p: 7deg;
  --tu-ray-a2: .8deg; --tu-ray-b2: 2deg; --tu-ray-p2: 11deg;
  --tu-sway: 2.5deg;
  --tu-cal-w: min(64vw, 1080px);
  --tu-cal-h: min(68vh, 640px);
  --tu-cal-y: 47%;
  --tu-cal-fs: clamp(8px, .85vw, 13px);
  --tu-cal-title-fs: clamp(11px, 1.25vw, 19px);
  --tu-cal-blur: 6px;
  --tu-chip: clamp(6px, .9vw, 14px);
  --tu-mote: clamp(3px, .45vw, 7px);
  --tu-drift: 3vmin;
  --tu-floor-w: 46vw; --tu-floor-h: 26vh; --tu-floor-y: 74%;

  /* The tile's birth and the N's writing. */
  --tu-persp: calc(var(--lockup-tile) * 4);
  --tu-tilt-x: 32deg; --tu-tilt-y: -38deg; --tu-birth-scale: .16;
  --tu-seed-size: calc(var(--lockup-tile) * .1);
  --tu-seed-glow: calc(var(--lockup-tile) * .22);
  --tu-seed-spread: calc(var(--lockup-tile) * .03);
  --tu-settle: .975;
  /* The wipe's travel, aimed at the tile box inside the N window (the window
     is wider than the tile): it starts on the tile's bottom-left corner and
     ends with the whole window opaque. */
  --tu-write-size: 300%;
  --tu-write-from: 83% 17%;
  --tu-write-to: 10% 90%;

  /* O · T · A, the period, the badge, the glint. */
  --tu-rise-y: 35%; --tu-rise-scale: .55; --tu-rise-dim: .55;
  --tu-flash-r: calc(var(--lockup-tile) * .12); --tu-flash-bright: 1.5;
  /* The film's word is ~.36 of the tile's width (~.105 of --lockup-tile as a
     font size), its foot half a period above the period, flush with its left.
     The legibility floor and the weight are the header badge's. */
  --tu-badge-ratio: .105;
  --tu-badge-size: max(var(--logo-badge-min), calc(var(--lockup-tile) * var(--tu-badge-ratio)));
  --tu-badge-ls: .08em;
  --tu-badge-rise: .45;
  --tu-badge-in: var(--space-4);
  --tu-star-w: calc(var(--lockup-tile) * 1.15);
  --tu-star-h: calc(var(--lockup-tile) * .5);
  --tu-star-streak: max(1px, calc(var(--lockup-tile) * .012));
  --tu-star-turn: -12deg;
  --tu-gw: calc(var(--lockup-logo-width) * .09);
  --tu-sheen-skew: -20deg;
  --tu-band-0: calc(-1 * var(--tu-gw));
  --tu-band-1: calc(var(--lockup-logo-width) + var(--tu-gw));

  /* The tagline: one line under the lockup. */
  /* The film's tagline is ~1.4× the resting lockup's ink width; --type-h1
     alone reads at two thirds of that, so the h1 rung is scaled, and bounded
     by the widest one line that keeps the gutters (601-900 px included). */
  --tu-kw-scale: 1.55;
  /* The widest the one-line tagline may get (measured in Sora 800:
     « Votre date. Votre acte. Votre prix. » is ~16.9 em, so 5.2vw leaves the
     16 px gutters at 320 px). */
  --tu-kw-fit: 5.2vw;
  --tu-kw-size: min(calc(var(--type-h1) * var(--tu-kw-scale)), var(--tu-kw-fit));
  --tu-kw-lh: 1.15;
  --tu-kw-ls: var(--type-h1-ls);
  --tu-ph-blur: 10px;
  --tu-ph-rise: var(--space-4);
  /* The pull-back leaves (1 - rest) / 2 of the lockup's height empty under
     it; the tagline is drawn up by as much, so the gap at rest is --tu-gap. */
  --tu-pull-gap: calc((1 - var(--tu-rest-scale)) / 2 * var(--lockup-logo-height));
  /* Half the tagline block; the adapter measures it and overrides this. */
  --tu-lift: calc((var(--tu-kw-size) * var(--tu-kw-lh) + var(--tu-gap) - var(--tu-pull-gap)) / 2);
  /* The FLIP into #page-logo; measured by the adapter. */
  --tu-fx: 0px; --tu-fy: 0px; --tu-fs: 1;

  /* The exit's cut: the coupe's T/A joint where the lockup rests, measured by
     the adapter (slope --tu-k, x at the stage's top and bottom edges, the
     joint's height as a share of the stage). Until then: a vertical cut. */
  --tu-k: 0; --tu-cut-top: 50vw; --tu-cut-bot: 50vw; --tu-seam: .5;
  /* The coupe's blade and panel edges (styles.css .s14 --s14-blade*). */
  --tu-blade-w: 3px;
  --tu-blade: var(--brand);
  --tu-overlap: 2px;
  --tu-edge: 4px;
  --tu-part-clear: 12px;

  /* Curves. The slide is the film's: fast off the centre, long settle
     (43 % of the travel at 17 % of its time, 87 % at half; an ease-out cubic). */
  --tu-ease-glide: cubic-bezier(.65, 0, .35, 1);
  --tu-ease-slide: cubic-bezier(.33, 1, .68, 1);
  /* The coupe's exit curves (styles.css --s14-ease-cut / --s14-ease-exit). */
  --tu-ease-cut: linear(0, 0.003, 0.011, 0.027, 0.054, 0.096, 0.161, 0.264, 0.415, 0.579, 0.705, 0.792, 0.854, 0.899, 0.932, 0.956, 0.974, 0.986, 0.994, 0.999, 1);
  --tu-ease-exit: linear(0, .03 20%, .12 40%, .3 60%, .62 80%, 1);

  /* The score, in ms at --tu-tempo: 1 (the film runs ~1.25). */
  --tu-tempo: 1;
  --tu-t-bg: calc(0ms * var(--tu-tempo));
  --tu-d-bg: calc(600ms * var(--tu-tempo));
  --tu-t-seed: calc(120ms * var(--tu-tempo));
  --tu-d-seed: calc(200ms * var(--tu-tempo));
  --tu-t-seed-out: calc(320ms * var(--tu-tempo));
  --tu-d-seed-out: calc(200ms * var(--tu-tempo));
  --tu-t-birth: calc(280ms * var(--tu-tempo));
  --tu-d-birth: calc(420ms * var(--tu-tempo));
  --tu-t-write: calc(560ms * var(--tu-tempo));
  --tu-d-write: calc(340ms * var(--tu-tempo));
  --tu-t-blank-out: calc(880ms * var(--tu-tempo));
  --tu-d-blank-out: calc(120ms * var(--tu-tempo));
  --tu-t-settle: calc(900ms * var(--tu-tempo));
  --tu-d-settle: calc(150ms * var(--tu-tempo));
  --tu-t-shift: calc(950ms * var(--tu-tempo));
  --tu-d-shift: calc(600ms * var(--tu-tempo));
  /* The tile slides FIRST: the O starts rising at this share of the slide's
     time (~72 % of its travel), so it shows at ~80 %, as in the film. */
  --tu-o-at: .35;
  --tu-t-o: calc(var(--tu-t-shift) + var(--tu-d-shift) * var(--tu-o-at));
  --tu-letter-step: calc(120ms * var(--tu-tempo));
  --tu-t-t: calc(var(--tu-t-o) + var(--tu-letter-step));
  --tu-t-a: calc(var(--tu-t-t) + var(--tu-letter-step));
  --tu-d-letter: calc(460ms * var(--tu-tempo));
  --tu-t-period: calc(1640ms * var(--tu-tempo));
  --tu-d-period: calc(300ms * var(--tu-tempo));
  --tu-t-flash: calc(1760ms * var(--tu-tempo));
  --tu-d-flash: calc(240ms * var(--tu-tempo));
  --tu-t-badge: calc(1800ms * var(--tu-tempo));
  --tu-d-badge: calc(300ms * var(--tu-tempo));
  --tu-t-star: calc(2000ms * var(--tu-tempo));
  --tu-d-star: calc(600ms * var(--tu-tempo));
  --tu-t-sheen: calc(2050ms * var(--tu-tempo));
  --tu-d-sheen: calc(600ms * var(--tu-tempo));
  --tu-t-clear: calc(2400ms * var(--tu-tempo));
  --tu-d-clear: calc(500ms * var(--tu-tempo));
  --tu-d-drift: calc(var(--tu-t-clear) + var(--tu-d-clear));
  --tu-t-lift: calc(2450ms * var(--tu-tempo));
  --tu-d-lift: calc(500ms * var(--tu-tempo));
  --tu-t-ph1: calc(2500ms * var(--tu-tempo));
  --tu-ph-step: calc(200ms * var(--tu-tempo));
  --tu-t-ph2: calc(var(--tu-t-ph1) + var(--tu-ph-step));
  --tu-t-ph3: calc(var(--tu-t-ph2) + var(--tu-ph-step));
  --tu-d-ph: calc(450ms * var(--tu-tempo));
  --tu-t-rest: calc(var(--tu-t-ph3) + var(--tu-d-ph));
  --tu-hold: calc(700ms * var(--tu-tempo));
  --tu-t-exit: calc(var(--tu-t-rest) + var(--tu-hold));
  /* The coupe's exit score, from --tu-t-exit as the coupe's from --s14-t-out:
     the blade reopens and the phrases retract; 40 ms later the lockup lifts
     home; halfway through its flight the panels part. */
  --tu-d-reopen: calc(var(--motion-ui) * var(--tu-tempo));
  --tu-d-retract: calc(var(--motion-fast) * var(--tu-tempo));
  --tu-d-slit: calc(1ms * var(--tu-tempo));
  --tu-t-home: calc(var(--tu-t-exit) + 40ms * var(--tu-tempo));
  --tu-d-home: calc(var(--motion-enter) * 2 * var(--tu-tempo));
  --tu-part-lag: .5;
  --tu-t-part: calc(var(--tu-t-home) + var(--tu-d-home) * var(--tu-part-lag));
  --tu-d-part: calc(var(--motion-enter) * 1.75 * var(--tu-tempo));
  --tu-d-lip: calc(var(--motion-fast) * var(--tu-tempo));
}

/* The overlay: the adapter adds .tu to #brand-splash. */
.tu {
  position: fixed; inset: 0; z-index: var(--tu-z);
  display: grid; place-items: center; overflow: hidden; background: none;
}

/* ---- The canvas: two panels joined along the exit's cut ---- */
/* Each panel paints the whole navy canvas and is clipped to its side of the
   cut; the left one reaches --tu-overlap past it, under the right one, so no
   seam shows while they are joined. */
.tu-panel {
  position: absolute; inset: 0; pointer-events: none; will-change: transform;
  background-color: var(--brand-canvas-bg); background-image: var(--brand-canvas-gradient);
}
.tu-panel--l { clip-path: polygon(calc(min(0%, var(--tu-cut-bot)) - var(--tu-edge)) 0, calc(var(--tu-cut-top) + var(--tu-overlap)) 0,
  calc(var(--tu-cut-bot) + var(--tu-overlap)) 100%, calc(min(0%, var(--tu-cut-bot)) - var(--tu-edge)) 100%); }
.tu-panel--r { clip-path: polygon(var(--tu-cut-top) 0, calc(max(100%, var(--tu-cut-top)) + var(--tu-edge)) 0,
  calc(max(100%, var(--tu-cut-top)) + var(--tu-edge)) 100%, var(--tu-cut-bot) 100%); }

/* The blade: the coupe's 3 px line along the cut, a clip-path per state —
   collapsed on the joint (--tu-seg-mm) or across the stage (--tu-seg-01). The
   out blade rides the right panel's edge, the lip the left panel's. */
.tu-blade {
  position: absolute; inset: 0; pointer-events: none; background: var(--tu-blade);
  --tu-bdx: 0%;
  --tu-bx0: calc(var(--tu-cut-top) + var(--tu-bdx));
  --tu-bx1: calc(var(--tu-cut-bot) + var(--tu-bdx));
  --tu-bxm: calc(var(--tu-cut-top) + (var(--tu-cut-bot) - var(--tu-cut-top)) * var(--tu-seam) + var(--tu-bdx));
  --tu-bym: calc(var(--tu-seam) * 100%);
  --tu-seg-mm: polygon(var(--tu-bxm) var(--tu-bym), calc(var(--tu-bxm) + var(--tu-blade-w)) var(--tu-bym),
    calc(var(--tu-bxm) + var(--tu-blade-w)) var(--tu-bym), var(--tu-bxm) var(--tu-bym));
  --tu-seg-01: polygon(var(--tu-bx0) 0, calc(var(--tu-bx0) + var(--tu-blade-w)) 0,
    calc(var(--tu-bx1) + var(--tu-blade-w)) 100%, var(--tu-bx1) 100%);
  clip-path: var(--tu-seg-mm);
}
.tu-blade--lip { --tu-bdx: calc(-1 * var(--tu-blade-w)); }

/* ---- The stage: beam, calendar, motes (over the canvas) ---- */
.tu-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.tu-beam {
  position: absolute; inset: 0;
  background: radial-gradient(circle at 0 0, var(--tu-beam-core) 0, var(--tu-beam-glow) calc(var(--tu-beam-r) * .3), var(--tu-off) var(--tu-beam-r));
}
.tu-rays {
  position: absolute; left: 0; top: 0;
  width: calc(var(--tu-beam-r) * 1.5); height: calc(var(--tu-beam-r) * 1.5); transform-origin: 0 0;
  background:
    repeating-conic-gradient(from 90deg at 0 0, var(--tu-ray) 0deg var(--tu-ray-a), var(--tu-off) var(--tu-ray-b) var(--tu-ray-p)),
    repeating-conic-gradient(from 93deg at 0 0, var(--tu-ray-soft) 0deg var(--tu-ray-a2), var(--tu-off) var(--tu-ray-b2) var(--tu-ray-p2));
  mask-image: radial-gradient(circle var(--tu-beam-r) at 0 0, var(--tu-on) 0, var(--tu-ray-fade) 40%, var(--tu-off) 100%);
}

.tu-cal {
  position: absolute; left: 50%; top: var(--tu-cal-y); translate: -50% -50%;
  width: var(--tu-cal-w); height: var(--tu-cal-h);
  display: grid; grid-template-rows: auto auto minmax(0, 1fr);
  font: 600 var(--tu-cal-fs)/1 var(--font-sans); font-variant-numeric: tabular-nums; color: var(--tu-cal-ink);
  mask-image: radial-gradient(ellipse at 50% 45%, var(--tu-on) 45%, var(--tu-cal-edge) 100%);
}
.tu-cal-title {
  margin: 0 0 var(--space-3);
  font: var(--weight-display) var(--tu-cal-title-fs)/1 var(--font-display); color: var(--tu-cal-title-ink);
}
.tu-cal-title::first-letter { text-transform: uppercase; }
.tu-cal-head, .tu-cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.tu-cal-days {
  grid-template-rows: repeat(6, minmax(0, 1fr));
  border-top: var(--tu-hair) solid var(--tu-cal-line); border-left: var(--tu-hair) solid var(--tu-cal-line);
}
.tu-wd { padding: var(--space-2) var(--space-3); text-align: end; overflow: hidden; white-space: nowrap; }
.tu-day, .tu-pad {
  position: relative; padding: var(--space-2) var(--space-3); text-align: end;
  border-right: var(--tu-hair) solid var(--tu-cal-line); border-bottom: var(--tu-hair) solid var(--tu-cal-line);
}
.tu-day.is-lit { background: var(--tu-lit-bg); }
.tu-day.is-lit::after {
  content: ''; position: absolute; left: var(--space-3); bottom: var(--space-3);
  width: var(--tu-chip); height: var(--tu-chip); background: var(--tu-chip-ink);
}
.tu-day.is-today { color: var(--tu-today-ink); }

.tu-motes { position: absolute; inset: 0; }
.tu-mote {
  position: absolute; left: calc(var(--tu-mx) * 1%); top: calc(var(--tu-my) * 1%);
  width: calc(var(--tu-mote) * var(--tu-ms)); height: calc(var(--tu-mote) * var(--tu-ms));
  background: var(--tu-mote-ink); opacity: var(--tu-ma);
}
.tu-floor {
  position: absolute; inset: 0; opacity: 0;
  background: radial-gradient(var(--tu-floor-w) var(--tu-floor-h) at 50% var(--tu-floor-y), var(--tu-floor-ink), var(--tu-off));
}

/* ---- The column: lockup row over the tagline ---- */
.tu-col { position: relative; display: grid; justify-items: center; gap: var(--tu-gap); }
.tu-row { position: relative; left: calc(var(--lockup-logo-width) * var(--tu-optic)); }
.tu-logo {
  position: relative; width: var(--lockup-logo-width);
  aspect-ratio: var(--tu-master-w) / var(--tu-master-h); transform-origin: 0 0;
}
.tu-shift, .tu-lk { position: absolute; inset: 0; }
.tu-lk img { position: absolute; display: block; max-width: none; user-select: none; }

/* The N window carries the 3D birth; its origin is the tile's centre. */
.tu-tile {
  position: absolute; left: 0; top: 0; height: 100%;
  width: calc(var(--tu-n-w) / var(--tu-master-w) * 100%);
  transform-origin: calc((var(--tu-tile-x0) + var(--tu-tile-x1)) / 2 / var(--tu-n-w) * 100%)
                    calc((var(--tu-tile-y0) + var(--tu-tile-y1)) / 2 / var(--tu-master-h) * 100%);
}
/* The blank: the N window, cut by the N tile's own alpha (the rounded tile,
   nothing around it), filled with the tile's blues. */
.tu-blank {
  position: absolute; inset: 0;
  background: linear-gradient(to bottom, var(--tu-tile-top) 12%, var(--tu-tile-mid) 60%, var(--tu-tile-rim) 92%);
  mask-image: url(assets/part-n-full.webp); mask-size: 100% 100%; mask-repeat: no-repeat;
}
.tu-n {
  inset: 0; width: 100%; height: 100%;
  mask-image: linear-gradient(45deg, var(--tu-on) 40%, var(--tu-off) 60%);
  mask-size: var(--tu-write-size) var(--tu-write-size); mask-repeat: no-repeat; mask-position: var(--tu-write-to);
}
.tu-seed {
  position: absolute; translate: -50% -50%;
  left: calc((var(--tu-tile-x0) + var(--tu-tile-x1)) / 2 / var(--tu-master-w) * 100%);
  top: calc((var(--tu-tile-y0) + var(--tu-tile-y1)) / 2 / var(--tu-master-h) * 100%);
  width: var(--tu-seed-size); height: var(--tu-seed-size);
  background: var(--tu-seed-core); border-radius: var(--radius-xs);
}

/* O, T, A and the period: windows of ONE master, like the coupe's .lk-*. */
.tu-part {
  top: 0; height: 100%; transform-origin: var(--tu-po);
  left: calc(var(--tu-px) / var(--tu-master-w) * 100%); width: calc(var(--tu-pw) / var(--tu-master-w) * 100%);
}
.tu-o { --tu-px: 840; --tu-pw: 401; --tu-po: 50% 57%; }
.tu-t { --tu-px: 1241; --tu-pw: 327; --tu-po: 50% 57%; }
.tu-a { --tu-px: 1478; --tu-pw: 428; --tu-po: 56% 57%; }
.tu-period { --tu-px: 1906; --tu-pw: 283; --tu-po: 20.5% 74%; }
.tu-flash {
  position: absolute; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: var(--tu-flash-ink);
  left: calc(var(--tu-dot-x0) / var(--tu-master-w) * 100%); top: calc(var(--tu-dot-y0) / var(--tu-master-h) * 100%);
  width: calc(var(--tu-dot-w) / var(--tu-master-w) * 100%); height: calc(var(--tu-dot-h) / var(--tu-master-h) * 100%);
  mask-image: url(assets/terminal-full.webp); mask-size: 100% 100%; mask-repeat: no-repeat;
}

/* The sheen: masked by the whole lockup's alpha, like the coupe's gleam. */
.tu-gleam {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; mix-blend-mode: screen;
  mask-image: url(assets/logo-full.webp); mask-size: 100% 100%; mask-repeat: no-repeat;
}
.tu-band {
  position: absolute; top: 0; left: 0; height: 100%; width: var(--tu-gw); opacity: 0;
  transform: skewX(var(--tu-sheen-skew));
  background-image: linear-gradient(to right, var(--tu-off), var(--tu-gleam-wing) 30%, var(--tu-gleam-hi) 45%,
    var(--tu-gleam-core) 48.5%, var(--tu-gleam-core) 51.5%, var(--tu-gleam-hi) 55%, var(--tu-gleam-wing) 70%, var(--tu-off));
}

/* The star glint on the tile's top edge: two crossed streaks and a core. */
.tu-star {
  position: absolute; translate: -50% -50%; opacity: 0; pointer-events: none; mix-blend-mode: screen;
  left: calc(var(--tu-star-x) / var(--tu-master-w) * 100%); top: calc(var(--tu-star-y) / var(--tu-master-h) * 100%);
  width: var(--tu-star-w); height: var(--tu-star-h);
  background: radial-gradient(circle closest-side, var(--tu-star-core) 0, var(--tu-star-halo) 22%, var(--tu-off) 100%);
}
.tu-star::before, .tu-star::after { content: ''; position: absolute; left: 50%; top: 50%; translate: -50% -50%; }
.tu-star::before {
  width: 100%; height: var(--tu-star-streak);
  background: linear-gradient(to right, var(--tu-off), var(--tu-star-ray) 30%, var(--tu-star-core) 50%, var(--tu-star-ray) 70%, var(--tu-off));
}
.tu-star::after {
  width: var(--tu-star-streak); height: 100%;
  background: linear-gradient(to bottom, var(--tu-off), var(--tu-star-ray) 35%, var(--tu-star-core) 50%, var(--tu-star-ray) 65%, var(--tu-off));
}

/* QUÉBEC, as the film whispers it: plain light text in the lockup's own box,
   flush with the period's left edge and standing just above it. Inside the
   box it never widens the stage, so phones show it too. */
.tu-bfly {
  position: absolute; white-space: nowrap;
  left: calc(var(--tu-dot-x0) / var(--tu-master-w) * 100%);
  bottom: calc((var(--tu-master-h) - var(--tu-dot-y0) + var(--tu-dot-h) * var(--tu-badge-rise)) / var(--tu-master-h) * 100%);
  font: var(--logo-badge-weight) var(--tu-badge-size)/1 var(--font-sans);
}
.tu-badge { display: block; letter-spacing: var(--tu-badge-ls); text-transform: uppercase; color: var(--tu-badge-ink); }

.tu-line {
  margin: calc(-1 * var(--tu-pull-gap)) 0 0; white-space: nowrap; text-align: center; color: var(--tu-ink);
  font: var(--weight-display) var(--tu-kw-size)/var(--tu-kw-lh) var(--font-display); letter-spacing: var(--tu-kw-ls);
  -webkit-font-smoothing: antialiased;
}
.tu-ph { display: inline-block; }
/* The slot's slant is the cut's: --tu-k wide per em of the phrase. */
.tu-slot { display: inline-block; --tu-chip-s: calc(var(--tu-k) * 1em); }

/* ---- The score ---- */
.tu-playing .tu-beam { animation:
  tu-fade-in var(--tu-d-bg) var(--ease-ui) var(--tu-t-bg) both,
  tu-fade-out var(--tu-d-clear) var(--ease-ui) var(--tu-t-clear) forwards; }
.tu-playing .tu-rays { animation: tu-sway var(--tu-d-drift) linear var(--tu-t-bg) both; }
.tu-playing .tu-cal { animation:
  tu-cal-in var(--tu-d-bg) var(--ease-ui) var(--tu-t-bg) both,
  tu-cal-out var(--tu-d-clear) var(--ease-ui) var(--tu-t-clear) forwards; }
.tu-playing .tu-motes { animation:
  tu-fade-in var(--tu-d-bg) var(--ease-ui) var(--tu-t-bg) both,
  tu-fade-out var(--tu-d-clear) var(--ease-ui) var(--tu-t-clear) forwards; }
.tu-playing .tu-mote { animation: tu-drift var(--tu-d-drift) linear var(--tu-t-bg) both; }
.tu-playing .tu-floor { animation: tu-fade-in var(--tu-d-clear) var(--ease-ui) var(--tu-t-clear) both; }
.tu-playing .tu-seed { animation:
  tu-seed-in var(--tu-d-seed) var(--ease-spring) var(--tu-t-seed) both,
  tu-fade-out var(--tu-d-seed-out) var(--ease-ui) var(--tu-t-seed-out) forwards; }
.tu-playing .tu-tile { animation:
  tu-birth var(--tu-d-birth) var(--ease-spring) var(--tu-t-birth) both,
  tu-settle var(--tu-d-settle) var(--ease-ui) var(--tu-t-settle) both; }
.tu-playing .tu-n { animation: tu-write var(--tu-d-write) var(--tu-ease-glide) var(--tu-t-write) both; }
.tu-playing .tu-blank { animation: tu-fade-out var(--tu-d-blank-out) var(--ease-ui) var(--tu-t-blank-out) forwards; }
.tu-playing .tu-shift { animation: tu-shift var(--tu-d-shift) var(--tu-ease-slide) var(--tu-t-shift) both; }
.tu-playing .tu-o { animation: tu-rise var(--tu-d-letter) var(--ease-spring) var(--tu-t-o) both; }
.tu-playing .tu-t { animation: tu-rise var(--tu-d-letter) var(--ease-spring) var(--tu-t-t) both; }
.tu-playing .tu-a { animation: tu-rise var(--tu-d-letter) var(--ease-spring) var(--tu-t-a) both; }
.tu-playing .tu-period { animation: tu-pop var(--tu-d-period) var(--ease-spring) var(--tu-t-period) both; }
.tu-playing .tu-flash { animation: tu-flash var(--tu-d-flash) var(--ease-ui) var(--tu-t-flash) both; }
.tu-playing .tu-bfly { animation:
  tu-badge-in var(--tu-d-badge) var(--ease-ui) var(--tu-t-badge) both,
  tu-fade-out var(--tu-d-retract) var(--ease-ui) var(--tu-t-exit) forwards; }
.tu-playing .tu-star { animation: tu-star var(--tu-d-star) var(--ease-ui) var(--tu-t-star) both; }
.tu-playing .tu-band { animation: tu-sheen var(--tu-d-sheen) var(--tu-ease-glide) var(--tu-t-sheen); }
.tu-playing .tu-col { animation: tu-lift var(--tu-d-lift) var(--tu-ease-glide) var(--tu-t-lift) both; }
/* The film's pull-back: the lockup settles to its rest size as the stage clears. */
.tu-playing .tu-row { animation: tu-pull var(--tu-d-lift) var(--tu-ease-glide) var(--tu-t-lift) both; }
.tu-playing .tu-ph-1 { animation: tu-phrase var(--tu-d-ph) var(--ease-ui) var(--tu-t-ph1) both,
  tu-retract var(--tu-d-retract) var(--tu-ease-exit) var(--tu-t-exit) forwards; }
.tu-playing .tu-ph-2 { animation: tu-phrase var(--tu-d-ph) var(--ease-ui) var(--tu-t-ph2) both,
  tu-retract var(--tu-d-retract) var(--tu-ease-exit) var(--tu-t-exit) forwards; }
.tu-playing .tu-ph-3 { animation: tu-phrase var(--tu-d-ph) var(--ease-ui) var(--tu-t-ph3) both,
  tu-retract var(--tu-d-retract) var(--tu-ease-exit) var(--tu-t-exit) forwards; }

/* Exit — the coupe's: the phrases retract into their slanted slots, the
   blade reopens along the cut, the lockup lifts home, the panels part. */
.tu-playing .tu-slot { animation: tu-slit var(--tu-d-slit) linear var(--tu-t-exit) forwards; }
.tu-playing .tu-blade--out { animation: tu-open var(--tu-d-reopen) var(--ease-ui) var(--tu-t-exit) both; }
.tu-playing .tu-logo { animation: tu-home var(--tu-d-home) var(--tu-ease-cut) var(--tu-t-home) forwards; }
/* No header logo to land on: the lockup leaves with the stage. */
.tu-playing.tu-no-home .tu-logo { animation: tu-fade-out var(--tu-d-home) var(--tu-ease-cut) var(--tu-t-home) forwards; }
.tu-playing .tu-blade--lip { animation: tu-open var(--tu-d-lip) var(--ease-ui) var(--tu-t-part) both; }
.tu-playing .tu-panel--l { animation: tu-part-l var(--tu-d-part) var(--tu-ease-cut) var(--tu-t-part) both; }
.tu-playing .tu-panel--r { animation: tu-part-r var(--tu-d-part) var(--tu-ease-cut) var(--tu-t-part) both; }

@keyframes tu-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes tu-fade-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes tu-sway { from { rotate: calc(-1 * var(--tu-sway)); } to { rotate: var(--tu-sway); } }
@keyframes tu-cal-in { from { opacity: 0; scale: 1.02; } to { opacity: 1; scale: 1; } }
@keyframes tu-cal-out {
  from { opacity: 1; scale: 1; filter: blur(0); }
  to { opacity: 0; scale: 1.03; filter: blur(var(--tu-cal-blur)); } }
@keyframes tu-drift { from { translate: 0 0; } to { translate: calc(var(--tu-mdx) * var(--tu-drift)) calc(var(--tu-mdy) * var(--tu-drift)); } }
@keyframes tu-seed-in {
  from { scale: 0; opacity: 0; box-shadow: 0 0 0 0 var(--tu-off); }
  60% { opacity: 1; }
  to { scale: 1; opacity: 1; box-shadow: 0 0 var(--tu-seed-glow) var(--tu-seed-spread) var(--tu-seed-halo); } }
@keyframes tu-birth {
  from { opacity: 0; transform: perspective(var(--tu-persp)) rotateX(var(--tu-tilt-x)) rotateY(var(--tu-tilt-y)) scale(var(--tu-birth-scale)); }
  25% { opacity: 1; }
  to { opacity: 1; transform: perspective(var(--tu-persp)) rotateX(0deg) rotateY(0deg) scale(1); } }
@keyframes tu-settle { 0%, 100% { scale: 1; } 45% { scale: var(--tu-settle); } }
@keyframes tu-write { from { mask-position: var(--tu-write-from); } to { mask-position: var(--tu-write-to); } }
@keyframes tu-shift { from { translate: var(--tu-shift-x) var(--tu-shift-y); } to { translate: 0 0; } }
@keyframes tu-rise {
  from { opacity: 0; translate: 0 var(--tu-rise-y); scale: var(--tu-rise-scale); filter: brightness(var(--tu-rise-dim)); }
  30% { opacity: 1; }
  to { opacity: 1; translate: 0 0; scale: 1; filter: brightness(1); } }
@keyframes tu-pop {
  from { scale: 0; filter: brightness(1) drop-shadow(0 0 0 var(--tu-off)); }
  55% { filter: brightness(var(--tu-flash-bright)) drop-shadow(0 0 var(--tu-flash-r) var(--tu-flash-halo)); }
  to { scale: 1; filter: brightness(1) drop-shadow(0 0 0 var(--tu-off)); } }
@keyframes tu-flash { 0% { opacity: 0; } 30% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tu-badge-in { from { opacity: 0; translate: calc(-1 * var(--tu-badge-in)) 0; } to { opacity: 1; translate: 0 0; } }
@keyframes tu-star {
  0% { opacity: 0; scale: .2; rotate: var(--tu-star-turn); }
  30% { opacity: 1; scale: 1.15; }
  70% { opacity: .85; scale: 1; }
  100% { opacity: 0; scale: .9; rotate: 0deg; } }
@keyframes tu-sheen { from { translate: var(--tu-band-0) 0; opacity: 1; } to { translate: var(--tu-band-1) 0; opacity: 1; } }
@keyframes tu-lift { from { translate: 0 var(--tu-lift); } to { translate: 0 0; } }
@keyframes tu-pull { from { scale: 1; } to { scale: var(--tu-rest-scale); } }
@keyframes tu-phrase {
  from { opacity: 0; translate: 0 var(--tu-ph-rise); filter: blur(var(--tu-ph-blur)); }
  to { opacity: 1; translate: 0 0; filter: blur(0); } }
@keyframes tu-home { from { translate: 0 0; scale: 1; } to { translate: var(--tu-fx) var(--tu-fy); scale: var(--tu-fs); } }
/* The coupe's exit keyframes (styles.css s14-retract, s14-open-all, s14-part-*). */
@keyframes tu-slit { from, to { clip-path: polygon(calc(-1 * var(--tu-chip-s)) 0, calc(100% + var(--tu-chip-s) + var(--tu-overlap)) 0,
  calc(100% + var(--tu-overlap)) 100%, calc(-1 * var(--tu-chip-s)) 100%); } }
@keyframes tu-retract { from { translate: 0 0; } to { translate: calc(100% + var(--tu-chip-s) + var(--tu-overlap)) 0; } }
@keyframes tu-open { from { clip-path: var(--tu-seg-mm); } to { clip-path: var(--tu-seg-01); } }
@keyframes tu-part-l { from { translate: 0 0; } to { translate: calc(-1 * var(--tu-cut-top) - var(--tu-blade-w) - var(--tu-part-clear)) 0; } }
@keyframes tu-part-r { from { translate: 0 0; } to { translate: calc(100% - var(--tu-cut-bot) + var(--tu-blade-w) + var(--tu-part-clear)) 0; } }

/* Phones and portrait screens: a smaller tile, tagline and calendar. The
   build already plays at the rest size (the film's size would overflow), so
   there is no pull-back. */
@media (max-width: 600px), (orientation: portrait) and (max-aspect-ratio: 5/8) {
  .tu {
    --tu-logo-scale: .8; --tu-rest-scale: 1;
    --lockup-tile: calc(clamp(80px, 24vw, 140px) * var(--tu-logo-scale));
    --tu-kw-size: min(calc(var(--type-h2) * var(--tu-kw-scale)), var(--tu-kw-fit)); --tu-kw-ls: var(--type-h2-ls);
    --tu-cal-w: 92vw; --tu-cal-h: 56vh;
    --tu-cal-fs: clamp(7px, 2.2vw, 10px); --tu-cal-title-fs: clamp(10px, 3vw, 13px);
    --tu-chip: 6px; --tu-floor-w: 80vw; --tu-beam-r: 90vmin;
  }
}

/* Narrow and portrait screens leave like the coupe's (styles.css .s14): a
   shorter flight home, panels parting later in it and faster. */
@media (max-width: 900px), (orientation: portrait) {
  .tu {
    --tu-d-home: calc(var(--motion-enter) * 1.875 * var(--tu-tempo));
    --tu-part-lag: .7;
    --tu-d-part: calc(var(--motion-enter) * 1.5 * var(--tu-tempo));
  }
}