/* ═══════════════════════════════════════════════════════════════════════════
   TOXIC // scene art + DMZ look  (loaded after toxic.css)
   Original generated art lives in /static/img: fallback-1..6.jpg, head-*.jpg, grunge.png
   ═══════════════════════════════════════════════════════════════════════════ */
:root {
  --dmz: #e8b23a;
  --dmz-2: #f4c95d;
  --dmz-dim: rgba(232, 178, 58, .16);
  --grunge: url("../img/grunge.png");
}

/* ───────────── worn stencil titles ───────────── */
.hero h1,
.page-head h1,
h1.hud-title,
.error-code,
.worn {
  -webkit-mask-image: var(--grunge);
          mask-image: var(--grunge);
  -webkit-mask-size: 360px 360px;
          mask-size: 360px 360px;
  -webkit-mask-repeat: repeat;
          mask-repeat: repeat;
}
.hero h1 { -webkit-mask-size: 520px 520px; mask-size: 520px 520px; }
.worn-strong { -webkit-mask-size: 220px 220px; mask-size: 220px 220px; }

/* ───────────── DMZ gold accents ───────────── */
.text-dmz, .dmz { color: var(--dmz); }
.hero .tagline .dmz {
  color: var(--dmz); text-shadow: 0 0 18px rgba(232, 178, 58, .35);
}
.chip.chip-dmz, .badge-dmz { color: #1a1406; background: var(--dmz); border-color: var(--dmz); }
.hazard {
  height: 8px; border: 0; margin: 0;
  background: repeating-linear-gradient(-45deg, var(--dmz) 0 12px, #141210 12px 24px);
  -webkit-mask-image: var(--grunge); mask-image: var(--grunge); -webkit-mask-size: 260px; mask-size: 260px;
}
.card.feature.feature-dmz { --br: var(--dmz); }
.card.feature.feature-dmz .ico, .card.feature.feature-dmz .num { color: var(--dmz); }
.card.feature.feature-dmz:hover { border-color: rgba(232, 178, 58, .45); box-shadow: 0 0 0 1px rgba(232, 178, 58, .14), 0 18px 50px -20px rgba(232, 178, 58, .35); }

/* feature cards: faint scene art behind the copy */
.card.feature[class*="scene-"] { overflow: hidden; isolation: isolate; }
.card.feature[class*="scene-"]::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: var(--scene) center / cover no-repeat;
  opacity: .16; filter: grayscale(.35) contrast(1.1);
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  transition: opacity .4s, transform 1.2s var(--ease, ease);
}
.card.feature[class*="scene-"]:hover::after { opacity: .3; transform: scale(1.05); }
.card.feature.scene-1 { --scene: url("../img/head-roster.jpg"); }
.card.feature.scene-2 { --scene: url("../img/head-gallery.jpg"); }
.card.feature.scene-3 { --scene: url("../img/head-default.jpg"); }
.card.feature.scene-4 { --scene: url("../img/head-apply.jpg"); }

/* ───────────── page headers: scene banners ───────────── */
.page-head {
  --head-img: url("../img/head-default.jpg");
  background:
    linear-gradient(100deg, rgba(14, 16, 15, .97) 26%, rgba(14, 16, 15, .8) 52%, rgba(14, 16, 15, .42) 100%),
    var(--head-img) center 45% / cover no-repeat,
    var(--panel, #161a18);
  border-color: rgba(236, 232, 218, .12);
}
.page-head::before {  /* keep the topo lines but fade them out over the art */
  opacity: .14;
  -webkit-mask-image: linear-gradient(100deg, #000 20%, transparent 65%);
          mask-image: linear-gradient(100deg, #000 20%, transparent 65%);
}
.page-head::after {  /* hazard edge instead of plain dashes */
  width: 5px;
  background: repeating-linear-gradient(180deg, var(--orange) 0 12px, #141210 12px 18px, var(--dmz) 18px 30px, #141210 30px 36px);
}
.page-head > * { position: relative; }
body.page-roster .page-head  { --head-img: url("../img/head-roster.jpg"); }
body.page-gallery .page-head { --head-img: url("../img/head-gallery.jpg"); }
body.page-apply .page-head   { --head-img: url("../img/head-apply.jpg"); background-position: 0 0, center 30%, 0 0; }
body.page-scrims .page-head  { --head-img: url("../img/head-roster.jpg"); }
.arm-head, .page-head.arm-head { --head-img: url("../img/head-armory.jpg"); }

/* ───────────── home hero: rain + drifting fog (CSS only) ───────────── */
.hero-weather { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.hero-weather .rain, .hero-weather .rain2 {
  position: absolute; inset: -20% -10%;
  background-image: repeating-linear-gradient(104deg, transparent 0 22px, rgba(220, 228, 232, .07) 22px 23px, transparent 23px 47px);
  background-size: 200px 200px;
  animation: rainfall .55s linear infinite;
  opacity: .55;
}
.hero-weather .rain2 {
  background-image: repeating-linear-gradient(101deg, transparent 0 37px, rgba(220, 228, 232, .05) 37px 38px, transparent 38px 71px);
  background-size: 320px 320px; animation-duration: .9s; opacity: .45;
}
@keyframes rainfall { from { background-position: 0 0; } to { background-position: -46px 200px; } }
.hero-weather .rain2 { animation-name: rainfall2; }
@keyframes rainfall2 { from { background-position: 0 0; } to { background-position: -50px 320px; } }
.hero-weather .fog {
  position: absolute; left: -30%; right: -30%; bottom: -8%; height: 55%;
  background:
    radial-gradient(40% 60% at 20% 70%, rgba(190, 196, 186, .14), transparent 70%),
    radial-gradient(35% 55% at 60% 80%, rgba(190, 196, 186, .12), transparent 70%),
    radial-gradient(30% 50% at 90% 65%, rgba(190, 196, 186, .10), transparent 70%);
  filter: blur(8px);
  animation: fogdrift 38s ease-in-out infinite alternate;
}
@keyframes fogdrift { from { transform: translateX(-6%); } to { transform: translateX(6%); } }
.hero-weather .flash {  /* rare distant lightning */
  position: absolute; inset: 0; background: radial-gradient(60% 50% at 75% 10%, rgba(220, 230, 240, .18), transparent 70%);
  opacity: 0; animation: flash 17s steps(1) infinite;
}
@keyframes flash { 0%, 91%, 93%, 100% { opacity: 0; } 92% { opacity: 1; } 92.5% { opacity: .3; } }

/* gold hazard strip along the hero's bottom edge */
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 6px; z-index: 1; pointer-events: none;
  background: repeating-linear-gradient(-45deg, var(--dmz) 0 12px, #141210 12px 24px);
  opacity: .75;
  -webkit-mask-image: var(--grunge), linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
          mask-image: var(--grunge), linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  -webkit-mask-size: 260px, 100%; mask-size: 260px, 100%;
  -webkit-mask-composite: source-in; mask-composite: intersect;
}

/* ───────────── error page: "exfil failed" ───────────── */
.error-scene {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: calc(-1 * var(--nav-h, 64px)); padding-top: var(--nav-h, 64px);
}
.error-scene::before {
  content: ""; position: absolute; inset: 0; z-index: -2;
  background: url("../img/fallback-6.jpg") center / cover no-repeat;
  animation: errshake 6s steps(1) infinite;
}
.error-scene::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 55% at 50% 45%, rgba(14, 6, 6, .55), rgba(14, 6, 6, .92)),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .28) 0 1px, transparent 1px 3px);
}
@keyframes errshake { 0%, 96%, 100% { transform: none; } 97% { transform: translateX(-6px); } 98% { transform: translateX(5px); } }
.error-scene .error-kicker {
  display: inline-block; margin-bottom: 14px; padding: 6px 14px;
  font: 400 clamp(1.4rem, 3.6vw, 2.4rem)/1 var(--display); letter-spacing: .12em; text-transform: uppercase;
  color: #ffd9d0; background: rgba(200, 30, 20, .55); border: 1px solid rgba(255, 120, 100, .5);
  -webkit-mask-image: var(--grunge); mask-image: var(--grunge); -webkit-mask-size: 240px; mask-size: 240px;
}
.error-scene .error-code { -webkit-text-stroke-color: rgba(255, 200, 190, .45); }
.error-scene .error-code .glitch { -webkit-text-stroke-color: #ff4a3a; }
.error-scene .muted { color: #e6c9c3; }

/* ───────────── reduced motion ───────────── */
@media (prefers-reduced-motion: reduce) {
  .hero-weather .rain, .hero-weather .rain2, .hero-weather .fog, .hero-weather .flash, .error-scene::before { animation: none !important; }
  .hero-weather .flash { display: none; }
}
@media (max-width: 600px) {
  .hero-weather .rain2 { display: none; }
  .page-head { background:
    linear-gradient(100deg, rgba(14, 16, 15, .95) 20%, rgba(14, 16, 15, .78)),
    var(--head-img) center / cover no-repeat, var(--panel, #161a18); }
}