/* ═══════════ CineMuse — cinema dark, gold light ═══════════ */
:root {
  --bg:#16130f; --bg-2:#1e1a14; --panel:rgba(34,29,22,.82); --panel-brd:rgba(245,179,66,.14);
  --ink:#f3ead9; --muted:#a99a82; --faint:#6e6353;
  --gold:#f5b342; --gold-deep:#c07c0a; --gold-glow:rgba(245,179,66,.35);
  /* validated categorical palette (dark surface #16130f — all checks pass) */
  --c-story:#c07c0a; --c-pacing:#e04f3a; --c-visual:#8b6ef0; --c-color:#0aa896; --c-sound:#3b82f6;
  --praise:#3fae6a; --fix:#e04f3a;
  --radius:16px;
  --font:'Georgia', 'Times New Roman', serif;
  --sans:system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
}

* { box-sizing:border-box; }
[hidden] { display:none !important; }   /* must beat any display rule below */
html, body { margin:0; padding:0; }
body {
  background:
    radial-gradient(1000px 500px at 50% -10%, rgba(245,179,66,.09), transparent 60%),
    radial-gradient(700px 700px at 110% 100%, rgba(139,110,240,.05), transparent 55%),
    var(--bg);
  color:var(--ink); font-family:var(--sans); min-height:100vh; overflow-x:hidden;
}
/* film-grain */
body::after { content:''; position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:0;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E"); }
.spotlight { position:fixed; top:-220px; left:50%; transform:translateX(-50%); width:900px; height:520px;
  background:radial-gradient(ellipse at center top, rgba(245,179,66,.13), transparent 70%);
  pointer-events:none; z-index:0; }

/* ── chrome ── */
.topbar { position:relative; z-index:2; display:flex; align-items:center; justify-content:space-between;
  max-width:1080px; margin:0 auto; padding:18px 20px 6px; }
.brand-lockup { display:flex; align-items:center; gap:12px; }
.logo-badge { width:44px; height:44px; display:grid; place-items:center; font-size:1.4rem; border-radius:12px;
  background:linear-gradient(140deg, #2b241a, #171310); border:1px solid var(--panel-brd);
  box-shadow:0 0 24px -6px var(--gold-glow); }
.brand { font-family:var(--font); font-size:1.5rem; font-weight:700; letter-spacing:.5px; display:block; line-height:1.1;
  background:linear-gradient(90deg, var(--gold), #ffdf9e); -webkit-background-clip:text; background-clip:text; color:transparent; }
.brand-sub { font-size:.75rem; color:var(--muted); letter-spacing:.4px; }
.foot { position:relative; z-index:2; text-align:center; color:var(--faint); font-size:.78rem; padding:26px 16px 34px; }

.shell { position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:14px 20px; display:flex; flex-direction:column; gap:18px; }

/* ── panels ── */
.panel { background:var(--panel); border:1px solid var(--panel-brd); border-radius:var(--radius);
  padding:24px; backdrop-filter:blur(10px); box-shadow:0 24px 60px -30px rgba(0,0,0,.8); }
.section-h { margin:0 0 14px; font-family:var(--font); font-size:1.2rem; color:var(--gold);
  display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.section-h .hint { font-family:var(--sans); font-size:.75rem; color:var(--faint); font-weight:400; }
.muted { color:var(--muted); } .tiny { font-size:.78rem; } .center { text-align:center; }
.error-line { color:#ff7a68; font-size:.88rem; font-weight:600; margin:10px 0 0; text-align:center; }

/* ── buttons / fields ── */
.btn { font-family:var(--sans); font-weight:700; border:none; cursor:pointer; border-radius:999px;
  padding:11px 22px; font-size:.95rem; transition:transform .12s, box-shadow .25s, background .2s; }
.btn:active { transform:scale(.97); }
.btn.primary { color:#1c1408; background:linear-gradient(135deg, #ffd98a, var(--gold) 55%, #d99118);
  box-shadow:0 10px 30px -8px var(--gold-glow); }
.btn.primary:hover { box-shadow:0 14px 38px -8px var(--gold-glow); transform:translateY(-1px); }
.btn.primary:disabled { filter:grayscale(.6) opacity(.5); cursor:not-allowed; transform:none; box-shadow:none; }
.btn.ghost { background:rgba(245,179,66,.08); color:var(--gold); border:1px solid var(--panel-brd); }
.btn.ghost:hover { background:rgba(245,179,66,.16); }
.btn.big { width:100%; padding:15px; font-size:1.06rem; margin-top:8px; }
.btn.tiny { padding:5px 12px; font-size:.74rem; }

.field { display:flex; flex-direction:column; gap:7px; margin:16px 0; }
.field > span { font-size:.86rem; font-weight:700; color:var(--ink); }
.field > span em { font-style:normal; font-weight:400; }
input[type=text], textarea {
  font-family:var(--sans); font-size:.98rem; color:var(--ink); border-radius:12px;
  border:1.5px solid rgba(245,179,66,.18); background:rgba(0,0,0,.3);
  padding:12px 14px; outline:none; transition:border .15s, box-shadow .15s; resize:vertical; width:100%; }
input:focus, textarea:focus { border-color:var(--gold); box-shadow:0 0 0 4px rgba(245,179,66,.12); }
::placeholder { color:var(--faint); }

/* focus chips */
.chips { display:flex; flex-wrap:wrap; gap:8px; }
.fchip { font-family:var(--sans); font-size:.85rem; font-weight:600; cursor:pointer; border-radius:999px;
  padding:8px 15px; border:1.5px solid rgba(245,179,66,.2); background:transparent; color:var(--muted); transition:.15s; }
.fchip.active { background:rgba(245,179,66,.14); color:var(--gold); border-color:var(--gold-deep); }
.fchip:hover { border-color:var(--gold); }

/* ── hero ── */
.hero { text-align:center; padding:14px 6px 20px; }
.hero h1 { font-family:var(--font); font-size:clamp(1.7rem, 4.5vw, 2.6rem); margin:0 0 10px; letter-spacing:.3px; }
.hero h1 em { color:var(--gold); font-style:italic; }
.hero-sub { color:var(--muted); max-width:640px; margin:0 auto; line-height:1.55; }

/* ── dropzone ── */
.dropzone { border:2px dashed rgba(245,179,66,.3); border-radius:14px; background:rgba(0,0,0,.22);
  padding:16px; text-align:center; cursor:pointer; transition:.18s; }
.dropzone:hover, .dropzone.drag { border-color:var(--gold); background:rgba(245,179,66,.05); }
.dz-empty { padding:30px 10px; }
.dz-emoji { font-size:2.6rem; }
.dz-empty p { margin:8px 0; }
.dz-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:center; }
.chip { background:rgba(245,179,66,.13); color:var(--gold); font-weight:700; font-size:.78rem;
  padding:5px 12px; border-radius:999px; font-family:var(--sans); }

/* ── working ── */
.working { text-align:center; padding:44px 24px; }
.working h2 { font-family:var(--font); color:var(--gold); margin:8px 0 6px; }
.reel-spinner { font-size:2.6rem; display:inline-block; animation:spin 2.4s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.progress { height:10px; border-radius:999px; background:rgba(245,179,66,.12); overflow:hidden; margin:16px auto 10px; max-width:520px; }
.progress-bar { height:100%; width:0%; border-radius:999px; transition:width .3s;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold)); }

/* ── results ── */
.results { display:flex; flex-direction:column; gap:18px; }
.results .panel { animation:rise .5s ease both; }
@keyframes rise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
.hero-result { text-align:center; }
.score-ring { --v:0; width:120px; height:120px; margin:4px auto 12px; border-radius:50%;
  background:conic-gradient(var(--gold) calc(var(--v)*1%), rgba(245,179,66,.12) 0); display:grid; place-items:center; }
.score-ring .inner { width:92px; height:92px; border-radius:50%; background:var(--bg-2); display:grid; place-items:center; }
.score-ring b { font-size:1.9rem; color:var(--gold); font-family:var(--font); }
.score-ring small { display:block; font-size:.65rem; color:var(--muted); }
.logline { font-family:var(--font); font-size:1.15rem; font-style:italic; color:var(--ink); margin:6px auto; max-width:680px; }
.impression { color:var(--muted); max-width:680px; margin:6px auto 0; line-height:1.5; }

/* ── annotated player ── */
.player-wrap { display:flex; flex-direction:column; gap:8px; }
#main-video { width:100%; max-height:430px; border-radius:12px; background:#000; }
.timeline { position:relative; height:52px; margin-top:2px; cursor:pointer; }
.timeline-track { position:absolute; left:0; right:0; top:24px; height:6px; border-radius:999px; background:rgba(245,179,66,.14); }
.timeline-progress { position:absolute; left:0; top:24px; height:6px; border-radius:999px; width:0;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold)); pointer-events:none; }
.marker { position:absolute; top:12px; width:22px; height:22px; margin-left:-11px; display:grid; place-items:center;
  cursor:pointer; transition:transform .12s; z-index:2; background:none; border:none; padding:0; }
.marker:hover, .marker.active { transform:scale(1.45); z-index:3; }
.marker svg { width:16px; height:16px; filter:drop-shadow(0 0 5px rgba(0,0,0,.7)); }
.marker.active svg { filter:drop-shadow(0 0 7px var(--gold-glow)); }
.mspan { position:absolute; top:25px; height:4px; border-radius:2px; opacity:.4; pointer-events:none; }
.legend { display:flex; flex-wrap:wrap; gap:12px; font-size:.75rem; color:var(--muted); padding:2px 2px 0; font-family:var(--sans); }
.legend .li { display:flex; align-items:center; gap:5px; }
.legend .sw { width:10px; height:10px; border-radius:3px; }
.legend .sev { opacity:.85; }

/* annotation cards */
.anno-cards { display:flex; flex-direction:column; gap:8px; margin-top:14px; max-height:420px; overflow-y:auto; padding-right:4px; }
.anno-card { display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:12px;
  background:rgba(0,0,0,.25); border:1px solid transparent; border-left:3px solid var(--cat, var(--gold));
  cursor:pointer; transition:.15s; }
.anno-card:hover { background:rgba(245,179,66,.06); }
.anno-card.active { border-color:var(--panel-brd); border-left-color:var(--cat, var(--gold)); background:rgba(245,179,66,.09); }
.anno-time { font-family:var(--sans); font-weight:800; font-size:.8rem; color:#1c1408; background:var(--cat, var(--gold));
  padding:3px 9px; border-radius:7px; flex:0 0 auto; }
.anno-body { min-width:0; }
.anno-note { font-size:.92rem; line-height:1.45; }
.anno-sugg { font-size:.85rem; color:var(--muted); margin-top:4px; }
.anno-sugg b { color:var(--gold); }
.anno-tag { display:inline-block; font-size:.68rem; font-weight:800; letter-spacing:.5px; text-transform:uppercase;
  color:var(--muted); margin-left:8px; }

/* ── scene strip ── */
.scene-strip { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 10px; }
.scene-card { flex:0 0 230px; background:rgba(0,0,0,.28); border:1px solid var(--panel-brd); border-radius:12px;
  overflow:hidden; cursor:pointer; transition:.15s; }
.scene-card:hover { transform:translateY(-3px); border-color:var(--gold-deep); }
.scene-thumb { width:100%; height:120px; object-fit:cover; background:#000; display:block; }
.scene-body { padding:10px 12px 12px; }
.scene-title { font-family:var(--font); font-size:.95rem; color:var(--gold); margin:0 0 2px; }
.scene-time { font-size:.7rem; color:var(--faint); font-family:var(--sans); }
.scene-sum { font-size:.8rem; color:var(--ink); margin:6px 0; line-height:1.4; }
.scene-note { font-size:.75rem; line-height:1.4; margin:4px 0 0; }
.scene-note.works { color:#7fc99a; }
.scene-note.improve { color:#e8a58f; }

/* ── story arc (SVG chart) ── */
.arc-wrap { position:relative; }
.arc-wrap svg { width:100%; height:auto; display:block; }
.arc-dot { cursor:pointer; }
.arc-tip { position:absolute; pointer-events:none; background:#0d0b08; border:1px solid var(--panel-brd);
  border-radius:10px; padding:8px 12px; font-size:.8rem; max-width:240px; z-index:5; opacity:0;
  transition:opacity .12s; box-shadow:0 10px 30px -10px rgba(0,0,0,.9); font-family:var(--sans); }
.arc-tip b { color:var(--gold); display:block; margin-bottom:2px; }
.arc-tip.show { opacity:1; }

/* ── craft scores ── */
.craft { margin:12px 0; }
.craft-top { display:flex; justify-content:space-between; align-items:baseline; }
.craft-name { font-weight:700; font-size:.92rem; }
.craft-score { font-family:var(--font); font-weight:700; color:var(--gold); }
.meter { height:8px; border-radius:999px; background:rgba(245,179,66,.1); overflow:hidden; margin-top:6px; }
.meter > i { display:block; height:100%; border-radius:999px; background:var(--cat, var(--gold));
  width:0; transition:width .9s cubic-bezier(.2,1,.3,1); }

/* ── plot doctor ── */
.doctor { background:linear-gradient(160deg, rgba(139,110,240,.08), var(--panel)); }
.dr-stakes { font-size:.95rem; line-height:1.5; padding:12px 14px; border-radius:12px; background:rgba(0,0,0,.25);
  border-left:3px solid var(--c-visual); margin-bottom:14px; }
.dr-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.dr-card { background:rgba(0,0,0,.28); border:1px solid var(--panel-brd); border-radius:12px; padding:14px; }
.dr-card h4 { margin:0 0 8px; font-family:var(--font); color:var(--gold); font-size:.95rem; }
.dr-card ul { margin:0; padding-left:18px; }
.dr-card li { font-size:.87rem; line-height:1.5; margin:7px 0; }
.dr-cut { margin-top:12px; font-size:.88rem; color:var(--muted); }
.dr-cut b { color:#e8a58f; }

.bullets { margin:0; padding-left:20px; }
.bullets li { margin:8px 0; line-height:1.5; font-size:.93rem; }
.encourage { text-align:center; font-family:var(--font); font-style:italic; font-size:1.05rem;
  color:var(--gold); line-height:1.6; background:linear-gradient(160deg, rgba(245,179,66,.1), var(--panel)); }

/* ── chat ── */
.chat { display:flex; flex-direction:column; gap:10px; max-height:340px; overflow-y:auto; margin-bottom:12px; }
.msg { max-width:82%; padding:10px 14px; border-radius:14px; font-size:.92rem; line-height:1.5; }
.msg.user { align-self:flex-end; background:rgba(245,179,66,.16); color:var(--ink); border-bottom-right-radius:4px; }
.msg.muse { align-self:flex-start; background:rgba(0,0,0,.3); border:1px solid var(--panel-brd); border-bottom-left-radius:4px; }
.msg.muse.thinking { color:var(--faint); font-style:italic; }
.chat-row { display:flex; gap:8px; }
.chat-row input { flex:1; }

/* ── history ── */
.history-list { display:flex; flex-direction:column; gap:8px; }
.hist-item { display:flex; gap:10px; align-items:center; padding:9px 10px; border-radius:10px; cursor:pointer;
  background:rgba(0,0,0,.22); border:1px solid transparent; transition:.15s; }
.hist-item:hover { border-color:var(--panel-brd); }
.hist-thumb { width:56px; height:36px; border-radius:6px; object-fit:cover; background:#000; flex:0 0 auto; }
.hist-meta { min-width:0; flex:1; }
.hist-title { font-size:.86rem; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hist-date { font-size:.7rem; color:var(--faint); }
.hist-score { font-family:var(--font); font-weight:700; color:var(--gold); }

/* ── toast ── */
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); z-index:50;
  background:#0d0b08; color:var(--gold); border:1px solid var(--panel-brd); padding:11px 20px;
  border-radius:999px; font-weight:600; font-size:.9rem; box-shadow:0 12px 40px -8px rgba(0,0,0,.9);
  animation:toastIn .3s ease; }
@keyframes toastIn { from { opacity:0; transform:translate(-50%, 10px); } to { opacity:1; transform:translate(-50%, 0); } }

/* ══════════════════ MOTION LAYER ══════════════════ */

/* scroll progress — a strip of light along the top */
.scroll-progress { position:fixed; top:0; left:0; height:3px; width:0; z-index:60;
  background:linear-gradient(90deg, var(--gold-deep), var(--gold), #ffdf9e);
  box-shadow:0 0 12px var(--gold-glow); }

/* cursor spotlight — a soft flashlight that follows the mouse */
.cursor-light { position:fixed; inset:0; pointer-events:none; z-index:1; opacity:0; transition:opacity .6s;
  background:radial-gradient(340px 340px at var(--mx, 50%) var(--my, 40%), rgba(245,179,66,.07), transparent 70%); }
body.has-mouse .cursor-light { opacity:1; }

/* drifting dust in the projector beam */
.dust { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.dust i { position:absolute; display:block; width:3px; height:3px; border-radius:50%;
  background:rgba(245,179,66,.5); filter:blur(.5px); opacity:0;
  animation:drift var(--dur, 14s) linear var(--delay, 0s) infinite; left:var(--x, 50%); }
@keyframes drift {
  0% { transform:translateY(105vh) translateX(0) scale(var(--s,1)); opacity:0; }
  8% { opacity:var(--o,.5); }
  92% { opacity:var(--o,.5); }
  100% { transform:translateY(-6vh) translateX(var(--sway, 30px)) scale(var(--s,1)); opacity:0; }
}

/* hero entrance + shimmer */
.hw { display:inline-block; opacity:0; transform:translateY(22px);
  animation:heroUp .7s cubic-bezier(.2,.9,.3,1.2) forwards; animation-delay:calc(var(--i, 0) * .12s); }
@keyframes heroUp { to { opacity:1; transform:none; } }
.shimmer { background:linear-gradient(110deg, var(--gold) 20%, #fff3d6 40%, var(--gold) 60%);
  background-size:220% 100%; -webkit-background-clip:text; background-clip:text; color:transparent;
  animation:heroUp .7s cubic-bezier(.2,.9,.3,1.2) forwards, shimmerSweep 3.2s ease-in-out 1.2s infinite;
  animation-delay:calc(var(--i,0) * .12s), 1.4s; }
@keyframes shimmerSweep { 0%,100% { background-position:120% 0; } 50% { background-position:-20% 0; } }

/* dropzone: marching-ants border + breathing glow + bobbing reel */
.dropzone { border:none; position:relative;
  background:
    linear-gradient(90deg, rgba(245,179,66,.55) 50%, transparent 0) top/16px 2px repeat-x,
    linear-gradient(90deg, rgba(245,179,66,.55) 50%, transparent 0) bottom/16px 2px repeat-x,
    linear-gradient(0deg, rgba(245,179,66,.55) 50%, transparent 0) left/2px 16px repeat-y,
    linear-gradient(0deg, rgba(245,179,66,.55) 50%, transparent 0) right/2px 16px repeat-y,
    rgba(0,0,0,.22);
  animation:ants 1.2s linear infinite paused, breathe 3.6s ease-in-out infinite; }
.dropzone:hover, .dropzone.drag { animation-play-state:running, running; background-color:rgba(245,179,66,.05); }
@keyframes ants { to { background-position:16px top, -16px bottom, left -16px, right 16px; } }
@keyframes breathe { 0%,100% { box-shadow:0 0 0 0 rgba(245,179,66,.0); } 50% { box-shadow:0 0 36px -6px rgba(245,179,66,.25); } }
.dz-emoji { animation:bob 2.8s ease-in-out infinite; }
@keyframes bob { 0%,100% { transform:translateY(0) rotate(-3deg); } 50% { transform:translateY(-9px) rotate(3deg); } }
.dropzone.drag { transform:scale(1.012); }
.dz-preview { animation:popIn .45s cubic-bezier(.2,1.1,.3,1.15); }
@keyframes popIn { from { opacity:0; transform:scale(.94); } to { opacity:1; transform:scale(1); } }

/* button shine sweep */
.btn.primary { position:relative; overflow:hidden; }
.btn.primary::after { content:''; position:absolute; top:0; bottom:0; left:-70%; width:45%;
  background:linear-gradient(105deg, transparent, rgba(255,255,255,.5), transparent);
  transform:skewX(-20deg); transition:left .5s ease; }
.btn.primary:hover::after { left:125%; }

/* chip springs */
.fchip { transition:transform .22s cubic-bezier(.3,1.6,.4,1), background .15s, color .15s, border-color .15s; }
.fchip.active { animation:chipPop .32s cubic-bezier(.3,1.8,.4,1); }
@keyframes chipPop { 50% { transform:scale(1.12); } }

/* scroll-reveal for panels & big blocks */
.reveal { opacity:0; transform:translateY(26px); transition:opacity .65s ease, transform .65s cubic-bezier(.2,.8,.3,1); }
.reveal.in { opacity:1; transform:none; }

/* film-leader countdown while working */
.leader { position:relative; width:110px; height:110px; margin:6px auto 14px; }
.leader-ring { position:absolute; inset:0; border-radius:50%; border:2px solid rgba(245,179,66,.25); }
.leader-ring::before, .leader-ring::after { content:''; position:absolute; background:rgba(245,179,66,.22); }
.leader-ring::before { left:50%; top:-6px; bottom:-6px; width:1.5px; transform:translateX(-50%); }
.leader-ring::after { top:50%; left:-6px; right:-6px; height:1.5px; transform:translateY(-50%); }
.leader-sweep { position:absolute; inset:6px; border-radius:50%;
  background:conic-gradient(rgba(245,179,66,.28) 0 40deg, transparent 40deg 360deg);
  animation:sweep 1.05s linear infinite; }
@keyframes sweep { to { transform:rotate(360deg); } }
.leader-num { position:absolute; inset:0; display:grid; place-items:center;
  font-family:var(--font); font-size:2.6rem; color:var(--gold); }
.leader-num.tick { animation:numPunch 1.05s ease; }
@keyframes numPunch { 0% { transform:scale(1.5); opacity:0; } 18% { transform:scale(1); opacity:1; } 100% { opacity:1; } }
.reel-spinner { display:none; }

/* results choreography */
.marker { opacity:0; transform:translateY(-14px) scale(.4);
  animation:markerDrop .45s cubic-bezier(.3,1.5,.4,1) forwards; animation-delay:var(--d, 0s); }
@keyframes markerDrop { to { opacity:1; transform:translateY(0) scale(1); } }
.anno-card { opacity:0; transform:translateX(-14px); animation:cardIn .4s ease forwards; animation-delay:var(--d, 0s); }
@keyframes cardIn { to { opacity:1; transform:none; } }
.scene-card { opacity:0; transform:translateY(18px); animation:cardIn .5s ease forwards; animation-delay:var(--d, 0s); }
.scene-thumb { transition:transform 3.2s ease; transform-origin:center; }
.scene-card:hover .scene-thumb { transform:scale(1.12); }
.timeline-progress { box-shadow:0 0 10px var(--gold-glow); }
.marker.active { animation:markerPulse 1.4s ease-in-out infinite; }
@keyframes markerPulse { 0%,100% { transform:scale(1.45); } 50% { transform:scale(1.7); } }

/* arc line draws itself when revealed */
.arc-line { stroke-dasharray:var(--len, 1600); stroke-dashoffset:var(--len, 1600); }
.arc-wrap.drawn .arc-line { animation:draw 1.6s ease forwards; }
@keyframes draw { to { stroke-dashoffset:0; } }
.arc-dot { opacity:0; transform-origin:center; transform-box:fill-box; }
.arc-wrap.drawn .arc-dot { animation:dotPop .4s cubic-bezier(.3,1.8,.4,1) forwards; animation-delay:var(--d, 1.2s); }
@keyframes dotPop { from { opacity:0; transform:scale(.2); } to { opacity:1; transform:scale(1); } }
.arc-dot:hover { filter:drop-shadow(0 0 6px var(--gold-glow)); }

/* history + toast micro-motion */
.hist-item { transition:transform .18s ease, border-color .18s; }
.hist-item:hover { transform:translateX(4px); }
.panel { transition:box-shadow .3s ease; }
.panel:hover { box-shadow:0 28px 70px -30px rgba(0,0,0,.9), 0 0 0 1px rgba(245,179,66,.08); }

/* ══════════════════ CINEMATIC LAYER v2 — scroll story ══════════════════ */

/* custom cursor (desktop only) */
@media (hover:hover) and (pointer:fine) {
  body.has-mouse { cursor:none; }
  body.has-mouse a, body.has-mouse button, body.has-mouse .dropzone,
  body.has-mouse input, body.has-mouse textarea, body.has-mouse video { cursor:none; }
}
.cursor-dot, .cursor-ring { position:fixed; top:0; left:0; pointer-events:none; z-index:80;
  border-radius:50%; transform:translate(-50%,-50%); opacity:0; }
body.has-mouse .cursor-dot, body.has-mouse .cursor-ring { opacity:1; }
.cursor-dot { width:6px; height:6px; background:var(--gold); }
.cursor-ring { width:34px; height:34px; border:1.5px solid rgba(245,179,66,.5);
  transition:width .25s, height .25s, border-color .25s, background .25s; }
.cursor-ring.hovering { width:56px; height:56px; border-color:var(--gold);
  background:rgba(245,179,66,.08); }
@media (hover:none), (pointer:coarse) { .cursor-dot, .cursor-ring { display:none; } }

/* full-viewport hero act */
.stage { position:relative; z-index:2; min-height:92vh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center; padding:40px 20px 20px; }
.kicker { font-family:var(--sans); font-size:.78rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); margin:0 0 26px; }
.display { font-family:var(--font); font-weight:700; margin:0;
  font-size:clamp(2.8rem, 10.5vw, 7rem); line-height:.98; letter-spacing:.01em; color:var(--ink); }
.display .line { display:block; overflow:hidden; padding:.04em 0; }
.display .line-in { display:inline-block; transform:translateY(115%); opacity:1;
  animation:lineUp .95s cubic-bezier(.16,.84,.26,1) forwards; animation-delay:calc(var(--i,0) * .16s); }
@keyframes lineUp { to { transform:translateY(0); } }
.display .em { font-style:italic; }
.hero-stage .hero-sub { margin:30px auto 30px; max-width:560px; }
.big-cta { padding:17px 38px; font-size:1.1rem; }
.scroll-cue { width:26px; height:44px; border:2px solid rgba(245,179,66,.4); border-radius:999px;
  margin-top:44px; position:relative; }
.scroll-cue span { position:absolute; left:50%; top:8px; width:4px; height:9px; margin-left:-2px;
  border-radius:2px; background:var(--gold); animation:cueDrop 1.6s ease-in-out infinite; }
@keyframes cueDrop { 0% { transform:translateY(0); opacity:1; } 70% { transform:translateY(16px); opacity:0; } 100% { opacity:0; } }

/* marquee ribbons */
.marquee { position:relative; z-index:2; overflow:hidden; padding:18px 0; border-top:1px solid rgba(245,179,66,.1);
  border-bottom:1px solid rgba(245,179,66,.1); background:rgba(0,0,0,.18); }
.marquee-track { display:flex; width:max-content; animation:marq 30s linear infinite; }
.marquee.reverse .marquee-track { animation-direction:reverse; }
.marquee span { font-family:var(--font); font-size:1.7rem; font-weight:700; white-space:nowrap; padding-right:.5em;
  color:transparent; -webkit-text-stroke:1px rgba(245,179,66,.35); }
@keyframes marq { to { transform:translateX(-50%); } }

/* the three steps */
.steps { position:relative; z-index:2; max-width:1080px; margin:0 auto; padding:8vh 24px; }
.step { display:flex; gap:5vw; align-items:center; min-height:52vh; }
.step:nth-child(even) { flex-direction:row-reverse; text-align:right; }
.step-num { font-family:var(--font); font-weight:700; line-height:1; flex:0 0 auto;
  font-size:clamp(5rem, 16vw, 11rem); color:transparent; -webkit-text-stroke:1.5px rgba(245,179,66,.4);
  will-change:transform; }
.step-body h2 { font-family:var(--font); font-size:clamp(1.6rem, 4vw, 2.6rem); margin:0 0 14px; color:var(--gold); }
.step-body p { color:var(--muted); font-size:1.02rem; line-height:1.7; max-width:520px; margin:0; }
.step:nth-child(even) .step-body p { margin-left:auto; }
.step-body p em { color:var(--ink); font-style:italic; }

/* masked headline reveals */
.mask { overflow:hidden; }
.mask > span { display:inline-block; transform:translateY(115%); transition:transform .85s cubic-bezier(.16,.84,.26,1); }
.mask.in > span { transform:translateY(0); }

/* act numerals on section heads */
.act-head { display:flex; align-items:baseline; gap:16px; margin-bottom:12px; }
.act-head .section-h, .act-head h2 { margin-bottom:0; }
.act-head h2 { font-family:var(--font); color:var(--gold); font-size:1.5rem; }
.act-num { font-family:var(--font); font-weight:700; font-size:2rem; line-height:1;
  color:transparent; -webkit-text-stroke:1.2px rgba(245,179,66,.4); flex:0 0 auto; }

/* network warning banner */
.net-banner { background:rgba(224,79,58,.12); border:1px solid rgba(224,79,58,.35); color:#f0a496;
  border-radius:12px; padding:11px 15px; font-size:.85rem; line-height:1.5; margin:0 0 14px; }
.net-banner b { color:#ffc9be; }

/* ── footer: endless film strips + end credits ── */
.foot { overflow:hidden; padding-top:10px; }
.film-credits { position:relative; height:150px; margin:0 -60px 18px; }
.strip { position:absolute; left:-4%; right:-4%; height:78px; border-radius:3px;
  background:#0d0a07; box-shadow:0 16px 40px -18px rgba(0,0,0,.9); overflow:hidden; }
.strip.s1 { top:8px; transform:rotate(-2.2deg); }
.strip.s2 { top:56px; transform:rotate(1.6deg); opacity:.55; }
.sprockets { position:absolute; left:0; right:0; height:13px; z-index:2;
  background:radial-gradient(4.5px 4.5px at 10px 6.5px, #211a10 55%, rgba(245,179,66,.28) 62%, transparent 72%) repeat-x;
  background-size:26px 13px; }
.sprockets.top { top:2px; } .sprockets.bot { bottom:2px; }
.frames { position:absolute; left:0; top:15px; bottom:15px; width:calc(100% + 220px); z-index:1;
  background:
    repeating-linear-gradient(90deg,
      rgba(245,179,66,.02) 0 12px, rgba(245,179,66,.10) 12px 44px, rgba(224,79,58,.08) 44px 76px,
      rgba(245,179,66,.14) 76px 100px, #090603 100px 110px),
    linear-gradient(180deg, #171208, #100b06);
  box-shadow:inset 0 0 24px rgba(0,0,0,.55);
  animation:framesRun 3.2s linear infinite; }
.strip.s2 .frames { animation:framesRunBack 4.6s linear infinite; }
@keyframes framesRun { to { transform:translateX(-110px); } }     /* exactly one frame period → seamless loop */
@keyframes framesRunBack { from { transform:translateX(-110px); } to { transform:translateX(0); } }
.credit-line { font-family:var(--font); letter-spacing:.4em; font-size:.78rem; color:var(--muted);
  margin:0 0 8px; }
.credit-line b { color:var(--gold); letter-spacing:.4em; }

/* respect users who prefer calm */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.001s !important; animation-iteration-count:1 !important; transition-duration:.001s !important; }
  .reveal { opacity:1; transform:none; }
  .marker, .anno-card, .scene-card, .arc-dot { opacity:1; transform:none; }
  .arc-line { stroke-dashoffset:0 !important; }
  .display .line-in, .mask > span { transform:none; animation:none; }
  .cursor-dot, .cursor-ring { display:none; }
  body.has-mouse { cursor:auto; }
  [data-parallax], .step-num { transform:none !important; }
}

/* ══════════════════ THE THEATER (upload experience) ══════════════════ */
.dropzone.theater { background:transparent; animation:none; padding:0; border:none; box-shadow:none; }
.dropzone.theater:hover, .dropzone.theater.drag { background:transparent; transform:none; }

/* marquee sign */
.now-showing { display:flex; align-items:center; justify-content:center; gap:14px; margin:2px auto 12px;
  width:fit-content; padding:8px 22px; border-radius:10px;
  background:linear-gradient(180deg, #241d12, #171209); border:1px solid rgba(245,179,66,.35);
  box-shadow:0 6px 24px -8px rgba(0,0,0,.8), inset 0 1px 0 rgba(245,179,66,.15); }
.sign-text { font-family:var(--font); letter-spacing:.34em; font-size:.85rem; color:var(--gold);
  text-shadow:0 0 12px var(--gold-glow); transition:.3s; }
.theater.loaded .sign-text { animation:signGlow 2.2s ease-in-out infinite; }
@keyframes signGlow { 0%,100% { text-shadow:0 0 10px var(--gold-glow); } 50% { text-shadow:0 0 22px var(--gold), 0 0 40px var(--gold-glow); } }
.bulbs { display:flex; gap:6px; }
.bulbs i { width:7px; height:7px; border-radius:50%; background:#3a2f1c; box-shadow:none;
  animation:chase 1.6s linear infinite; }
.bulbs i:nth-child(2) { animation-delay:.4s; } .bulbs i:nth-child(3) { animation-delay:.8s; } .bulbs i:nth-child(4) { animation-delay:1.2s; }
.bulbs.r i:nth-child(1) { animation-delay:1.2s; } .bulbs.r i:nth-child(2) { animation-delay:.8s; }
.bulbs.r i:nth-child(3) { animation-delay:.4s; } .bulbs.r i:nth-child(4) { animation-delay:0s; }
.theater.drag .bulbs i, .theater.loaded .bulbs i { animation-duration:.7s; }
@keyframes chase { 0%, 25% { background:var(--gold); box-shadow:0 0 10px var(--gold-glow); } 50%, 100% { background:#3a2f1c; box-shadow:none; } }

/* screen + curtains + beam */
.screen-area { position:relative; height:min(46vh, 420px); border-radius:8px; overflow:hidden;
  background:#050403; box-shadow:0 24px 60px -24px rgba(0,0,0,.95), inset 0 0 0 1px rgba(245,179,66,.08); }
.silver-screen { position:absolute; inset:16px 44px 30px; border-radius:4px; overflow:hidden;
  background:radial-gradient(ellipse at 50% 45%, #1c1610 0%, #131009 70%);
  display:grid; place-items:center;
  box-shadow:inset 0 0 40px rgba(0,0,0,.8), 0 0 0 2px rgba(245,179,66,.06); }
.silver-screen video { width:100%; height:100%; object-fit:contain; background:#000; }
.dz-empty { padding:10px; position:relative; z-index:1; color:#cdbb9c; }
.theater .dz-empty p strong { color:var(--gold); }
.theater .dz-empty .tiny { color:#8a7b62; }

/* the projector beam — flickers like a real projection booth */
.beam { position:absolute; left:50%; top:-8%; width:130%; height:120%; transform:translateX(-50%);
  background:conic-gradient(from 90deg at 50% 0%, transparent 0deg, transparent 168deg,
    rgba(245,214,150,.10) 172deg, rgba(245,214,150,.16) 180deg, rgba(245,214,150,.10) 188deg,
    transparent 192deg, transparent 360deg);
  pointer-events:none; z-index:3; opacity:0; transition:opacity .8s; mix-blend-mode:screen;
  animation:flicker 3.4s steps(12) infinite; }
.theater.loaded .beam, .theater.drag .beam { opacity:1; }
@keyframes flicker { 0%,100% { filter:brightness(1); } 20% { filter:brightness(1.28); } 35% { filter:brightness(.9); }
  52% { filter:brightness(1.18); } 70% { filter:brightness(.96); } 86% { filter:brightness(1.22); } }

/* velvet curtains: folded gradient, parting on load */
.curtain { position:absolute; top:0; bottom:0; width:52%; z-index:4;
  background:
    repeating-linear-gradient(90deg,
      #4a1414 0 14px, #6b1d1d 14px 26px, #380e0e 26px 42px),
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 30%);
  box-shadow:inset 0 -18px 30px rgba(0,0,0,.6);
  transition:transform 1.15s cubic-bezier(.65,.05,.35,1); }
.curtain.left { left:-1%; transform-origin:left; border-right:6px solid #2c0b0b; }
.curtain.right { right:-1%; transform-origin:right; border-left:6px solid #2c0b0b; }
.theater.loaded .curtain.left { transform:translateX(-88%) scaleX(.28); }
.theater.loaded .curtain.right { transform:translateX(88%) scaleX(.28); }
.theater.drag .curtain.left { transform:translateX(-18%) scaleX(.85); }
.theater.drag .curtain.right { transform:translateX(18%) scaleX(.85); }
.valance { position:absolute; top:-2px; left:0; right:0; height:34px; z-index:5;
  background:
    radial-gradient(28px 30px at 14px 0, #5a1717 96%, transparent) repeat-x,
    linear-gradient(180deg, #4a1414, #380e0e);
  background-size:56px 34px, 100% 100%;
  border-bottom:3px solid #2c0b0b; box-shadow:0 8px 18px rgba(0,0,0,.55); }

/* audience seats */
.seats { position:relative; margin-top:-6px; }
.seat-row { height:26px; border-radius:0 0 8px 8px;
  background:radial-gradient(18px 22px at 20px -2px, #0c0906 70%, transparent 72%) repeat-x;
  background-size:40px 26px; filter:brightness(1); }
.seat-row.near { height:34px; margin-top:-10px;
  background:radial-gradient(24px 30px at 26px -2px, #070503 72%, transparent 74%) repeat-x;
  background-size:52px 34px; }

/* the ticket stub */
.ticket-row { display:flex; justify-content:center; margin-top:14px; }
.ticket { position:relative; display:flex; align-items:center; gap:14px; padding:12px 22px;
  background:linear-gradient(120deg, #2b2113, #1e1810); border:1.5px dashed rgba(245,179,66,.5);
  border-radius:12px; animation:popIn .5s cubic-bezier(.2,1.1,.3,1.15); }
.ticket::before, .ticket::after { content:''; position:absolute; top:50%; width:18px; height:18px;
  border-radius:50%; background:var(--bg); transform:translateY(-50%);
  border:1.5px dashed rgba(245,179,66,.5); }
.ticket::before { left:-11px; clip-path:inset(0 0 0 50%); }
.ticket::after { right:-11px; clip-path:inset(0 50% 0 0); }
.ticket-title { font-family:var(--font); letter-spacing:.18em; font-size:.8rem; color:var(--gold); }
.ticket-cut { width:1px; align-self:stretch; background:rgba(245,179,66,.3); }
.ticket-field { font-family:var(--sans); font-weight:700; font-size:.82rem; color:var(--ink);
  background:rgba(245,179,66,.1); padding:4px 10px; border-radius:6px; }

/* house lights dim while dragging a film over the page */
body.dimmed::before { content:''; position:fixed; inset:0; z-index:9; pointer-events:none;
  background:rgba(0,0,0,.55); animation:dimIn .3s ease; }
@keyframes dimIn { from { opacity:0; } to { opacity:1; } }

@media (max-width:640px) {
  .screen-area { height:38vh; }
  .silver-screen { inset:10px 20px 20px; }
  .ticket { flex-wrap:wrap; justify-content:center; gap:8px; }
}

/* cinematic layer responsive */
@media (max-width:760px) {
  .step, .step:nth-child(even) { flex-direction:column; text-align:center; min-height:auto; padding:9vh 0; gap:18px; }
  .step:nth-child(even) .step-body p { margin:0 auto; }
  .step-body p { margin:0 auto; }
  .marquee span { font-size:1.2rem; }
}

/* ── responsive ── */
@media (max-width:640px) {
  .panel { padding:18px; }
  .dr-grid { grid-template-columns:1fr; }
  .anno-cards { max-height:340px; }
}