/* _blanco films – VHS library. Paper-grey stage, hairline tables, a big serif and tapes floating on a diagonal. */
:root {
  --paper: #ebeae6;
  --ink: #141413;
  --ink-2: #6d6c68;
  --hair: rgba(20, 20, 19, .28);
  --serif: "Instrument Serif", "Times New Roman", serif;
  --sans: "Inter", system-ui, sans-serif;
  --ease: cubic-bezier(.22, .9, .2, 1);
  --roll-dur: 1.1s;
  --draw-dur: 1.2s;
  /* type style (Tune panel) */
  --display: "Instrument Serif", "Times New Roman", serif;
  --display-w: 400; --display-style: normal; --display-tt: uppercase; --display-ls: -.01em;
  --ui: var(--sans);
}
html[data-theme="dark"] { --paper: #0c0c0b; --ink: #ecebe6; --ink-2: #8d8c87; --hair: rgba(236, 235, 230, .24); }
html[data-theme="dark"] .grain { opacity: .25; filter: invert(1); }
html[data-type="grotesk"] { --display: "Archivo Black", sans-serif; --display-ls: -.03em; }
html[data-type="mono"] { --display: "JetBrains Mono", monospace; --display-w: 500; --display-ls: -.05em; --ui: "JetBrains Mono", monospace; }
html[data-type="condensed"] { --display: "Barlow Condensed", sans-serif; --display-w: 700; --display-ls: 0; --ui: "Barlow Condensed", sans-serif; }
html[data-type="display"] { --display: "DM Serif Display", serif; --display-style: italic; --display-tt: none; --display-ls: -.02em; }
html[data-type="swiss"] { --display: "Inter Tight", sans-serif; --display-w: 600; --display-tt: lowercase; --display-ls: -.05em; --ui: "Inter Tight", sans-serif; }
/* "Blur spray": fat rounded letters with soft swollen edges, a solid middle, grainy haze and a little RGB
   aberration (filters #spray-* in index.html, one per size) */
html[data-type="blur"] { --display: "Titan One", "Archivo Black", sans-serif; --display-w: 400; --display-tt: uppercase; --display-ls: -.015em; }
html[data-type="blur"] .title { filter: url(#spray-m); font-size: clamp(40px, 4.4vw, 60px); line-height: .92; }
html[data-type="blur"] .info { width: min(360px, 46vw); }
html[data-type="blur"] .note b, html[data-type="blur"] .count b, html[data-type="blur"] .logo { filter: url(#spray-xs); }
.spray-ink { flood-color: var(--ink); }
/* baked spray (spray-bake.js): the word is an image now, no live filter; hidden for the moment it is being made */
.baking { opacity: 0; }
.baked { filter: none !important; will-change: auto !important; }
.spray-img { display: block; max-width: none; height: auto; pointer-events: none; user-select: none; }
.count b.baked, .note b.baked, .logo.baked { display: inline-block; }
.count b.baked .spray-img, .note b.baked .spray-img, .logo.baked .spray-img { display: inline-block; vertical-align: top; }
.title.baked .spray-img, .note b.baked .spray-img, .count b.baked .spray-img { animation: sprayIn var(--roll-dur) var(--ease) both; }
@keyframes sprayIn { from { opacity: 0; transform: translateY(22%); } to { opacity: 1; transform: none; } }
/* the spray filter is expensive: each sprayed word gets its own layer, so it is drawn once and not again
   whenever something else in the overlay moves (the guides follow the pointer every frame) */
html[data-type="blur"] .title, html[data-type="blur"] .note b, html[data-type="blur"] .count b,
html[data-type="blur"] .logo, html[data-type="blur"] .boot__word { will-change: transform; }
/* the player title sits on the dark player: a soft light glow instead of the dark spray */
html[data-type="blur"] .p-title { filter: blur(.5px); text-shadow: 0 0 3px rgba(236, 235, 230, .9), 0 0 10px rgba(236, 235, 230, .45); }
@media (max-width: 760px) { html[data-type="blur"] .title { filter: url(#spray-s); font-size: 36px; } }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--paper); color: var(--ink); font: 13px/1.4 var(--ui); transition: background-color .6s var(--ease), color .6s var(--ease); -webkit-font-smoothing: antialiased; }
body { overflow: hidden; }
body.reading { overflow-y: auto; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
a { color: inherit; }
:focus-visible { outline: 1px solid var(--ink); outline-offset: 3px; }

#gl { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 1; display: block; touch-action: none; }
.grain {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: .5; /* no blend mode: blending over the 3D canvas cost a full-screen pass every frame */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 0 0.5 0 0 0 .09 0'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* nav */
.nav { position: fixed; top: 14px; left: 50%; transform: translateX(-50%); z-index: 20; display: flex; align-items: center; gap: 18px; font-size: 11.5px; }
/* same type and size as the category at the bottom */
.logo { font: 400 18px/.95 var(--display); font-weight: var(--display-w); font-style: var(--display-style); letter-spacing: var(--display-ls); text-decoration: none; }
.nav-link { white-space: nowrap; text-decoration: none; color: var(--ink-2); position: relative; padding: 4px 0; }
.nav-link.is-on { color: var(--ink); }
.nav-link.is-on::after { content: ""; position: absolute; left: 50%; bottom: -4px; width: 3px; height: 3px; border-radius: 50%; background: var(--ink); transform: translateX(-50%); }
.index-btn span { font-size: 10px; }
.index-menu { position: absolute; top: 26px; right: -20px; margin: 0; padding: 8px 0; list-style: none; background: var(--paper); border: 1px solid var(--hair); min-width: 200px; }
.index-menu button { display: flex; justify-content: space-between; gap: 16px; width: 100%; padding: 6px 14px; text-align: left; font: 18px/1.1 var(--serif); text-transform: uppercase; }
.index-menu button small { font: 10px var(--sans); color: var(--ink-2); align-self: center; }
.index-menu button:hover { background: rgba(20, 20, 19, .06); }

/* library overlay (the tapes are in the canvas below) */
.library { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
.library > * { pointer-events: auto; }
.info { position: absolute; top: 14px; left: 16px; width: min(280px, 42vw); }
.title { margin: 0 0 6px; font: 400 clamp(24px, 3vw, 34px)/.95 var(--serif); text-transform: uppercase; letter-spacing: -.01em; }
.facts { margin: 0; display: grid; grid-template-columns: auto 1fr; }
.facts dt, .facts dd { margin: 0; padding: 4px 0; min-height: 22px; display: flex; align-items: center; overflow: hidden;
  background: linear-gradient(var(--hair), var(--hair)) left bottom / 0 1px no-repeat; animation: lineIn calc(var(--roll-dur) * .45) cubic-bezier(.5, 0, .9, .6) forwards; }
.facts dd { animation-duration: calc(var(--roll-dur) * .8); animation-timing-function: cubic-bezier(.1, .5, .3, 1); }
.facts dt:first-of-type, .facts dd:first-of-type { background: linear-gradient(var(--hair), var(--hair)) left bottom / 0 1px no-repeat, linear-gradient(var(--hair), var(--hair)) left top / 0 1px no-repeat; animation-name: lineIn2; }
@keyframes lineIn { to { background-size: 100% 1px; } }
@keyframes lineIn2 { to { background-size: 100% 1px, 100% 1px; } }
.facts dt { font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); padding-right: 12px; }
.facts dd { justify-content: flex-end; text-align: right; font-size: 10.5px; font-weight: 500; }
/* letters come up from below when the tape changes */
.roll { display: inline-block; white-space: pre; overflow: hidden; vertical-align: top; }
.roll i { display: inline-block; font-style: normal; transform: translateY(105%); animation: rollIn var(--roll-dur) var(--ease) forwards; }
@keyframes rollIn { to { transform: none; } }

.count { position: absolute; left: 16px; bottom: 16px; margin: 0; display: flex; gap: 10px; align-items: flex-start; font-size: 10px; color: var(--ink-2); }
.count b { font: 400 34px/.8 var(--serif); color: var(--ink); }
.hint { position: absolute; right: 16px; bottom: 16px; margin: 0; font-size: 10px; color: var(--ink-2); letter-spacing: .04em; transition: opacity .6s; }

.notes { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: clamp(28px, 8vw, 90px); text-align: center; }
.note { display: grid; gap: 3px; justify-items: center; }
.note small { font-size: 7px; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); }
.note b { font: 400 18px/.95 var(--serif); text-transform: uppercase; max-width: 190px; }
.title, .count b, .note b, .p-title { font-family: var(--display); font-weight: var(--display-w); font-style: var(--display-style); text-transform: var(--display-tt); letter-spacing: var(--display-ls); }
/* build-up: the text comes in after the first tapes */
.library > .info, .library > .count, .library > .notes, .library > .hint, .nav { opacity: 0; transition: opacity calc(var(--roll-dur) * 1.2) var(--ease); }
body.ready .library > .info, body.ready .library > .count, body.ready .library > .notes, body.ready .library > .hint, body.ready .nav { opacity: 1; }
.note .mark { font-size: 8px; letter-spacing: 2px; }

/* hand-drawn circle around the tape under the pointer */
.scribble { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none !important; overflow: visible; }
#hl { opacity: 0; }
#hl.on { opacity: 1; }
.hl-s { fill: none; stroke: var(--ink); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.hl-s.thin { stroke-width: 1; }
.hl-s.guide { stroke-width: .75; opacity: .45; stroke-dasharray: 2 4; }
/* outline entrances (Tune → Outline animation); the box glide itself is done in JS */
#hl { transition: opacity calc(var(--draw-dur) * .5) var(--ease); }
#hl .hl-in, #hl .gh, #hl .gv { transition: transform var(--draw-dur) var(--ease), opacity var(--draw-dur) var(--ease); }
#hl[data-anim="grow"] .gh, #hl[data-anim="sweep"] .gh, #hl[data-anim="cross"] .gh { transform: scaleX(0); }
#hl[data-anim="grow"] .gv, #hl[data-anim="sweep"] .gv, #hl[data-anim="cross"] .gv { transform: scaleY(0); }
#hl[data-anim="sweep"] .gv { transition-delay: calc(var(--draw-dur) * .55); }
#hl[data-anim="cross"] .gh { transition-delay: calc(var(--draw-dur) * .55); }
#hl[data-anim="fade"] .hl-in { opacity: 0; transition-duration: calc(var(--draw-dur) * 1.4); }
#hl[data-anim="zoom"] .hl-in { opacity: 0; transform: scale(1.35); }
#hl[data-anim="slide"] .hl-in { opacity: 0; transform: translateY(18px); }
#hl[data-anim="spin"] .hl-in { opacity: 0; transform: rotate(-12deg) scale(.9); }
#hl.on .hl-in, #hl.on .gh, #hl.on .gv { transform: none; opacity: 1; }
#hl.on[data-anim="flicker"] .hl-in { animation: flick calc(var(--draw-dur) * .9) steps(1) both; }
@keyframes flick { 0% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: .1; } 40% { opacity: .9; } 50% { opacity: .2; } 65%, 100% { opacity: 1; } }
.hl-s.dots { stroke-width: 2.2; stroke-dasharray: 0 9; animation: orbit calc(var(--draw-dur) * 8) linear infinite; }
.hl-s.marker { stroke-width: 9; opacity: .22; }
.hl-t { fill: var(--ink); font: 500 10px var(--ui); letter-spacing: .12em; text-transform: uppercase; }
#hl.on .draw { transition: stroke-dashoffset var(--draw-dur) var(--ease); }
#hl.on .late { transition-delay: calc(var(--draw-dur) * .35); }
#hl .hl-t.late { opacity: 0; }
#hl.on .hl-t.late { opacity: 1; transition: opacity calc(var(--draw-dur) * .6) var(--ease) calc(var(--draw-dur) * .5); }
@keyframes orbit { to { stroke-dashoffset: -180; } }

/* detail */
.detail { position: relative; z-index: 12; min-height: 100vh; }
.detail[hidden] { display: none; }
.d-head { padding: 80px 16px 0; text-align: center; }
.d-title { margin: 0; font: 400 clamp(54px, 9vw, 120px)/.85 var(--serif); text-transform: uppercase; letter-spacing: -.02em; overflow: hidden; }
.d-credit { margin: 10px 0 0; font-size: 9px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); }
.d-credit b { color: var(--ink); font-weight: 500; letter-spacing: 0; text-transform: none; font-size: 10.5px; }
.d-table { max-width: 100%; margin: 14px 0 0; display: grid; grid-template-columns: auto 1fr; text-align: left; border-top: 1px solid var(--hair); }
.d-table dt, .d-table dd { margin: 0; padding: 5px 0; border-bottom: 1px solid var(--hair); font-size: 10.5px; }
.d-table dt { font-size: 7.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); align-self: center; }
.d-table dd { text-align: right; font-weight: 500; }
.watch { display: block; width: max-content; margin: 22vh auto 0; padding: 7px 4px 5px; border-top: 1px solid var(--ink); border-bottom: 1px solid var(--ink); font: 400 22px/1 var(--serif); text-transform: uppercase; text-decoration: none; position: relative; }
.watch::before, .watch::after { content: ""; position: absolute; left: 0; right: 0; height: 1px; background: var(--ink); }
.watch::before { top: 3px; } .watch::after { bottom: 3px; }
.d-stage { height: 46vh; }

.reel { position: relative; height: 160vh; }
.torn { position: sticky; top: 0; height: 100vh; overflow: hidden;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 4 L6 2 L11 5 L17 1 L24 4 L30 2 L37 6 L44 2 L50 5 L57 1 L63 4 L70 2 L77 6 L84 2 L90 5 L96 1 L100 3 L100 97 L94 99 L88 95 L81 98 L74 94 L67 99 L60 96 L53 99 L46 95 L39 98 L32 94 L25 99 L18 96 L11 99 L5 95 L0 98 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0 4 L6 2 L11 5 L17 1 L24 4 L30 2 L37 6 L44 2 L50 5 L57 1 L63 4 L70 2 L77 6 L84 2 L90 5 L96 1 L100 3 L100 97 L94 99 L88 95 L81 98 L74 94 L67 99 L60 96 L53 99 L46 95 L39 98 L32 94 L25 99 L18 96 L11 99 L5 95 L0 98 Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat; }
.torn video { width: 100%; height: 100%; object-fit: cover; display: block; background: #2a2622; transform: scale(var(--zoom, 1.15)); transition: transform .2s linear; }
.words { position: absolute; inset: 0; pointer-events: none; }
.words .line { height: 100%; display: grid; grid-template-rows: repeat(4, 1fr); }
.words .row { border-bottom: 1px solid rgba(255, 255, 255, .45); display: flex; align-items: center; }
.words span { font: 400 clamp(30px, 6vw, 72px)/1 var(--serif); text-transform: uppercase; color: #f4f1ea; transition: transform 1s var(--ease), opacity 1s; }

.next { padding: 18vh 16px 34vh; text-align: center; cursor: pointer; }
.next-label { margin: 0 0 8px; font-size: 8px; letter-spacing: .2em; text-transform: uppercase; color: var(--ink-2); }
.next-title { margin: 0; font: 400 clamp(48px, 8vw, 104px)/.85 var(--serif); text-transform: uppercase; }
.next-title:hover { font-style: italic; }

/* player */
#gl { cursor: pointer; }
body.is-playing .library, body.is-playing .nav { opacity: 0; pointer-events: none; transition: opacity .5s var(--ease); }
.library, .nav { transition: opacity .5s var(--ease) .2s; }
.player { position: fixed; inset: 0; z-index: 40; display: grid; grid-template-rows: auto 1fr auto; gap: 14px; padding: 18px 22px 20px;
  background: rgba(14, 14, 13, .96); color: #ecebe6; opacity: 0; transition: opacity .45s var(--ease); }
.player.on { opacity: 1; }
.player:focus { outline: none; }
.player[hidden] { display: none; }
.p-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.p-title { margin: 0; font-size: clamp(26px, 3.4vw, 40px); line-height: .9; }
.p-meta { margin: 6px 0 0; font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: rgba(236, 235, 230, .55); }
/* the video sits in the middle of the screen; title and controls stay at the top and bottom edge */
.p-video { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: calc(100% - 44px); height: calc(100% - 210px);
  object-fit: contain; background: transparent; display: block; cursor: pointer; }
.p-head, .p-controls { position: relative; z-index: 1; }
.p-controls { grid-row: 3; display: flex; align-items: center; gap: 18px; }
.p-btn { min-height: 44px; min-width: 44px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: inherit; white-space: nowrap; }
.p-btn:hover { opacity: .65; }
.p-bar { flex: 1; height: 44px; position: relative; cursor: pointer; touch-action: none; }
.p-bar::before, .p-bar i { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: rgba(236, 235, 230, .25); }
.p-bar i { background: #ecebe6; height: 2px; margin-top: -.5px; transform-origin: left; transform: scaleX(0); }
.p-time { font-size: 10px; letter-spacing: .08em; font-variant-numeric: tabular-nums; color: rgba(236, 235, 230, .7); white-space: nowrap; }
.player :focus-visible { outline-color: #ecebe6; }

/* Tune panel – desktop only */
.tune-btn { position: fixed; top: 10px; right: 16px; z-index: 35; min-height: 32px; padding: 0 12px; border: 1px solid var(--hair); border-radius: 999px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase; background: var(--paper); }
.tune-btn[aria-expanded="true"] { background: var(--ink); color: var(--paper); }
.tune { position: fixed; top: 52px; right: 16px; z-index: 35; width: 300px; max-height: calc(100vh - 70px); overflow: auto; padding: 14px 16px 16px;
  background: var(--paper); border: 1px solid var(--hair); font: 11px/1.3 var(--sans); color: var(--ink); }
.tune[hidden] { display: none; }
.tune h3 { margin: 16px 0 8px; font-size: 9px; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; display: flex; justify-content: space-between; gap: 8px; }
.tune h3:first-child { margin-top: 0; }
.tune h3 small { font-weight: 400; letter-spacing: .04em; text-transform: none; color: var(--ink-2); }
.tune-row { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; padding: 4px 0; }
.tune-row output { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.tune-row input { grid-column: 1 / -1; width: 100%; accent-color: var(--ink); margin: 2px 0 0; }
.tune-chips { display: flex; flex-wrap: wrap; gap: 5px; }
.tune-chips button, .tune-act { min-height: 28px; padding: 0 10px; border: 1px solid var(--hair); border-radius: 999px; font-size: 10.5px; }
.tune-chips button[aria-pressed="true"] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tune-chips button:hover, .tune-act:hover { border-color: var(--ink); }
.tune-act { margin-top: 8px; display: inline-flex; align-items: center; text-decoration: none; }
.tune-foot { display: flex; gap: 6px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--hair); }
.tune-out { width: 100%; margin-top: 8px; font: 10px/1.4 "JetBrains Mono", monospace; color: var(--ink); background: transparent; border: 1px solid var(--hair); padding: 6px; resize: vertical; }
/* phones: the button sits bottom right, the panel is a sheet from the bottom */
@media (max-width: 899px) {
  .tune-btn { top: auto; bottom: 52px; right: 14px; min-height: 40px; }
  .tune { top: auto; bottom: 100px; left: 10px; right: 10px; width: auto; max-height: 62vh; }
  .tune-chips button, .tune-act { min-height: 36px; }
}

@media (max-width: 760px) {
  .player { padding: 12px 14px 14px; gap: 8px; }
  .p-controls { gap: 10px; flex-wrap: wrap; }
  .p-video { width: calc(100% - 28px); height: calc(100% - 250px); }
  .p-bar { order: -1; flex-basis: 100%; height: 32px; }
  .p-time { margin-right: auto; }
}
@media (max-width: 760px) {
  .nav { gap: 12px; }
  .info { width: calc(100vw - 32px); top: 44px; }
  .title { font-size: 26px; }
  .notes { bottom: 88px; gap: 34px; }
  .note b, .logo { font-size: 15px; }
  .note b { max-width: 140px; }
  .count { bottom: 14px; }
  .hint { display: none; }
  .watch { margin-top: 16vh; }
}
@media (prefers-reduced-motion: reduce) {
  .roll i { animation: none; transform: none; }
  .facts dt, .facts dd { animation: none; background-size: 100% 1px, 100% 1px; }
  #hl.on .draw { transition: none; }
}

/* boot: the alphabet settles into the wordmark, then the stage takes over */
.boot {
  position: fixed; inset: 0; z-index: 60; display: grid; place-items: center;
  background: var(--paper); color: var(--ink);
  opacity: 1; transition: opacity .34s var(--ease);
}
.boot.is-out { opacity: 0; pointer-events: none; }
.boot__word {
  font: 400 clamp(20px, 3.6vw, 38px) "Archivo Black", "Inter Tight", system-ui, sans-serif;
  letter-spacing: -.015em; white-space: nowrap; text-transform: lowercase;
  font-variant-ligatures: none;
}
@media (prefers-reduced-motion: reduce) {
  .boot { transition-duration: .2s; }
}
/* the ten intros (Tune → Intro); --boot-t is the chosen time */
.boot__word { display: inline-block; }
html[data-type="blur"] .boot__word { font-family: "Titan One", "Archivo Black", sans-serif; letter-spacing: -.015em; filter: url(#spray-s); }
@media (max-width: 760px) { html[data-type="blur"] .boot__word { filter: url(#spray-xs); } }
.boot--blur { animation: bBlur var(--boot-t) var(--ease) both; }
@keyframes bBlur { from { color: transparent; text-shadow: 0 0 26px var(--ink); transform: scale(1.06); } to { color: var(--ink); text-shadow: 0 0 0 transparent; transform: none; } }
.boot--rgb { animation: bRgb var(--boot-t) var(--ease) both; }
@keyframes bRgb { from { letter-spacing: .25em; text-shadow: -34px 0 rgba(255, 59, 48, .85), 34px 0 rgba(0, 200, 255, .85); } 80% { text-shadow: -2px 0 rgba(255, 59, 48, .6), 2px 0 rgba(0, 200, 255, .6); } to { letter-spacing: -.015em; text-shadow: 0 0 transparent, 0 0 transparent; } }
.boot--flicker { animation: bFlick var(--boot-t) steps(1) both; }
@keyframes bFlick { 0% { opacity: 0; } 10% { opacity: 1; } 16% { opacity: .1; } 30% { opacity: .9; } 36% { opacity: 0; } 52% { opacity: 1; } 58% { opacity: .3; } 70%, 100% { opacity: 1; } }
.boot--wipe { animation: bWipe var(--boot-t) cubic-bezier(.7, 0, .2, 1) both; }
@keyframes bWipe { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0 0 0 0); } }
.boot--punch { animation: bPunch var(--boot-t) cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes bPunch { from { opacity: 0; transform: scale(3.2); } 60% { opacity: 1; transform: scale(.94); } to { transform: none; } }
.boot--drop i { display: inline-block; font-style: normal; animation: bDrop calc(var(--boot-t) * .4) cubic-bezier(.3, 1.5, .5, 1) both; }
@keyframes bDrop { from { opacity: 0; transform: translateY(-140%) rotate(-12deg); } to { opacity: 1; transform: none; } }
.boot--glitch { animation: bGlitch var(--boot-t) steps(1) both; }
@keyframes bGlitch {
  0% { opacity: 0; } 8% { opacity: 1; transform: translateX(-14px) skewX(18deg); clip-path: inset(10% 0 55% 0); }
  18% { transform: translateX(10px) skewX(-10deg); clip-path: inset(50% 0 8% 0); } 30% { transform: translateX(-5px); clip-path: inset(0 0 0 0); text-shadow: 6px 0 rgba(0, 200, 255, .7), -6px 0 rgba(255, 59, 48, .7); }
  44% { transform: translateX(7px) skewX(6deg); clip-path: inset(30% 0 30% 0); } 58% { transform: none; clip-path: inset(0 0 0 0); text-shadow: 2px 0 rgba(0, 200, 255, .5), -2px 0 rgba(255, 59, 48, .5); }
  72%, 100% { transform: none; clip-path: inset(0 0 0 0); text-shadow: none; } }

/* Contact / Impressum, bottom right above the hint */
.legal { position: absolute; right: 16px; bottom: 34px; display: flex; gap: 14px; }
.legal a { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-2); text-decoration: none; min-height: 24px; display: inline-flex; align-items: center; }
.legal a:hover { color: var(--ink); }
body.is-playing .legal { opacity: 0; pointer-events: none; }
.library > .legal { opacity: 0; transition: opacity calc(var(--roll-dur) * 1.2) var(--ease); }
body.ready .library > .legal { opacity: 1; }
@media (max-width: 760px) { .legal { bottom: 18px; right: 14px; } }

/* phones: only production, director and DoP above the tape */
@media (max-width: 760px) { .facts dt:nth-of-type(n+4), .facts dd:nth-of-type(n+4) { display: none; } }