/* assets/css/hero-cinematic.css — v5 (High-Cinematic)
   - Scroll-triggered in both directions (hero↔body)
   - Movie-trailer style: deeper depth, true bars, visible bloom flash both ways
   - GPU-optimized; safe with parallax; no layout thrash
*/
:root{
  --heroProgress: 0;
  --cineBars: 0;
  --cineBloom: 0;
  --cineBeamBoost: 0;
  --cineVeil: 0;
  --cineAurora: 0;
  --cinePulse: 0;
  --fxVignetteMax: 0.7;
  --barH: clamp(70px, 14vh, 160px);
}

.hero.title-band{
  position: relative;
  isolation: isolate;
  perspective: 1200px;
  transform-style: preserve-3d;
  --heroDepth: 0;
}

/* Hero vignette overlay */
.hero.title-band .fx-layer{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(180deg,
      rgba(0,0,0,0.0) 0%,
      rgba(5,10,20,0.25) 50%,
      rgba(0,0,0,0.6) 100%),
    radial-gradient(130% 110% at 50% 50%,
      rgba(0,0,0,0.0) 0%,
      rgba(0,0,0,0.15) 40%,
      rgba(0,0,0,0.8) 100%);
  opacity: calc(var(--heroProgress) * var(--fxVignetteMax));
  will-change: opacity;
}

/* Bloom flash */
.hero.title-band .fx-bloom{
  position: absolute;
  inset: -10%;
  pointer-events: none;
  z-index: 2;
  background: radial-gradient(circle at 50% 50%,
              rgba(255,255,255,0.9) 0%,
              rgba(255,255,255,0.5) 30%,
              rgba(255,255,255,0.0) 70%);
  opacity: calc(var(--cineBloom) * (0.45 + var(--cineBeamBoost) * 0.55));
  transform: scale(calc(1 + var(--cineBloom) * (0.25 + var(--cineBeamBoost) * 0.2)));
  filter:
    blur(calc(var(--cineBloom) * 2.5px))
    brightness(calc(1 + var(--cineBeamBoost) * 0.75));
  mix-blend-mode: screen;
  will-change: opacity, transform, filter;
}

.hero.title-band .fx-aurora{
  position: absolute;
  inset: -22% -28% -14%;
  pointer-events: none;
  z-index: 2;
  background:
    radial-gradient(140% 110% at 50% 0%,
      rgba(12,221,255,0.0) 0%,
      rgba(12,221,255,0.12) 38%,
      rgba(12,221,255,0.0) 72%),
    linear-gradient(160deg,
      rgba(0,0,0,0) 0%,
      rgba(34,215,182,0.28) 45%,
      rgba(255,255,255,0.38) 58%,
      rgba(0,0,0,0) 90%);
  opacity: calc(var(--cineAurora) * 0.85);
  transform:
    translate3d(0, calc((1 - var(--cineAurora)) * 12vh), 0)
    scaleY(calc(1 + var(--cineAurora) * 0.35));
  filter: blur(calc(18px * (0.4 + var(--cineAurora) * 0.6)));
  mix-blend-mode: screen;
  will-change: opacity, transform, filter;
}

.hero.title-band .fx-aurora::after{
  content: "";
  position: absolute;
  inset: -18% -16%;
  background: linear-gradient(120deg,
      rgba(255,255,255,0.0) 10%,
      rgba(204,255,244,0.75) 45%,
      rgba(255,255,255,0.0) 90%);
  opacity: calc(var(--cinePulse) * 0.6 + var(--cineAurora) * 0.35);
  transform:
    translate3d(0, calc((0.5 - var(--cinePulse)) * 8vh), 0)
    scaleX(calc(1 + var(--cinePulse) * 0.25));
  filter: blur(calc(20px * (0.5 + var(--cinePulse) * 0.5)));
}

/* Hero content cinematic motion */
.hero.title-band .content{
  position: relative;
  z-index: 3;
  transform:
    translate3d(0, calc(var(--heroDepth) * -18vh), 0)
    scale(calc(1 - var(--heroDepth) * 0.18))
    rotateX(calc(var(--heroDepth) * 3deg));
  opacity: calc(1 - var(--heroProgress) * 0.08);
  filter:
    saturate(calc(1 + var(--heroDepth) * 0.3))
    contrast(calc(1 + var(--heroDepth) * 0.14));
  transition: transform 0.001s linear, opacity 0.001s linear, filter 0.001s linear;
  will-change: transform, opacity, filter;
}

.hero.title-band .content h1,
.hero.title-band .content h2{
  text-shadow: 0 18px 40px rgba(0,0,0, calc(0.55 * var(--heroProgress)));
}

/* Cinematic bars */
.fx-bars{
  position: fixed;
  left: 0; right: 0; top: 0; bottom: 0;
  pointer-events: none;
  z-index: 900;
}
.fx-bars .bar{
  position: absolute;
  left: 0; right: 0;
  background: #000;
  opacity: calc(var(--cineBars) * 0.95);
  transition: opacity 0.2s linear;
}
.fx-bars .bar.top{ top: 0; height: calc(var(--cineBars) * var(--barH)); }
.fx-bars .bar.bottom{ bottom: 0; height: calc(var(--cineBars) * var(--barH)); }

/* Flare line */
.fx-bars .flare{
  position: absolute;
  left: 10%; right: 10%;
  top: 50%;
  height: 3px;
  background: linear-gradient(90deg,
      rgba(255,255,255,0) 0%,
      rgba(255,255,255,0.8) 50%,
      rgba(255,255,255,0) 100%);
  opacity: calc(var(--cineBloom) * (0.6 + var(--cineBeamBoost) * 0.4));
  filter:
    blur(calc(var(--cineBloom) * 2px))
    brightness(calc(1 + var(--cineBeamBoost) * 0.6));
  transform: scaleX(calc(1 + var(--cineBars) * 0.8 + var(--cineBeamBoost) * 0.4));
  will-change: opacity, transform, filter;
}

/* Veil over body */
.fx-veil{
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
      rgba(0,5,12,0.92) 0%,
      rgba(0,8,18,0.78) 42%,
      rgba(0,0,0,0.32) 100%);
  opacity: calc(var(--cineVeil) * 0.8 + var(--cinePulse) * 0.45);
  transform: translateY(calc((1 - var(--cineVeil)) * 12px));
  pointer-events: none;
  will-change: opacity, transform;
}

.fx-veil::before{
  content: "";
  position: absolute;
  inset: -12% -6% -18%;
  background: radial-gradient(130% 100% at 50% -10%,
      rgba(18,255,214,0.0) 0%,
      rgba(18,255,214,0.22) 48%,
      rgba(4,20,28,0.85) 100%);
  opacity: calc(var(--cineAurora) * 0.65 + var(--cineVeil) * 0.4);
  transform: translate3d(0, calc((1 - var(--cinePulse)) * 26px), 0);
  filter: blur(calc(12px * (0.3 + var(--cineAurora) * 0.7)));
  mix-blend-mode: screen;
  pointer-events: none;
}

.fx-veil::after{
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(8,40,56,0.0) 0%,
      rgba(18,255,214,0.55) 54%,
      rgba(8,40,56,0.0) 100%),
    repeating-linear-gradient(90deg,
      rgba(12,255,219,0.0) 0px,
      rgba(12,255,219,0.18) 2px,
      rgba(12,255,219,0.0) 6px);
  opacity: calc(var(--cinePulse) * 0.75);
  mix-blend-mode: screen;
  transform:
    translate3d(0, calc((1 - var(--cinePulse)) * 40px), 0)
    scaleY(calc(1 + var(--cinePulse) * 0.35));
  filter: blur(calc(var(--cinePulse) * 3px));
  pointer-events: none;
}

/* Scroll lock */
html.cine-locked, body.cine-locked{
  overscroll-behavior: contain;
  touch-action: none;
}

@media (prefers-reduced-motion: reduce){
  .hero.title-band .content{ transform: none; opacity: 1; filter: none; }
  .hero.title-band .fx-layer{ opacity: 0; }
  .hero.title-band .fx-bloom{ opacity: 0; filter: none; }
  .hero.title-band .fx-aurora{ display: none; }
  .fx-bars, .fx-veil{ display: none; }
}