:root { color-scheme: dark; --black:#020202; --bone:#efe3cd; --red:#d20d22; }
* { box-sizing:border-box; }
html,body { width:100%; height:100%; margin:0; overflow:hidden; background:#000; font-family:Arial,Helvetica,sans-serif; }
body { display:grid; place-items:center; }
#film { position:relative; width:100vw; height:100vh; height:100dvh; overflow:hidden; isolation:isolate; background:#000; }
.screen { position:absolute; inset:0; opacity:0; visibility:hidden; pointer-events:none; }
.screen.is-active { opacity:1; visibility:visible; }
.void { background:#000; }

/* Port direto da abertura do site da Loos. Apenas os textos e a saída mudam. */
.loos-opening { overflow:hidden; background:#000; opacity:1; transition:opacity 2.4s ease; }
.loos-opening.is-fading { opacity:0; }
.loos-surface { position:absolute; inset:0; display:grid; place-items:center; overflow:hidden; color:#fff; background:#000; }
.loos-canvas { position:absolute; z-index:1; inset:0; width:100%; height:100%; }
.loos-logo-stack { position:absolute; z-index:6; width:min(38vw,460px); aspect-ratio:1617.27/542.93; opacity:0; transform:scale(.965); transform-origin:center; will-change:transform,filter; }
.loos-opening.is-logo-ready .loos-logo-stack { animation:loosLogoForm 1.05s cubic-bezier(.16,1,.3,1) forwards; }
.loos-full-logo { position:absolute; inset:0; width:100%; height:100%; }
.loos-full-logo svg { display:block; width:100%; height:auto; overflow:visible; }
.loos-full-logo path { fill:currentColor; }
.loos-white-logo { z-index:1; color:#fff; }
.loos-black-logo { z-index:2; color:#08090b; clip-path:circle(0 at 50% 50%); }
.loos-opening.is-logo-ready .loos-white-logo path { animation:loosWordmarkDraw 1.05s cubic-bezier(.65,0,.35,1) both; animation-delay:calc(var(--path-order) * 105ms); }
.loos-phrase { position:absolute; z-index:7; top:calc(50% + clamp(82px,10vw,138px)); left:50%; max-width:92vw; margin:0; color:#fff; font-size:clamp(20px,2.65vw,40px); font-weight:570; line-height:1; letter-spacing:-.045em; text-align:center; white-space:nowrap; transform-origin:center; animation:loosPhraseEnter .68s cubic-bezier(.16,1,.3,1) both; }
.loos-opening.is-light .loos-phrase { color:#08090b; }

/* Aviso deliberadamente neutro e institucional. */
.warning { display:grid; place-items:center; background:#000; color:#eee; transition:opacity 1.2s ease; }
.warning article { width:min(54rem,76vw); }
.warning h1 { margin:0 0 2rem; font-size:clamp(1.1rem,1.65vw,1.55rem); letter-spacing:.17em; }
.warning p { margin:0 0 1.1rem; font-size:clamp(.78rem,1.16vw,1.02rem); line-height:1.62; }
.warning small { display:block; margin-top:2.2rem; color:#8e8e8e; font-size:clamp(.66rem,.9vw,.8rem); }
.warning.is-fading { opacity:0; }

/* Marcas em preto absoluto, cada uma com sua própria entrada. */
.credits { overflow:hidden; background:#000; color:var(--bone); }
.credit-embers { position:absolute; inset:0; overflow:hidden; pointer-events:none; }
.credit-ember { position:absolute; bottom:-6%; width:3px; height:3px; border-radius:50%; background:#ff3b1f; box-shadow:0 0 8px 2px rgba(255,42,18,.72); opacity:0; animation:emberFloat var(--ember-duration) linear infinite var(--ember-delay); }
.credit { position:absolute; inset:0; display:grid; place-items:center; opacity:0; pointer-events:none; }
.credit.is-current { opacity:1; }
.credit__logo-frame { position:relative; display:grid; place-items:center; width:min(68vw,58rem); height:min(58vh,36rem); }
.credit__logo-frame img { display:block; width:100%; height:100%; object-fit:contain; mix-blend-mode:screen; filter:contrast(1.12); }

/* Loos: o logo se forma dentro de uma descarga contínua e estabiliza. */
.credit--loos .credit__logo-frame { will-change:transform,filter,opacity; }
.credit--loos.is-current .credit__logo-frame { animation:loosElectricReveal var(--credit-duration,4.6s) cubic-bezier(.22,.72,.2,1) both; }
.credit--loos::after { content:""; position:absolute; inset:0; background:#f5ead5; opacity:0; pointer-events:none; }
.credit--loos.is-current::after { animation:electricFlash var(--credit-duration,4.6s) linear both; }
.shock-lines { position:absolute; z-index:4; inset:3%; opacity:0; mix-blend-mode:screen; }
.credit--loos.is-current .shock-lines { animation:electricBranches var(--credit-duration,4.6s) ease-out both; }
.shock-lines i { position:absolute; width:25%; height:6px; background:#fff7e7; box-shadow:0 0 8px 2px #fff,0 0 18px 6px rgba(214,12,36,.9); transform-origin:left center; clip-path:polygon(0 40%,16% 12%,23% 65%,40% 3%,47% 72%,64% 20%,72% 82%,88% 28%,100% 48%,87% 58%,74% 42%,65% 95%,48% 34%,39% 88%,22% 36%,15% 77%); }
.shock-lines i:nth-child(1){left:20%;top:31%;transform:rotate(16deg) scaleX(.82)}
.shock-lines i:nth-child(2){left:58%;top:31%;transform:rotate(-17deg) scaleX(.9)}
.shock-lines i:nth-child(3){left:22%;top:66%;transform:rotate(-14deg) scaleX(.78)}
.shock-lines i:nth-child(4){left:57%;top:67%;transform:rotate(15deg) scaleX(.88)}
.shock-lines i:nth-child(5){left:36%;top:25%;transform:rotate(78deg) scaleX(.58)}
.shock-lines i:nth-child(6){left:61%;top:43%;transform:rotate(101deg) scaleX(.62)}
.shock-lines i:nth-child(7){left:17%;top:49%;transform:rotate(-5deg) scaleX(.55)}
.shock-lines i:nth-child(8){left:69%;top:52%;transform:rotate(178deg) scaleX(.52)}

/* Kropik e Sennia recebem máscaras desenhadas quadro a quadro. */
.credit--kropik .credit__logo-frame { width:min(60vw,50rem); }
.credit--sennia .credit__logo-frame { width:min(66vw,56rem); }
.credit__logo-frame--canvas canvas { display:block; width:100%; height:100%; }
.credit--kropik.is-current .credit__logo-frame--canvas { animation:canvasLogoExit var(--credit-duration,5.2s) steps(1,end) both; }
.credit--sennia.is-current .credit__logo-frame--canvas { animation:canvasLogoExit var(--credit-duration,5.2s) steps(1,end) both; }

/* Carregamento ritual. */
.loading { display:grid; place-items:center; background:radial-gradient(circle at 50% 48%,rgba(103,2,13,.2),transparent 33%),#000; color:var(--bone); overflow:hidden; }
.loading::before { content:""; position:absolute; inset:-25%; opacity:.12; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='170' height='170'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.84' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.75'/%3E%3C/svg%3E"); animation:grain .22s steps(2) infinite; }
.loading__halo { position:absolute; width:48%; aspect-ratio:1; border-radius:50%; background:radial-gradient(circle,rgba(191,7,27,.15),rgba(96,2,12,.04) 48%,transparent 70%); animation:haloPulse 3.1s ease-in-out infinite; }
#ritualCanvas { position:relative; z-index:1; width:min(62vmin,720px); aspect-ratio:1; filter:drop-shadow(0 0 1.3rem rgba(190,5,25,.18)); }
.loading__copy { position:absolute; z-index:2; right:clamp(1rem,3vw,2.5rem); bottom:clamp(1rem,3vw,2.2rem); display:flex; flex-direction:column; align-items:center; gap:.32rem; }
.loading__copy strong { margin:0; color:#f0e3cd; font-family:Impact,"Arial Black",sans-serif; font-size:clamp(.9rem,1.55vw,1.2rem); font-style:italic; font-weight:900; line-height:1; letter-spacing:.1em; text-shadow:2px 2px 0 #870713,-1px -1px 0 #000; transform:skewX(-7deg); }
.blood-spinner { --load-angle:0deg; position:relative; width:clamp(1.25rem,2.25vw,1.75rem); aspect-ratio:1; border-radius:50%; background:conic-gradient(from 20deg,#ff253d 0deg,#a50616 var(--load-angle),rgba(101,3,15,.17) var(--load-angle) 360deg); box-shadow:0 0 9px rgba(218,10,34,.35); animation:bloodSpin .85s linear infinite; }
.blood-spinner::before { content:""; position:absolute; inset:22%; border-radius:50%; background:#000; box-shadow:inset 0 0 6px rgba(210,13,34,.3); }
.blood-spinner::after { content:""; position:absolute; left:48%; top:76%; width:11%; height:28%; border-radius:60% 45% 70% 35%; background:#ba081d; transform:rotate(8deg); }
.loading.is-complete #ritualCanvas { animation:sealComplete 1.5s cubic-bezier(.2,.8,.2,1) both; }
.loading { transition:opacity 1.1s ease,filter 1.1s ease; }
.loading.is-leaving { opacity:0; filter:contrast(1.35) brightness(.38); }

/* Base cinematográfica do menu: as artes contam a história antes da interface existir. */
.menu-backdrop { overflow:hidden; background:#000; opacity:0; transition:opacity 1.8s ease; }
.menu-backdrop.is-active { opacity:1; }
.menu-backdrop__layer,.menu-backdrop__red-ghost,.menu-backdrop__slices,.menu-backdrop__slices i { position:absolute; inset:-1.5%; background-position:center; background-repeat:no-repeat; background-size:cover; }
.menu-backdrop__layer { opacity:0; transform:scale(1.035); will-change:opacity,transform,filter; }
.menu-backdrop__layer.is-current { z-index:1; opacity:1; animation:menuCameraDrift 11.5s ease-in-out both; }
.menu-backdrop__layer.is-next { z-index:2; opacity:0; }
.menu-backdrop.is-glitching .menu-backdrop__layer.is-current { animation:menuImageCollapse .72s steps(2,end) both; }
.menu-backdrop.is-glitching .menu-backdrop__layer.is-next { animation:menuImageReveal .72s steps(2,end) both; }
.menu-backdrop__red-ghost { z-index:3; opacity:0; pointer-events:none; background-image:var(--glitch-image); filter:grayscale(1) sepia(1) saturate(13) hue-rotate(320deg) contrast(1.7); mix-blend-mode:screen; }
.menu-backdrop.is-glitching .menu-backdrop__red-ghost { animation:menuRedGhost .72s steps(2,end) both; }
.menu-backdrop__slices { z-index:4; pointer-events:none; }
.menu-backdrop__slices i { opacity:0; background-image:var(--glitch-image); filter:contrast(1.35) saturate(.75); will-change:transform,opacity; }
.menu-backdrop__slices i:nth-child(1){clip-path:inset(4% 0 86% 0);--slice-shift:8vw;--slice-delay:0ms}
.menu-backdrop__slices i:nth-child(2){clip-path:inset(15% 0 72% 0);--slice-shift:-12vw;--slice-delay:35ms}
.menu-backdrop__slices i:nth-child(3){clip-path:inset(30% 0 61% 0);--slice-shift:16vw;--slice-delay:70ms}
.menu-backdrop__slices i:nth-child(4){clip-path:inset(42% 0 43% 0);--slice-shift:-9vw;--slice-delay:12ms}
.menu-backdrop__slices i:nth-child(5){clip-path:inset(59% 0 32% 0);--slice-shift:13vw;--slice-delay:95ms}
.menu-backdrop__slices i:nth-child(6){clip-path:inset(70% 0 19% 0);--slice-shift:-15vw;--slice-delay:45ms}
.menu-backdrop__slices i:nth-child(7){clip-path:inset(83% 0 9% 0);--slice-shift:10vw;--slice-delay:105ms}
.menu-backdrop__slices i:nth-child(8){clip-path:inset(93% 0 1% 0);--slice-shift:-7vw;--slice-delay:60ms}
.menu-backdrop.is-glitching .menu-backdrop__slices i { animation:menuSliceBreak .58s steps(3,end) var(--slice-delay) both; }
.menu-backdrop__seal { position:absolute; z-index:6; left:var(--seal-x,67%); top:var(--seal-y,48%); width:min(31vmin,23rem); aspect-ratio:1; object-fit:contain; opacity:0; filter:drop-shadow(0 0 6px rgba(255,5,35,.9)) contrast(1.2); transform:translate(-50%,-50%); pointer-events:none; }
.menu-backdrop.is-glitching .menu-backdrop__seal { animation:menuSealFlash .72s steps(1,end) both; }
.menu-backdrop__sigil-storm { position:absolute; z-index:6; inset:0; overflow:hidden; pointer-events:none; }
.menu-backdrop__sigil-storm img { position:absolute; left:var(--sigil-x); top:var(--sigil-y); width:var(--sigil-size); opacity:0; mix-blend-mode:screen; filter:grayscale(1) sepia(1) saturate(9) hue-rotate(318deg) contrast(1.16) brightness(.76) blur(.32px); transform:translate(-50%,-50%) rotate(var(--sigil-rotate)); }
.menu-backdrop.is-storming .menu-backdrop__sigil-storm img { animation:subliminalSigil var(--sigil-duration) steps(1,end) var(--sigil-delay) both; }
.menu-backdrop__audio-symbol { position:absolute; z-index:5; left:73.5%; top:50%; width:min(27vmin,19rem); aspect-ratio:1; object-fit:contain; opacity:.18; pointer-events:none; mix-blend-mode:screen; filter:drop-shadow(0 0 10px rgba(217,8,37,.3)); transform:translate(-50%,-50%); transform-origin:center; will-change:transform,opacity,filter; }
.menu-backdrop.is-storming .menu-backdrop__audio-symbol { filter:drop-shadow(0 0 18px rgba(240,8,42,.6)); }
.menu-backdrop__audio-ritual { position:absolute; z-index:5; inset:0; width:100%; height:100%; opacity:.56; pointer-events:none; mix-blend-mode:screen; transition:opacity .35s ease; }
.menu-backdrop.is-storming .menu-backdrop__audio-ritual { opacity:.74; }
.menu-backdrop.is-storming .menu-backdrop__red-ghost { animation:possessedSignal 1.16s steps(3,end) both; }
.menu-backdrop.is-storming .menu-backdrop__grain { opacity:.2; animation-duration:.08s; }
.menu-backdrop__red-flash { position:absolute; z-index:5; inset:0; opacity:0; pointer-events:none; background:linear-gradient(90deg,transparent 0 36%,rgba(218,0,31,.08) 55%,rgba(255,8,40,.35) 100%); mix-blend-mode:screen; }
.menu-backdrop.is-glitching .menu-backdrop__red-flash { animation:menuRedFlash .72s steps(1,end) both; }
.menu-backdrop__grain { position:absolute; z-index:8; inset:-30%; opacity:.11; pointer-events:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='190' height='190'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='.91' numOctaves='5' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.72'/%3E%3C/svg%3E"); animation:menuGrain .18s steps(2) infinite; mix-blend-mode:screen; }
.menu-backdrop::before { content:""; position:absolute; z-index:7; inset:0; pointer-events:none; background:linear-gradient(90deg,rgba(0,0,0,.64) 0%,rgba(0,0,0,.34) 28%,transparent 50%),radial-gradient(ellipse at center,transparent 42%,rgba(0,0,0,.16) 68%,rgba(0,0,0,.66) 100%); }
.menu-backdrop::after { content:""; position:absolute; z-index:7; inset:0; pointer-events:none; opacity:.32; background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px); mix-blend-mode:overlay; }
.menu-backdrop.is-active { pointer-events:auto; }
.main-menu { position:absolute; z-index:12; left:clamp(2rem,5.3vw,6.8rem); top:50%; width:clamp(18rem,30vw,32rem); color:var(--bone); opacity:0; transform:translateY(-47%); transition:opacity .7s ease,transform .95s cubic-bezier(.16,1,.3,1); }
.menu-backdrop.is-ui-ready .main-menu { opacity:1; transform:translateY(-50%); }
.main-menu__logo { display:block; width:min(100%,27rem); height:clamp(8rem,24vh,15.5rem); margin:0 0 clamp(.3rem,1.3vh,1rem); object-fit:contain; object-position:left center; filter:brightness(1.58) saturate(1.4) contrast(1.12) drop-shadow(0 4px 0 rgba(0,0,0,.9)) drop-shadow(0 0 15px rgba(170,4,24,.34)); }
.main-menu__nav { display:flex; flex-direction:column; align-items:flex-start; gap:clamp(.08rem,.45vh,.3rem); }
.menu-option { position:relative; isolation:isolate; min-width:min(26rem,100%); padding:.22em .62em .2em 1.02em; overflow:visible; border:0; color:rgba(239,227,205,.62); background:transparent; font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(1.2rem,2.25vw,2.45rem); line-height:1.05; letter-spacing:.035em; text-align:left; text-transform:uppercase; cursor:pointer; transform:skewX(-4deg); transition:color .14s ease,transform .14s ease,text-shadow .14s ease; }
.menu-option::before { content:""; position:absolute; z-index:-1; left:0; top:50%; width:0; height:66%; background:linear-gradient(92deg,rgba(183,7,29,.92),rgba(114,2,17,.72) 73%,transparent); clip-path:polygon(1% 24%,94% 0,100% 72%,7% 100%); transform:translateY(-50%) skewX(-9deg); transition:width .22s cubic-bezier(.2,.8,.2,1); }
.menu-option::after { content:"✦"; position:absolute; left:-.28em; top:50%; color:#d6102c; font-family:Arial,sans-serif; font-size:.52em; opacity:0; transform:translate(-100%,-50%) rotate(35deg) scale(.5); transition:opacity .12s ease,transform .18s ease; text-shadow:0 0 8px rgba(218,8,38,.75); }
.menu-option:hover,.menu-option:focus-visible,.menu-option.is-selected { outline:0; color:#fff6e6; text-shadow:2px 2px 0 #090202,-2px 0 0 rgba(127,0,17,.8); transform:translateX(.42em) skewX(-4deg) scale(1.045); }
.menu-option.is-selected::before { width:108%; }
.menu-option.is-selected::after { opacity:1; transform:translate(-100%,-50%) rotate(0) scale(1); }
.menu-option.is-pressed { animation:menuOptionPress .28s steps(2,end); }
.main-menu__notice { min-height:1.25em; margin:.8rem 0 0 1rem; color:rgba(239,227,205,.64); font-size:clamp(.64rem,.78vw,.82rem); font-weight:700; letter-spacing:.14em; text-transform:uppercase; }
.menu-footer { position:absolute; z-index:12; right:clamp(1rem,2.4vw,2.6rem); bottom:clamp(.8rem,2.1vh,1.6rem); display:flex; align-items:center; gap:1.35rem; color:rgba(239,227,205,.68); font-size:clamp(.58rem,.75vw,.76rem); font-weight:800; letter-spacing:.11em; text-transform:uppercase; opacity:0; transition:opacity .7s ease .35s; }
.menu-backdrop.is-ui-ready .menu-footer { opacity:1; }
.menu-footer span { display:flex; align-items:center; gap:.38rem; }
.menu-footer b { color:#e21832; font-size:1.25em; }
.menu-footer small { padding-left:.3rem; color:rgba(239,227,205,.38); font:inherit; }
.menu-panel { position:absolute; z-index:20; inset:0; visibility:hidden; opacity:0; transition:opacity .34s ease,visibility .34s; }
.menu-panel.is-open { visibility:visible; opacity:1; }
.menu-panel__veil { position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.98) 0 43%,rgba(0,0,0,.83) 63%,rgba(0,0,0,.36)); backdrop-filter:blur(4px); }
.menu-panel__content { position:absolute; left:clamp(2rem,7vw,8rem); top:50%; width:min(42rem,72vw); color:var(--bone); transform:translateY(-46%); transition:transform .5s cubic-bezier(.16,1,.3,1); }
.menu-panel.is-open .menu-panel__content { transform:translateY(-50%); }
.menu-panel__eyebrow { margin:0 0 .8rem; color:#d7152e; font-size:clamp(.62rem,.82vw,.82rem); font-weight:900; letter-spacing:.2em; }
.menu-panel h2 { margin:0 0 .55em; font-family:Impact,"Arial Narrow",sans-serif; font-size:clamp(2.8rem,7vw,7.5rem); font-weight:900; line-height:.84; letter-spacing:-.02em; text-transform:uppercase; }
.menu-panel__body { max-width:34rem; min-height:5rem; color:rgba(239,227,205,.82); font-size:clamp(.84rem,1.08vw,1.05rem); line-height:1.55; }
.menu-panel__body strong { color:#fff4e1; }
.menu-panel__body ul { margin:1.1rem 0; padding:0; list-style:none; }
.menu-panel__body li { padding:.65rem 0; border-bottom:1px solid rgba(210,13,34,.32); text-transform:uppercase; letter-spacing:.08em; }
.menu-panel__body input[type="range"] { width:min(24rem,100%); accent-color:#cf1029; }
.menu-panel__back { margin-top:2rem; padding:.5rem 0; border:0; color:#e01731; background:transparent; font-weight:900; letter-spacing:.14em; cursor:pointer; }
.rotate-notice { display:none; }
@keyframes menuOptionPress { 0%{transform:translateX(.42em) skewX(-4deg) scale(1.045)} 35%{transform:translateX(.64em) skewX(-9deg) scale(.97);filter:brightness(2)} 70%{transform:translateX(.28em) skewX(1deg) scale(1.06)} 100%{transform:translateX(.42em) skewX(-4deg) scale(1.045)} }
@keyframes loosLogoForm { 0%{opacity:0;transform:scale(.965)} 18%{opacity:1} 76%{opacity:1;transform:scale(1.012)} 100%{opacity:1;transform:scale(1)} }
@keyframes loosWordmarkDraw { 0%{fill:transparent;stroke:currentColor;stroke-width:7;stroke-dasharray:1;stroke-dashoffset:1;opacity:.18} 68%{fill:transparent;stroke:currentColor;stroke-width:7;stroke-dasharray:1;stroke-dashoffset:0;opacity:1} 100%{fill:currentColor;stroke:transparent;stroke-width:0;stroke-dasharray:1;stroke-dashoffset:0;opacity:1} }
@keyframes loosPhraseEnter { 0%{opacity:0;transform:translate(-50%,28px) skewY(4deg) scaleY(.72);filter:blur(9px)} 58%{opacity:1;transform:translate(-50%,-4px) skewY(-.8deg) scaleY(1.035);filter:blur(0)} 100%{opacity:1;transform:translate(-50%,0);filter:blur(0)} }
@keyframes emberFloat { 0%{opacity:0;transform:translate3d(0,0,0) scale(.5)} 14%{opacity:.9} 74%{opacity:.55} 100%{opacity:0;transform:translate3d(var(--ember-drift),-112vh,0) scale(1.7)} }
@keyframes loosElectricReveal { 0%{opacity:0;transform:scale(.76) skewX(-8deg);filter:brightness(4) contrast(2.2) blur(12px) drop-shadow(0 0 0 transparent)} 7%{opacity:.2;transform:scale(1.1) skewX(4deg);filter:brightness(5) contrast(2.5) blur(5px) drop-shadow(0 0 32px #fff)} 12%{opacity:.78;transform:translateX(-12px) scale(.98) skewX(-2deg);filter:brightness(2.8) contrast(1.8) blur(1px) drop-shadow(0 0 24px #e10c2d)} 18%{opacity:.34;transform:translateX(8px) scale(1.035);filter:brightness(4) contrast(2.2) blur(3px) drop-shadow(0 0 36px #fff)} 25%{opacity:1;transform:translateX(-3px) scale(1.012);filter:brightness(1.35) contrast(1.2) blur(0) drop-shadow(0 0 18px rgba(221,11,43,.8))} 34%{transform:translateX(2px) scale(.998);filter:brightness(1.08) contrast(1.12) drop-shadow(0 0 9px rgba(221,11,43,.52))} 44%,76%{opacity:1;transform:translateY(-2px) scale(1);filter:brightness(1) contrast(1.1) drop-shadow(0 0 6px rgba(221,11,43,.3))} 82%{transform:translateY(0) scale(1.015);filter:brightness(1.8) contrast(1.4) drop-shadow(0 0 22px #d50b2b)} 88%{opacity:.82;transform:scale(1.045);filter:brightness(3) contrast(1.8) blur(1px) drop-shadow(0 0 36px #fff)} 100%{opacity:0;transform:scale(1.16);filter:brightness(5) contrast(2) blur(10px) drop-shadow(0 0 52px #d50b2b)} }
@keyframes electricFlash { 0%,5%{opacity:0} 7%{opacity:.72} 9%{opacity:0} 16%{opacity:.28} 18%{opacity:0} 84%{opacity:0} 87%{opacity:.38} 90%,100%{opacity:0} }
@keyframes electricBranches { 0%,4%{opacity:0;transform:scale(.7) rotate(-2deg)} 8%{opacity:1;transform:scale(1.04) rotate(.6deg)} 13%{opacity:.22;transform:scale(.98)} 18%{opacity:.72;transform:scale(1.015) rotate(-.4deg)} 24%,82%{opacity:0;transform:scale(1)} 86%{opacity:.78;transform:scale(1.03)} 92%,100%{opacity:0;transform:scale(1.12)} }
@keyframes canvasLogoExit { 0%,86%{opacity:1;transform:scale(1)} 92%{opacity:1;transform:scale(1.025)} 100%{opacity:0;transform:scale(.88)} }
@keyframes bloodSpin { to{transform:rotate(360deg)} }
@keyframes grain { 0%{transform:translate(0)} 33%{transform:translate(-1.5%,1%)} 66%{transform:translate(1%,-1.5%)} 100%{transform:translate(.5%,1%)} }
@keyframes haloPulse { 0%,100%{transform:scale(.92);opacity:.55} 50%{transform:scale(1.08);opacity:1} }
@keyframes sealComplete { 0%{transform:scale(1);filter:drop-shadow(0 0 1rem rgba(210,13,34,.35))} 32%{transform:scale(1.045);filter:drop-shadow(0 0 2.5rem rgba(210,13,34,.85))} 55%{transform:scale(.99)} 100%{transform:scale(1);filter:drop-shadow(0 0 1.4rem rgba(210,13,34,.55))} }
@keyframes menuCameraDrift { 0%{transform:scale(1.035) translate3d(0,0,0)} 100%{transform:scale(1.085) translate3d(-.7%,.45%,0)} }
@keyframes menuImageCollapse { 0%{opacity:1;transform:scale(1.07);filter:none} 18%{transform:translateX(-1.4%) scale(1.08);filter:contrast(1.45)} 36%{opacity:.76;transform:translateX(2.1%) scale(1.06);filter:grayscale(1) contrast(1.8)} 58%{opacity:.28;transform:translateX(-4%) scale(1.1);filter:sepia(1) saturate(9) hue-rotate(320deg)} 100%{opacity:0;transform:scale(1.14);filter:brightness(.2)} }
@keyframes menuImageReveal { 0%,24%{opacity:0;transform:translateX(4%) scale(1.12);filter:brightness(.15) contrast(2)} 38%{opacity:.32;transform:translateX(-2%) scale(1.08);filter:grayscale(1) contrast(1.7)} 62%{opacity:.82;transform:translateX(.8%) scale(1.055);filter:sepia(1) saturate(7) hue-rotate(320deg)} 78%{opacity:.55;filter:brightness(2.1) contrast(1.7)} 100%{opacity:1;transform:scale(1.035);filter:none} }
@keyframes menuSliceBreak { 0%{opacity:0;transform:translateX(calc(var(--slice-shift) * -1))} 18%{opacity:.92;transform:translateX(var(--slice-shift))} 48%{opacity:.42;transform:translateX(calc(var(--slice-shift) * -.38))} 73%{opacity:.88;transform:translateX(calc(var(--slice-shift) * .16))} 100%{opacity:0;transform:none} }
@keyframes menuRedGhost { 0%,8%{opacity:0;transform:none} 15%{opacity:.52;transform:translateX(1.8%)} 28%{opacity:.12;transform:translateX(-1.1%)} 42%{opacity:.44;transform:translateX(.7%)} 64%{opacity:0} 77%{opacity:.25;transform:translateX(-.5%)} 100%{opacity:0;transform:none} }
@keyframes menuSealFlash { 0%,10%{opacity:0;transform:translate(-50%,-50%) scale(.55) rotate(-5deg)} 11%,17%{opacity:.94;transform:translate(-50%,-50%) scale(1.18) rotate(2deg)} 18%,38%{opacity:0} 39%,45%{opacity:.46;transform:translate(-48%,-52%) scale(.92) rotate(-3deg)} 46%,69%{opacity:0} 70%,76%{opacity:.82;transform:translate(-52%,-49%) scale(1.04) rotate(1deg)} 77%,100%{opacity:0} }
@keyframes menuRedFlash { 0%,12%{opacity:0} 13%{opacity:.65} 15%,41%{opacity:0} 42%{opacity:.38} 44%,73%{opacity:0} 74%{opacity:.52} 77%,100%{opacity:0} }
@keyframes menuGrain { 0%{transform:translate(0)} 25%{transform:translate(-2%,1.5%)} 50%{transform:translate(1%,-2%)} 75%{transform:translate(2%,1%)} 100%{transform:translate(-1%,-1%)} }
@keyframes subliminalSigil { 0%,7%{opacity:0;transform:translate(-50%,-50%) rotate(var(--sigil-rotate)) scale(.96)} 8%,12%{opacity:calc(var(--sigil-opacity) * .48)} 13%,35%{opacity:0} 36%,41%{opacity:calc(var(--sigil-opacity) * .72);transform:translate(calc(-50% + 1px),calc(-50% - 1px)) rotate(var(--sigil-rotate)) scale(.985)} 42%,67%{opacity:0} 68%,74%{opacity:var(--sigil-opacity);transform:translate(calc(-50% - 1px),calc(-50% + 1px)) rotate(var(--sigil-rotate)) scale(1)} 75%,100%{opacity:0} }
@keyframes possessedSignal { 0%,8%{opacity:0;transform:none} 12%{opacity:.2;transform:translateX(-1.3%) scaleX(1.015)} 16%{opacity:0} 31%{opacity:.14;transform:translateX(.8%)} 36%{opacity:0} 58%{opacity:.18;transform:translateX(-.55%) scaleY(1.012)} 64%,100%{opacity:0;transform:none} }

@media (max-width:760px) {
  .loos-logo-stack { width:64vw; }
  .loos-phrase { top:calc(50% + clamp(96px,18vw,150px)); max-width:90vw; font-size:clamp(13px,4.2vw,20px); white-space:normal; }
  .warning { padding:7vh 7vw; }
  .warning article { width:100%; }
  .warning h1 { margin-bottom:1.35rem; font-size:1rem; }
  .warning p { margin-bottom:.8rem; font-size:clamp(.68rem,2.9vw,.9rem); line-height:1.48; }
  .warning small { margin-top:1.35rem; }
  .credit__logo-frame,.credit--kropik .credit__logo-frame,.credit--sennia .credit__logo-frame { width:88vw; height:54vh; }
  #ritualCanvas { width:min(82vw,58vh); }
  .loading__halo { width:86vw; }
  .loading__copy { right:1rem; bottom:1rem; }
  .loading__copy strong { font-size:clamp(.85rem,3.4vw,1.05rem); }
  .menu-backdrop__seal { width:min(36vmin,15rem); }
  .menu-backdrop__audio-symbol { width:min(31vmin,14rem); }
}
@media (max-height:560px) {
  .warning article { width:min(60rem,86vw); }
  .warning h1 { margin-bottom:1rem; }
  .warning p { margin-bottom:.62rem; font-size:clamp(.62rem,1.45vw,.82rem); line-height:1.38; }
  .warning small { margin-top:1rem; }
  .loos-phrase { top:calc(50% + 65px); }
  .main-menu { left:4vw; width:29vw; }
  .main-menu__logo { height:29vh; margin-bottom:-.4rem; }
  .menu-option { font-size:clamp(.9rem,3.3vh,1.55rem); }
}
@media (max-width:760px) and (pointer:fine) {
  .main-menu { left:1.5rem; width:min(68vw,23rem); }
  .main-menu__logo { width:min(58vw,20rem); height:22vh; }
  .menu-option { font-size:clamp(1.05rem,4.6vw,1.65rem); }
  .menu-footer { right:1rem; gap:.65rem; }
  .menu-footer small { display:none; }
}
@media (orientation:portrait) and (max-width:760px) and (pointer:coarse) {
  .menu-backdrop > :not(.rotate-notice) { visibility:hidden; }
  .menu-backdrop .rotate-notice { position:absolute; z-index:40; inset:0; display:grid; place-content:center; gap:1rem; color:var(--bone); background:#020202; text-align:center; }
  .rotate-notice span { color:var(--red); font-size:4rem; line-height:1; animation:bloodSpin 2.2s ease-in-out infinite; }
  .rotate-notice p { margin:0; font-family:Impact,"Arial Narrow",sans-serif; font-size:1.35rem; letter-spacing:.12em; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { animation-duration:.001ms!important; transition-duration:.001ms!important; } }