:root{--gold:#f2d197}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;overflow:hidden;background:radial-gradient(circle at 50% 45%,#3b2918 0,#17100a 42%,#060504 100%);color:var(--gold);font-family:Georgia,"Times New Roman",serif}
.entrance{position:relative;display:grid;place-items:center;min-height:100%;isolation:isolate;transition:filter .7s ease}
.entrance::before{content:"";position:fixed;inset:0;z-index:4;pointer-events:none;background:#070503;opacity:0;transition:opacity .7s ease .18s}
.poster{position:relative;width:min(100vw,calc(100vh * .8003));aspect-ratio:1122/1402;filter:drop-shadow(0 1.5rem 3rem #000) drop-shadow(0 0 1.2rem #8f5f2430);user-select:none}
.poster__frame{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain}
.poster__frame--off{opacity:0;transition:opacity .16s steps(2,end)}
.switch{position:absolute;z-index:2;top:23%;left:24%;width:65%;height:40%;padding:0;border:0;border-radius:45% 35% 30% 35%;background:transparent;cursor:grab;touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.switch::after{content:"";position:absolute;inset:14% 2% 12% 13%;border-radius:50%;transition:box-shadow .25s ease,background .25s ease}
.switch:hover::after,.switch:focus-visible::after{background:#f7bd5010;box-shadow:0 0 2.2rem #ffc45a55}
.switch:focus-visible{outline:3px solid var(--gold);outline-offset:5px}.switch:active{cursor:grabbing}
.instruction{position:fixed;left:50%;bottom:clamp(.85rem,3vh,2rem);z-index:3;margin:0;padding:.55rem 1rem .5rem;transform:translateX(-50%);border:1px solid #e0ad5a7a;border-radius:99px;background:#0b0805bb;box-shadow:0 .5rem 1.5rem #0009;color:var(--gold);font:700 clamp(.68rem,1.25vw,.88rem)/1.1 system-ui,sans-serif;letter-spacing:.18em;text-align:center;text-transform:uppercase;white-space:nowrap;animation:breathe 2.2s ease-in-out infinite}
.skip-link{position:fixed;top:1rem;right:1rem;z-index:5;padding:.55rem .8rem;border-radius:999px;background:#0b0805bb;color:#e7c98f;font:600 .72rem system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;opacity:.72}.skip-link:hover,.skip-link:focus{opacity:1}
.entrance.is-throwing .poster{animation:clunk .38s ease both}.entrance.is-throwing .poster__frame--off{opacity:1}.entrance.is-throwing .instruction{opacity:0;transition:opacity .15s ease}.entrance.is-throwing::before{opacity:1}.entrance.is-throwing{filter:saturate(.65) brightness(.9)}
@keyframes breathe{50%{box-shadow:0 .5rem 1.5rem #0009,0 0 1.1rem #d99a3b55}}
@keyframes clunk{0%{transform:translate(0);filter:brightness(1.15)}28%{transform:translate(2px,4px) rotate(.15deg);filter:brightness(1.35)}55%{transform:translate(-2px,-1px) rotate(-.12deg);filter:brightness(.72)}100%{transform:translate(0);filter:brightness(.5)}}
.no-script{position:fixed;left:50%;bottom:1rem;z-index:9;transform:translateX(-50%);color:#fff}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-aspect-ratio:4/5){.poster{width:100vw}.instruction{bottom:.7rem}.skip-link{top:.6rem;right:.6rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;scroll-behavior:auto!important}.entrance::before{transition-duration:.18s}}