/* ── Glitch wordmark — reusable section-divider component ── */
/* Approximates the brand's doubled/offset "99 PERCENT NICE" raster art
   (see assets/img/profile.png) with two stacked live-text layers so it
   reads at any size and stays crisp. On scroll-into-view the back layer
   settles from a wide skewed offset into a tight near-alignment. */

.glitch-wordmark {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(48px, 9vw, 100px) var(--gutter);
  overflow: hidden;
  background: var(--black);
}

.glitch-wordmark-layer {
  font-family: var(--font-main);
  font-weight: 600;
  font-size: clamp(28px, 6.4vw, 96px);
  letter-spacing: -0.03em;
  text-transform: uppercase;
  line-height: 1;
  white-space: nowrap;
  user-select: none;
}

.glitch-wordmark-layer--back {
  position: absolute;
  top: 50%;
  left: 50%;
  color: var(--glitch-color, var(--color-about));
  opacity: 0.35;
  transform: translate(-50%, -50%) translate(4px, 3px) skew(-2deg, 0.4deg);
}

.glitch-wordmark-layer--front {
  position: relative;
  color: var(--white);
}

@media (prefers-reduced-motion: no-preference) {
  .glitch-wordmark-layer--back {
    opacity: 0.55;
    transform: translate(-50%, -50%) translate(18px, 12px) skew(-7deg, 1.2deg);
    transition: transform 0.9s var(--ease-spring), opacity 0.9s var(--ease-out);
  }
  .glitch-wordmark.revealed .glitch-wordmark-layer--back {
    opacity: 0.35;
    transform: translate(-50%, -50%) translate(4px, 3px) skew(-2deg, 0.4deg);
  }
}

/* Page-specific identity color */
.glitch-wordmark--releases { --glitch-color: var(--color-releases); }
.glitch-wordmark--events   { --glitch-color: var(--color-events); }
.glitch-wordmark--about    { --glitch-color: var(--color-about); }

@media (max-width: 640px) {
  .glitch-wordmark-layer--back { transform: translate(-50%, -50%) translate(3px, 2px) skew(-2deg, 0.4deg); }
  @media (prefers-reduced-motion: no-preference) {
    .glitch-wordmark-layer--back { transform: translate(-50%, -50%) translate(10px, 7px) skew(-6deg, 1deg); }
    .glitch-wordmark.revealed .glitch-wordmark-layer--back { transform: translate(-50%, -50%) translate(3px, 2px) skew(-2deg, 0.4deg); }
  }
}