/*
 * AF-124.0 — Visual Media Veil Unification
 *
 * Goal: let artwork breathe.
 * The global veil is now deliberately light; readability is protected by
 * local gradients around text instead of darkening the complete image.
 */

:root{
  --cv-veil-hero-strong:rgba(2,5,12,.28);
  --cv-veil-hero-mid:rgba(2,5,12,.10);
  --cv-veil-hero-soft:rgba(2,5,12,.015);
  --cv-veil-bottom:rgba(2,5,12,.20);
  --cv-veil-card:rgba(3,7,15,.26);
  --cv-veil-card-soft:rgba(3,7,15,.01);
  --cv-veil-orbit-edge:rgba(0,0,0,.24);
}

/* Login artwork: visible instead of almost black. */
body .login-theme:after{
  background:
    linear-gradient(90deg,
      rgba(2,4,10,.12),
      rgba(2,4,10,.28) 36%,
      rgba(2,4,10,.34) 50%,
      rgba(2,4,10,.26) 66%,
      rgba(2,4,10,.12)),
    linear-gradient(180deg,rgba(2,4,10,.02),rgba(2,4,10,.16));
}

/* Generic universe cards / catalog. */
body .universe-link{
  background-image:
    linear-gradient(180deg,rgba(5,8,18,.01),rgba(5,8,18,.26)),
    var(--cover);
}

body .catalog-hero{
  background-image:
    linear-gradient(90deg,
      rgba(3,6,14,.30),
      rgba(3,6,14,.08) 55%,
      rgba(3,6,14,.14)),
    var(--hero);
}
body .catalog-hero:after{
  background:linear-gradient(180deg,transparent 66%,rgba(3,6,14,.25));
}

body .title-poster{
  background-image:
    linear-gradient(180deg,transparent 72%,rgba(0,0,0,.20)),
    var(--poster);
}
body .title-poster-link{
  background-image:
    linear-gradient(135deg,rgba(58,112,196,.045),rgba(118,68,177,.025)),
    linear-gradient(180deg,transparent 74%,rgba(0,0,0,.20)),
    var(--poster);
}

/* Universe hub hero: keep only a local left/bottom readability gradient. */
body.universe-engine-page .ue-hero:before{
  background:
    radial-gradient(circle at var(--hub-x,68%) var(--hub-y,35%),
      color-mix(in srgb,var(--accent) 12%,transparent),transparent 24%),
    linear-gradient(90deg,
      var(--cv-veil-hero-strong),
      var(--cv-veil-hero-mid) 34%,
      var(--cv-veil-hero-soft) 72%,
      rgba(2,5,12,.035));
}
body.universe-engine-page .ue-hero:after{
  background:
    linear-gradient(180deg,rgba(255,255,255,.025),transparent 18%),
    linear-gradient(0deg,rgba(3,6,16,.18),rgba(3,6,16,.07) 14%,transparent 48%),
    radial-gradient(circle at 75% 24%,transparent 0 30%,rgba(0,0,0,.01) 65%,rgba(0,0,0,.055));
}

/* Base universe hero for any screen not using the enhanced hub. */
body .ue-hero-overlay{
  background:
    linear-gradient(90deg,
      rgba(2,5,12,.28) 0%,
      rgba(2,5,12,.10) 37%,
      rgba(2,5,12,.01) 70%,
      rgba(2,5,12,.035) 100%),
    linear-gradient(0deg,rgba(2,5,12,.18),transparent 48%);
}

/* Continue watching: artwork stays vivid. */
body .ue-continue-art{
  background-image:
    linear-gradient(90deg,transparent 70%,rgba(10,15,27,.16)),
    var(--cover);
}
body.universe-engine-page .ue-continue--poster .ue-continue-art:before{
  filter:blur(15px) saturate(1.02) brightness(.78);
}
body.universe-engine-page .ue-continue--poster .ue-continue-art:after{
  background:
    linear-gradient(90deg,rgba(3,7,15,.05),rgba(3,7,15,.01) 60%,rgba(10,15,27,.28)),
    linear-gradient(180deg,rgba(3,7,15,.015),rgba(3,7,15,.06));
}

/* Universe strips / small cards. */
body .ue-universe-strip a{
  background-image:
    linear-gradient(180deg,var(--cv-veil-card-soft),var(--cv-veil-card)),
    var(--cover);
}

/* Title and series hero artwork. */
body .series-hero{
  background-image:
    linear-gradient(90deg,
      rgba(3,6,14,.30),
      rgba(3,6,14,.10) 52%,
      rgba(3,6,14,.02)),
    var(--hero);
}
body .td-shade{
  background:
    linear-gradient(90deg,
      rgba(2,5,12,.34),
      rgba(2,5,12,.14) 46%,
      rgba(2,5,12,.025)),
    linear-gradient(0deg,rgba(2,5,12,.24),transparent 60%),
    radial-gradient(circle at 26% 55%,
      color-mix(in srgb,var(--accent) 16%,transparent),transparent 34%);
}
body .td-poster{
  background-image:
    linear-gradient(180deg,transparent 82%,rgba(0,0,0,.08)),
    var(--poster);
}
body .series-poster{
  background-image:
    linear-gradient(180deg,transparent 82%,rgba(0,0,0,.09)),
    var(--poster);
}

/* Cinematic layer is intentionally subtle. Higher specificity keeps this
   override effective even where cinematic-detail-v1.css is loaded later. */
body .cinematic-hero::after{
  background:
    linear-gradient(90deg,
      rgba(1,5,13,.22) 0%,
      rgba(3,8,18,.09) 34%,
      rgba(3,7,16,.01) 70%,
      rgba(3,7,16,.025) 100%),
    linear-gradient(0deg,rgba(3,8,18,.13) 0%,transparent 42%);
}
body .cinematic-grain{opacity:.07}

/* Chronos Core / orbital experience. */
body.observatory-page .chronos-vignette{
  background:
    radial-gradient(ellipse at 50% 45%,
      transparent 34%,
      rgba(0,0,0,.045) 68%,
      var(--cv-veil-orbit-edge) 100%),
    linear-gradient(180deg,
      rgba(1,3,9,.12),
      transparent 25%,
      transparent 74%,
      rgba(1,3,9,.18));
}
body .chronos-list-grid a{
  background-image:
    linear-gradient(180deg,rgba(3,7,15,.015),rgba(3,7,15,.28)),
    var(--cover);
}
body .chronos-gallery-backdrop{
  background:rgba(1,4,10,.24);
  backdrop-filter:blur(8px) saturate(.92);
}
body .chronos-gallery-backdrop:after{
  background:
    radial-gradient(circle at 50% 46%,
      transparent 12%,
      rgba(0,0,0,.035) 58%,
      rgba(0,0,0,.22) 100%);
}

/* The image inside the orbit remains un-veiled; shadow is only structural. */
body .chronos-gallery-portal img{
  box-shadow:
    inset 0 0 28px rgba(0,0,0,.14),
    0 0 35px color-mix(in srgb,var(--gallery-accent) 28%,transparent);
}