/* ============================================================
   HERO FADES · diagonal corner fades + a top-left blur
   Every value is a custom property so the tuning panel (hero-tune.js)
   can drive them live. Defaults below are the "reset" state.
   ============================================================ */

:root {
  --hero-fade-color: 10, 6, 3;   /* rgb triplet, matches the existing hero gradient */

  /* — Top-left diagonal fade — */
  --fade-tl-opacity: 0.9;
  --fade-tl-length: 45%;         /* how far across before it reaches transparent */
  --fade-tl-angle: 135deg;       /* 135deg = starts top-left, runs to bottom-right */

  /* — Bottom-right diagonal fade — */
  --fade-br-opacity: 0.9;
  --fade-br-length: 49%;
  --fade-br-angle: 315deg;       /* 315deg = starts bottom-right */

  /* — Top-left blur — */
  --blur-tl-amount: 80px;
  --blur-tl-opacity: 1;
  --blur-tl-length: 31%;
  --blur-tl-angle: 153deg;
}

/* Tablet */
@media (max-width: 1024px) {
  :root {
    --fade-tl-opacity: 0.9;
    --fade-tl-length: 25%;
    --fade-tl-angle: 135deg;
    --fade-br-opacity: 0.9;
    --fade-br-length: 46%;
    --fade-br-angle: 315deg;
    --blur-tl-amount: 14px;
    --blur-tl-opacity: 0;   /* blur switched off at this breakpoint */
    --blur-tl-length: 44%;
    --blur-tl-angle: 135deg;
  }
}

/* Mobile — shorter viewport, so the fades need to cover proportionally more,
   and the blur is dialled back since backdrop-filter is costly on phones. */
@media (max-width: 640px) {
  :root {
    --fade-tl-opacity: 0.9;
    --fade-tl-length: 27%;
    --fade-tl-angle: 145deg;
    --fade-br-opacity: 0.9;
    --fade-br-length: 72%;
    --fade-br-angle: 325deg;
    --blur-tl-amount: 10px;
    --blur-tl-opacity: 1;
    --blur-tl-length: 0%;   /* mask is transparent from 0% — blur is masked out */
    --blur-tl-angle: 145deg;
  }
}

/* ── Layers ──────────────────────────────────────────────────
   All three sit above the video and the light streaks, below the
   thirds rules, cross, text and nav. No z-index — DOM order decides. */

.hero-fade-tl,
.hero-fade-br,
.hero-blur-tl {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hero-fade-tl {
  background: linear-gradient(
    var(--fade-tl-angle),
    rgba(var(--hero-fade-color), 1) 0%,
    rgba(var(--hero-fade-color), 0) var(--fade-tl-length)
  );
  opacity: var(--fade-tl-opacity);
}

.hero-fade-br {
  background: linear-gradient(
    var(--fade-br-angle),
    rgba(var(--hero-fade-color), 1) 0%,
    rgba(var(--hero-fade-color), 0) var(--fade-br-length)
  );
  opacity: var(--fade-br-opacity);
}

/* Blurs whatever is painted beneath it, then the mask fades that blur out
   diagonally — so the corner is soft and it resolves to sharp across the frame. */
.hero-blur-tl {
  backdrop-filter: blur(var(--blur-tl-amount));
  -webkit-backdrop-filter: blur(var(--blur-tl-amount));
  opacity: var(--blur-tl-opacity);
  mask-image: linear-gradient(
    var(--blur-tl-angle),
    #000 0%,
    transparent var(--blur-tl-length)
  );
  -webkit-mask-image: linear-gradient(
    var(--blur-tl-angle),
    #000 0%,
    transparent var(--blur-tl-length)
  );
}