/*
 MIRA Motion Director / Personal -> Brand overlap
 Wide irregular feathered ink-light ribbon travels from bottom to top.
 An isolated overlay composites two full-viewport stills from the exact
 verified end frame and the next scene's start frame; NO 1px DOM seam.
*/
.mira-band-bridge {
  position:fixed; inset:0; z-index:38;
  pointer-events:none; user-select:none;
  visibility:hidden; opacity:0;
  overflow:hidden; isolation:isolate;
  background:#101612;
  transition:none;
}
.mira-band-bridge.mira-band-active {visibility:visible; opacity:1;}
.mira-band-bridge canvas,
.mira-band-bridge .mira-band-fallback {
  position:absolute; inset:0; width:100%; height:100%;
  display:block; pointer-events:none;
}
.mira-band-bridge canvas { z-index:2; opacity:0; }
.mira-band-bridge[data-renderer="webgl"] canvas {opacity:1;}
.mira-band-fallback {z-index:0;}
.mira-band-fallback img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:center; display:block;
}
.mira-band-next {
  -webkit-mask-image:linear-gradient(to bottom,transparent 120%,black 155%);
  mask-image:linear-gradient(to bottom,transparent 120%,black 155%);
  -webkit-mask-repeat:no-repeat; mask-repeat:no-repeat;
}
.mira-band-bridge[data-renderer="webgl"] .mira-band-fallback {visibility:hidden;}
.mira-band-glint {
 position:absolute;inset:0;z-index:3;
 pointer-events:none;opacity:var(--mira-edge-opacity,0);
 background:
 radial-gradient(ellipse 62% 21% at 56% var(--mira-ink-y,52%),rgba(238,188,119,.10),rgba(57,67,52,.035) 48%,transparent 85%);
 mix-blend-mode:screen;
}
/* Navigation remains above the effect; cinematic copy exits before the band. */
.site-header {z-index:61;}
/* Band-safe typography transitions use existing --type- vars, not replacements. */
.chapter-scroll-track .cinematic-copy {will-change:opacity;}
@media (prefers-reduced-motion: reduce) {
 .mira-band-bridge{display:none!important;}
 .chapter-scroll-track .cinematic-copy{opacity:1!important;}
}

/* V2: broad ascending soft light band; no visible 1px divide or opaque edge. */
.mira-band-glint {
  background:
  radial-gradient(ellipse 70% 31% at 53% var(--mira-ink-y,50%),
    rgba(233,188,130,.095),rgba(126,122,100,.05) 40%,
    rgba(30,40,34,.018) 74%,transparent 100%);
  filter:blur(5px);
}