/* Burn It Down Films — the entrance.
   Black ground, the approved stacked logo, and a very long pinned scroll that
   burns it into the reel. The fire is WebGL (js/entrance.js); this file is the
   frame around it, the final hero, the reduced-motion version, the review
   controls, and the site it releases into. */

:root {
  --ink: #000;
  --paper: #f4efe9;
  --muted: rgba(244, 239, 233, 0.74);
  --gold: #efb13e;
  --flame: #ef5f23;
  --ember: #cb3c11;
  --char: #0d0a09;
  --edge: rgba(203, 60, 17, 0.4);
  --sans: 'Fira Sans Condensed', 'Arial Narrow', system-ui, sans-serif;
  --display: 'Fira Sans Extra Condensed', 'Arial Narrow', system-ui, sans-serif;
  --travel: 15;                  /* screens of scroll the burn takes (JS sets it) */
  --gutter: clamp(16px, 4vw, 44px);
  color-scheme: dark;
}
.is-small { --travel: 8; }

* { box-sizing: border-box; }
html { background: var(--ink); -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--ink); color: var(--paper);
  font: 400 16px/1.5 var(--sans);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; }
a { color: inherit; }
button { font: inherit; color: inherit; }
.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

/* Small letterspaced caps: the deck's label voice. */
.skip, .sound, .head__nav a, .head__nav button, .cue__text {
  font: 400 12px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  white-space: nowrap;
}
/* Readable over the brightest fire. */
.head .skip, .head .sound, .head__nav a, .head__nav button { text-shadow: 0 1px 14px rgba(0, 0, 0, .75), 0 0 2px rgba(0, 0, 0, .6); }

/* ---------- Header ----------
   During the burn: Sound and Skip to Work, nothing else. Once the reel
   stands alone: the wordmark and a short nav. */

.head {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; gap: clamp(18px, 3vw, 36px);
  padding: calc(env(safe-area-inset-top, 0px) + 18px) var(--gutter) 18px;
  pointer-events: none;
}
.head > * { pointer-events: auto; }
.head__mark {
  display: block; width: clamp(112px, 11vw, 160px); margin-right: auto;
  opacity: 0; transform: translateY(-6px); pointer-events: none; visibility: hidden;
  transition: opacity .8s ease, transform .8s cubic-bezier(.2, .8, .2, 1), visibility 0s linear .8s;
}
.head__mark img { width: 100%; height: auto; }
.head__nav { display: flex; gap: clamp(18px, 2.6vw, 34px); opacity: 0; pointer-events: none; visibility: hidden; transition: opacity .8s ease .15s, visibility 0s linear .95s; }
.head__nav a, .head__nav button {
  color: var(--paper); text-decoration: none; background: none; border: 0; padding: 12px 0 10px; cursor: pointer;
  position: relative;
}
.has-hero .head__mark, .has-hero .head__nav { opacity: 1; transform: none; pointer-events: auto; visibility: visible; transition-delay: 0s; }
.has-hero .head__nav { pointer-events: auto; }

.skip, .sound {
  color: var(--muted); text-decoration: none; background: none; border: 0; cursor: pointer;
  padding: 12px 0 10px; position: relative;
  transition: color .25s ease, opacity .5s ease;
}
.skip { margin-left: 0; }
.sound span { color: var(--paper); opacity: .5; }
.sound[aria-pressed="true"] span { color: var(--flame); opacity: 1; }
.skip::after, .sound::after, .head__nav a::after, .head__nav button::after {
  content: ''; position: absolute; left: 0; right: .28em; bottom: 4px; height: 1px;
  background: var(--flame); transform: scaleX(0); transform-origin: left;
  transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
.skip:hover, .skip:focus-visible, .sound:hover, .sound:focus-visible { color: #fff; }
.skip:hover::after, .skip:focus-visible::after, .sound:hover::after, .sound:focus-visible::after,
.head__nav a:hover::after, .head__nav button:hover::after,
.head__nav a:focus-visible::after, .head__nav button:focus-visible::after { transform: scaleX(1); }
:focus-visible { outline: 1px solid var(--flame); outline-offset: 6px; }
.has-hero .skip, .is-past .skip { display: none; }
.head__mark { order: 0; } .head__nav { order: 1; } .sound { order: 2; } .skip { order: 3; }
.has-hero .head:not(:hover) .sound { opacity: .7; }

/* ---------- The pinned burn ---------- */

.burn { position: relative; height: calc((var(--travel) + 1) * 100vh); }
@supports (height: 100svh) { .burn { height: calc((var(--travel) + 1) * 100svh); } }

.burn__stage { position: sticky; top: 0; height: 100vh; overflow: hidden; background: var(--ink); --tb: 0px; }
@supports (height: 100lvh) { .burn__stage { height: 100lvh; --tb: calc(100lvh - 100svh); } }

/* The approved logo as the live site shows it today: what paints first, and
   the box the WebGL camera starts from, so the hand-off cannot shift a pixel. */
/* With motion it is never shown: the fire opens on black. It stays in the
   layout because the camera is measured from its box. */
.burn__still {
  position: absolute; left: 50%; top: calc(50% - var(--tb) / 2);
  height: min(calc(88% - var(--tb)), calc(90vw * 3887 / 1611)); width: auto;
  transform: translate(-50%, -50%);
  opacity: 0;
}
.is-small .burn__still { height: min(calc(78% - var(--tb)), calc(90vw * 3887 / 1611)); top: calc(47% - var(--tb) / 2); }
.burn__gl {
  position: absolute; inset: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .6s ease;
}
.gl-on .burn__gl { opacity: 1; }
.burn__poster { display: none; position: absolute; inset: 0; }
.burn__poster > canvas, .burn__poster > video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}

/* "Human, dangerous, and authored." (the deck's line) comes up out of the
   ashes, a line at a time, in the middle of the screen: ash lifts off the
   fire and settles into the letters (entrance.js, stepAshWords), then the
   line appears with an ember glow that cools to white. A red pill with an
   arrow follows: scroll, there's more. On scroll it all moves up with the page
   (Dan, 10/9), the lines fading one by one, and the pill turns into a small
   ball of fire that the scene takes over (entrance.js, setChrome). */
.cue {
  position: absolute; inset: 0 0 var(--tb) 0; pointer-events: none; opacity: var(--cue, 1);
  transform: translateY(var(--cy, 0px));
}
.cue__l {
  display: block; opacity: var(--o, 1);
  transform: translateY(calc((1 - var(--o, 1)) * -10px)); filter: blur(calc((1 - var(--o, 1)) * 3px));
}
.cue__text {
  position: absolute; left: 0; right: 0; top: 50%; margin: 0;
  text-align: center; color: var(--paper); padding-left: .32em;
  font-size: clamp(13px, 1.15vw, 17px); line-height: 2.2; letter-spacing: .34em;
  text-shadow: 0 1px 16px rgba(0, 0, 0, .8);
  transform: translateY(-50%);
}
.cue__l > span { display: block; opacity: 0; }
.cue__l > span.in { animation: from-ash 1.4s ease forwards; }
@keyframes from-ash {
  0% { opacity: 0; color: #ffcf7a; text-shadow: 0 0 14px rgba(239, 95, 35, .95), 0 0 3px #ffcf7a; filter: blur(1.5px); }
  25% { opacity: 1; color: #ffcf7a; text-shadow: 0 0 18px rgba(239, 95, 35, .9), 0 0 4px #ffcf7a; filter: none; }
  100% { opacity: 1; color: var(--paper); text-shadow: 0 1px 16px rgba(0, 0, 0, .8); filter: none; }
}
/* A scroll wheel: up (dimmed: at the start there is nothing above you),
   the wheel rolling, down. The arrows hold still (Dan, 10/9). */
.cue__pill {
  position: absolute; left: 50%; top: calc(50% + 4.4em + 14px); font-size: clamp(13px, 1.15vw, 17px);
  display: flex; flex-direction: column; align-items: stretch; width: 44px; padding: 4px 0;
  border-radius: 22px; background: var(--ember); color: #fff; overflow: hidden;
  box-shadow: 0 6px calc(24px + 22px * var(--orb, 0)) rgba(239, 95, 35, calc(.45 + .4 * var(--orb, 0)));
  opacity: 0; transform: translate(-50%, 8px) scale(.9); pointer-events: none;
  /* The ball of fire: squashed round, hot, then handed to the scene. */
  scale: calc(1 - .45 * var(--orb, 0)) calc(1 - .72 * var(--orb, 0)); filter: opacity(var(--po, 1));
}
.cue__pill::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(circle at 50% 55%, #fff4c8, #ffb12e 32%, #e5501c 68%, #b8300c);
  opacity: var(--orb, 0);
}
.cue__pill > * { filter: opacity(max(0, 1 - var(--orb, 0) * 1.8)); }
/* Never focusable while it can't be seen. */
.cue__pill { visibility: hidden; }
.cue.ready .cue__pill { visibility: visible; }
.cue-gone .cue__pill { visibility: hidden; }
/* For keyboards: the first Tab offers the way past the fire. */
.skiplink {
  position: fixed; left: 16px; top: 16px; z-index: 60; padding: 12px 18px; border-radius: 22px;
  background: var(--ember); color: #fff; text-decoration: none;
  font: 600 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  transform: translateY(-160%); opacity: 0;
}
.skiplink:focus { transform: none; opacity: 1; outline: 2px solid #fff; outline-offset: 3px; }
.cue__pill button {
  display: grid; place-items: center; height: 34px; padding: 0; margin: 0;
  border: 0; background: transparent; color: #fff; cursor: pointer;
  transition: background .2s ease;
}
.cue__wheel { display: block; width: 4px; height: 12px; margin: 2px auto; border-radius: 2px; background: rgba(255, 255, 255, .9); }
.cue.ready .cue__wheel { animation: wheel-roll 1.6s ease-in-out .7s infinite; }
@keyframes wheel-roll { 0% { transform: translateY(-3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(5px); opacity: 0; } }
.cue__pill button:hover { background: var(--flame); }
.cue__pill button:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.cue.ready .cue__pill { animation: pill-in .6s cubic-bezier(.2, .8, .2, 1.2) both; pointer-events: auto; }
.cue__up { opacity: .38; }
/* On a touch screen the gesture is a swipe up: up is forward, down is back. */
.is-touch .cue__up { opacity: 1; }
.is-touch .cue__down { opacity: .38; }
.is-touch .cue.ready .cue__wheel { animation-name: wheel-roll-up; }
@keyframes wheel-roll-up { 0% { transform: translateY(3px); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(-5px); opacity: 0; } }
.cue-gone .cue__pill { pointer-events: none; }
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, 8px) scale(.9); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .cue__l > span, .cue__l > span.in { animation: none; opacity: 1; }
  .cue.ready .cue__pill { animation: none; opacity: 1; transform: translate(-50%, 0); }
  .cue.ready .cue__wheel { animation: none; }
}

/* The logo itself is drawn in the WebGL scene, behind the flames, and built
   by the scroll (fire-only mode, entrance.js rasterLogo/stepBuild). */
.fire-only .hero { display: none; }
.og-shot .head, .og-shot .cue { display: none; }
.fire-only.has-hero:not(.is-past) .head__mark { opacity: 0; visibility: hidden; }

/* ---------- The finished hero: the reel, the line, one action ---------- */

.hero {
  position: absolute; left: var(--gutter); right: var(--gutter);
  bottom: calc(var(--tb) + env(safe-area-inset-bottom, 0px) + clamp(40px, 9vh, 110px));
  margin-left: clamp(0px, 4vw, 64px);
  opacity: var(--end, 0); transform: translateY(calc((1 - var(--end, 0)) * 24px));
  pointer-events: none; visibility: hidden; isolation: isolate;
}
.has-hero .hero { pointer-events: auto; visibility: visible; }
/* A soft dark pool behind the line, so gold-on-warm footage still reads. */
.hero::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  left: calc(-1 * var(--gutter) - 6vw); right: -12vw; top: -16vh; bottom: -14vh;
  background: radial-gradient(60% 60% at 30% 62%, rgba(0, 0, 0, .55), transparent 75%);
}
.hero__line {
  margin: 0; max-width: 12ch;
  font: 800 clamp(34px, min(7.6vw, 11.5vh), 132px)/.88 var(--display);
  letter-spacing: -.01em; text-transform: uppercase; color: #fff;
  text-shadow: 0 2px 40px rgba(0, 0, 0, .5);
}
.hero__line em {
  font-style: normal;
  background: linear-gradient(180deg, var(--gold), var(--ember));
  -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: none;
}
.hero__cta {
  margin-top: clamp(22px, 3.4vh, 36px);
  font: 600 13px/1 var(--sans); letter-spacing: .22em; text-transform: uppercase;
  color: #fff; background: var(--ember); border: 0; border-radius: 0;
  padding: 18px 26px 17px; cursor: pointer;
  transition: background .25s ease, transform .25s ease;
}
.hero__cta:hover { background: var(--flame); }
.hero__cta:active { transform: translateY(1px); }
.is-small .hero__line { max-width: 9ch; }
@media (max-height: 520px) {
  .hero { bottom: calc(env(safe-area-inset-bottom, 0px) + 18px); }
  .hero__line { max-width: 16ch; }
  .hero__cta { margin-top: 12px; padding: 14px 20px 13px; }
}

/* ---------- Reduced motion: straight to the finished hero ---------- */

.is-reduced .burn, .no-gl .burn { height: auto; }
.is-reduced .burn__stage, .no-gl .burn__stage { position: relative; }
.is-reduced .burn__gl, .is-reduced .cue, .is-reduced .burn__still,
.no-gl .burn__gl, .no-gl .cue, .no-gl .burn__still { display: none; }
.is-reduced .burn__poster, .no-gl .burn__poster { display: block; }
.is-reduced .burn__poster::after, .no-gl .burn__poster::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35), transparent 30%, transparent 55%, rgba(0,0,0,.55));
}
.is-reduced .hero, .no-gl .hero { --end: 1; pointer-events: auto; }
.is-reduced .head__mark, .is-reduced .head__nav,
.no-gl .head__mark, .no-gl .head__nav { opacity: 1; transform: none; pointer-events: auto; }
.is-reduced .skip, .no-gl .skip, .is-reduced .sound, .no-gl .sound { display: none; }

/* ---------- The reel, full screen with sound ---------- */

.reel-box {
  width: 100vw; height: 100vh; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0;
  border: 0; background: #000; color: var(--paper);
}
.reel-box::backdrop { background: #000; }
.reel-box__frame { position: absolute; inset: 0; display: grid; place-items: center; }
.reel-box__frame > video, .reel-box__frame > canvas { width: 100%; height: 100%; object-fit: contain; display: block; }
.reel-box__close {
  position: absolute; top: calc(env(safe-area-inset-top, 0px) + 18px); right: var(--gutter);
  font: 400 12px/1 var(--sans); letter-spacing: .28em; text-transform: uppercase;
  color: var(--paper); background: none; border: 0; padding: 12px 0 10px; cursor: pointer;
}
.reel-box__note {
  position: absolute; left: var(--gutter); bottom: var(--gutter); margin: 0;
  font: 400 12px/1.4 var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--muted);
}

/* ---------- Review controls (preview hosts only) ---------- */

.ctl {
  position: fixed; left: 12px; bottom: 12px; z-index: 40;
  font: 400 12px/1.3 var(--sans); color: var(--paper);
}
.ctl__toggle {
  font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  background: rgba(13, 10, 9, .82); color: var(--muted); border: 1px solid #2a1a12;
  padding: 9px 12px 8px; cursor: pointer; backdrop-filter: blur(6px);
}
.ctl__toggle:hover { color: #fff; }
.ctl__panel {
  width: 300px; margin-bottom: 8px; padding: 14px 14px 12px;
  max-height: calc(100vh - 70px); max-height: calc(100dvh - 70px); overflow: auto;
  background: rgba(13, 10, 9, .9); border: 1px solid #2a1a12; backdrop-filter: blur(8px);
  display: grid; gap: 10px;
}
.ctl__panel[hidden] { display: none; }
.ctl__row { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.ctl__row label { color: var(--muted); letter-spacing: .06em; }
.ctl__row output { font-variant-numeric: tabular-nums; color: #fff; }
.ctl__row input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--flame); }
.ctl__row select, .ctl__row input[type="url"] {
  grid-column: 1 / -1; width: 100%; background: #000; color: var(--paper); border: 1px solid #2a1a12;
  padding: 6px; font: inherit;
}
.ctl__read { color: var(--muted); font-variant-numeric: tabular-nums; border-top: 1px solid #2a1a12; padding-top: 8px; }
.ctl__read b { color: #fff; font-weight: 600; }
.ctl__btns { display: flex; gap: 8px; }
.ctl__btns button {
  flex: 1; background: #000; color: var(--paper); border: 1px solid #2a1a12; padding: 7px; cursor: pointer;
  font: 600 11px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
}
.ctl__btns button:hover { border-color: var(--flame); }
.is-small .ctl__panel { width: min(300px, calc(100vw - 24px)); }
.has-ctl .foot { padding-bottom: 72px; }

/* Until the real reel is on the box, nothing offers to play it. */
.no-reel .js-reel { display: none !important; }

/* ---------- Footer: the wordmark, the year, the SIDES credit ---------- */

.foot {
  position: relative; z-index: 1; background: var(--ink);
  display: flex; align-items: center; flex-wrap: wrap; gap: 14px 28px;
  padding: 30px var(--gutter) calc(env(safe-area-inset-bottom, 0px) + 30px);
  border-top: 1px solid rgba(203, 60, 17, 0.28);
  font: 400 11px/1.4 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--muted);
}
.foot__mark { width: 118px; height: auto; opacity: .9; }
.foot__copy { margin: 0; }
.foot .credit { margin-left: auto; }

/* The SIDES signature (same card as every SIDES client site). */
.credit { position: relative; display: inline-flex; }
.madeby {
  display: inline-flex; align-items: center; gap: .6rem; color: var(--muted); text-decoration: none;
  letter-spacing: .08em; text-transform: none; font-size: 12px; opacity: .75; transition: opacity .2s;
}
.madeby:hover { opacity: 1; }
.madeby img { width: auto; height: 22px; }
.ccard {
  position: absolute; right: -.5rem; bottom: calc(100% + 14px); width: min(290px, calc(100vw - 32px)); z-index: 20;
  pointer-events: none; opacity: 0; transform: translateY(10px);
  transition: opacity .25s, transform .35s cubic-bezier(.2, .9, .3, 1.2);
  text-transform: none; letter-spacing: normal;
}
.ccard::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 16px; }
.credit:hover .ccard, .credit:focus-within .ccard, .credit.open .ccard { pointer-events: auto; opacity: 1; transform: none; }
.ccard__in {
  position: relative; display: block; padding: 1px; border-radius: 14px; overflow: hidden; text-align: left;
  background: linear-gradient(135deg, #5e4f36, #e9d3a4 25%, #9c845c 45%, #f4e2bb 60%, #5e4f36 85%);
  box-shadow: 0 30px 60px -20px #000, 0 0 0 1px rgba(0, 0, 0, .6);
}
.ccard__in > * { position: relative; z-index: 1; }
.ccard__in::before {
  content: ""; position: absolute; inset: 1px; border-radius: 13px; z-index: 0;
  background: radial-gradient(300px 160px at 100% 0%, rgba(0, 209, 255, .14), transparent 70%), linear-gradient(180deg, #171717, #0b0b0b);
}
.ccard__in::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(240px circle at var(--sx, 30%) var(--sy, 0%), rgba(255, 236, 190, .22), transparent 60%);
}
.ccard__top { display: block; padding: .9rem 1.1rem 0; font: 800 .56rem/1 var(--sans); letter-spacing: .24em; text-transform: uppercase; color: #e9d3a4; }
.ccard__big { display: block; padding: .6rem 1.1rem 0; font: 800 1.45rem/.95 var(--display); text-transform: uppercase; color: #fff; }
.ccard__say { display: block; padding: .85rem 1.1rem 0; font-size: .74rem; line-height: 1.5; color: #c9c9c9; }
.ccard__url { display: inline-flex; align-items: center; gap: .4rem; margin: .8rem 1.1rem 1rem; font: 700 .72rem/1 var(--sans); letter-spacing: .04em; color: #00d1ff !important; text-decoration: none; }
.ccard__url::after { content: "\2192"; transition: transform .2s; }
.ccard__url:hover::after { transform: translateX(3px); }
.ccard__ig { display: flex; width: max-content; align-items: center; gap: .4rem; margin: -.35rem 1.1rem 1rem; font: 700 .72rem/1 var(--sans); letter-spacing: .04em; color: #c9c9c9 !important; text-decoration: none; transition: color .2s; }
.ccard__ig:hover { color: #fff !important; }
.ccard__ig svg { width: 13px; height: 13px; flex: none; display: block; }
@media (prefers-reduced-motion: reduce) { .ccard { transition: none; } }
@media (max-width: 760px) {
  .head { gap: 16px; }
  .foot .credit { margin-left: 0; }
  .ccard { right: auto; left: -.5rem; }
}