/* The Yandere — rank 3.
   Black and arterial red. Brush-cut title on a torn swash, clocks turning. */

[data-level="the-yandere"] {
  --font-display: "Bangers", "Impact", "Haettenschweiler", sans-serif;
  --rule-colour: color-mix(in srgb, var(--accent) 34%, transparent);
}

[data-level="the-yandere"] .hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.012em;
  line-height: 0.94;
  transform: skewX(-7deg);
  color: var(--field);
  /* Cut, not typed: a hard red edge under a black face. */
  text-shadow:
    3px 3px 0 var(--accent),
    -2px -2px 0 color-mix(in srgb, var(--accent) 70%, transparent),
    0 0 2.4rem color-mix(in srgb, var(--accent) 60%, transparent);
}

[data-level="the-yandere"] .voice__hook {
  font-family: var(--font-display);
  font-weight: 400;
  letter-spacing: 0.01em;
  transform: skewX(-6deg);
  font-size: var(--step-5);
}

/* slash set-piece -------------------------------------------------------- */

.sig--slash {
  position: relative;
  min-height: 100svh;
  display: grid;
  align-content: center;
  overflow: hidden;
  border-top: var(--rule) solid var(--rule-colour);
}

.slash__clocks {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.3;
}

.slash__clock {
  position: absolute;
  border: 4px solid var(--accent);
  border-radius: 50%;
}

.slash__clock--a {
  width: 46vmin;
  height: 46vmin;
  left: 4%;
  top: 8%;
}

.slash__clock--b {
  width: 30vmin;
  height: 30vmin;
  right: 8%;
  bottom: 10%;
  border-width: 3px;
}

.slash__hand {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 3px;
  background: var(--accent);
  transform-origin: 50% 100%;
}

.slash__hand--long {
  height: 42%;
  translate: -50% -100%;
}

.slash__hand--short {
  height: 26%;
  width: 5px;
  translate: -50% -100%;
}

/* the swash wipes across, then the lines cut in */
.slash__swash {
  position: absolute;
  left: -4%;
  right: -4%;
  top: 34%;
  height: 32%;
  background: linear-gradient(
    92deg,
    color-mix(in srgb, var(--accent) 70%, #000) 0%,
    var(--accent) 24%,
    var(--accent) 72%,
    color-mix(in srgb, var(--accent) 55%, #000) 100%
  );
  clip-path: polygon(
    0 14%, 8% 6%, 17% 15%, 27% 4%, 37% 14%, 47% 3%, 58% 13%, 68% 5%,
    79% 15%, 89% 6%, 100% 12%,
    100% 88%, 90% 96%, 80% 86%, 69% 97%, 58% 87%, 47% 98%, 36% 88%,
    26% 96%, 15% 86%, 6% 95%, 0 87%
  );
  pointer-events: none;
}

.slash__copy {
  position: relative;
  z-index: 3;
}

.slash__line {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 6rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  transform: skewX(-7deg);
  margin: 0 0 var(--space-5);
  color: var(--field);
  text-shadow: 2px 2px 0 #0a0304;
}

.slash__sub {
  font-family: var(--font-mono);
  font-size: var(--step--1);
  line-height: 1.7;
  color: var(--ink);
  text-shadow: 0 0 1.2rem #0a0304, 0 0 2rem #0a0304;
}

@media (prefers-reduced-motion: reduce) {
  .slash__swash {
    transform: none !important;
  }
}