/* Slaughterhouse — rank 8. Thin red line on black, breathing. */

[data-level="slaughterhouse"] {
  --font-display: "Metal Mania", "Impact", fantasy;
  --rule-colour: color-mix(in srgb, var(--accent) 30%, transparent);
}

/* The title sits directly across the skull, and red neon on a red-lit skull
   is unreadable. A blurred, darkened band behind the letterforms pushes the
   art back without dimming the rest of the hero. backdrop-filter does the
   blur; the gradient underneath is the fallback where it is unsupported and
   also carries most of the darkening on its own. */
[data-level="slaughterhouse"] .hero__title {
  position: relative;
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  line-height: 1.04;
  color: #ffe9e4;
  text-shadow:
    0 0 0.5rem color-mix(in srgb, var(--accent) 95%, transparent),
    0 0 1.4rem color-mix(in srgb, var(--accent) 85%, transparent),
    0 0 3rem color-mix(in srgb, var(--accent) 65%, transparent),
    0 0 6rem color-mix(in srgb, var(--accent2) 45%, transparent);
}

/* The only scrim left on the site. The skull glow directly behind this title
   measured 0.499 peak luminance, the brightest backdrop anywhere here, and
   nothing short of knocking it back makes red type readable on it. */
[data-level="slaughterhouse"] .hero__art + .hero__title::before {
  content: "";
  position: absolute;
  inset: -0.16em calc(var(--gutter) * -0.85);
  z-index: -1;
  pointer-events: none;
  backdrop-filter: blur(14px) brightness(0.42) saturate(0.7);
  -webkit-backdrop-filter: blur(14px) brightness(0.42) saturate(0.7);
  background: radial-gradient(
    ellipse 60% 88% at 50% 50%,
    color-mix(in srgb, var(--field) 86%, transparent) 0%,
    color-mix(in srgb, var(--field) 66%, transparent) 54%,
    transparent 84%
  );
  -webkit-mask-image: radial-gradient(
    ellipse 64% 94% at 50% 50%, #000 44%, transparent 86%);
  mask-image: radial-gradient(
    ellipse 64% 94% at 50% 50%, #000 44%, transparent 86%);
}

[data-level="slaughterhouse"] .voice__hook {
  font-family: var(--font-display);
  font-size: var(--step-5);
  color: var(--accent);
  text-shadow: 0 0 1.4rem color-mix(in srgb, var(--accent) 70%, transparent);
}

/* pulse set-piece -------------------------------------------------------- */
/* The scene is generated by tools/gen_slaughterhouse.py, which also writes
   bespoke/slaughterhouse.html. */

.sig--pulse {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  border-top: var(--rule) solid var(--rule-colour);
  background: radial-gradient(
    ellipse 66% 60% at 50% 42%,
    #26060a 0%,
    #0a0203 74%
  );
}

/* Full-bleed now, not a medallion: GSAP scales this from 0.72 to 1.08 on
   scrub, so the whole frame closes in. */
.pulse__loom {
  position: absolute;
  inset: 0;
  pointer-events: none;
  will-change: transform;
}

.pulse__scene {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* The copy sits over a busy frame, so it gets its own pool of dark. */
.pulse__copy::before {
  content: "";
  position: absolute;
  inset: -18% -12%;
  z-index: -1;
  background: radial-gradient(
    ellipse at center,
    color-mix(in srgb, #0a0203 88%, transparent) 0%,
    color-mix(in srgb, #0a0203 62%, transparent) 46%,
    transparent 74%
  );
}

.pulse__end {
  position: absolute;
  right: clamp(1.5rem, 7vw, 9rem);
  bottom: clamp(2rem, 9vh, 7rem);
  z-index: 2;
  margin: 0;
  display: grid;
  justify-items: center;
  gap: var(--space-2);
  color: var(--accent);
  pointer-events: none;
}

.pulse__end-text {
  font-family: var(--font-display);
  font-size: var(--step-2);
  letter-spacing: 0.3em;
  text-shadow: 0 0 1.2rem color-mix(in srgb, var(--accent) 60%, transparent);
}

.pulse__bat {
  width: clamp(4rem, 9vw, 7rem);
  height: auto;
  opacity: 0.9;
  filter: drop-shadow(0 0 1rem color-mix(in srgb, var(--accent) 45%, transparent));
}

.pulse__copy {
  position: relative;
  z-index: 3;
  text-align: center;
}

.pulse__line {
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 7vw, 6rem);
  line-height: 1.06;
  margin: 0 0 var(--space-5);
  color: var(--accent);
  text-shadow:
    0 0 0.6rem color-mix(in srgb, var(--accent) 85%, transparent),
    0 0 2rem color-mix(in srgb, var(--accent) 65%, transparent),
    0 0 4rem color-mix(in srgb, var(--accent) 40%, transparent);
}

.pulse__sub {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  color: var(--ink);
  line-height: 1.7;
  margin-inline: auto;
  text-shadow: 0 0 1.5rem #0a0203, 0 0 2.6rem #0a0203;
}