/* The opening occupies the browser viewport; it never requests system fullscreen. */
html[data-experience=pending] body { background: #000; }
html[data-experience=pending] #website { visibility: hidden; }
html[data-experience]:not([data-experience=complete]) body { overflow: hidden; }
html[data-experience=opening] #website,
html[data-experience=invitation] #website,
html[data-experience=entering] #website,
html[data-experience=blackout] #website,
html[data-experience=countdown] #website,
html[data-experience=screening] #website,
html[data-experience=lighting] #website { visibility: hidden; }
.experience { --hole-pixels: 128; position: fixed; inset: 0; z-index: 50; overflow: hidden; background: #000; isolation: isolate; user-select: none; -webkit-user-select: none; }
.experience-aperture { position: absolute; inset: 0; display: grid; place-items: center; clip-path: circle(0 at 50% 50%); will-change: clip-path; }
.experience-theater-slot { width: min(100vw, calc(100dvh * 16 / 11)); opacity: 0; }
html[data-experience=countdown] .experience-theater-slot,
html[data-experience=screening] .experience-theater-slot,
html[data-experience=lighting] .experience-theater-slot { opacity: 1; }
.peephole-light { position: absolute; inset: 0; z-index: 3; pointer-events: none; background: #000; }
.peephole-light::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 48% 46%, #e4e3dd, #bebeba 65%, #969792); animation: projector-flicker 3.6s ease-in-out infinite; }
.peephole-light::after { content: ''; position: absolute; inset: -12%; opacity: 0; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='grain'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23grain)'/%3E%3C/svg%3E"); background-size: 110px; filter: grayscale(1) contrast(3.5); animation: projector-static 4.8s steps(1) infinite, static-drift .13s steps(2) infinite; }
.experience .theater { border-radius: 0; }
.experience-invitation { position: absolute; left: 50%; top: 50%; width: calc(var(--hole-pixels) * 1px + 112px); aspect-ratio: 1; padding: 0; margin: 0; border-radius: 50%; transform: translate(-50%, -50%) scale(var(--invite-scale, 1)); color: #e3ded2; }
.experience-invitation svg { width: 100%; height: 100%; overflow: visible; fill: currentColor; stroke: none; animation: invitation-orbit 120s linear infinite; pointer-events: none; }
.experience-invitation text { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; font-size: 30px; font-weight: 400; letter-spacing: 2.6px; }
.experience button:focus-visible { outline: none; }
.experience[data-keyboard=true] button:focus-visible { outline: 1px solid #e3ded2; outline-offset: 6px; }
#now-title:focus { outline: none; }
.invitation-text { opacity: 0; transition: opacity 1.1s; }
html[data-experience=opening] .invitation-text { animation: invitation-arrive 1.2s 1.1s both; }
html[data-experience=invitation] .invitation-text { opacity: 1; }
html[data-experience=entering] .experience-invitation { opacity: 0; transition: opacity .4s; pointer-events: none; }
.intro-countdown { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.intro-theater .screen { box-shadow: none; }
.intro-theater #cinema-video { opacity: 0; }
html[data-experience=screening] .intro-theater #cinema-video { opacity: 1; }
.experience-skip { position: absolute; right: max(24px, env(safe-area-inset-right)); bottom: max(24px, env(safe-area-inset-bottom)); min-height: 44px; padding: 0 18px; border-radius: 100px; border: 1px solid #ffffff16; background: #18181870; backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); color: #ffffffa8; font-size: 12px; font-weight: 450; animation: invitation-arrive 1s .45s both; }
.experience-skip:hover, .experience-skip:focus-visible { background: #2c2c2cba; color: #fff; }
.experience-playback { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; padding: 0; cursor: pointer; }
.intro-paused { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 70px; height: 70px; display: grid; place-items: center; border: 1px solid #ffffff20; border-radius: 50%; background: #17171785; backdrop-filter: blur(12px); color: #fff; pointer-events: none; }
.intro-paused svg { width: 30px; height: 30px; }
.experience-mute { position: absolute; left: max(24px, env(safe-area-inset-left)); bottom: max(24px, env(safe-area-inset-bottom)); width: 44px; height: 44px; border: 1px solid #ffffff16; background: #18181870; color: #ffffffb0; backdrop-filter: blur(16px); }
.experience-skip, .experience-mute, .experience-resume { z-index: 6; }
.experience-message { z-index: 5; pointer-events: none; }
.experience-resume { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 14px 22px; border-radius: 100px; background: #171717b8; color: #f5f5f7; backdrop-filter: blur(16px); }
.experience-message { position: absolute; bottom: 88px; width: calc(100% - 48px); left: 24px; text-align: center; font-size: 13px; color: #aeaeb2; line-height: 1.5; }
.experience-message:empty { display: none; }
.site-footer #restart-experience { padding: 0; color: var(--accent); font-size: inherit; white-space: nowrap; }
.site-footer #restart-experience:hover { color: var(--accent-hover); }
html[data-experience=revealing] .site-header,
html[data-experience=revealing] .transport,
html[data-experience=revealing] .now-playing,
html[data-experience=revealing] .watch-context,
html[data-experience=revealing] .video-info,
html[data-experience=revealing] .library-panel,
html[data-experience=revealing] .remote-dock,
html[data-experience=revealing] .site-footer { animation: website-arrive .65s both; }
html[data-experience=revealing] .site-header { animation-delay: .1s; }
html[data-experience=revealing] .transport { animation-delay: .22s; }
html[data-experience=revealing] .now-playing,
html[data-experience=revealing] .watch-context { animation-delay: .32s; }
html[data-experience=revealing] .video-info { animation-delay: .45s; }
html[data-experience=revealing] .library-panel { animation-delay: .55s; }
html[data-experience=revealing] .remote-dock,
html[data-experience=revealing] .site-footer { animation-delay: .65s; }
@keyframes invitation-orbit { to { transform: rotate(360deg); } }
@keyframes projector-flicker { 0%, 100% { opacity: .7; } 12% { opacity: .95; } 26% { opacity: .38; } 42% { opacity: .78; } 57% { opacity: .48; } 73% { opacity: 1; } 88% { opacity: .55; } }
@keyframes projector-static { 0%, 70%, 83%, 100% { opacity: 0; } 71% { opacity: .72; } 76% { opacity: .45; } 80% { opacity: .8; } }
@keyframes static-drift { 0%, 100% { transform: translate(0, 0); } 33% { transform: translate(-4%, 3%); } 66% { transform: translate(5%, -4%); } }
@keyframes invitation-arrive { from { opacity: 0; } to { opacity: 1; } }
@keyframes website-arrive { from { opacity: 0; translate: 0 12px; } to { opacity: 1; translate: 0 0; } }
@media (prefers-reduced-motion: reduce) {
  .experience *, .experience *::before, .experience *::after,
  html[data-experience=revealing] #website * { animation: none !important; transition: none !important; }
  html[data-experience=opening] .invitation-text { opacity: 1; }
}