/* ================= Abertura: gabinete de arcade (Flow Games) ================= */

.intro {
  position: fixed;
  inset: 0;
  height: 100vh;
  height: 100dvh;   /* acompanha a barra de endereço no celular */
  z-index: 60;
  display: grid;
  place-items: center;
  overflow: hidden;
  isolation: isolate;
  perspective: 1100px;
  background:
    radial-gradient(1100px 620px at 50% 16%, #1b1147 0%, transparent 62%),
    linear-gradient(180deg, #07060f 0%, #0a0816 52%, #04030a 100%);
}

/* --- cena --- */
.arcade {
  position: relative;
  /*
   * O gabinete inteiro escala a partir desta unidade. Ele mede 112u de
   * largura por ~149u de altura, então os fatores garantem que caiba
   * inteiro em qualquer tela — inclusive celular deitado, onde sobra
   * pouca altura.
   */
  --u: clamp(1.4px, min(0.63vh, 0.80vw), 4.6px);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: cab-in 1.2s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes cab-in {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
  to   { opacity: 1; transform: none; }
}

/* piso em perspectiva, ancorado na base da tela */
.arcade-floor {
  position: fixed;
  left: 50%;
  bottom: 0;
  z-index: -2;
  width: 320vw;
  height: 46vh;
  transform: translateX(-50%) rotateX(78deg);
  transform-origin: 50% 100%;
  background:
    repeating-linear-gradient(90deg, #a78bfa4d 0 2px, transparent 2px 84px),
    repeating-linear-gradient(0deg,  #22d3ee59 0 2px, transparent 2px 84px);
  mask-image: linear-gradient(0deg, #000 0%, #000c 42%, transparent 88%);
  -webkit-mask-image: linear-gradient(0deg, #000 0%, #000c 42%, transparent 88%);
  animation: floor-run 6s linear infinite;
}
@keyframes floor-run {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 84px; }
}

/* linha de horizonte, logo acima do piso */
.arcade-floor::before {
  content: '';
  position: absolute;
  inset: auto 0 100% 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, #22d3ee66 35%, #8b5cf666 65%, transparent);
}

/* brilho ambiente atrás da máquina */
.arcade-halo {
  position: fixed;
  top: 50%;
  left: 50%;
  z-index: -1;
  transform: translate(-50%, -50%);
  width: min(78vh, 92vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, #8b5cf63d 0%, #22d3ee1a 45%, transparent 70%);
  filter: blur(24px);
  animation: halo 7s ease-in-out infinite;
}
@keyframes halo {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    opacity: .8; }
  50%      { transform: translate(-50%, -50%) scale(1.12); opacity: 1; }
}

/* --- gabinete --- */
.cabinet {
  position: relative;
  width: calc(var(--u) * 112);
  padding: calc(var(--u) * 4);
  border-radius: calc(var(--u) * 10) calc(var(--u) * 10) calc(var(--u) * 3) calc(var(--u) * 3);
  background: linear-gradient(180deg, #241d47 0%, #17122e 42%, #100d20 100%);
  border: 1px solid #3b3270;
  box-shadow:
    0 0 0 1px #0006 inset,
    calc(var(--u) * 2) 0 calc(var(--u) * 6) #0008 inset,
    0 calc(var(--u) * 14) calc(var(--u) * 26) #000a,
    0 0 calc(var(--u) * 22) #8b5cf62e;
}

/* letreiro iluminado */
.cab-marquee {
  border-radius: calc(var(--u) * 6) calc(var(--u) * 6) calc(var(--u) * 2) calc(var(--u) * 2);
  padding: calc(var(--u) * 5) calc(var(--u) * 3);
  text-align: center;
  background: linear-gradient(180deg, #2b2159, #1a1436);
  border: 1px solid #4b3f8f;
  box-shadow: 0 0 calc(var(--u) * 12) #8b5cf655, 0 0 calc(var(--u) * 4) #22d3ee33 inset;
}
.marquee-text {
  margin: 0;
  font-size: calc(var(--u) * 10);
  font-weight: 800;
  letter-spacing: calc(var(--u) * 1.1);
  line-height: 1;
  color: #f4f1ff;
  text-shadow:
    0 0 calc(var(--u) * 2) #fff,
    0 0 calc(var(--u) * 5) #a78bfa,
    0 0 calc(var(--u) * 11) #8b5cf6,
    0 0 calc(var(--u) * 20) #6d28d9;
  animation: neon 4.5s ease-in-out infinite;
}
.marquee-text span {
  margin-left: calc(var(--u) * 2.4);
  color: #b7f3ff;
  text-shadow:
    0 0 calc(var(--u) * 2) #fff,
    0 0 calc(var(--u) * 5) #67e8f9,
    0 0 calc(var(--u) * 11) #22d3ee,
    0 0 calc(var(--u) * 20) #0891b2;
}
@keyframes neon {
  0%, 46%, 50%, 62%, 100% { opacity: 1; }
  48% { opacity: .55; }
  60% { opacity: .75; }
}

/* tela CRT */
.cab-screen {
  margin: calc(var(--u) * 4) calc(var(--u) * 2) calc(var(--u) * 3);
  padding: calc(var(--u) * 3);
  border-radius: calc(var(--u) * 4);
  background: linear-gradient(180deg, #0c0a18, #05040c);
  border: 1px solid #322a63;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) #000a inset;
}
.crt {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: calc(var(--u) * 3);
  overflow: hidden;
  background: radial-gradient(120% 100% at 50% 30%, #14224a 0%, #070615 70%);
  box-shadow: 0 0 calc(var(--u) * 10) #22d3ee33 inset;
}

/* grade retrô correndo dentro da tela */
.crt-grid {
  position: absolute;
  inset: 44% -30% -18%;
  background:
    repeating-linear-gradient(90deg, #22d3ee55 0 1px, transparent 1px 42px),
    repeating-linear-gradient(0deg,  #8b5cf655 0 1px, transparent 1px 34px);
  transform: rotateX(72deg);
  transform-origin: 50% 0;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 85%);
  animation: crt-run 3.4s linear infinite;
}
@keyframes crt-run {
  from { background-position: 0 0, 0 0; }
  to   { background-position: 0 0, 0 34px; }
}

/* estrelas piscando */
.crt-stars {
  position: absolute;
  inset: 0 0 56% 0;
  background-image:
    radial-gradient(1.6px 1.6px at 18% 30%, #ffffff99, transparent),
    radial-gradient(1.6px 1.6px at 72% 18%, #b7f3ffcc, transparent),
    radial-gradient(1.6px 1.6px at 44% 58%, #d8b4fecc, transparent),
    radial-gradient(1.6px 1.6px at 88% 44%, #ffffff88, transparent),
    radial-gradient(1.6px 1.6px at 30% 72%, #67e8f9aa, transparent);
  animation: twinkle 3s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { opacity: .45; }
  50%      { opacity: 1; }
}

.crt-coin {
  position: absolute;
  left: 0;
  right: 0;
  top: 28%;
  text-align: center;
  font-size: calc(var(--u) * 5.4);
  font-weight: 800;
  letter-spacing: calc(var(--u) * .9);
  color: #ffe680;
  text-shadow: 0 0 calc(var(--u) * 4) #f59e0b, 0 0 calc(var(--u) * 10) #b45309;
  animation: blink 1.6s steps(1, end) infinite;
}
@keyframes blink {
  0%, 55%   { opacity: 1; }
  56%, 100% { opacity: 0; }
}

.crt-scanlines {
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(180deg, #0000 0 2px, #00000059 2px 4px);
}
.crt-glare {
  position: absolute;
  inset: 0;
  background: linear-gradient(122deg, #ffffff14 0%, transparent 38%, transparent 62%, #ffffff0a 100%);
}

/* painel de controle */
.cab-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 4);
  margin: 0 calc(var(--u) * 2);
  padding: calc(var(--u) * 4) calc(var(--u) * 6);
  border-radius: calc(var(--u) * 3);
  background: linear-gradient(180deg, #2a2252, #1a1536);
  border: 1px solid #3f3579;
  box-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 5) #0007;
}
.stick {
  position: relative;
  width: calc(var(--u) * 10);
  height: calc(var(--u) * 10);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #4b4288, #221c46);
  box-shadow: 0 0 0 1px #5a4fa5 inset;
  display: grid;
  place-items: center;
}
.stick i {
  display: block;
  width: calc(var(--u) * 5);
  height: calc(var(--u) * 5);
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff6b8a, #c0264c);
  box-shadow: 0 0 calc(var(--u) * 5) #f43f5e88;
  animation: stick-move 4.2s ease-in-out infinite;
}
@keyframes stick-move {
  0%, 100% { transform: translate(0, 0); }
  25%      { transform: translate(calc(var(--u) * 1.4), calc(var(--u) * -.8)); }
  55%      { transform: translate(calc(var(--u) * -1.3), calc(var(--u) * .7)); }
  78%      { transform: translate(calc(var(--u) * .6), calc(var(--u) * 1)); }
}

.pads {
  display: grid;
  grid-template-columns: repeat(3, calc(var(--u) * 6));
  gap: calc(var(--u) * 2.2);
}
.pads b {
  display: block;
  height: calc(var(--u) * 6);
  border-radius: 50%;
  box-shadow: 0 0 0 1px #ffffff22 inset, 0 calc(var(--u) * .8) 0 #0007;
  animation: pad-pulse 2.4s ease-in-out infinite;
}
.pads .p1 { background: radial-gradient(circle at 35% 30%, #67e8f9, #0e7490); animation-delay: 0s; }
.pads .p2 { background: radial-gradient(circle at 35% 30%, #c4b5fd, #6d28d9); animation-delay: .2s; }
.pads .p3 { background: radial-gradient(circle at 35% 30%, #fda4af, #be123c); animation-delay: .4s; }
.pads .p4 { background: radial-gradient(circle at 35% 30%, #fde68a, #b45309); animation-delay: .6s; }
.pads .p5 { background: radial-gradient(circle at 35% 30%, #86efac, #15803d); animation-delay: .8s; }
.pads .p6 { background: radial-gradient(circle at 35% 30%, #93c5fd, #1d4ed8); animation-delay: 1s; }
@keyframes pad-pulse {
  0%, 100% { filter: brightness(.85); }
  50%      { filter: brightness(1.25); }
}

/* base com a fenda da ficha */
.cab-base {
  margin: calc(var(--u) * 3) calc(var(--u) * 2) 0;
  height: calc(var(--u) * 11);
  border-radius: calc(var(--u) * 2);
  background: linear-gradient(180deg, #191430, #0d0a1c);
  border: 1px solid #322a63;
  display: grid;
  place-items: center;
}
.coin-slot {
  width: calc(var(--u) * 13);
  height: calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1);
  background: #05040c;
  box-shadow: 0 0 calc(var(--u) * 4) #22d3ee55, 0 0 0 1px #3b3270;
}

/* reflexo no chão — fora do fluxo, para o gabinete ficar centralizado */
.cabinet-reflection {
  position: absolute;
  top: calc(100% + var(--u) * 2);
  left: 50%;
  transform: translateX(-50%);
  width: calc(var(--u) * 128);
  height: calc(var(--u) * 16);
  border-radius: 50%;
  background: radial-gradient(ellipse at center, #8b5cf644 0%, #22d3ee1c 40%, transparent 72%);
  filter: blur(calc(var(--u) * 2));
}

@media (prefers-reduced-motion: reduce) {
  .arcade, .arcade-floor, .arcade-halo, .marquee-text, .crt-grid,
  .crt-stars, .crt-coin, .stick i, .pads b { animation: none; }
}