.portal-cinematic{position:fixed;inset:0;z-index:1000;overflow:hidden;background:#020202;color:#f2e7d3;opacity:0;visibility:hidden;transition:opacity .7s ease,visibility 0s linear .7s;isolation:isolate}
.portal-cinematic.is-active{opacity:1;visibility:visible;transition:opacity .7s ease}
.cinematic-art{position:absolute;inset:-4%;background:url('/portal-cinematic.webp') center/cover no-repeat;transform:scale(1.14);will-change:transform,filter}
.cinematic-veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 48%,transparent 0 15%,rgba(3,3,3,.12) 28%,rgba(1,1,1,.76) 78%),linear-gradient(180deg,rgba(0,0,0,.55),transparent 34%,transparent 68%,rgba(0,0,0,.8));z-index:1}
.cinematic-grain{position:absolute;inset:-50%;z-index:5;opacity:.13;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='.78' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");animation:cinematicGrain .22s steps(2) infinite;mix-blend-mode:soft-light}
.cinematic-rings{position:absolute;inset:0;z-index:2;pointer-events:none}.cinematic-ring{position:absolute;left:50%;top:49%;width:min(49vw,750px);aspect-ratio:1;border:1px solid rgba(239,195,126,.34);border-radius:50%;transform:translate(-50%,-50%);box-shadow:0 0 44px rgba(212,139,61,.08),inset 0 0 44px rgba(212,139,61,.06)}
.cinematic-ring:nth-child(2){width:min(42vw,640px);border-style:dashed;opacity:.55}.cinematic-ring:nth-child(3){width:min(34vw,520px);border-color:rgba(255,222,165,.2)}
.cinematic-node{position:absolute;width:5px;aspect-ratio:1;border-radius:50%;background:#f5c980;box-shadow:0 0 15px #d7893d}.cinematic-node:nth-child(4){left:27%;top:29%}.cinematic-node:nth-child(5){right:28%;top:27%}.cinematic-node:nth-child(6){left:31%;bottom:25%}.cinematic-node:nth-child(7){right:31%;bottom:27%}
.cinematic-story{position:absolute;inset:0;z-index:4;display:grid;place-items:center;text-align:center;padding:clamp(22px,5vw,72px)}
.cinematic-beat,.cinematic-wordmark,.cinematic-meta{position:absolute;margin:0;opacity:0}.cinematic-beat{max-width:780px;color:#f3eadb;font:400 clamp(15px,2vw,25px)/1.45 Georgia,'Times New Roman',serif;letter-spacing:.08em;text-shadow:0 2px 24px #000}.cinematic-beat small{display:block;margin-bottom:15px;color:#d49a59;font:600 9px/1 ui-monospace,monospace;letter-spacing:.3em;text-transform:uppercase}.cinematic-wordmark{font:400 clamp(52px,10vw,138px)/.85 Georgia,'Times New Roman',serif;letter-spacing:.2em;text-indent:.2em;text-shadow:0 3px 44px #000,0 0 80px rgba(213,137,67,.25)}.cinematic-meta{margin-top:clamp(105px,16vw,190px);color:#d8b98f;font:600 9px/1.4 ui-monospace,monospace;letter-spacing:.22em;text-transform:uppercase}
.cinematic-chrome{position:absolute;inset:0;z-index:8;pointer-events:none;border:1px solid rgba(224,184,127,.09);margin:14px}.cinematic-chrome::before,.cinematic-chrome::after{content:'';position:absolute;left:0;right:0;height:8vh;background:#010101;transition:height 1.8s cubic-bezier(.16,.78,.2,1)}.cinematic-chrome::before{top:0}.cinematic-chrome::after{bottom:0}.portal-cinematic[data-scene='final'] .cinematic-chrome::before,.portal-cinematic[data-scene='final'] .cinematic-chrome::after{height:10vh}
.cinematic-skip{position:absolute;z-index:12;right:max(20px,env(safe-area-inset-right));top:max(22px,env(safe-area-inset-top));border:1px solid rgba(238,218,186,.32);background:rgba(6,5,4,.5);backdrop-filter:blur(14px);color:#eadfc9;padding:11px 14px;font:600 9px/1 ui-monospace,monospace;letter-spacing:.15em;cursor:pointer;transition:.25s ease}.cinematic-skip:hover,.cinematic-skip:focus-visible{border-color:#e9c28d;background:#eadfc9;color:#17100c;outline:none}
.cinematic-index{position:absolute;z-index:10;left:max(22px,env(safe-area-inset-left));bottom:max(22px,env(safe-area-inset-bottom));color:rgba(234,223,201,.58);font:600 8px/1.4 ui-monospace,monospace;letter-spacing:.18em}.cinematic-index::before{content:'';display:inline-block;width:36px;height:1px;background:#bd7b42;vertical-align:middle;margin-right:12px}
body.cinematic-locked{overflow:hidden}.cinematic-replay{border:0;background:transparent;color:var(--paper-soft,#d8c8ad);font:8px ui-monospace,monospace;letter-spacing:.1em;cursor:pointer}.cinematic-replay:hover,.cinematic-replay:focus-visible{color:var(--paper,#eadfc9)}
@keyframes cinematicGrain{0%{transform:translate(0,0)}25%{transform:translate(3%,-2%)}50%{transform:translate(-2%,3%)}75%{transform:translate(2%,2%)}100%{transform:translate(-3%,-2%)}}
@media(max-width:760px){.cinematic-art{inset:-3% -48%;background-position:50% center}.cinematic-ring{width:102vw}.cinematic-ring:nth-child(2){width:86vw}.cinematic-ring:nth-child(3){width:68vw}.cinematic-beat{font-size:clamp(17px,5vw,23px);max-width:88vw}.cinematic-wordmark{font-size:clamp(48px,17vw,82px);letter-spacing:.12em;text-indent:.12em}.cinematic-meta{margin-top:115px;width:86%;font-size:8px}.cinematic-index{max-width:55%;letter-spacing:.12em}.cinematic-chrome{margin:8px}.cinematic-chrome::before,.cinematic-chrome::after{height:7vh}}
@media(prefers-reduced-motion:reduce){.portal-cinematic,.cinematic-art,.cinematic-grain,.cinematic-ring,.cinematic-node,.cinematic-chrome::before,.cinematic-chrome::after{animation:none!important;transition:none!important}.cinematic-art{transform:scale(1.03)!important;filter:brightness(.72)!important}.cinematic-grain{display:none}.cinematic-beat{display:none}.cinematic-wordmark,.cinematic-meta{opacity:1!important}.cinematic-rings{opacity:.35}}