/* The video and its exact final still share a single, fixed composition. */
html{scrollbar-gutter:stable}
.hero{height:100svh;min-height:620px;background:#09100f;isolation:isolate}
.hero-art{inset:0;background:#09100f}
.hero-art picture{display:block;width:100%;height:100%}
.hero-art img,.hero-art #entry-video{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%;filter:none;transform:none}
.hero-art #entry-video{opacity:0;pointer-events:none;transition:opacity .3s ease;z-index:1}
.hero-art:after{z-index:2;background:linear-gradient(90deg,rgba(3,11,12,.88) 0%,rgba(3,11,12,.58) 26%,rgba(3,11,12,.10) 59%,transparent 78%),linear-gradient(0deg,#030b0c 0%,rgba(3,11,12,.12) 23%,transparent 48%);transition:opacity .85s ease}
.hero-copy{padding:0;position:absolute;left:clamp(24px,4.4vw,84px);bottom:clamp(132px,20svh,215px);max-width:620px;transition:opacity .9s ease,transform .9s cubic-bezier(.22,1,.36,1)}
.hero-copy h1{font-size:clamp(44px,4.35vw,80px);line-height:1.03;max-width:none;text-shadow:0 2px 25px #0008}
.hero-copy .underlink{font-size:13px;margin-top:27px}
.hero-note{left:clamp(24px,4.4vw,84px);bottom:42px;line-height:1.6;color:#d1e0dc;font-size:12px;transition:opacity .9s ease}
.hero-replay{position:absolute;z-index:3;right:clamp(24px,4.4vw,84px);bottom:36px;min-height:44px;font-size:12px;color:#d1e0dc;display:flex;align-items:center;gap:20px;transition:opacity .9s ease}
.hero-replay:hover{color:#90e8cf}
.header{transition:opacity .75s ease;background:linear-gradient(#030b0ca6,transparent)}
.entry-controls[hidden]{display:none}
.entry-controls{position:fixed;inset:0;z-index:90;pointer-events:none;background:linear-gradient(0deg,#030b0c66,transparent 16%)}
.entry-label{position:absolute;left:clamp(24px,4.4vw,84px);bottom:38px;font:11px/1.6 monospace;letter-spacing:.08em;color:#e3f7ed;text-shadow:0 1px 10px #000}
.entry-label span{margin:0 14px;color:#90e8cf}
.entry-skip{position:absolute;right:clamp(24px,4.4vw,84px);bottom:26px;min-height:48px;padding:12px 0 12px 20px;pointer-events:auto;font-size:12px;display:flex;align-items:center;gap:28px;color:#ecf7f0;text-shadow:0 1px 10px #000}
.entry-skip:hover{color:#90e8cf}
.entry-progress{position:absolute;bottom:0;left:0;right:0;height:2px;background:#caffea21}
.entry-progress>span{display:block;width:100%;height:100%;background:#8fe8cc;transform:scaleX(0);transform-origin:left;box-shadow:0 0 8px #8fe8cc77}
body.cinematic-playing{overflow:hidden}
.cinematic-playing .header,.cinematic-playing .hero-copy,.cinematic-playing .hero-note,.cinematic-playing .hero-replay{opacity:0;pointer-events:none}
.cinematic-playing .hero-copy{transform:translateY(14px)}
.cinematic-playing .hero-art:after{opacity:0}
.cinematic-playing .hero-art #entry-video{opacity:1;transition:none}
@media(min-width:1800px){.hero{min-height:620px}}
@media(max-width:700px){
  .hero{height:100svh;min-height:620px}
  .hero-art img,.hero-art #entry-video{object-fit:cover;object-position:61% 50%;filter:none}
  .hero-art:after{background:linear-gradient(0deg,#030b0c 0%,rgba(3,11,12,.76) 18%,rgba(3,11,12,.12) 62%,rgba(3,11,12,.20) 100%)}
  .hero-copy{left:22px;right:20px;bottom:142px;max-width:450px;padding:0}
  .hero-copy h1{font-size:clamp(36px,9.2vw,60px);max-width:none}
  .hero-note{left:22px;bottom:30px;font-size:11px}
  .hero-replay{right:22px;bottom:80px;font-size:11px}
  .hero-copy .underlink{margin-top:22px}
  .entry-label{left:22px;bottom:92px;font-size:10px;max-width:250px}
  .entry-skip{right:22px;bottom:28px}
}
@media(prefers-reduced-motion:reduce){.hero-art #entry-video,.hero-copy,.hero-note,.header,.hero-art:after{transition:none}}