@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .38s cubic-bezier(.55,0,.25,1) both cinema-out; }
::view-transition-new(root) { animation: .58s cubic-bezier(.16,1,.3,1) both cinema-in; }
::view-transition-group(movie-poster) { animation-duration: .7s; animation-timing-function: cubic-bezier(.16,1,.3,1); }
@keyframes cinema-out { to { opacity: 0; filter: blur(8px); transform: scale(.985); } }
@keyframes cinema-in { from { opacity: 0; filter: blur(10px); transform: scale(1.015); } }

:root { --cinema-x: 50%; --cinema-y: 35%; }
html { background: #030609; }
body.portal-open { overflow:hidden; }
body::after { content:""; position:fixed; inset:0; z-index:9990; pointer-events:none; opacity:0; background:radial-gradient(circle 28rem at var(--cinema-x) var(--cinema-y),rgba(116,255,199,.085),transparent 70%); mix-blend-mode:screen; transition:opacity .45s; }
html.immersive-on body::after { opacity:1; }

.film-signature-flash { position:fixed; z-index:11900; inset:0; pointer-events:none; background:radial-gradient(circle at 50% 55%,color-mix(in srgb,var(--signature-color) 42%,transparent),transparent 58%); mix-blend-mode:screen; animation:signature-flash .82s cubic-bezier(.16,1,.3,1) both; }
.movie-art.sonic-active,.film-choice.sonic-active { animation:signature-card .78s cubic-bezier(.16,1,.3,1) both; }
@keyframes signature-flash { 0%{opacity:0;transform:scale(.75)} 24%{opacity:1} 100%{opacity:0;transform:scale(1.18)} }
@keyframes signature-card { 0%,100%{filter:none} 35%{filter:saturate(1.45) brightness(1.16);box-shadow:0 0 0 2px var(--signature-color,#83f3ca),0 0 54px color-mix(in srgb,var(--signature-color,#83f3ca) 48%,transparent)} }

.cinema-stinger { position:fixed; z-index:13000; inset:0; display:grid; place-items:center; overflow:hidden; pointer-events:none; color:#effff9; background:#020504; opacity:0; }
.cinema-stinger::before,.cinema-stinger::after { content:""; position:absolute; z-index:2; left:0; right:0; height:50.5%; background:#000; }
.cinema-stinger::before { top:0; transform-origin:top; }
.cinema-stinger::after { bottom:0; transform-origin:bottom; }
.cinema-stinger>i { position:absolute; inset:-30%; background:conic-gradient(from 190deg at 50% 50%,transparent 0 39%,rgba(132,255,208,.08) 44%,rgba(232,255,247,.55) 49.7%,rgba(132,255,208,.08) 55%,transparent 60%); filter:blur(12px); transform:rotate(-12deg) scale(.4); opacity:0; }
.cinema-stinger>div { position:relative; z-index:3; display:grid; gap:5px; text-align:center; transform:scale(.72); opacity:0; }
.cinema-stinger span { color:#8ff8d1; font:800 .76rem/1 var(--sans,Arial); letter-spacing:.48em; }
.cinema-stinger strong { font:800 clamp(3.1rem,10vw,8.8rem)/.82 var(--display,Georgia); letter-spacing:-.055em; text-shadow:0 0 70px rgba(116,255,199,.4); }
.cinema-stinger small { color:#c8d8d2; font:700 .67rem/1.3 var(--sans,Arial); letter-spacing:.24em; }
.cinema-stinger.play { animation:stinger-screen 2.3s both; }
.cinema-stinger.play::before { animation:stinger-top 2.3s cubic-bezier(.16,1,.3,1) both; }
.cinema-stinger.play::after { animation:stinger-bottom 2.3s cubic-bezier(.16,1,.3,1) both; }
.cinema-stinger.play>i { animation:stinger-beam 2.3s cubic-bezier(.16,1,.3,1) both; }
.cinema-stinger.play>div { animation:stinger-title 2.3s cubic-bezier(.16,1,.3,1) both; }
@keyframes stinger-screen { 0%{opacity:0} 7%,78%{opacity:1} 100%{opacity:0} }
@keyframes stinger-top { 0%,13%{transform:scaleY(1)} 38%,72%{transform:scaleY(.12)} 100%{transform:translateY(-100%)} }
@keyframes stinger-bottom { 0%,13%{transform:scaleY(1)} 38%,72%{transform:scaleY(.12)} 100%{transform:translateY(100%)} }
@keyframes stinger-beam { 0%,12%{opacity:0;transform:rotate(-12deg) scale(.35)} 39%,70%{opacity:1;transform:rotate(0) scale(1)} 100%{opacity:0;transform:rotate(8deg) scale(1.3)} }
@keyframes stinger-title { 0%,22%{opacity:0;transform:scale(.7);filter:blur(16px)} 42%,72%{opacity:1;transform:scale(1);filter:blur(0)} 100%{opacity:0;transform:scale(1.12);filter:blur(8px)} }

.cinema-toast { position:fixed; z-index:12000; left:50%; top:92px; width:max-content; max-width:calc(100% - 28px); padding:12px 18px; border:1px solid rgba(133,246,205,.46); border-radius:999px; color:#eafff7; background:rgba(5,17,13,.92); box-shadow:0 15px 45px #0009,0 0 32px rgba(94,255,196,.14); backdrop-filter:blur(16px); font:700 .72rem/1.2 var(--sans,Arial); letter-spacing:.07em; text-align:center; text-transform:uppercase; opacity:0; pointer-events:none; transform:translate(-50%,-15px); transition:opacity .25s,transform .35s cubic-bezier(.16,1,.3,1); }
.cinema-toast.show { opacity:1; transform:translate(-50%,0); }
.cinema-toast[data-tone="sound"] { border-color:rgba(255,208,103,.7); color:#ffe3a2; }
.cinema-toast[data-tone="muted"] { border-color:rgba(255,255,255,.18); color:#aebbb6; }

.cinema-portal { position:fixed; inset:0; z-index:11000; display:grid; place-items:center; overflow:hidden; padding:24px; background:radial-gradient(circle at 50% 20%,#16362e 0,#07110f 34%,#020405 72%); }
.cinema-portal[hidden] { display:none; }
.portal-beam { position:absolute; width:min(120vw,1200px); height:140vh; left:50%; top:-30%; transform:translateX(-50%) perspective(700px) rotateX(58deg); transform-origin:50% 0; background:conic-gradient(from 172deg at 50% 0,transparent 0 42%,rgba(112,255,198,.19) 46%,rgba(234,255,246,.42) 50%,rgba(112,255,198,.19) 54%,transparent 58%); filter:blur(18px); animation:portal-sway 7s ease-in-out infinite alternate; }
.portal-card { position:relative; width:min(680px,100%); text-align:center; padding:42px clamp(20px,5vw,64px); border:1px solid rgba(175,255,225,.28); background:linear-gradient(145deg,rgba(13,25,22,.86),rgba(3,7,7,.94)); box-shadow:0 32px 100px #000, inset 0 1px rgba(255,255,255,.08); backdrop-filter:blur(24px); }
.portal-card img { width:76px; height:76px; object-fit:contain; margin-bottom:24px; }
.portal-kicker,.director-eyebrow { display:block; color:#86ffd0; font:700 .73rem/1.2 var(--sans,Arial); letter-spacing:.18em; }
.portal-card h2,.director h2 { margin:12px 0 16px; color:#fff; font:500 clamp(2.2rem,6vw,4.7rem)/.88 var(--display,Georgia); letter-spacing:-.045em; }
.portal-card h2 em,.director h2 em { color:#7ff5c8; font-style:italic; }
.portal-card p { max-width:500px; margin:0 auto 25px; color:#c8d4d0; line-height:1.6; }
.portal-actions { display:flex; justify-content:center; gap:10px; flex-wrap:wrap; }
.portal-actions button { min-height:48px; padding:0 20px; border:1px solid rgba(255,255,255,.18); color:white; cursor:pointer; font:700 .78rem/1 var(--sans,Arial); letter-spacing:.07em; text-transform:uppercase; }
.portal-enter { background:#e4fff5; color:#06100d!important; }
.portal-skip { background:transparent; }
.portal-card > small { display:block; color:#7f918b; margin-top:16px; font-size:.72rem; }
@keyframes portal-sway { to { transform:translateX(-50%) perspective(700px) rotateX(54deg) rotateZ(3deg) scale(1.08); opacity:.72; } }

.sensory-dock { position:fixed; z-index:8500; right:18px; bottom:18px; display:flex; gap:7px; padding:6px; border:1px solid rgba(255,255,255,.12); border-radius:99px; background:rgba(4,9,8,.8); box-shadow:0 14px 45px rgba(0,0,0,.45); backdrop-filter:blur(18px); }
.sensory-dock button { display:flex; align-items:center; gap:7px; min-width:40px; height:40px; padding:0 12px; border:0; border-radius:99px; color:#cfddd8; background:transparent; cursor:pointer; }
.sensory-dock button[aria-pressed="true"] { color:#08110e; background:#83f3ca; }
.sensory-dock b { font-size:.7rem; letter-spacing:.05em; text-transform:uppercase; }
.sensory-dock [data-toggle-sound]::after { content:attr(data-state); margin-left:4px; font:800 .61rem/1 var(--sans,Arial); letter-spacing:.06em; }

.movie-art { --rx:0deg; --ry:0deg; --lift:0px; --depth:0px; --shine-x:50%; transform:perspective(900px) translate3d(0,var(--lift),var(--depth)) rotateX(var(--rx)) rotateY(var(--ry)); transition:transform .18s ease,box-shadow .28s ease; transform-style:preserve-3d; will-change:transform; }
.motion-hint { display:none; }
.movie-art::after { content:""; position:absolute; inset:0; z-index:4; opacity:0; pointer-events:none; background:radial-gradient(circle at var(--shine-x) 25%,rgba(255,255,255,.38),rgba(137,255,212,.08) 21%,transparent 47%); mix-blend-mode:screen; transition:opacity .25s; }
html.immersive-on .movie-art:hover::after,html.immersive-on .movie-art.tilt-active::after,html.immersive-on .movie-art.touch-tilt::after { opacity:.82; }
html.immersive-on .movie-art:hover,html.immersive-on .movie-art.tilt-active,html.immersive-on .movie-art.touch-tilt { box-shadow:0 30px 70px rgba(0,0,0,.62),0 0 0 2px rgba(121,245,200,.42),0 0 42px rgba(92,236,182,.2); }
html.immersive-on .movie-art .movie-poster { transform:translateZ(20px) scale(1.025); transition:transform .25s ease; }
html.immersive-on .movie-art.touch-tilt .movie-poster,html[data-motion="sensor"].immersive-on .movie-art.tilt-active .movie-poster { transform:translateZ(44px) scale(1.055); }
html.immersive-on .movie-art::after { opacity:.26; }

.director-tease { padding:26px 0 80px; background:#05080d; }
.director-tease-card { position:relative; display:flex; align-items:end; justify-content:space-between; gap:28px; overflow:hidden; padding:clamp(26px,5vw,58px); border:1px solid rgba(125,242,200,.22); background:radial-gradient(circle at 84% 30%,rgba(45,125,98,.3),transparent 34%),linear-gradient(135deg,#0b1714,#05080d); }
.director-tease-card::after { content:"CP"; position:absolute; right:4%; top:50%; transform:translateY(-50%); color:rgba(138,255,213,.035); font:800 clamp(7rem,19vw,16rem)/1 var(--display,Georgia); }
.director-tease-card h2 { position:relative; z-index:1; margin:8px 0 10px; color:#fff; font:500 clamp(2.3rem,5vw,4.9rem)/.92 var(--display,Georgia); letter-spacing:-.04em; }
.director-tease-card h2 em { color:#83f3ca; }
.director-tease-card p { position:relative; z-index:1; max-width:560px; margin:0; color:#a8b6b1; }
.director-open { position:relative; z-index:2; flex:none; }

.director { width:min(760px,calc(100% - 24px)); max-height:calc(100dvh - 24px); padding:0; border:1px solid rgba(133,246,205,.28); color:#fff; background:#07100e; box-shadow:0 40px 130px #000; }
.director::backdrop { background:rgba(0,0,0,.82); backdrop-filter:blur(10px); }
.director-shell { position:relative; padding:clamp(26px,6vw,60px); background:radial-gradient(circle at 100% 0,rgba(58,148,113,.22),transparent 36%); }
.director-close { position:absolute; right:14px; top:14px; width:42px; height:42px; border:1px solid rgba(255,255,255,.13); border-radius:50%; color:#fff; background:transparent; font-size:1.5rem; cursor:pointer; }
.director h2 { font-size:clamp(2.1rem,5vw,4.2rem); text-align:left; }
.director-progress { display:flex; gap:6px; margin:24px 0; }
.director-progress i { width:34px; height:3px; background:#26342f; transition:background .3s,width .3s; }
.director-progress i.active { width:62px; background:#83f3ca; }
.director-step { display:grid; gap:9px; padding:0; border:0; }
.director-step[hidden],.director-result[hidden] { display:none!important; }
.director-step legend { margin-bottom:15px; color:#dbe7e2; font:600 1.05rem/1.3 var(--sans,Arial); }
.director-step label { display:flex; align-items:center; gap:12px; min-height:52px; padding:11px 15px; border:1px solid #283832; color:#c7d4cf; cursor:pointer; transition:.2s; }
.director-step label:has(input:checked) { border-color:#83f3ca; color:#fff; background:rgba(104,233,185,.1); }
.director-step input { accent-color:#83f3ca; }
.director-next { width:100%; min-height:50px; margin-top:20px; border:0; color:#07110e; background:#83f3ca; font-weight:800; text-transform:uppercase; letter-spacing:.06em; cursor:pointer; }
.director-next:disabled { opacity:.3; cursor:not-allowed; }
.director-result > span { color:#83f3ca; font-size:.72rem; letter-spacing:.17em; }
.director-result > div { display:grid; grid-template-columns:150px 1fr; gap:22px; margin-top:14px; }
.director-result img { width:100%; aspect-ratio:2/3; object-fit:cover; }
.director-result h3 { margin:4px 0 8px; font:600 clamp(1.7rem,4vw,2.8rem)/1 var(--display,Georgia); }
.director-result p { color:#aebdb8; line-height:1.55; }
.director-result > button { margin-top:16px; padding:0; border:0; border-bottom:1px solid #73837e; color:#aebdb8; background:none; cursor:pointer; }

.digital-ticket { position:relative; min-height:230px; margin:26px 0 16px; transform-style:preserve-3d; transition:transform .75s cubic-bezier(.2,.8,.2,1); cursor:pointer; }
.ticket-modal { width:min(780px,100%); max-height:calc(100dvh - 28px); overflow:auto; }
.digital-ticket.flipped { transform:rotateY(180deg); }
.ticket-front,.ticket-back { position:absolute; inset:0; display:grid; overflow:hidden; backface-visibility:hidden; border:1px solid rgba(142,255,214,.35); background:#07130f; box-shadow:0 26px 70px rgba(0,0,0,.48); }
.ticket-front { grid-template-columns:32% 1fr 46px; }
.ticket-poster img { width:100%; height:100%; object-fit:cover; }
.ticket-data { display:flex; flex-direction:column; justify-content:center; padding:20px; text-align:left; }
.ticket-data > span,.ticket-data > small { color:#83f3ca; font-size:.62rem; letter-spacing:.14em; }
.ticket-data > strong { margin:9px 0 18px; font:600 clamp(1.25rem,3vw,2rem)/1 var(--display,Georgia); }
.ticket-data > div { display:flex; flex-wrap:wrap; gap:12px; margin-bottom:15px; }
.ticket-data b { font-size:.78rem; }
.ticket-code { display:flex; align-items:center; justify-content:center; gap:3px; border-left:1px dashed #60766e; }
.ticket-code i { width:2px; height:62%; background:#c8e7db; }
.ticket-code i:nth-child(2n) { height:43%; }
.ticket-code i:nth-child(3n) { width:4px; }
.ticket-back { place-items:center; transform:rotateY(180deg); background:radial-gradient(circle at 50% 30%,#194f3d,#07110e 68%); }
.ticket-back img { width:72px; }
.ticket-back strong { font:italic 2rem/1 var(--display,Georgia); }
.ticket-back small { color:#8da39b; }
.ticket-actions { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.ticket-actions button { width:auto; min-height:43px; margin-top:0; padding:0 15px; border:1px solid #43594f; border-radius:99px; color:#dce9e4; background:#0b1713; cursor:pointer; }
.ticket-actions small { color:#83f3ca; }
.ar-stage { position:relative; min-height:330px; margin:18px 0; overflow:hidden; background:#020403; }
.ar-stage video { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ar-ticket-copy { position:absolute; left:50%; top:50%; display:flex; flex-direction:column; justify-content:center; width:min(290px,70%); aspect-ratio:1.8; padding:20px; border:1px solid rgba(184,255,229,.7); color:#fff; background:linear-gradient(135deg,rgba(4,17,13,.88),rgba(16,72,52,.8)); box-shadow:0 18px 70px #000; transform:translate(-50%,-50%) perspective(600px) rotateX(8deg) rotateY(-10deg); touch-action:none; }
.ar-ticket-copy img { width:42px; margin-bottom:10px; }
.ar-ticket-copy b { font:600 1.15rem/1.05 var(--display,Georgia); }
.ar-ticket-copy span { margin-top:8px; font-size:.7rem; color:#b7d8cc; }
.ar-stage > p { position:absolute; left:12px; right:12px; bottom:10px; margin:0; padding:7px; color:white; background:rgba(0,0,0,.58); font-size:.7rem; }

html.immersive-on .doom-vignette { background:radial-gradient(circle at var(--cinema-x) 42%,transparent 0 13%,rgba(0,0,0,.18) 52%,rgba(0,0,0,.82) 100%); }
html.immersive-on .doom-shot img { transform:translate3d(var(--cinema-drift-a,0px),var(--cinema-lift,0px),0) scale(1.075); filter:saturate(1.12) contrast(1.08); }
html.immersive-on .shot-heroes img,html.immersive-on .hero-portrait img { transform:translate3d(var(--cinema-drift-b,0px),var(--cinema-lift-soft,0px),0) scale(1.085); }
html.immersive-on .doom-visuals { transform:translate3d(var(--phone-x,0px),var(--phone-y,0px),0) scale(1.015); filter:drop-shadow(0 0 var(--cinema-glow,11px) rgba(104,255,198,.18)); transition:transform .18s ease-out; will-change:transform; }
html.immersive-on .doom-stage::after { content:""; position:absolute; z-index:7; inset:10px; pointer-events:none; border:1px solid rgba(150,255,216,.18); box-shadow:inset 0 0 80px rgba(83,229,176,.09); animation:cinema-frame 3.6s ease-in-out infinite alternate; }
html.immersive-on .doom-visuals::after { content:""; position:absolute; z-index:6; inset:-20% -45%; pointer-events:none; background:linear-gradient(104deg,transparent 42%,rgba(167,255,223,.035) 47%,rgba(229,255,246,.16) 50%,rgba(167,255,223,.035) 53%,transparent 58%); transform:translateX(-38%); animation:cinema-scan 7s cubic-bezier(.45,0,.55,1) infinite; mix-blend-mode:screen; }
html.immersive-on .seat-grid { transform:perspective(760px) rotateX(11deg); transform-origin:center top; }
html.immersive-on .seat[aria-pressed="true"] { transform:translateZ(10px) scale(1.12); }
html.immersive-on .room-card { transform:perspective(900px) rotateY(-1deg); box-shadow:0 30px 70px rgba(0,0,0,.2); }
@keyframes cinema-frame { to { border-color:rgba(150,255,216,.52); box-shadow:inset 0 0 150px rgba(83,229,176,.2),0 0 34px rgba(83,229,176,.14); } }
@keyframes cinema-scan { 0%,12% { transform:translateX(-40%); opacity:0; } 28%,65% { opacity:1; } 86%,100% { transform:translateX(40%); opacity:0; } }

@media (max-width:700px) {
  .portal-card { padding:30px 18px; }
  .portal-card h2 { font-size:clamp(2rem,12vw,3.35rem); }
  .portal-actions { flex-direction:column; }
  .portal-actions button { width:100%; }
  .sensory-dock { right:10px; bottom:10px; }
  .sensory-dock > button:first-child b { display:none; }
  .sensory-dock [data-toggle-sound]::after { font-size:.57rem; }
  .cinema-toast { top:calc(76px + env(safe-area-inset-top)); font-size:.62rem; }
  .cinema-stinger strong { font-size:clamp(3rem,16vw,5.7rem); }
  .cinema-stinger span { font-size:.65rem; }
  .cinema-stinger small { max-width:270px; margin:auto; font-size:.58rem; }
  .movie-art { touch-action:pan-y; transition:transform .11s linear,box-shadow .2s ease; }
  .motion-hint { display:block; width:max-content; max-width:100%; margin:-7px 0 14px; padding:8px 11px; border:1px solid rgba(131,243,202,.28); border-radius:99px; color:#9ff5d5; background:rgba(69,181,140,.08); font:800 .61rem/1.2 var(--sans,Arial); letter-spacing:.06em; text-transform:uppercase; }
  .director-tease { padding:14px 0 44px; }
  .director-tease-card { align-items:stretch; flex-direction:column; }
  .director-open { width:100%; }
  .director-result > div { grid-template-columns:96px 1fr; gap:14px; }
  .ticket-front { grid-template-columns:27% 1fr 24px; }
  .ticket-data { padding:14px 10px; }
  .ticket-data > strong { margin-bottom:10px; }
  .ticket-data > div { gap:7px; }
  .digital-ticket { min-height:210px; }
  .ticket-modal { padding:25px 16px; }
}

@media (prefers-reduced-motion:reduce) {
  ::view-transition-old(root),::view-transition-new(root),.portal-beam,.cinema-stinger { animation:none!important; }
  html.immersive-on .doom-stage::after,html.immersive-on .doom-visuals::after { animation:none!important; }
  .movie-art,.digital-ticket { transition:none!important; transform:none!important; }
  body::after { display:none; }
  .film-signature-flash { display:none; }
}