/* ---- animação de abertura (compartilhada por host e viewer) ---- */

@keyframes logo-in {
  0% {
    opacity: 0;
    transform: scale(0.35) rotate(-140deg);
    filter: invert(1) blur(12px);
  }
  55% {
    opacity: 1;
    transform: scale(1.14) rotate(12deg);
    filter: invert(1) blur(0) drop-shadow(0 0 30px rgb(120 110 255 / 0.95));
  }
  78% {
    transform: scale(0.95) rotate(-4deg);
  }
  100% {
    opacity: 1;
    transform: scale(1) rotate(0);
    filter: invert(1) drop-shadow(0 0 12px rgb(88 101 242 / 0.55));
  }
}

/* letreiro de neon "acendendo" com falhas */
@keyframes neon-on {
  0% {
    opacity: 0;
    text-shadow: none;
  }
  10%,
  16%,
  40%,
  46% {
    opacity: 0.2;
    text-shadow: none;
  }
  13%,
  43%,
  100% {
    opacity: 1;
    text-shadow:
      0 0 10px rgb(88 101 242 / 0.85),
      0 0 30px rgb(88 101 242 / 0.5),
      0 0 70px rgb(170 120 255 / 0.3);
  }
}

@keyframes glow-pulse {
  50% {
    filter: invert(1) drop-shadow(0 0 22px rgb(120 110 255 / 0.85));
  }
}

@keyframes rise-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes card-in {
  from {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
  }
}

/* ---- splash em tela cheia (host) ---- */
.splash {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 42%, #1b1e2b 0%, #07080b 72%);
  transition:
    opacity 0.8s ease,
    visibility 0.8s;
}
.splash.leaving {
  opacity: 0;
  visibility: hidden;
}
.splash-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
}
.splash-logo {
  height: 130px;
  width: auto;
  animation:
    logo-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both,
    glow-pulse 1.6s ease-in-out 1.1s infinite;
  user-select: none;
  -webkit-user-drag: none;
}
.splash-name {
  font-family: 'Monoton', system-ui, sans-serif;
  font-size: clamp(26px, 6vw, 46px);
  letter-spacing: 0.05em;
  color: #f2f3ff;
  white-space: nowrap;
  animation: neon-on 1.3s linear 0.5s both;
}

/* ---- abertura do viewer: a marca anima, depois o cartão aparece ---- */
.overlay.intro .brand-logo {
  animation: logo-in 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.overlay.intro .brand-name {
  animation: neon-on 1.3s linear 0.5s both;
}
.overlay.intro .card {
  animation: card-in 0.6s ease 1.4s both;
}
.overlay.intro .card > :not(.brand) {
  animation: rise-in 0.5s ease 1.6s both;
}

/* botão ▶ Assistir e fade para a stream */
.play {
  font-size: 18px;
  font-weight: 600;
  padding: 12px 34px;
  border-radius: 999px;
  box-shadow: 0 0 24px rgb(88 101 242 / 0.6);
  animation: rise-in 0.4s ease both;
}
.overlay {
  transition: opacity 0.9s ease;
}
.overlay.leaving {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .splash-logo,
  .splash-name,
  .overlay.intro .brand-logo,
  .overlay.intro .brand-name,
  .overlay.intro .card,
  .overlay.intro .card > :not(.brand),
  .play {
    animation: none !important;
  }
}