/* ══════════════════════════════════════════════════════════════════
   Abertura NoPlay — versão EMBED (overlay sobre o site principal).
   Mesma geometria da página standalone (abertura/styles.css), com IDs
   prefixados ab- e camada fixa por cima de tudo. Item 72.
   ══════════════════════════════════════════════════════════════════ */

#ab-overlay {
  position: fixed;
  inset: 0;
  z-index: 5000; /* acima dos modais do site (z 2000) */
  background: #1D2041 url('assets/fundo.png') center / cover no-repeat;
  opacity: 1;
}
#ab-overlay.ab-out {
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

#ab-stage {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 1920px;
  height: 1080px;
  margin-left: -960px;
  margin-top: -540px;
  transform: scale(1);
  transform-origin: center center;
}

#ab-letra-n {
  position: absolute;
  left: 281px;
  top: -19px;
  width: 1243px;
  height: 1080px;
  z-index: 10;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
  will-change: clip-path, transform;
}

#ab-grupo {
  position: absolute;
  inset: 0;
  z-index: 20;
  transform-origin: 0 0;
  will-change: transform;
}

#ab-circulo {
  position: absolute;
  left: 405px;
  top: -16px;
  width: 994px;
  height: 1080px;
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity;
}

#ab-play-unit {
  position: absolute;
  left: 607px;
  top: -15px;
  width: 933px;
  height: 1080px;
  transform-origin: 50% 50%;
  opacity: 0;
  will-change: transform, opacity;
}

#ab-play-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: url('assets/play-face-mask.png?v=3');
  mask-image: url('assets/play-face-mask.png?v=3');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  opacity: 0;
}

#ab-play-sheen {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg,
    transparent 42%, rgba(255,255,255,0.45) 50%, transparent 58%);
  background-size: 260% 100%;
  background-position-x: 130%;
  background-repeat: no-repeat;
  -webkit-mask-image: url('assets/play-frame.png?v=3');
  mask-image: url('assets/play-frame.png?v=3');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

#ab-play-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Item 140: arte oficial (recorte da linha "by" de Tipografia-Play.png);
   proporção 1096×165 → 24px de altura mantém a escala do texto antigo */
#ab-texto-by {
  position: absolute;
  left: 954px;
  top: 952px;
  transform: translateX(-50%);
  z-index: 50;
  height: 24px;
  width: auto;
  opacity: 0;
}

#ab-lockup {
  position: absolute;
  left: 536px;
  top: 588px;
  z-index: 50;
  opacity: 0;
  will-change: transform, opacity;
}
/* Item 140: arte oficial aparada (1263×685); 320px de largura deixa o
   "Play" na mesma escala dos 132px de fonte que a versão desenhada tinha */
#ab-lockup-art {
  display: block;
  width: 320px;
  height: auto;
}

/* Item 77: túnel de plays — camadas concêntricas centradas no play do
   estado final (stage 1258.4, 578.5), cada uma menor que a anterior
   (--tl-s: 0.5 / 0.25 / 0.125) e com um vídeo diferente mascarado pela
   face. O transform de cada camada é FIXO — o crescimento aparente vem
   do zoom do overlay (origem no centro do play); o JS só dirige opacity
   (aparece ao se aproximar, desvanece ao "passar" pela câmera). */
#ab-tunnel {
  position: absolute;
  inset: 0;
  z-index: 5;   /* abaixo de tudo (n z10, grupo z20), acima do fundo */
}
.ab-tlayer {
  position: absolute;
  left: 1258.4px;
  top: 578.5px;
  width: 933px;
  height: 1080px;
  transform: translate(-50%, -50%) scale(var(--tl-s));
  opacity: 0;
  will-change: opacity;
  pointer-events: none;
}
.ab-tlayer video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-mask-image: url('assets/play-face-mask.png?v=3');
  mask-image: url('assets/play-face-mask.png?v=3');
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.ab-tlayer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* Item 80: fatias da desintegração do n/o (criadas via JS no arm) */
.ab-frag {
  pointer-events: none;
  will-change: transform, opacity;
}

/* Item 74: cue de scroll — dois chevrons pulsando embaixo, aparecem
   quando a logo termina de montar (classe ab-cue-on via JS) e somem
   assim que o usuário começa a rolar (prog > 0.12) */
#ab-cue {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  opacity: 0;
  transition: opacity 0.5s;
  pointer-events: none;
}
#ab-cue.ab-cue-on { opacity: 1; }
#ab-cue span {
  width: 14px;
  height: 14px;
  border-right: 2px solid rgba(247,247,248,0.7);
  border-bottom: 2px solid rgba(247,247,248,0.7);
  transform: rotate(45deg);
  animation: ab-cue-pulse 1.6s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
#ab-cue span:last-child { animation-delay: 0.25s; opacity: 0.5; }
@keyframes ab-cue-pulse {
  0%, 100% { transform: rotate(45deg) translate(0, 0); opacity: 0.9; }
  50%      { transform: rotate(45deg) translate(4px, 4px); opacity: 0.35; }
}
@media (prefers-reduced-motion: reduce) {
  #ab-cue span { animation: none; }
}

/* botão discreto para pular a abertura (aparece após ~1.2s via JS) */
#ab-skip {
  position: absolute;
  right: 28px;
  bottom: 24px;
  padding: 10px 18px;
  border: 1px solid rgba(247,247,248,0.35);
  border-radius: 100px;
  background: rgba(29,32,65,0.5);
  color: rgba(247,247,248,0.85);
  font-family: 'Source Sans Pro', system-ui, sans-serif;
  font-size: 14px;
  cursor: pointer;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s, border-color 0.2s, color 0.2s;
}
#ab-skip.ab-skip-on { opacity: 1; pointer-events: auto; }
#ab-skip:hover, #ab-skip:focus-visible {
  border-color: rgba(247,247,248,0.7);
  color: #FFFFFF;
}
#ab-skip:focus-visible { outline: 2px solid #3ECFE8; outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
  #ab-letra-n { clip-path: none; -webkit-clip-path: none; }
  #ab-grupo   { transform: translate(521.4px, 219.8px) scale(0.684); }
  #ab-circulo, #ab-play-unit, #ab-play-video, #ab-lockup { opacity: 1 !important; }
  #ab-texto-by { opacity: 0 !important; }
}