:root { color-scheme: dark; --cream:#eee5d5; --muted:#b8aa94; --gold:#b89558; --black:#090806; }
* { box-sizing:border-box; }
html,body { margin:0; min-height:100%; background:var(--black); }
body { font-family:"Noto Serif SC","Songti SC",Georgia,serif; color:var(--cream); }
.craft-film { position:relative; min-height:100svh; overflow:hidden; isolation:isolate; background:#090806; }
.frames,.frame { position:absolute; inset:0; }
.frame { opacity:0; transform:scale(1.045); background-position:center; background-size:cover; will-change:opacity,transform; transition:opacity 1.55s cubic-bezier(.4,0,.2,1); }
.frame::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(5,4,3,.82) 0%,rgba(5,4,3,.38) 42%,rgba(5,4,3,.12) 70%),linear-gradient(0deg,rgba(5,4,3,.55),transparent 35%); }
.frame.active { opacity:1; animation:kenburns 3s ease-out both; }
.frame:nth-child(3n+2).active { animation-name:kenburns-right; }
.frame:nth-child(3n).active { animation-name:kenburns-soft; }
@keyframes kenburns { from{transform:scale(1.07) translate3d(1%,.6%,0)} to{transform:scale(1.13) translate3d(-1%,-.6%,0)} }
@keyframes kenburns-right { from{transform:scale(1.12) translate3d(-1%,0,0)} to{transform:scale(1.06) translate3d(1%,0,0)} }
@keyframes kenburns-soft { from{transform:scale(1.06)} to{transform:scale(1.11)} }
.film-grain { position:absolute; z-index:4; inset:-40%; opacity:.06; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.65'/%3E%3C/svg%3E"); animation:grain .7s steps(2) infinite; }
@keyframes grain { 0%{transform:translate(0)} 25%{transform:translate(3%,-2%)} 50%{transform:translate(-2%,3%)} 75%{transform:translate(2%,2%)} }
.masthead { position:absolute; z-index:6; top:0; left:0; right:0; display:flex; justify-content:space-between; align-items:center; padding:clamp(24px,4vw,56px) clamp(24px,6vw,88px); letter-spacing:.22em; }
.wordmark { color:var(--cream); text-decoration:none; font:500 20px/1 Arial,sans-serif; letter-spacing:.34em; }
.series { color:rgba(238,229,213,.62); font:500 9px/1.2 Arial,sans-serif; }
.copy { position:absolute; z-index:6; left:clamp(24px,9vw,140px); top:50%; width:min(530px,75vw); transform:translateY(-45%); text-shadow:0 2px 30px #000; }
.eyebrow { margin:0 0 24px; color:var(--gold); font-size:clamp(11px,1vw,14px); letter-spacing:.45em; }
.copy h1 { margin:0; font-weight:400; font-size:clamp(38px,6.2vw,92px); line-height:1.08; letter-spacing:.08em; transition:opacity .35s,transform .35s; }
.stage-note { max-width:430px; margin:22px 0 0; color:rgba(238,229,213,.72); font-size:clamp(13px,1.15vw,17px); letter-spacing:.12em; line-height:1.9; transition:opacity .35s,transform .35s; }
.copy.changing h1,.copy.changing .stage-note { opacity:0; transform:translateY(10px); }
.controls { position:absolute; z-index:7; left:clamp(24px,6vw,88px); right:clamp(24px,6vw,88px); bottom:clamp(24px,4vw,50px); display:flex; gap:18px; align-items:center; font:500 10px/1 Arial,sans-serif; letter-spacing:.16em; }
button { color:rgba(238,229,213,.72); background:none; border:0; font:inherit; letter-spacing:inherit; cursor:pointer; padding:10px 0; }
button:hover,button:focus-visible { color:var(--cream); }
.soundless { display:flex; gap:9px; align-items:center; }
.pause-icon { width:8px; height:9px; border-left:2px solid currentColor; border-right:2px solid currentColor; }
.paused .pause-icon { border:0; width:0; height:0; border-top:5px solid transparent; border-bottom:5px solid transparent; border-left:8px solid currentColor; }
.timeline { height:1px; flex:1; background:rgba(238,229,213,.2); overflow:hidden; }
.timeline span { display:block; height:100%; width:0; background:var(--gold); }
.counter { min-width:56px; color:rgba(238,229,213,.45); }
.counter b { color:var(--cream); font-weight:500; }
.replay { display:none; }
.finished .replay { display:block; }
.finale { position:absolute; z-index:8; inset:0; display:grid; place-content:center; text-align:center; opacity:0; pointer-events:none; background:radial-gradient(circle,transparent 0%,rgba(5,4,3,.15) 55%,rgba(5,4,3,.65) 100%); transition:opacity 1.3s ease; }
.finale p { margin:0 0 14px; color:var(--gold); font:500 clamp(10px,1vw,13px)/1 Arial,sans-serif; text-transform:uppercase; letter-spacing:.42em; }
.finale h2 { margin:0; font-weight:400; font-style:italic; font-size:clamp(46px,8vw,114px); letter-spacing:.02em; }
.finale .rule { width:56px; height:1px; margin:34px auto; background:var(--gold); }
.finale .promise { color:var(--cream); font-family:inherit; font-size:clamp(13px,1.3vw,18px); letter-spacing:.22em; }
.finished .finale { opacity:1; }
.finished .copy { opacity:0; }
@media (max-width:650px) {
  .frame::after { background:linear-gradient(0deg,rgba(5,4,3,.85) 0%,rgba(5,4,3,.14) 65%),linear-gradient(90deg,rgba(5,4,3,.35),transparent); }
  .masthead { padding-top:max(24px,env(safe-area-inset-top)); }
  .copy { top:auto; bottom:18%; left:24px; width:calc(100% - 48px); transform:none; }
  .copy h1 { font-size:clamp(34px,12vw,55px); }
  .stage-note { margin-top:13px; font-size:12px; }
  .eyebrow { margin-bottom:14px; }
  .controls { left:24px; right:24px; bottom:max(18px,env(safe-area-inset-bottom)); gap:12px; }
  #pause-label,.series { display:none; }
  .finale { padding:24px; }
}
@media (prefers-reduced-motion:reduce) {
  .film-grain { animation:none; }
  .frame,.frame.active { animation:none; transform:none; transition:opacity .2s linear; }
  .copy h1,.stage-note { transition:none; }
}