.cinematic-opening{position:relative;height:460svh;background:#263832;color:#f6f4ee;z-index:60;overscroll-behavior:contain}
.cinematic-opening__frame{position:sticky;top:0;width:100%;height:100svh;overflow:hidden;background:#030504;isolation:isolate}
.cinematic-opening__video,.cinematic-opening__poster,.cinematic-opening__gradient,.cinematic-opening__veil{position:absolute;inset:0;width:100%;height:100%}
.cinematic-opening__poster{z-index:0;object-fit:cover;object-position:center;display:block}
.cinematic-opening__video{z-index:1;object-fit:cover;object-position:center;display:block;border:0;opacity:0;transition:opacity .22s ease}
.cinematic-opening.has-first-frame .cinematic-opening__video{opacity:1}
.cinematic-opening.has-first-frame .cinematic-opening__poster{visibility:hidden}
.cinematic-opening__gradient{z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.34) 0%,transparent 26%,transparent 62%,rgba(0,0,0,.42) 100%)}
.cinematic-opening__veil{z-index:2;pointer-events:none;background:#050705;opacity:0;will-change:opacity}
.cinematic-opening__scene{--scene-opacity:0;--scene-y:0px;position:absolute;z-index:3;pointer-events:none;opacity:var(--scene-opacity);transform:translate3d(0,var(--scene-y),0);will-change:opacity,transform}
.cinematic-opening__scene--clouds{--title-track:.5em;--title-blur:12px;--sub-opacity:0;left:0;right:0;top:50%;text-align:center}
.cinematic-opening__cloud-title{font:200 clamp(38px,5.6vw,96px)/1 var(--sans);color:#f6f4ee;letter-spacing:var(--title-track);text-indent:var(--title-track);filter:blur(var(--title-blur));white-space:nowrap}
.cinematic-opening__cloud-sub{margin-top:34px;font:400 clamp(11px,.95vw,15px)/1.4 var(--sans);letter-spacing:.62em;text-indent:.62em;color:rgba(246,244,238,.68);opacity:var(--sub-opacity)}
.cinematic-opening__scene--city{left:0;right:0;top:52%;display:flex;justify-content:center;gap:clamp(24px,3.4vw,62px)}
.cinematic-opening__scene--city span{font:300 clamp(20px,2.2vw,40px)/1.2 var(--sans);letter-spacing:.3em;text-indent:.3em;color:#f6f4ee;white-space:nowrap;will-change:opacity,transform}
.cinematic-opening__scene--fact{--rule-width:0;left:clamp(28px,5vw,96px);bottom:clamp(64px,9vh,132px);max-width:min(880px,82vw)}
.cinematic-opening__rule{width:var(--rule-width);height:1px;margin-bottom:26px;background:rgba(246,244,238,.55)}
.cinematic-opening__fact-title{font:200 clamp(30px,3.6vw,62px)/1.12 var(--sans);color:#f6f4ee;letter-spacing:.12em;text-wrap:balance}
.cinematic-opening__fact-sub{margin-top:18px;font:400 clamp(10px,.85vw,14px)/1.7 var(--sans);letter-spacing:.44em;color:rgba(246,244,238,.62);text-wrap:balance}
.cinematic-opening__scene--lobby{left:0;right:0;top:50%;text-align:center;transform:translate3d(0,calc(-52% + var(--scene-y)),0)}
.cinematic-opening__welcome{font:400 clamp(10px,.85vw,14px)/1.5 var(--sans);letter-spacing:.56em;text-indent:.56em;color:rgba(246,244,238,.7)}
.cinematic-opening__leaf{height:clamp(46px,5vh,76px);width:auto;margin:34px auto 26px;filter:brightness(0) invert(1)}
.cinematic-opening__final-title{font:200 clamp(40px,6.4vw,118px)/1 var(--sans);color:#f6f4ee;white-space:nowrap;transform-origin:center}
.cinematic-opening__foot{margin-top:40px;font:400 clamp(10px,.8vw,13px)/1.5 var(--sans);letter-spacing:.4em;color:rgba(246,244,238,.5)}
.cinematic-opening__hint{position:absolute;z-index:4;left:0;right:0;bottom:max(42px,env(safe-area-inset-bottom));text-align:center;pointer-events:none;font:400 11px/1 var(--sans);letter-spacing:.5em;text-indent:.5em;color:rgba(246,244,238,.55)}
.cinematic-opening__hint::after{content:"";display:block;width:1px;height:24px;margin:15px auto 0;background:currentColor;transform-origin:top;animation:cinematic-pulse 1.8s ease-in-out infinite}
.cinematic-opening__skip{position:absolute;z-index:6;right:max(24px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));min-height:38px;padding:0 15px;border:1px solid rgba(246,244,238,.3);background:rgba(5,7,5,.18);backdrop-filter:blur(8px);color:rgba(246,244,238,.82);font:500 9px/1 var(--sans);letter-spacing:.15em;text-transform:uppercase;cursor:pointer;transition:background .2s,border-color .2s,opacity .25s}.cinematic-opening__skip:hover{background:rgba(246,244,238,.12);border-color:rgba(246,244,238,.55)}.cinematic-opening.is-passed .cinematic-opening__skip{opacity:0;pointer-events:none}
.cinematic-opening__progress{position:absolute;z-index:4;left:0;right:0;bottom:0;height:1px;background:rgba(246,244,238,.12);pointer-events:none}
.cinematic-opening__progress-line{display:block;width:100%;height:1px;background:rgba(246,244,238,.7);transform:scaleX(0);transform-origin:left center;will-change:transform}
.cinematic-opening__buffer{position:absolute;z-index:4;right:max(18px,env(safe-area-inset-right));bottom:max(22px,env(safe-area-inset-bottom));width:4px;height:4px;border-radius:50%;background:rgba(246,244,238,.8);opacity:0;transform:scale(.5);transition:opacity .3s,transform .3s;pointer-events:none}
.cinematic-opening.is-buffering .cinematic-opening__buffer{opacity:.65;transform:scale(1);animation:cinematic-buffer 1.2s ease-in-out infinite}
body.cinematic-active .site-header,body.cinematic-active .concept-switcher{opacity:0;visibility:hidden;pointer-events:none}
body.cinematic-passed .site-header,body.cinematic-passed .concept-switcher{opacity:1;visibility:visible;pointer-events:auto}
body.cinematic-passed .site-header{transform:none}
.site-header,.concept-switcher{transition-property:transform,opacity,visibility,background-color,box-shadow,backdrop-filter;transition-duration:.42s,.35s,.35s,.3s,.3s,.3s}
@keyframes cinematic-pulse{0%,100%{transform:scaleY(.35);opacity:.35}50%{transform:scaleY(1);opacity:1}}
@keyframes cinematic-buffer{0%,100%{opacity:.25;box-shadow:0 0 0 0 rgba(246,244,238,.22)}50%{opacity:.8;box-shadow:0 0 0 5px rgba(246,244,238,0)}}
@media(max-width:900px){
  .cinematic-opening{height:400svh}
  .cinematic-opening__video,.cinematic-opening__poster{object-position:52% center}
  .cinematic-opening__scene--clouds{top:48%;padding:0 18px}
  .cinematic-opening__cloud-title{font-size:clamp(34px,11vw,54px)}
  .cinematic-opening__cloud-sub{margin-top:24px;font-size:9px;letter-spacing:.44em;text-indent:.44em}
  .cinematic-opening__scene--city{top:50%;padding:0 18px;gap:10px;flex-wrap:wrap}
  .cinematic-opening__scene--city span{font-size:clamp(16px,5vw,23px);letter-spacing:.15em;text-indent:.15em}
  .cinematic-opening__scene--fact{left:18px;right:18px;bottom:max(74px,calc(env(safe-area-inset-bottom) + 50px));max-width:none}
  .cinematic-opening__rule{margin-bottom:18px}
  .cinematic-opening__fact-title{font-size:clamp(27px,8.6vw,42px);letter-spacing:.07em;line-height:1.15}
  .cinematic-opening__fact-sub{max-width:340px;margin-top:14px;font-size:9px;letter-spacing:.23em;line-height:1.7}
  .cinematic-opening__scene--lobby{padding:0 16px}
  .cinematic-opening__welcome{font-size:9px;letter-spacing:.32em;text-indent:.32em}
  .cinematic-opening__leaf{height:44px;margin:26px auto 20px}
  .cinematic-opening__final-title{font-size:clamp(36px,11vw,56px)}
  .cinematic-opening__foot{margin-top:28px;font-size:8px;letter-spacing:.25em}
  .cinematic-opening__hint{font-size:9px;letter-spacing:.38em;text-indent:.38em}
  .cinematic-opening__skip{top:max(16px,env(safe-area-inset-top));right:max(14px,env(safe-area-inset-right));min-height:36px;padding:0 12px;font-size:8px;letter-spacing:.12em}
}
@media(prefers-reduced-motion:reduce){
  .cinematic-opening{height:105svh}
  .cinematic-opening__frame{position:relative}
  .cinematic-opening__scene{display:none}
  .cinematic-opening__scene--clouds{display:block!important;opacity:1!important;transform:translateY(-50%)!important;--title-track:.18em!important;--title-blur:0px!important;--sub-opacity:1!important}
  .cinematic-opening__poster{z-index:0}
  .cinematic-opening__hint::after{animation:none}
}