/* film.css — "A Thousand Saturdays", a love letter that plays like a film.
 *
 * The whole piece is shot, not drawn: a 2.39:1 frame, a warm grade, grain,
 * bokeh and a soft leak of light down one side. Nothing here is a photograph,
 * so it loads instantly and never waits on a download — the atmosphere is
 * made of gradients, one canvas and a grain filter.
 *
 *   --print   the film stock       --title  the type printed on it
 *   --warm    the grade            --leak   the light that gets in
 *
 * Every motion is transform/opacity and has a still counterpart under
 * prefers-reduced-motion.
 */

:root {
  --print:#0b0907; --print-2:#141010; --print-3:#1d1715;
  --title:#f6efe4; --title-soft:#c9bcab; --title-faint:#8b7e70;
  --warm:#e8a765; --warm-deep:#b4692c; --rose:#d98282; --rose-deep:#8e3b47;
  --leak:rgba(232,167,101,.22);
  --line:rgba(246,239,228,.14);
  --serif:'Cormorant Garamond', Georgia, serif;
  --sans:'Inter', ui-sans-serif, system-ui, sans-serif;
  --mono:'JetBrains Mono', ui-monospace, monospace;
  --script:'Great Vibes', cursive;
  --ease:cubic-bezier(.22,.7,.2,1);
  --wrap:min(1120px, 92vw);
  --read:min(640px, 88vw);
}

* { box-sizing:border-box; }
html, body { margin:0; padding:0; }
html { scroll-behavior:smooth; background:#000; }
body {
  background:
    radial-gradient(120% 90% at 50% 0%, var(--print-3), transparent 55%),
    radial-gradient(90% 70% at 100% 100%, rgba(142,59,71,.22), transparent 60%),
    var(--print);
  color:var(--title); font-family:var(--sans); font-size:17px; line-height:1.7;
  -webkit-font-smoothing:antialiased; overflow-x:hidden; min-height:100svh;
}

/* grain + the light leak, painted over everything, never animated */
body::before {
  content:''; position:fixed; inset:0; z-index:8; pointer-events:none;
  background:linear-gradient(100deg, var(--leak), transparent 26%, transparent 74%, rgba(217,130,130,.12));
  mix-blend-mode:screen;
}
body::after {
  content:''; position:fixed; inset:-50%; z-index:9; pointer-events:none; opacity:.30;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay; animation:jitter 1.1s steps(3) infinite;
}
@keyframes jitter { 0%{transform:translate(0,0)} 33%{transform:translate(-1.5%,1%)} 66%{transform:translate(1%,-1.5%)} 100%{transform:translate(0,0)} }

#dust { position:fixed; inset:0; z-index:2; pointer-events:none; }

.wrap { width:var(--wrap); margin-inline:auto; }
.read { width:var(--read); margin-inline:auto; }
.sr { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }
.skip { position:absolute; left:-999px; top:8px; background:var(--title); color:var(--print); padding:10px 16px; z-index:60; }
.skip:focus { left:8px; }
:focus-visible { outline:2px solid var(--warm); outline-offset:4px; }

h1, h2, h3 { font-family:var(--serif); font-weight:500; line-height:1.08; margin:0; letter-spacing:.005em; }
p { margin:0 0 1.1em; }
a { color:var(--warm); text-underline-offset:3px; }

.slug { font-family:var(--mono); font-size:.66rem; letter-spacing:.3em; text-transform:uppercase; color:var(--title-faint); }
.script { font-family:var(--script); color:var(--rose); font-size:1.5rem; line-height:1; }
.amber { color:var(--warm); }

/* ── the frame: everything happens inside 2.39:1 bars ─────────────────── */
.bars { position:fixed; left:0; right:0; z-index:7; height:clamp(26px, 5.2vh, 64px); background:#000; pointer-events:none; }
.bars.t { top:0; box-shadow:0 1px 0 rgba(246,239,228,.06); }
.bars.b { bottom:0; box-shadow:0 -1px 0 rgba(246,239,228,.06); }
.hud {
  position:fixed; z-index:8; left:0; right:0; display:flex; justify-content:space-between;
  padding:0 clamp(14px, 3vw, 34px); font-family:var(--mono); font-size:.6rem;
  letter-spacing:.24em; color:var(--title-faint); pointer-events:none;
}
.hud.t { top:clamp(26px, 5.2vh, 64px); padding-top:10px; }
.hud.b { bottom:clamp(26px, 5.2vh, 64px); padding-bottom:10px; }
.rec { display:inline-flex; align-items:center; gap:7px; }
.rec i { width:7px; height:7px; border-radius:50%; background:var(--rose); animation:blink 2s steps(2) infinite; }
@keyframes blink { 50%{opacity:.25} }

/* ── the leader: 3 · 2 · 1 before the title ───────────────────────────── */
.leader {
  position:fixed; inset:0; z-index:30; background:#080605; display:grid; place-items:center;
  transition:opacity .8s var(--ease), visibility .8s;
}
.leader.gone { opacity:0; visibility:hidden; }
.leader-ring { position:relative; width:min(240px, 52vw); aspect-ratio:1; display:grid; place-items:center; }
.leader-ring::before, .leader-ring::after { content:''; position:absolute; inset:0; border:1px solid rgba(246,239,228,.16); border-radius:50%; }
.leader-ring::after { inset:14%; }
.leader-cross { position:absolute; inset:0; }
.leader-cross::before, .leader-cross::after { content:''; position:absolute; background:rgba(246,239,228,.16); }
.leader-cross::before { left:50%; top:0; bottom:0; width:1px; }
.leader-cross::after { top:50%; left:0; right:0; height:1px; }
.leader-sweep { position:absolute; inset:0; border-radius:50%; background:conic-gradient(rgba(246,239,228,.10) var(--sweep, 0deg), transparent 0); }
.leader n { font-family:var(--serif); font-size:clamp(4rem, 15vw, 8rem); }

/* ── the poster (home) ────────────────────────────────────────────────── */
.poster { min-height:100svh; display:grid; place-items:center; text-align:center; padding:16svh 0 14svh; position:relative; }
.poster .inner { display:grid; gap:20px; justify-items:center; }
.poster h1 { font-size:clamp(2.1rem, 8.4vw, 6rem); letter-spacing:.015em; text-wrap:balance; }
.poster h1 .w { display:inline-block; white-space:nowrap; }
.poster h1 .l { display:inline-block; opacity:0; transform:translateY(24px) rotate(2deg); animation:rise .9s var(--ease) forwards; }
@keyframes rise { to { opacity:1; transform:none; } }
.poster .for { font-family:var(--serif); font-size:clamp(1.05rem, 2.6vw, 1.5rem); color:var(--title-soft); font-style:italic; }
.poster .meta { display:flex; flex-wrap:wrap; gap:10px 22px; justify-content:center; }

.btn {
  display:inline-flex; align-items:center; gap:10px; font-family:var(--sans); font-size:.72rem;
  letter-spacing:.24em; text-transform:uppercase; padding:15px 30px; border-radius:2px;
  border:1px solid var(--warm); color:var(--print); background:var(--warm); cursor:pointer;
  text-decoration:none; transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.btn:hover { transform:translateY(-2px); box-shadow:0 14px 34px -18px var(--warm-deep); }
.btn.ghost { background:none; color:var(--title); border-color:var(--line); }
.btn.ghost:hover { border-color:var(--warm); color:var(--warm); }
.btn.small { padding:10px 18px; font-size:.64rem; }
.btn .play { width:0; height:0; border:6px solid transparent; border-left-color:currentColor; margin-left:2px; }

/* ── scenes ───────────────────────────────────────────────────────────── */
.scene { min-height:92svh; display:grid; align-content:center; padding:12svh 0; position:relative; }
.scene + .scene { border-top:1px solid rgba(246,239,228,.06); }
.slate {
  display:inline-flex; align-items:baseline; gap:14px; padding:9px 16px; margin-bottom:22px;
  border:1px solid var(--line); font-family:var(--mono); font-size:.62rem; letter-spacing:.24em;
  text-transform:uppercase; color:var(--title-soft);
}
.slate b { color:var(--warm); font-weight:500; }
.scene h2 { font-size:clamp(1.9rem, 5.6vw, 3.4rem); margin-bottom:18px; }
.scene p { color:var(--title-soft); font-size:clamp(1rem, 1.6vw, 1.12rem); }
.scene .pull { font-family:var(--serif); font-size:clamp(1.4rem, 3.4vw, 2.1rem); color:var(--title); line-height:1.35; font-style:italic; }

.fade { opacity:0; transform:translateY(22px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.fade.in { opacity:1; transform:none; }
.fade.d1 { transition-delay:.12s } .fade.d2 { transition-delay:.24s } .fade.d3 { transition-delay:.36s }

/* the progress strip — a film edge with sprocket holes */
.strip { position:fixed; left:0; top:0; bottom:0; width:16px; z-index:6; pointer-events:none;
  background:repeating-linear-gradient(to bottom, transparent 0 14px, rgba(246,239,228,.10) 14px 22px); }
.strip i { position:absolute; left:0; right:0; top:0; background:linear-gradient(var(--warm), var(--rose)); height:var(--p, 0%); opacity:.5; }
@media (max-width:760px) { .strip { display:none; } }

/* ── the reasons deck ─────────────────────────────────────────────────── */
/* The deck is positioned, not a grid: an absolutely positioned card resolves
   percentages against its containing block, so everything here is in pixels. */
.deck { position:relative; height:min(44svh, 380px); perspective:1400px; margin:34px auto 0; width:min(400px, 84vw); }
.rcard {
  position:absolute; inset:0; border:1px solid var(--line);
  background:linear-gradient(160deg, var(--print-3), var(--print-2)); border-radius:4px;
  display:grid; align-content:center; gap:16px; padding:30px 28px; text-align:center;
  box-shadow:0 30px 70px -40px #000; transition:transform .6s var(--ease), opacity .6s var(--ease);
  transform:translateY(calc(var(--i) * 10px)) scale(calc(1 - var(--i) * .04)); opacity:calc(1 - var(--i) * .22);
  cursor:grab;
}
.rcard[data-gone="1"] { transform:translateX(-120%) rotate(-12deg); opacity:0; pointer-events:none; }
.rcard .no { font-family:var(--mono); font-size:.66rem; letter-spacing:.3em; color:var(--warm); }
.rcard .txt { font-family:var(--serif); font-size:clamp(1.25rem, 2.6vw, 1.7rem); line-height:1.32; margin:0; }
.rcard .no { margin:0; }
.deck-ctl { display:flex; gap:10px; justify-content:center; align-items:center; margin-top:22px; }

/* ── the countdown ────────────────────────────────────────────────────── */
.clock { display:flex; flex-wrap:wrap; gap:clamp(14px, 3vw, 34px); justify-content:center; }
.clock div { text-align:center; min-width:74px; }
.clock b { display:block; font-family:var(--serif); font-size:clamp(2.2rem, 6vw, 3.6rem); line-height:1; }
.clock span { font-family:var(--mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--title-faint); }

/* ── credits ──────────────────────────────────────────────────────────── */
.credits { display:grid; gap:34px; justify-items:center; text-align:center; padding:14svh 0; }
.credit { display:grid; gap:6px; }
.credit span { font-family:var(--mono); font-size:.6rem; letter-spacing:.3em; text-transform:uppercase; color:var(--title-faint); }
.credit b { font-family:var(--serif); font-weight:500; font-size:clamp(1.3rem, 3.4vw, 2rem); }
.credits .theend { font-family:var(--serif); font-size:clamp(2.4rem, 8vw, 4.6rem); letter-spacing:.06em; margin:0; }

/* ── nav + footer ─────────────────────────────────────────────────────── */
.reel-nav {
  position:fixed; z-index:12; left:50%; translate:-50% 0; bottom:calc(clamp(26px, 5.2vh, 64px) + 14px);
  display:flex; gap:6px; padding:6px; border-radius:100px; border:1px solid var(--line);
  background:rgba(11,9,7,.72); backdrop-filter:blur(8px);
}
.reel-nav a {
  font-family:var(--mono); font-size:.58rem; letter-spacing:.2em; text-transform:uppercase;
  color:var(--title-soft); text-decoration:none; padding:8px 13px; border-radius:100px; white-space:nowrap;
}
@media (max-width:520px) {
  .reel-nav { gap:2px; padding:5px; bottom:calc(clamp(26px, 5.2vh, 64px) + 26px); }
  .reel-nav a { font-size:.52rem; letter-spacing:.12em; padding:7px 9px; }
}
.reel-nav a[aria-current="page"] { background:var(--warm); color:var(--print); }
.foot { padding:8svh 0 calc(clamp(26px, 5.2vh, 64px) + 78px); color:var(--title-faint); font-size:.78rem; text-align:center; }
.foot a { color:var(--title-soft); }

.note-form { display:grid; gap:14px; width:var(--read); margin-inline:auto; text-align:left; }
label { display:grid; gap:7px; font-family:var(--mono); font-size:.6rem; letter-spacing:.24em; text-transform:uppercase; color:var(--title-faint); }
input, textarea {
  font:inherit; font-size:1rem; color:var(--title); background:rgba(246,239,228,.04);
  border:1px solid var(--line); border-radius:3px; padding:13px 15px; width:100%;
}
textarea { min-height:130px; resize:vertical; }
input:focus, textarea:focus { outline:none; border-color:var(--warm); }

@media (max-width:640px) { body { font-size:16px; } }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  body::after { animation:none; }
  .rec i { animation:none; }
  .poster h1 .l { animation:none; opacity:1; transform:none; }
  .fade { opacity:1; transform:none; transition:none; }
  .rcard { transition:none; }
  .leader { display:none; }
}