@font-face{font-family:Mom;src:url('fonts/moms.ttf')}@font-face{font-family:Cosplay;src:url('fonts/cosplay.ttf')}@font-face{font-family:Moneywise;src:url('fonts/moneywise.ttf')}
.cinema-entry{position:fixed;inset:0;z-index:10000;background:#000;color:#fff;overflow:hidden;cursor:pointer;display:grid;place-items:center;height:100dvh}.cinema-entry:before,.cinema-entry:after{content:'';position:absolute;top:0;bottom:0;width:20px;z-index:4;background:repeating-linear-gradient(0deg,transparent 0 12px,#969696 12px 25px,transparent 25px 42px);opacity:.5}.cinema-entry:before{left:12px}.cinema-entry:after{right:12px}.cinema-shot{position:absolute;inset:9% 5%;opacity:0;transition:opacity .45s;background:#000}.cinema-shot.active{opacity:1}.cinema-shot video{width:100%;height:100%;object-fit:cover;opacity:.62}.cinema-shot:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#000 0%,transparent 30%,#0002 60%,#000 100%)}.cinema-title{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:35px;text-align:center;font-size:70px;word-spacing:.18em;letter-spacing:.025em;line-height:1.3;color:#fff;font-weight:400;text-shadow:0 3px 22px #000;z-index:3;margin:0}.cinema-name{font-family:Georgia,serif;font-style:italic;animation:nameIn 1.8s ease-out both}.cinema-title.lai{font-family:Mom,monospace;animation:titleFocus 1.1s ease-out both}.cinema-title.character{font-family:Cosplay,sans-serif;animation:titleSlide 1s cubic-bezier(.16,1,.3,1) both}.cinema-title.choices{font-family:Moneywise,serif;animation:titleScale 1.1s ease-out both}.cinema-skip{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);background:#0009;border:1px solid #777;border-radius:30px;padding:12px 22px;color:#eee;font:12px 'Courier New',monospace;letter-spacing:1px;z-index:6;white-space:nowrap}.cinema-label{position:absolute;top:25px;left:0;width:100%;text-align:center;font:11px 'Courier New',monospace;letter-spacing:4px;color:#bbb;z-index:5}.cinema-progress{position:absolute;bottom:0;left:0;height:2px;background:#ddd;width:100%;transform-origin:left;animation:reelTime 11s linear both}.cinema-entry.leaving{pointer-events:none;animation:filmExit .6s cubic-bezier(.65,0,.25,1) both}.cinema-entry.leaving:before,.cinema-entry.leaving:after{animation:holesRoll .15s linear 4}.hero-ready h1{animation:nameIn 1.8s cubic-bezier(.2,.65,.2,1) both}.hero-queued .hero h1,.hero-queued .hero .intro,.hero-queued .hero .eyebrow,.hero-queued .hero-bottom{visibility:hidden}.hero-ready .eyebrow,.hero-ready .hero-bottom{animation:quietIn .7s 3.6s both}.typing-char{opacity:0}.typing-char.shown{opacity:1}.hero .intro{position:relative}.cinema-entry button:focus-visible{outline:3px solid white;outline-offset:5px}
@keyframes nameIn{from{opacity:0;transform:translateY(35px)}to{opacity:1;transform:translateY(0)}}@keyframes titleFocus{from{opacity:0;filter:blur(12px);letter-spacing:6px}to{opacity:1;filter:blur(0);letter-spacing:.025em}}@keyframes titleSlide{from{opacity:0;transform:translateX(-65px) rotate(-3deg)}to{opacity:1;transform:none}}@keyframes titleScale{from{opacity:0;transform:scale(1.2)}to{opacity:1;transform:scale(1)}}@keyframes quietIn{from{opacity:0}to{opacity:1}}@keyframes filmExit{to{transform:translateY(-110%);filter:blur(3px)}}@keyframes holesRoll{to{background-position:0 -84px}}@keyframes reelTime{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:600px){.cinema-shot{inset:14% 7%}.cinema-shot video{object-fit:contain}.cinema-entry:before{left:5px}.cinema-entry:after{right:5px}.cinema-entry:before,.cinema-entry:after{width:12px}.cinema-title{padding:28px}.cinema-label{letter-spacing:2px}}
@media(prefers-reduced-motion:reduce){.cinema-entry,.hero-ready h1,.hero-ready .eyebrow,.hero-ready .hero-bottom{animation:none}.typing-char{opacity:1}}

/* The final name card stays still while the normal-speed previews repeat. */
.cinema-entry.holding .cinema-shot video{opacity:.35;transition:opacity .7s ease}.cinema-title{overflow-wrap:break-word}.cinema-entry.holding .cinema-label{color:#aaa}
/* Continuous film transport, six-second scenes and bespoke title transitions. */
.cinema-entry:before,.cinema-entry:after{animation:filmTransport 1.8s linear infinite}
@keyframes filmTransport{to{background-position:0 -42px}}
.cinema-shot{transition:opacity 1.2s cubic-bezier(.4,0,.2,1)}
.cinema-shot video{object-fit:contain}
.cinema-skip{border:0;background:transparent;border-radius:0;box-shadow:none;font:14px/1.5 Arial,Helvetica,sans-serif;letter-spacing:.6px;color:#ddd;padding:12px 18px}
.cinema-skip:hover{color:#fff;background:transparent}
.cinema-entry button:focus-visible{outline:none;text-decoration:none}
.cinema-progress{animation-duration:20s}
.cinema-title.lai,.cinema-title.character,.cinema-title.choices{animation:none}
.title-composition{position:relative;display:inline-block;max-width:100%}
.title-words{display:block;position:relative;z-index:1}
.cinema-title.lai .title-words{animation:smokeResolve 2.3s cubic-bezier(.2,.6,.3,1) both}
.cinema-title.lai .title-composition:before{content:'';position:absolute;inset:-45% -10%;background:radial-gradient(ellipse at 25% 70%,#d9d8cc66,transparent 55%),radial-gradient(ellipse at 70% 30%,#efeee655,transparent 60%);filter:blur(24px);animation:smokeDrift 3.2s ease-out both;pointer-events:none}
.cinema-title.title-out{pointer-events:none;animation:smokeDepart 1.2s ease-in both}
.cinema-title.character .title-words{animation:drawReveal 1.8s cubic-bezier(.25,.6,.3,1) both}
.cinema-title.character .title-composition:before{content:'';position:absolute;inset:8% -5% -5%;background:linear-gradient(165deg,transparent 15%,#b392ac77 17% 32%,transparent 34% 40%,#dcc5b566 42% 60%,transparent 63%);clip-path:polygon(0 20%,95% 0,100% 76%,4% 100%);animation:makeupSweep 2.2s ease-out both;filter:blur(2px)}
.cinema-title.character .title-composition:after{content:'';position:absolute;left:0;right:0;bottom:-12px;height:12px;border-top:2px solid #ded3da;border-bottom:1px solid #aa8d9f;border-radius:50%;transform-origin:left;animation:pencilStroke 2.2s ease-out both}
.cinema-title.character.title-out{animation:eraseDrawing 1.2s ease-in both}
.cinema-title.choices .title-composition{overflow:hidden;padding:28px 12px 22px;margin:-28px -12px -22px;perspective:700px}
.cinema-title.choices .title-words{animation:walletPull 2s cubic-bezier(.2,.75,.25,1) both;transform-origin:bottom center}
.cinema-title.choices .title-composition:after{content:'';position:absolute;left:5%;right:5%;bottom:0;height:22px;border-top:2px solid #c5b9a7;border-radius:45% 45% 0 0;background:linear-gradient(#201d18,#000);box-shadow:0 -8px 20px #0009;z-index:2;animation:walletSeam 2.4s ease both}
.cinema-title.choices.title-out{animation:cardDepart 1.2s ease-in both}
@keyframes smokeResolve{0%{opacity:0;filter:blur(23px);transform:translate(-18px,12px) scale(1.08)}55%{opacity:.7;filter:blur(5px)}100%{opacity:1;filter:blur(0);transform:none}}
@keyframes smokeDrift{0%{opacity:0;transform:translate(-30px,25px) scale(.8)}35%{opacity:.75}100%{opacity:0;transform:translate(60px,-35px) scale(1.4)}}
@keyframes smokeDepart{to{opacity:0;filter:blur(22px);transform:translate(28px,-22px) scale(1.08)}}
@keyframes drawReveal{0%{clip-path:inset(0 100% 0 0);opacity:0;filter:blur(8px)}35%{opacity:1;filter:blur(1px)}100%{clip-path:inset(0);filter:blur(0)}}
@keyframes makeupSweep{0%{clip-path:inset(0 100% 0 0);opacity:0}45%{opacity:.8}75%{clip-path:inset(0);opacity:.45}100%{opacity:0;clip-path:inset(0)}}
@keyframes pencilStroke{0%,25%{transform:scaleX(0);opacity:0}70%{transform:scaleX(1);opacity:.8}100%{transform:scaleX(1);opacity:.25}}
@keyframes eraseDrawing{to{opacity:0;clip-path:inset(0 0 0 100%);transform:translateY(14px);filter:blur(3px)}}
@keyframes walletPull{0%{opacity:0;transform:translateY(125%) rotate(-8deg) rotateX(18deg)}35%{opacity:1}75%{transform:translateY(-5%) rotate(1deg)}100%{transform:none}}
@keyframes walletSeam{0%,55%{opacity:.9;transform:scaleX(.8)}100%{opacity:0;transform:scaleX(1)}}
@keyframes cardDepart{to{opacity:0;transform:translateY(-30px) rotate(3deg);filter:blur(4px)}}
@media(prefers-reduced-motion:reduce){.cinema-entry:before,.cinema-entry:after,.cinema-title *,.cinema-title *:before,.cinema-title *:after{animation:none!important}}
/* Fill a larger entry frame using the subtitle-free preview exports. */
.cinema-shot{inset:6% 4%}
.cinema-shot video{object-fit:cover;object-position:center}
@media(max-width:600px){.cinema-shot{inset:12% 7%}.cinema-shot video{object-fit:cover;object-position:center}}
/* Medium cinematic frame with more breathing room around the footage. */
.cinema-shot{inset:18% 7%}
@media(max-width:600px){.cinema-shot{inset:25% 7%}}