/* =========================================================
   index-video.html — hero with a slow live-performance loop.
   Desktop: sharp vertical film on the right, fading into sumi,
   over a soft blurred enlarged copy. Mobile: full-bleed vertical.
   ========================================================= */
.hero--video{background:#0A0908}
.hero__vbg{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.hero__vblur{position:absolute;right:-6%;top:50%;width:78%;height:auto;aspect-ratio:9/16;transform:translateY(-50%) scale(1.15);object-fit:cover;filter:blur(46px) saturate(1.05) brightness(.55);opacity:.55;
  -webkit-mask-image:radial-gradient(60% 50% at 60% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(60% 50% at 60% 50%,#000 30%,transparent 80%)}
.hero__film{position:absolute;z-index:1;top:0;bottom:0;right:7%;margin:0;height:100%;aspect-ratio:9/16}
.hero__video{display:block;width:100%;height:100%;object-fit:cover;background:#0A0908;
  filter:contrast(1.02) brightness(.95);
  -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 80%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 22%,#000 88%,transparent 100%);-webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0%,#000 26%,#000 80%,transparent 100%),linear-gradient(0deg,transparent 0%,#000 22%,#000 88%,transparent 100%);mask-composite:intersect;
  animation:vemerge 4.2s var(--slow) both .3s}
@keyframes vemerge{from{filter:brightness(0) blur(10px);transform:scale(1.06)}to{filter:contrast(1.02) brightness(.95) blur(0);transform:none}}
.hero__filmcap{position:absolute;left:26%;bottom:clamp(80px,12vh,130px);font-weight:500;font-size:.58rem;letter-spacing:.28em;text-transform:uppercase;color:var(--grey-l);display:flex;gap:12px;align-items:center;animation:fade 2s var(--ease) both 3s}
.hero__filmcap span{font-family:var(--f-jp);color:var(--shu);letter-spacing:.3em;font-size:.8rem}
/* veil: keeps the left text column in sumi and softens the film into the page */
.hero--video::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(10,9,8,.92) 0%,rgba(10,9,8,.6) 34%,rgba(10,9,8,0) 58%),linear-gradient(0deg,rgba(10,9,8,.9),transparent 28%),radial-gradient(120% 90% at 70% 50%,transparent 55%,rgba(10,9,8,.6))}
.hero--video .mist--hero{z-index:2;opacity:.8}
.hero--video .hero__moon{z-index:2;right:calc(7% + min(56.25vh,40vw)*.5 - min(23vh,15vw));top:14%}
.hero--video .hero__kanji{left:38%}
.hero--video .hero__seal{bottom:auto;top:130px}
/* video failed / not yet playing: poster still shows; .is-playing just fades in the blur copy */
.hero__vblur{transition:opacity 2.4s var(--ease)}
.hero--video:not(.is-playing) .hero__vblur{opacity:.35}

@media (max-width:1080px){
  .hero__film{right:0}
  .hero--video .hero__kanji{left:30%}
}
@media (max-width:820px){
  .hero__vbg{display:none}
  .hero__film{inset:0;right:0;width:100%;aspect-ratio:auto}
  .hero__video{object-position:50% 30%;
    -webkit-mask-image:linear-gradient(0deg,transparent 4%,#000 50%);mask-image:linear-gradient(0deg,transparent 4%,#000 50%);-webkit-mask-composite:source-over;mask-composite:add}
  .hero--video::after{background:linear-gradient(0deg,rgba(10,9,8,.96) 0%,rgba(10,9,8,.82) 30%,rgba(10,9,8,.2) 60%,rgba(10,9,8,.45) 100%)}
  .hero__filmcap{left:20px;bottom:auto;top:96px}
  .hero--video .hero__moon{right:-30vw;top:12%}
  .hero--video .hero__kanji{left:auto}
  .hero--video .hero__seal{top:132px}
}
@media (max-width:640px){
  .hero__filmcap{top:auto;bottom:calc(74px + 330px)}
}
@media (prefers-reduced-motion:reduce){
  .hero__video{animation:none}
  .hero__vblur{display:none}
}
/* the rope is in the footage itself — drop the drawn brush line here */
.hero--video .hero__rope{display:none}
/* emerge only once the visitor is past the age gate */
html:not(.age-ok) .hero__video{animation:none;filter:brightness(0)}
@media (max-width:640px){ .hero__filmcap{display:none} }