body.intro-pending { overflow: hidden; }
.intro { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; overflow: hidden; background: #020202; transition: opacity 600ms ease, visibility 600ms ease; }
.intro-media, .intro-shade { position: absolute; inset: 0; width: 100%; height: 100%; }
.intro-media { object-fit: cover; }
.intro-shade { background: radial-gradient(circle, rgba(0,0,0,.1), rgba(0,0,0,.78)); }
.intro-content { position: relative; z-index: 1; display: grid; justify-items: center; gap: 1rem; padding: 1rem; text-align: center; }
.intro-content img { width: min(60vw, 420px); filter: drop-shadow(0 12px 34px #000); }
.intro-content p { margin: 0; font-family: Oxanium, sans-serif; font-size: clamp(1rem, 2.5vw, 1.35rem); font-weight: 600; }
.intro-content span { color: #d1d5db; font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; }
.site-entered .intro { opacity: 0; visibility: hidden; pointer-events: none; }
.intro-skipped .intro { transition: none; }
.noscript-note { padding: .75rem 1rem; background: #de6415; color: #050505; text-align: center; font-weight: 700; }

.slogan-display .glitch-word {
  position: relative;
  display: inline-block;
  color: #c45515;
  text-shadow: 0 0 18px rgba(196, 85, 21, .18), 0 0 34px rgba(168, 67, 14, .12);
}

.glitch-word.is-glitching::before,
.glitch-word.is-glitching::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.glitch-word.is-glitching::before {
  color: rgba(126, 213, 255, .92);
  transform: translate(-7px, 1px) skewX(12deg);
  clip-path: inset(0 0 56% 0);
  text-shadow: -3px 0 rgba(126, 213, 255, .8), 0 0 22px rgba(126, 213, 255, .26);
}

.glitch-word.is-glitching::after {
  color: rgba(255, 119, 0, .96);
  transform: translate(7px, -2px) skewX(-14deg);
  clip-path: inset(44% 0 0 0);
  text-shadow: 3px 0 rgba(255, 119, 0, .8), 0 0 22px rgba(255, 119, 0, .22);
}

.glitch-word.is-glitching {
  letter-spacing: .03em;
  animation: electric-glitch 520ms steps(4, end) 1;
}

.glitch-word.is-glitching .glitch-word-text {
  display: inline-block;
  animation: word-flicker 280ms steps(3, end) 1;
}

@keyframes electric-glitch {
  0%, 100% { transform: translate(0); filter: brightness(1); }
  15% { transform: translate(-4px, 2px) skewX(14deg); filter: brightness(1.18); }
  30% { transform: translate(5px, -2px) skewX(-11deg); filter: brightness(.9); }
  45% { transform: translate(-2px, 0) skewX(8deg); filter: brightness(1.28); }
  60% { transform: translate(3px, 1px) skewX(-7deg); filter: brightness(.92); }
  75% { transform: translate(-5px, -1px) skewX(10deg); filter: brightness(1.22); }
}

@keyframes word-flicker {
  0%, 100% { opacity: 1; }
  25% { opacity: .82; }
  35% { opacity: .3; }
  50% { opacity: 1; }
  68% { opacity: .48; }
  85% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) { .intro-media { display: none; } .intro { transition-duration: .01ms; background: radial-gradient(circle, #3a1704, #020202 60%); } }
