/* =====================================================
   TRANSICIÓN CINEMATOGRÁFICA HACIA CHISPIA BOOM
   ===================================================== */

body.boom-transition-lock {
  overflow: hidden !important;
}

.boom-transition-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(
      circle at center,
      rgba(249, 115, 22, 0.24),
      rgba(2, 6, 23, 0.98) 48%,
      #020617 78%
    );
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  overflow: hidden;
}

.boom-transition-overlay.active {
  visibility: visible;
  animation: boomOverlayEnter 1050ms ease forwards;
}

.boom-transition-flash {
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
}

.boom-transition-overlay.active
.boom-transition-flash {
  animation: boomFlash 1050ms ease forwards;
}

.boom-transition-symbol {
  position: relative;
  z-index: 5;
  font-size: 94px;
  line-height: 1;
  opacity: 0;
  transform: scale(0.2) rotate(-18deg);
  filter:
    drop-shadow(0 0 24px rgba(249,115,22,0.9))
    drop-shadow(0 0 60px rgba(236,72,153,0.7));
}

.boom-transition-overlay.active
.boom-transition-symbol {
  animation: boomSymbolExplosion 1050ms
    cubic-bezier(.18,.85,.28,1.18) forwards;
}

.boom-transition-title {
  position: absolute;
  z-index: 6;
  margin-top: 190px;
  font-size: clamp(38px, 10vw, 76px);
  font-weight: 1000;
  letter-spacing: 0.08em;
  color: white;
  opacity: 0;
  transform: translateY(30px) scale(0.9);
  text-shadow:
    0 0 18px rgba(249,115,22,0.8),
    0 0 40px rgba(236,72,153,0.7);
}

.boom-transition-overlay.active
.boom-transition-title {
  animation: boomTitleEnter 1050ms ease forwards;
}

.boom-transition-energy {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.boom-energy-ring {
  position: absolute;
  width: 100px;
  height: 100px;
  border: 5px solid rgba(249,115,22,0.85);
  border-radius: 999px;
  opacity: 0;
  box-shadow:
    0 0 30px rgba(249,115,22,0.8),
    inset 0 0 30px rgba(236,72,153,0.55);
}

.boom-transition-overlay.active
.boom-energy-ring-1 {
  animation: boomEnergyRing 850ms ease-out 130ms forwards;
}

.boom-transition-overlay.active
.boom-energy-ring-2 {
  animation: boomEnergyRing 850ms ease-out 220ms forwards;
}

.boom-transition-overlay.active
.boom-energy-ring-3 {
  animation: boomEnergyRing 850ms ease-out 310ms forwards;
}

.boom-transition-particles {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1px;
  height: 1px;
  z-index: 4;
}

.boom-transition-particle {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;
  transform: translate(-50%, -50%) scale(0.2);
}

.boom-transition-overlay.active
.boom-transition-particle {
  animation: boomParticleBurst 780ms
    cubic-bezier(.1,.7,.25,1)
    var(--boom-delay)
    forwards;
}

/* Entrada en boom.html */
html.boom-arrival::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;
  background: white;
  animation: boomArrivalFlash 800ms ease forwards;
}

html.boom-arrival body {
  animation: boomArrivalPage 700ms
    cubic-bezier(.18,.8,.25,1)
    forwards;
}

@keyframes boomOverlayEnter {
  0% {
    opacity: 0;
  }

  12% {
    opacity: 1;
  }

  82% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    background: #020617;
  }
}

@keyframes boomFlash {
  0%, 16% {
    opacity: 0;
  }

  24% {
    opacity: 0.95;
  }

  31% {
    opacity: 0;
  }

  74% {
    opacity: 0;
  }

  82% {
    opacity: 0.7;
  }

  100% {
    opacity: 0;
  }
}

@keyframes boomSymbolExplosion {
  0% {
    opacity: 0;
    transform: scale(0.2) rotate(-18deg);
  }

  22% {
    opacity: 1;
    transform: scale(0.85) rotate(6deg);
  }

  48% {
    opacity: 1;
    transform: scale(1.12) rotate(-3deg);
  }

  72% {
    opacity: 1;
    transform: scale(1) rotate(0);
  }

  100% {
    opacity: 0;
    transform: scale(7);
    filter: blur(12px);
  }
}

@keyframes boomTitleEnter {
  0%, 35% {
    opacity: 0;
    transform: translateY(30px) scale(0.9);
  }

  55% {
    opacity: 1;
    transform: translateY(0) scale(1.05);
  }

  78% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }

  100% {
    opacity: 0;
    transform: scale(1.3);
  }
}

@keyframes boomEnergyRing {
  0% {
    opacity: 0.9;
    transform: scale(0.2);
  }

  100% {
    opacity: 0;
    transform: scale(8);
  }
}

@keyframes boomParticleBurst {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.2)
      rotate(0);
  }

  15% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--boom-x)),
        calc(-50% + var(--boom-y))
      )
      scale(1.2)
      rotate(var(--boom-rotation));
  }
}

@keyframes boomArrivalFlash {
  0% {
    opacity: 1;
  }

  22% {
    opacity: 0.75;
  }

  100% {
    opacity: 0;
  }
}

@keyframes boomArrivalPage {
  0% {
    opacity: 0;
    transform: scale(1.035);
    filter: blur(6px);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .boom-transition-overlay,
  .boom-transition-overlay *,
  html.boom-arrival::before,
  html.boom-arrival body {
    animation: none !important;
  }
}

/* =====================================================
   BOOM TRANSITION V2 — INTRO TIPO VIDEOJUEGO
   ===================================================== */

.boom-transition-v2 .boom-v2-core {
  position: relative;
  z-index: 7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: min(94vw, 720px);
  min-height: 360px;
  perspective: 900px;
}

.boom-transition-v2 .boom-transition-symbol {
  position: absolute;
  margin: 0;
  font-size: clamp(84px, 24vw, 150px);
  opacity: 0;
  transform:
    translateZ(-180px)
    scale(0.1)
    rotate(-25deg);
}

.boom-transition-v2.active .boom-transition-symbol {
  animation:
    boomV2Symbol 1450ms
    cubic-bezier(.16,.85,.22,1.15)
    forwards;
}

.boom-v2-brand {
  position: absolute;
  top: 47px;
  font-size: clamp(13px, 3.5vw, 18px);
  font-weight: 1000;
  letter-spacing: 0.5em;
  color: #f8fafc;
  opacity: 0;
  transform: translateY(-18px);
  text-shadow:
    0 0 16px rgba(249,115,22,0.9),
    0 0 30px rgba(236,72,153,0.55);
}

.boom-transition-v2.active .boom-v2-brand {
  animation: boomV2Brand 1450ms ease forwards;
}

.boom-v2-word {
  position: relative;
  z-index: 9;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: clamp(2px, 1.4vw, 10px);
  margin-top: 80px;
  white-space: nowrap;
}

.boom-v2-letter {
  display: inline-block;
  font-size: clamp(64px, 19vw, 138px);
  font-weight: 1000;
  line-height: 0.85;
  letter-spacing: -0.08em;
  color: white;
  opacity: 0;
  transform:
    translateZ(-500px)
    translateY(80px)
    scale(0.05)
    rotateX(70deg);
  text-shadow:
    0 5px 0 #be123c,
    0 10px 0 #7c2d12,
    0 0 22px rgba(249,115,22,0.95),
    0 0 55px rgba(236,72,153,0.75);
}

.boom-transition-v2.active .boom-v2-letter {
  animation:
    boomV2LetterSlam 720ms
    cubic-bezier(.12,.9,.2,1.3)
    calc(360ms + var(--letter-index) * 85ms)
    forwards;
}

.boom-v2-tagline {
  position: absolute;
  bottom: 36px;
  font-size: clamp(10px, 2.7vw, 14px);
  font-weight: 900;
  letter-spacing: 0.18em;
  color: #fdba74;
  opacity: 0;
  transform: translateY(18px);
  text-align: center;
  text-shadow: 0 0 18px rgba(249,115,22,0.7);
}

.boom-transition-v2.active .boom-v2-tagline {
  animation: boomV2Tagline 1450ms ease forwards;
}

.boom-v2-speed-lines {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}

.boom-v2-speed-line {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--line-length);
  height: 3px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.95),
      rgba(249,115,22,0.85)
    );
  opacity: 0;
  transform-origin: left center;
  transform:
    rotate(var(--line-angle))
    translateX(40px)
    scaleX(0);
  box-shadow: 0 0 14px rgba(249,115,22,0.8);
}

.boom-transition-v2.active .boom-v2-speed-line {
  animation:
    boomV2SpeedLine 420ms ease-out
    var(--line-delay)
    forwards;
}

/* Flash algo más impactante en esta versión */
.boom-transition-v2.active .boom-transition-flash {
  animation: boomV2Flash 1450ms ease forwards;
}

/* La escena completa termina entrando hacia la cámara */
.boom-transition-v2.active .boom-v2-core {
  animation: boomV2FinalZoom 1450ms ease forwards;
}

@keyframes boomV2Symbol {
  0% {
    opacity: 0;
    transform:
      translateZ(-180px)
      scale(0.1)
      rotate(-25deg);
    filter: blur(8px);
  }

  13% {
    opacity: 1;
    transform:
      translateZ(0)
      scale(0.75)
      rotate(7deg);
    filter: blur(0);
  }

  25% {
    opacity: 1;
    transform:
      translateZ(0)
      scale(1.15)
      rotate(-4deg);
  }

  34% {
    opacity: 1;
    transform:
      translateZ(0)
      scale(1)
      rotate(0);
  }

  48% {
    opacity: 0.42;
    transform:
      translateZ(-80px)
      scale(1.5)
      rotate(0);
    filter: blur(3px);
  }

  100% {
    opacity: 0;
    transform:
      translateZ(-150px)
      scale(3.2);
    filter: blur(12px);
  }
}

@keyframes boomV2LetterSlam {
  0% {
    opacity: 0;
    transform:
      translateZ(-500px)
      translateY(80px)
      scale(0.05)
      rotateX(70deg);
    filter: blur(14px);
  }

  58% {
    opacity: 1;
    transform:
      translateZ(30px)
      translateY(-8px)
      scale(1.12)
      rotateX(-8deg);
    filter: blur(0);
  }

  76% {
    transform:
      translateZ(0)
      translateY(5px)
      scale(0.94)
      rotateX(3deg);
  }

  100% {
    opacity: 1;
    transform:
      translateZ(0)
      translateY(0)
      scale(1)
      rotateX(0);
  }
}

@keyframes boomV2Brand {
  0%, 48% {
    opacity: 0;
    transform: translateY(-18px);
  }

  62% {
    opacity: 1;
    transform: translateY(0);
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-8px) scale(1.1);
  }
}

@keyframes boomV2Tagline {
  0%, 58% {
    opacity: 0;
    transform: translateY(18px);
  }

  72% {
    opacity: 1;
    transform: translateY(0);
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform: translateY(-8px);
  }
}

@keyframes boomV2Flash {
  0%, 13% {
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  23% {
    opacity: 0;
  }

  50% {
    opacity: 0;
  }

  56% {
    opacity: 0.38;
  }

  61% {
    opacity: 0;
  }

  91% {
    opacity: 0;
  }

  100% {
    opacity: 0.75;
  }
}

@keyframes boomV2SpeedLine {
  0% {
    opacity: 0;
    transform:
      rotate(var(--line-angle))
      translateX(40px)
      scaleX(0);
  }

  25% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      rotate(var(--line-angle))
      translateX(330px)
      scaleX(1);
  }
}

@keyframes boomV2FinalZoom {
  0%, 82% {
    transform: scale(1);
    filter: blur(0);
  }

  100% {
    transform: scale(2.8);
    filter: blur(12px);
    opacity: 0;
  }
}

@media (max-width: 480px) {
  .boom-v2-word {
    gap: 0;
  }

  .boom-v2-letter {
    font-size: clamp(58px, 20vw, 92px);
  }

  .boom-v2-brand {
    top: 68px;
  }

  .boom-v2-tagline {
    bottom: 58px;
    letter-spacing: 0.1em;
  }
}


/* =====================================================
   CHISPIA BOOM TRANSITION V3
   Impacto puro · estilo cómic / videojuego
   ===================================================== */

body.boom-v3-lock {
  overflow: hidden !important;
}

.boom-v3-overlay {
  position: fixed;
  inset: 0;
  z-index: 999999;
  display: grid;
  place-items: center;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(249, 115, 22, 0.28),
      rgba(124, 45, 18, 0.18) 24%,
      rgba(15, 23, 42, 0.96) 54%,
      #020617 82%
    );
}

.boom-v3-overlay.active {
  visibility: visible;
  animation: boomV3Overlay 1120ms ease forwards;
}

.boom-v3-dark-pulse {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      circle at center,
      rgba(236, 72, 153, 0.34),
      transparent 48%
    );
  opacity: 0;
}

.boom-v3-overlay.active .boom-v3-dark-pulse {
  animation: boomV3DarkPulse 1120ms ease forwards;
}

.boom-v3-flash {
  position: absolute;
  inset: 0;
  z-index: 30;
  background: white;
  opacity: 0;
}

.boom-v3-overlay.active .boom-v3-flash {
  animation: boomV3Flash 1120ms ease forwards;
}

/* ===== centro ===== */

.boom-v3-center {
  position: relative;
  z-index: 10;
  width: min(94vw, 720px);
  min-height: 350px;
  display: grid;
  place-items: center;
  perspective: 1000px;
}

.boom-v3-overlay.active .boom-v3-center {
  animation: boomV3CenterExit 1120ms ease forwards;
}

/* ===== símbolo ===== */

.boom-v3-symbol {
  position: absolute;
  left: 50%;
  top: 42%;
  font-size: clamp(94px, 25vw, 160px);
  line-height: 1;
  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0.08)
    rotate(-22deg);

  filter:
    blur(9px)
    drop-shadow(0 0 25px rgba(249,115,22,1))
    drop-shadow(0 0 65px rgba(236,72,153,0.9));
}

.boom-v3-overlay.active .boom-v3-symbol {
  animation:
    boomV3Symbol 1120ms
    cubic-bezier(.14,.88,.2,1.15)
    forwards;
}

/* ===== palabra BOOM ===== */

.boom-v3-word {
  position: absolute;
  left: 50%;
  top: 58%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0px, 1vw, 8px);
  white-space: nowrap;
  transform: translate(-50%, -50%);
}

.boom-v3-letter {
  display: inline-block;
  font-size: clamp(68px, 19vw, 145px);
  font-weight: 1000;
  line-height: 0.82;
  letter-spacing: -0.09em;
  color: #fff;
  opacity: 0;

  transform:
    translateY(70px)
    translateZ(-420px)
    scale(0.06)
    rotateX(70deg)
    rotateZ(-10deg);

  filter: blur(14px);

  text-shadow:
    0 5px 0 #f97316,
    0 10px 0 #db2777,
    0 15px 0 #831843,
    0 0 18px rgba(255,255,255,0.95),
    0 0 35px rgba(249,115,22,1),
    0 0 68px rgba(236,72,153,0.9),
    0 0 95px rgba(139,92,246,0.62);
}

.boom-v3-overlay.active .boom-v3-letter {
  animation:
    boomV3LetterImpact 570ms
    cubic-bezier(.12,.92,.2,1.38)
    calc(295ms + var(--i) * 58ms)
    forwards;
}

/* ===== ecos tipo cómic ===== */

.boom-v3-echo {
  position: absolute;
  left: 50%;
  top: 58%;
  font-size: clamp(68px, 19vw, 145px);
  font-weight: 1000;
  letter-spacing: -0.09em;
  line-height: 0.82;
  white-space: nowrap;
  color: transparent;
  -webkit-text-stroke: 3px rgba(249,115,22,0.72);
  opacity: 0;
  transform: translate(-50%, -50%) scale(1);
}

.boom-v3-overlay.active .boom-v3-echo-1 {
  animation: boomV3EchoOne 1120ms ease forwards;
}

.boom-v3-overlay.active .boom-v3-echo-2 {
  animation: boomV3EchoTwo 1120ms ease forwards;
}

/* ===== ondas expansivas ===== */

.boom-v3-shockwaves {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: grid;
  place-items: center;
}

.boom-v3-shockwave {
  position: absolute;
  width: 105px;
  height: 105px;
  border-radius: 999px;
  border: 5px solid rgba(249,115,22,0.92);
  opacity: 0;

  box-shadow:
    0 0 24px rgba(249,115,22,0.9),
    0 0 52px rgba(236,72,153,0.7),
    inset 0 0 24px rgba(255,255,255,0.2);
}

.boom-v3-overlay.active .boom-v3-shockwave-1 {
  animation: boomV3Shockwave 760ms ease-out 150ms forwards;
}

.boom-v3-overlay.active .boom-v3-shockwave-2 {
  animation: boomV3Shockwave 760ms ease-out 245ms forwards;
}

.boom-v3-overlay.active .boom-v3-shockwave-3 {
  animation: boomV3Shockwave 760ms ease-out 340ms forwards;
}

/* ===== partículas ===== */

.boom-v3-particles {
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 8;
  width: 1px;
  height: 1px;
}

.boom-v3-particle {
  position: absolute;
  left: 0;
  top: 0;
  opacity: 0;

  transform:
    translate(-50%, -50%)
    scale(0.1)
    rotate(0);
}

.boom-v3-overlay.active .boom-v3-particle {
  animation:
    boomV3Particle 690ms
    cubic-bezier(.1,.7,.2,1)
    var(--delay)
    forwards;
}

/* ===== líneas de velocidad ===== */

.boom-v3-streaks {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}

.boom-v3-streak {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--length);
  height: 3px;
  border-radius: 999px;

  opacity: 0;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255,255,255,0.95),
      rgba(249,115,22,0.9)
    );

  transform-origin: left center;

  transform:
    rotate(var(--angle))
    translateX(35px)
    scaleX(0);

  box-shadow:
    0 0 12px rgba(255,255,255,0.8),
    0 0 22px rgba(249,115,22,0.8);
}

.boom-v3-overlay.active .boom-v3-streak {
  animation:
    boomV3Streak 380ms
    ease-out
    var(--delay)
    forwards;
}

/* ===== llegada a boom.html ===== */

html.boom-v3-arrival::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 999999;
  pointer-events: none;

  background:
    radial-gradient(
      circle at center,
      white,
      rgba(249,115,22,0.72) 24%,
      rgba(2,6,23,0.95) 72%
    );

  animation: boomV3ArrivalFlash 760ms ease forwards;
}

html.boom-v3-arrival body {
  animation:
    boomV3ArrivalPage 680ms
    cubic-bezier(.16,.82,.22,1)
    forwards;
}

/* =====================================================
   KEYFRAMES
   ===================================================== */

@keyframes boomV3Overlay {
  0% {
    opacity: 0;
  }

  8% {
    opacity: 1;
  }

  88% {
    opacity: 1;
  }

  100% {
    opacity: 1;
    background: #020617;
  }
}

@keyframes boomV3DarkPulse {
  0%, 8% {
    opacity: 0;
    transform: scale(0.4);
  }

  20% {
    opacity: 1;
    transform: scale(1.2);
  }

  54% {
    opacity: 0.55;
    transform: scale(1.6);
  }

  100% {
    opacity: 0;
    transform: scale(3);
  }
}

@keyframes boomV3Symbol {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.08)
      rotate(-22deg);
    filter: blur(9px);
  }

  14% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(0.82)
      rotate(8deg);
    filter: blur(0);
  }

  27% {
    opacity: 1;
    transform:
      translate(-50%, -50%)
      scale(1.22)
      rotate(-4deg);
  }

  39% {
    opacity: 0.72;
    transform:
      translate(-50%, -53%)
      scale(1.52)
      rotate(0);
  }

  57% {
    opacity: 0.18;
    transform:
      translate(-50%, -58%)
      scale(2.35);
    filter: blur(5px);
  }

  100% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(6.4);
    filter: blur(16px);
  }
}

@keyframes boomV3LetterImpact {
  0% {
    opacity: 0;
    transform:
      translateY(70px)
      translateZ(-420px)
      scale(0.06)
      rotateX(70deg)
      rotateZ(-10deg);
    filter: blur(14px);
  }

  56% {
    opacity: 1;
    transform:
      translateY(-12px)
      translateZ(35px)
      scale(1.16)
      rotateX(-9deg)
      rotateZ(3deg);
    filter: blur(0);
  }

  74% {
    transform:
      translateY(6px)
      translateZ(0)
      scale(0.92)
      rotateX(4deg)
      rotateZ(-1deg);
  }

  100% {
    opacity: 1;
    transform:
      translateY(0)
      translateZ(0)
      scale(1)
      rotateX(0)
      rotateZ(0);
    filter: blur(0);
  }
}

@keyframes boomV3EchoOne {
  0%, 56% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  64% {
    opacity: 0.48;
  }

  82% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.42);
  }

  100% {
    opacity: 0;
  }
}

@keyframes boomV3EchoTwo {
  0%, 61% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1);
  }

  70% {
    opacity: 0.28;
  }

  92% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(1.72);
  }

  100% {
    opacity: 0;
  }
}

@keyframes boomV3Shockwave {
  0% {
    opacity: 0.9;
    transform: scale(0.15);
  }

  100% {
    opacity: 0;
    transform: scale(9);
  }
}

@keyframes boomV3Particle {
  0% {
    opacity: 0;
    transform:
      translate(-50%, -50%)
      scale(0.1)
      rotate(0);
  }

  14% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      translate(
        calc(-50% + var(--x)),
        calc(-50% + var(--y))
      )
      scale(1.25)
      rotate(var(--r));
  }
}

@keyframes boomV3Streak {
  0% {
    opacity: 0;
    transform:
      rotate(var(--angle))
      translateX(35px)
      scaleX(0);
  }

  22% {
    opacity: 1;
  }

  100% {
    opacity: 0;
    transform:
      rotate(var(--angle))
      translateX(360px)
      scaleX(1);
  }
}

@keyframes boomV3CenterExit {
  0%, 78% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }

  100% {
    opacity: 0;
    transform: scale(3.2);
    filter: blur(15px);
  }
}

@keyframes boomV3Flash {
  0%, 12% {
    opacity: 0;
  }

  18% {
    opacity: 1;
  }

  23% {
    opacity: 0;
  }

  46% {
    opacity: 0;
  }

  53% {
    opacity: 0.28;
  }

  57% {
    opacity: 0;
  }

  89% {
    opacity: 0;
  }

  100% {
    opacity: 0.85;
  }
}

@keyframes boomV3ArrivalFlash {
  0% {
    opacity: 1;
  }

  22% {
    opacity: 0.72;
  }

  100% {
    opacity: 0;
  }
}

@keyframes boomV3ArrivalPage {
  0% {
    opacity: 0;
    transform: scale(1.055);
    filter: blur(9px);
  }

  68% {
    opacity: 1;
    transform: scale(0.995);
    filter: blur(0);
  }

  100% {
    opacity: 1;
    transform: scale(1);
    filter: blur(0);
  }
}

/* ===== móvil ===== */

@media (max-width: 480px) {
  .boom-v3-center {
    min-height: 300px;
  }

  .boom-v3-symbol {
    top: 40%;
  }

  .boom-v3-word,
  .boom-v3-echo {
    top: 58%;
  }

  .boom-v3-letter,
  .boom-v3-echo {
    font-size: clamp(59px, 20vw, 94px);
  }
}

/* ===== accesibilidad ===== */

@media (prefers-reduced-motion: reduce) {
  .boom-v3-overlay,
  .boom-v3-overlay *,
  html.boom-v3-arrival::before,
  html.boom-v3-arrival body {
    animation: none !important;
  }
}