#film-experiment{position:fixed;inset:0;z-index:1;overflow:hidden;pointer-events:none;background:#100e0b url('/video/sunset-film-poster.jpg') center/cover no-repeat}
#film-experiment video{width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .7s;will-change:transform;filter:brightness(1.06)}
#film-experiment.video-ready video{opacity:1}
.film-shade{position:absolute;inset:0;background:linear-gradient(90deg,#02080f80,transparent 68%),linear-gradient(0deg,#02080f44,transparent 22%);pointer-events:none}
#film-waterline{position:fixed;inset:0;z-index:2;pointer-events:none;filter:blur(1.5px) drop-shadow(0 6px 7px #3293a288)}#film-waterline svg{width:100%;height:100%;display:block}
.film-compare{position:fixed;bottom:108px;right:4vw;z-index:12;display:none;align-items:center;gap:15px;font-size:10px;color:#eee4d4ad}.film-compare.film-active{display:flex}.film-compare a{color:#eee4d4;text-decoration:none;border-bottom:1px solid #eee4d444;padding-bottom:3px}
html[data-scene-theme=sunset] body.film-experiment .vampire-ocean{display:none!important}
html[data-scene-theme=sunset] body.film-experiment .large-en{opacity:.035}
@media(max-width:760px){.film-compare{bottom:18px;right:7vw;left:7vw;justify-content:flex-end;gap:12px;font-size:8px}.film-compare span{display:none}body.film-experiment .bottom-caption{bottom:42px}body.film-experiment .depth-meter{bottom:65px}body.film-experiment header .edition{display:none}}
@media(prefers-reduced-motion:reduce){#film-experiment video{display:none}}

/* The film and the underwater scene now share a refracting WebGL interface. DOM film remains the fallback. */
html.film-bridge-ready #film-experiment,html.film-bridge-ready #film-waterline{visibility:hidden}
@keyframes scene-entry-copy{from{opacity:0;transform:translate3d(0,22px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes scene-entry-light{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:no-preference){.scene-arriving #surface>h1,.scene-arriving #surface>p,.scene-arriving #surface>.eyebrow,.scene-arriving #surface>.dive{animation:scene-entry-copy 1.5s cubic-bezier(.22,.61,.36,1) both}.scene-arriving #surface>p{animation-delay:.18s}.scene-arriving #surface>.dive{animation-delay:.30s}.scene-arriving #night-lens{animation:scene-entry-light 1.8s ease-out both}}