/* ---- tokens ---- */
:root {
  --ink: #07060a;
  --seam: #0f0c13;
  --indigo: #1d1633;
  --violet: #7c5cff;
  --violet-soft: #b7a6ff;
  --gold: #d3a54a;
  --gold-bright: #f3d27e;
  --parchment: #efe6d6;
  --mute: #a59c90;
  --font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --font-body: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: normal; font-display: swap; src: url('../fonts/cormorant-500.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 600; font-style: normal; font-display: swap; src: url('../fonts/cormorant-600.woff2') format('woff2'); }
@font-face { font-family: 'Cormorant Garamond'; font-weight: 500; font-style: italic; font-display: swap; src: url('../fonts/cormorant-500i.woff2') format('woff2'); }
@font-face { font-family: 'Manrope'; font-weight: 200 800; font-style: normal; font-display: swap; src: url('../fonts/manrope-var.woff2') format('woff2'); }

/* ---- base ---- */
* { box-sizing: border-box; }
html { background: var(--ink); color: var(--parchment); scroll-behavior: auto; }
body { margin: 0; font: 400 16px/1.55 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { display: block; }
a { color: inherit; }

.skip { position: fixed; left: -999px; top: 8px; z-index: 100; padding: .5rem 1rem; background: var(--ink); color: var(--gold-bright); }
.skip:focus { left: 8px; }

/* ---- header ---- */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; color: var(--parchment);
  transition: color .4s ease;
}
.header.on-light { color: #14101d; }
.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.brand-mark { width: 36px; height: auto; }
.header.on-light .brand-mark { filter: brightness(.72) saturate(1.15); }
.brand-word { font: 600 1.35rem/1 var(--font-display); letter-spacing: .08em; }
.header-apply {
  font: 600 .74rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; text-decoration: none;
  padding: .7rem 1.1rem; border: 1px solid currentColor; border-radius: 999px; opacity: .85; transition: opacity .2s;
}
.header-apply:hover, .header-apply:focus-visible { opacity: 1; }

/* ---- film + stage ---- */
.film { position: relative; background: var(--ink); }
.stage { position: sticky; top: 0; height: 100vh; overflow: hidden; }
.poster, .screen, .ambient, .stills { position: absolute; inset: 0; width: 100%; height: 100%; }
.poster { object-fit: cover; object-position: 50% 50%; }
.stills img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .9s ease; }
.stills img.is-on { opacity: 1; }
.ambient { pointer-events: none; }
.vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(7, 6, 10, .55) 100%); }
.fade-bottom { position: absolute; left: 0; right: 0; bottom: 0; height: 38vh; pointer-events: none; opacity: 0; background: linear-gradient(to bottom, rgba(15, 12, 19, 0), var(--seam)); }
.spacer { width: 100%; }

/* plate layers (markup added by later tasks) */
.layer { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.layer.is-active { opacity: 1; visibility: visible; }
.layer .plates { position: absolute; inset: 0; }
.plate { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: transform, opacity; }

/* ---- beats ---- */
.beat { position: absolute; opacity: 0; visibility: hidden; pointer-events: none; will-change: opacity, transform; }
.beat.is-on { visibility: visible; pointer-events: auto; }
.beat-hero { inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 0 6vw; }
.hero-mark { width: clamp(120px, 16vw, 200px); height: auto; filter: drop-shadow(0 0 30px rgba(124, 92, 255, .35)); }
.beat-hero h1 { margin: .4rem 0 0; font: 600 clamp(3rem, 7vw, 6.2rem)/1 var(--font-display); letter-spacing: .1em; text-shadow: 0 0 40px rgba(211, 165, 74, .25); }
.tagline { margin: 0; font: italic 500 clamp(1.1rem, 1.8vw, 1.5rem)/1.3 var(--font-display); color: var(--gold-bright); letter-spacing: .04em; }
.beat-canopy { inset: 0; display: grid; place-items: center; text-align: center; padding: 0 6vw; }
.beat-canopy h2 { margin: 0; font: italic 500 clamp(2rem, 4.6vw, 4rem)/1.1 var(--font-display); text-shadow: 0 0 30px rgba(7, 6, 10, .8); }
.beat-finale { left: 7vw; bottom: 14vh; max-width: 520px; }
.finale-mark { width: 56px; height: auto; }
.beat-finale h2 { margin: .6rem 0 1.3rem; font: 600 clamp(2rem, 4vw, 3.4rem)/1.1 var(--font-display); text-shadow: 0 0 30px rgba(7, 6, 10, .8); }
.button {
  display: inline-block; padding: .95rem 2.1rem; border-radius: 999px;
  background: linear-gradient(135deg, var(--gold-bright), var(--gold)); color: #1a1208;
  font: 700 .82rem/1 var(--font-body); letter-spacing: .2em; text-transform: uppercase; text-decoration: none;
  box-shadow: 0 0 40px rgba(211, 165, 74, .35); transition: transform .2s, box-shadow .2s;
}
.button:hover, .button:focus-visible { transform: translateY(-1px); box-shadow: 0 0 56px rgba(211, 165, 74, .5); }

/* ---- after the film ---- */
.after { position: relative; background: var(--seam); padding: 18vh 7vw 14vh; }
.after-inner { max-width: 720px; }
.after h2 { margin: 0 0 1rem; font: 600 clamp(2rem, 3.6vw, 3rem)/1.1 var(--font-display); }

.footer { background: var(--seam); border-top: 1px solid rgba(239, 230, 214, .08); padding: 3rem 7vw 4rem; color: var(--mute); }
.footer-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 1.5rem 3rem; }
.footer .brand-word { font-size: 1.1rem; color: var(--parchment); }
.footer-links a { font-size: .9rem; text-decoration: none; border-bottom: 1px solid rgba(211, 165, 74, .5); }
.footer-copy { margin: 0; margin-left: auto; font-size: .85rem; }

/* ---- boot veil ---- */
.veil { position: fixed; inset: 0; z-index: 60; background: var(--ink); display: grid; place-content: center; justify-items: center; transition: opacity .6s ease; }
.veil.is-gone { opacity: 0; pointer-events: none; }
.veil[hidden] { display: none; }
.veil-word { font: 600 2rem/1 var(--font-display); letter-spacing: .12em; color: var(--parchment); }
.veil-bar { display: block; width: 160px; height: 1px; margin-top: 14px; background: rgba(239, 230, 214, .15); }
.veil-bar i { display: block; height: 100%; width: 0; background: var(--gold); transition: width .2s linear; }

/* layers: tasks 8-10 append below */

/* ---- tilt layer ---- */
.layer-tilt { perspective: 1200px; }
.tilt-scene { position: absolute; inset: 0; transform-origin: 50% 62%; will-change: transform; }
.tilt-hold { opacity: 1; }
.tilt-blur {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; filter: blur(7px);
  -webkit-mask-image: radial-gradient(ellipse at 50% 55%, transparent 42%, #000 88%);
  mask-image: radial-gradient(ellipse at 50% 55%, transparent 42%, #000 88%);
}
.tilt-vignette { position: absolute; inset: 0; opacity: 0; background: radial-gradient(ellipse at 50% 55%, transparent 45%, rgba(7, 6, 10, .95) 100%); }
.tilt-next { will-change: opacity; }

/* ---- stations layer ---- */
.hairlines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.hair { opacity: 0; transition: opacity .3s ease; }
.hair-line { fill: none; stroke: var(--gold); stroke-width: 1; opacity: .8; }
.hair-dot { fill: var(--gold-bright); }
.hair-glow { fill: var(--gold); transform-box: fill-box; transform-origin: center; animation: hair-pulse 3.2s ease-in-out infinite; }
@keyframes hair-pulse { 50% { transform: scale(1.7); } }
.motes-back, .motes-front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.stop { position: absolute; top: 50%; left: 7vw; width: min(38vw, 520px); transform: translateY(-50%); opacity: 0; will-change: opacity; }
.stop[data-side="right"] { left: auto; right: 7vw; }
.stop h2 { margin: 0 0 1.2rem; font: 600 clamp(1.7rem, 3vw, 2.6rem)/1.15 var(--font-display); text-shadow: 0 0 24px rgba(7, 6, 10, .9); }
.stop ul { list-style: none; margin: 0; padding: 0; }
.stop li { margin: .85rem 0; font-size: clamp(.95rem, 1.15vw, 1.1rem); color: var(--mute); text-shadow: 0 1px 12px rgba(7, 6, 10, .9); }
.stop li b { color: var(--parchment); font-weight: 600; }

/* ---- branches layer ---- */
.cards { position: absolute; inset: 0; }
.card {
  position: absolute; left: 50%; top: 52%; width: min(56vw, 760px); margin: 0; opacity: 0; will-change: transform, opacity;
  transform: translate(-50%, -50%) translate3d(var(--x, 0px), var(--y, 0px), 0) rotate(var(--r, 0deg));
}
.card img {
  width: 100%; height: auto; aspect-ratio: 16 / 10; object-fit: cover;
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 50%, transparent 100%);
  mask-image: radial-gradient(ellipse at 50% 50%, #000 50%, transparent 100%);
  filter: sepia(.18) saturate(.85) brightness(.9);
}
.card figcaption { text-align: center; margin-top: -1.4rem; text-shadow: 0 1px 12px rgba(7, 6, 10, .9); }
.card h3 { margin: 0 0 .3rem; font: 600 clamp(1.4rem, 2vw, 1.9rem)/1.1 var(--font-display); color: var(--gold-bright); }
.card p { margin: 0; color: var(--mute); font-size: clamp(.9rem, 1.05vw, 1.05rem); }

/* ---- apply page ---- */
.apply-body { background: var(--ink); }
.header-static { position: absolute; }
.apply-hero { position: relative; min-height: 92vh; display: flex; align-items: flex-end; overflow: hidden; }
.apply-tree { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 28%; }
.apply-hero-fade { position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(7, 6, 10, .3) 0%, rgba(7, 6, 10, .2) 35%, rgba(7, 6, 10, .82) 70%, var(--ink) 100%); }
.apply-hero-inner { position: relative; max-width: 760px; padding: 24vh 7vw 8vh; }
.apply-tagline { margin: 0 0 .8rem; font: italic 500 clamp(1.05rem, 1.6vw, 1.3rem)/1.3 var(--font-display); color: var(--gold-bright); letter-spacing: .04em; }
.apply-hero h1 { margin: 0 0 1.3rem; font: 600 clamp(2.4rem, 5vw, 4.2rem)/1.05 var(--font-display); text-shadow: 0 0 30px rgba(7, 6, 10, .9); }
.lines p { margin: 0; color: var(--parchment); font: 500 clamp(1.1rem, 1.5vw, 1.3rem)/1.6 var(--font-display); }
.lines { margin: 0 0 1.2rem; }
.apply-copy { margin: 0 0 1rem; color: var(--mute); font-size: clamp(1rem, 1.15vw, 1.1rem); text-shadow: 0 1px 12px rgba(7, 6, 10, .9); }
.apply-copy b { color: var(--parchment); }
.apply-status { margin: 1.8rem 0 1.2rem; font: 600 .74rem/1 var(--font-body); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-bright); }
.deck { max-width: 720px; padding: 6vh 7vw; }
.deck h2 { margin: 0 0 1.2rem; font: 600 clamp(1.8rem, 3vw, 2.6rem)/1.15 var(--font-display); }
.deck h3 { margin: 0 0 1rem; font: italic 500 clamp(1.5rem, 2.4vw, 2rem)/1.2 var(--font-display); color: var(--gold-bright); }
.deck p { margin: 0 0 1rem; color: var(--mute); font-size: clamp(1rem, 1.15vw, 1.1rem); }
.deck p b, .deck li b { color: var(--parchment); }
.deck .genres b { font: 600 clamp(1.3rem, 2vw, 1.7rem)/1.5 var(--font-display); }
.deck ul { margin: 0 0 1rem; padding-left: 1.2rem; color: var(--mute); }
.deck li { margin: .5rem 0; }
.deck .button { margin-top: .6rem; }
.deck .apply-closing { margin: 2rem 0 0; font: italic 500 clamp(1.05rem, 1.5vw, 1.25rem)/1.4 var(--font-display); color: var(--gold-bright); }
.deck-rule { width: 64px; height: 1px; margin: 0 7vw; border: 0; background: rgba(211, 165, 74, .45); }
.apply-form-section { max-width: 720px; padding: 6vh 7vw 14vh; }
.apply-form-section h2 { margin: 0 0 .6rem; font: 600 clamp(1.8rem, 3vw, 2.6rem)/1.15 var(--font-display); }
.apply-form-lede { margin: 0 0 2rem; color: var(--mute); }
.field { display: block; margin: 0 0 1.4rem; }
.field > span, .choices legend { display: block; margin-bottom: .5rem; font: 600 .76rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--gold-bright); }
.field small { display: block; margin-top: .4rem; color: var(--mute); font-size: .85rem; }
.field input, .field textarea {
  width: 100%; padding: .8rem .95rem; border-radius: 6px;
  background: rgba(239, 230, 214, .04); border: 1px solid rgba(239, 230, 214, .18);
  color: var(--parchment); font: 400 1rem/1.5 var(--font-body);
}
.field input::placeholder, .field textarea::placeholder { color: rgba(165, 156, 144, .6); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px rgba(211, 165, 74, .18); }
.choices { border: 0; padding: 0; margin: 0 0 1.4rem; }
.choices label { display: inline-flex; align-items: center; gap: .5rem; margin: .3rem 1.6rem .3rem 0; color: var(--parchment); }
.choices input, .consent input { accent-color: var(--gold); width: 1.05rem; height: 1.05rem; }
.consent { display: flex; align-items: flex-start; gap: .7rem; margin: .4rem 0 1.8rem; color: var(--parchment); }
.consent input { flex: none; margin-top: .25rem; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.apply-form-section .button { border: 0; cursor: pointer; }
.apply-form-section .button:disabled { opacity: .6; cursor: wait; transform: none; box-shadow: none; }
.sent, .failed { margin: 0 0 1.6rem; padding: 1.1rem 1.4rem; border-left: 2px solid var(--gold); background: rgba(211, 165, 74, .06); color: var(--parchment); }
.sent:target { display: block; }
.failed { border-left-color: #c0564f; background: rgba(192, 86, 79, .08); }
.failed p { margin: 0; }
.failed a { color: var(--gold-bright); }
.errors { margin: .6rem 0 0; padding-left: 1.2rem; color: var(--mute); font-size: .9rem; }
.errors:empty { display: none; }
@media (max-width: 760px) {
  .apply-hero-inner, .deck, .apply-form-section { padding-left: 6vw; padding-right: 6vw; }
  .apply-hero { min-height: 80vh; }
  .deck-rule { margin-left: 6vw; }
  .choices label { display: flex; margin-right: 0; }
}

/* ---- phones ---- */
.phone .header { padding: 14px 18px; }
.phone .brand-mark { width: 28px; }
.phone .beat-finale { left: 6vw; right: 6vw; bottom: 12vh; max-width: none; }
.phone .stop { top: auto; bottom: 7vh; left: 6vw; right: 6vw; width: auto; transform: none; }
.phone .stop[data-side="right"] { left: 6vw; right: 6vw; }
.phone .stop h2 { font-size: 1.6rem; }
.phone .stop li { margin: .5rem 0; font-size: .95rem; }
.phone .hairlines { display: none; }
.phone .card { width: 82vw; top: 50%; }
.phone .after, .phone .footer { padding-left: 6vw; padding-right: 6vw; }
.phone .footer-copy { margin-left: 0; }

/* ---- reduced motion ---- */
.reduced .screen, .reduced .ambient, .reduced .motes-back, .reduced .motes-front { display: none; }
.reduced .stills { display: block; }
.reduced .plate, .reduced .stop, .reduced .card, .reduced .tilt-next, .reduced .beat { transition: opacity .6s ease; }
.reduced .hair-glow { animation: none; }