/* =====================
   Boot Mosh
   First-load datamosh overlay and the glitch reveal underneath it
   ===================== */

.boot-mosh {
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: var(--bg-primary);
  pointer-events: none;
  contain: strict;
}

.boot-mosh canvas {
  display: block;
  width: 100%;
  height: 100%;
}

body.is-booting {
  overflow: hidden;
}

.boot-reveal .hero-info-name,
.boot-reveal .hero-info-role,
.boot-reveal .hero-info-tagline,
.boot-reveal .hero-cta-row,
.boot-reveal .hero-carousel {
  animation: boot-mosh-in 620ms cubic-bezier(0.2, 0.9, 0.2, 1) both;
}

.boot-reveal .hero-info-role {
  animation-delay: 60ms;
}

.boot-reveal .hero-info-tagline {
  animation-delay: 120ms;
}

.boot-reveal .hero-cta-row {
  animation-delay: 180ms;
}

.boot-reveal .hero-carousel {
  animation-delay: 140ms;
}

.boot-reveal .hero-info-name,
.boot-reveal .hero-info-role {
  animation-name: boot-mosh-in, boot-mosh-split;
  animation-duration: 620ms, 520ms;
}

@keyframes boot-mosh-in {
  0% {
    opacity: 0;
    transform: translate3d(-16px, 0, 0) skewX(7deg);
    filter: blur(3px);
  }

  22% {
    opacity: 1;
    transform: translate3d(11px, 0, 0) skewX(-4deg);
    filter: blur(1px);
  }

  40% {
    transform: translate3d(-7px, 0, 0) skewX(2deg);
    filter: blur(0);
  }

  58% {
    transform: translate3d(5px, 0, 0);
  }

  76% {
    transform: translate3d(-2px, 0, 0);
  }

  100% {
    opacity: 1;
    transform: none;
    filter: none;
  }
}

@keyframes boot-mosh-split {
  0% {
    text-shadow:
      7px 0 rgba(224, 123, 60, 0.9),
      -7px 0 rgba(107, 163, 255, 0.9);
  }

  45% {
    text-shadow:
      3px 0 rgba(77, 182, 172, 0.6),
      -3px 0 rgba(107, 163, 255, 0.6);
  }

  100% {
    text-shadow: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .boot-mosh {
    display: none;
  }

  .boot-reveal .hero-info-name,
  .boot-reveal .hero-info-role,
  .boot-reveal .hero-info-tagline,
  .boot-reveal .hero-cta-row,
  .boot-reveal .hero-carousel {
    animation: none;
  }
}