/* =======================================================================
   Palco do hero — anel de comunidades girando (CSS do site) + vídeo do app.
   O anel é 100% CSS: nada disso está dentro do vídeo.
   Só animamos rotate/scale/opacity, que rodam na GPU e não causam reflow.
   ======================================================================= */

.stage {
    position: relative;
    width: min(100%, 980px);
    margin-inline: auto;
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    /* Sem isolation aqui de propósito: o mix-blend-mode do vídeo precisa
       enxergar o fundo do hero para o preto virar transparente. */
}

/* ---------- Anel giratório (atrás do vídeo) ---------- */
.stage__orbit {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 0;
    width: 108%;
    aspect-ratio: 1;
    translate: -50% -50%;
    pointer-events: none;
    container-type: inline-size;
}

/* Anéis, brilho e varredura são elipses na mesma proporção da órbita
   (rx 52 / ry 27), para o conjunto ler como um só círculo em perspectiva. */
/**
 * DESEMPENHO: nada de `filter: blur()` aqui. Um blur animado obriga o
 * navegador a refazer o desfoque a cada quadro — junto com o vídeo em
 * mix-blend-mode isso derrubava a página para 1 FPS. O degradê radial já
 * entrega o mesmo brilho difuso de graça, e animamos só a opacidade.
 */
.stage__glow {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 110%;
    height: 68%;
    translate: -50% -50%;
    border-radius: 50%;
    background: radial-gradient(
        ellipse at center,
        rgba(124, 58, 237, .45) 0%,
        rgba(91, 60, 220, .28) 32%,
        rgba(56, 189, 248, .10) 55%,
        transparent 72%
    );
    animation: glowPulse 7s ease-in-out infinite;
    will-change: opacity;
}

@keyframes glowPulse {
    0%, 100% { opacity: .6; }
    50%      { opacity: 1; }
}

.stage__ring {
    position: absolute;
    top: 50%;
    left: 50%;
    border-radius: 50%;
    translate: -50% -50%;
    border: 1px solid rgba(139, 122, 255, .35);
}
.stage__ring--1 { width: 104%; height: 54%; }
.stage__ring--2 {
    width: 84%; height: 44%;
    border-color: rgba(139, 122, 255, .22);
    border-style: dashed;
}
.stage__ring--3 {
    width: 64%; height: 33%;
    border-color: rgba(18, 226, 176, .18);
}

/* Varredura de luz correndo pelo anel externo. */
.stage__sweep {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 104%;
    height: 54%;
    translate: -50% -50%;
    border-radius: 50%;
    background: conic-gradient(
        from 0deg,
        transparent 0deg 300deg,
        rgba(18, 226, 176, .55) 345deg,
        rgba(160, 120, 255, .8) 358deg,
        transparent 360deg
    );
    /* ellipse (não circle): acompanha a caixa achatada e vira um aro fino. */
    mask: radial-gradient(ellipse, transparent 0 49%, #000 49.3% 50.3%, transparent 50.6%);
    animation: spin 12s linear infinite;
}

@keyframes spin {
    from { rotate: 0deg; }
    to   { rotate: 360deg; }
}

/* ---------- Comunidades orbitando ---------- */
.orbit {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

/**
 * Órbita ELÍPTICA (um círculo visto em perspectiva).
 *
 * Um círculo de verdade em volta de um vídeo 16:9 seria altíssimo — jogaria
 * os chips de cima e de baixo para fora do hero. A elipse é mais larga que
 * alta: os chips passam ao lado dos celulares em vez de por cima deles.
 *
 * Em vez de girar o contêiner (o que entortaria a elipse), cada chip percorre
 * o mesmo caminho e os animation-delay negativos os distribuem pela volta.
 * Bônus: sem rotação, o texto nunca fica de cabeça para baixo.
 */
.orbit__slot {
    position: absolute;
    top: 50%;
    left: 50%;
    animation: orbitPath 44s linear infinite;
    /* Cada chip ganha a própria camada: o navegador só reposiciona, não
       repinta — e nada disso sujeita o vídeo a um novo blend. */
    will-change: transform;
}

.orbit__slot--2 { animation-delay:  -5.5s; }
.orbit__slot--3 { animation-delay: -11.0s; }
.orbit__slot--4 { animation-delay: -16.5s; }
.orbit__slot--5 { animation-delay: -22.0s; }
.orbit__slot--6 { animation-delay: -27.5s; }
.orbit__slot--7 { animation-delay: -33.0s; }
.orbit__slot--8 { animation-delay: -38.5s; }

/**
 * Raios em cqw (1cqw = 1% da largura do anel): rx 44, ry 25.
 *
 * rx tem um teto prático: passando de ~45 os chips das 3h e das 9h saem da
 * tela em viewport estreita (o hero tem overflow hidden e eles somem).
 */
@keyframes orbitPath {
    0%      { transform: translate(0cqw,      -25cqw); }
    8.333%  { transform: translate(22cqw,   -21.65cqw); }
    16.667% { transform: translate(38.1cqw,  -12.5cqw); }
    25%     { transform: translate(44cqw,       0cqw); }
    33.333% { transform: translate(38.1cqw,   12.5cqw); }
    41.667% { transform: translate(22cqw,    21.65cqw); }
    50%     { transform: translate(0cqw,       25cqw); }
    58.333% { transform: translate(-22cqw,   21.65cqw); }
    66.667% { transform: translate(-38.1cqw,  12.5cqw); }
    75%     { transform: translate(-44cqw,      0cqw); }
    83.333% { transform: translate(-38.1cqw, -12.5cqw); }
    91.667% { transform: translate(-22cqw,  -21.65cqw); }
    100%    { transform: translate(0cqw,      -25cqw); }
}

.orbit__chip {
    display: flex;
    align-items: center;
    gap: 7px;
    translate: -50% -50%;
    padding: 6px 14px 6px 6px;
    border-radius: 999px;
    white-space: nowrap;
    font-size: .82rem;
    font-weight: 700;
    color: #fff;
    background: rgba(26, 16, 70, .92);
    border: 1px solid rgba(255, 255, 255, .16);
    box-shadow: 0 8px 24px rgba(0, 0, 0, .45);
    /* Sem backdrop-filter de propósito: ler + borrar o fundo em 8 elementos
       que se movem embaixo de um vídeo com blend custava caro demais.
       Um fundo quase opaco dá o mesmo efeito de vidro por nada. */
    animation: chipPulse 5s ease-in-out infinite;
}

.orbit__avatar {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--a1, #7b5cf0), var(--a2, #2a1a63));
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .18);
}

.orbit__chip--anime  { --a1: #f06a9b; --a2: #6a2ea6; }
.orbit__chip--kpop   { --a1: #5b8cff; --a2: #2d1b69; }
.orbit__chip--gaming { --a1: #b06bff; --a2: #2b1065; }
.orbit__chip--art    { --a1: #2be0b6; --a2: #14532d; }
.orbit__chip--cats   { --a1: #f4a259; --a2: #7a3b1f; }
.orbit__chip--movies { --a1: #4fc3f7; --a2: #1e3a8a; }
.orbit__chip--music  { --a1: #ff7ab8; --a2: #7b3fe4; }
.orbit__chip--books  { --a1: #ffd166; --a2: #9a6b12; }

/* Cada chip "respira" num tempo diferente. */
.orbit__slot--2 .orbit__chip { animation-delay: -.6s; }
.orbit__slot--3 .orbit__chip { animation-delay: -1.2s; }
.orbit__slot--4 .orbit__chip { animation-delay: -1.8s; }
.orbit__slot--5 .orbit__chip { animation-delay: -2.4s; }
.orbit__slot--6 .orbit__chip { animation-delay: -3.0s; }
.orbit__slot--7 .orbit__chip { animation-delay: -3.6s; }
.orbit__slot--8 .orbit__chip { animation-delay: -4.2s; }

@keyframes chipPulse {
    0%, 100% { box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 0 rgba(18, 226, 176, .0); }
    50%      { box-shadow: 0 8px 24px rgba(0, 0, 0, .45), 0 0 0 6px rgba(18, 226, 176, .12); }
}

/* ---------- Vídeo ---------- */
.stage__video {
    position: relative;
    z-index: 1;
    /* Um pouco menor que o palco: abre respiro para o anel aparecer nas
       laterais sem que os chips fiquem colados na borda do vídeo. */
    width: 88%;
    height: auto;
    display: block;
    /* O vídeo tem fundo preto puro: no modo screen o preto vira transparente
       e o anel continua visível por trás dos celulares.
       Esta é a única operação cara que sobrou aqui — e é ela que sustenta o
       efeito, então o resto do palco foi enxugado para pagar por ela.
       Sem máscara e sem animação de translate: as bordas já somem sozinhas
       no blend, e mover uma camada mesclada repinta o palco inteiro. */
    mix-blend-mode: screen;
}

/* ---------- Responsivo ---------- */
@media (max-width: 1000px) {
    /* Sem folga lateral sobrando, a elipse encolhe para os chips das 3h
       e das 9h não encostarem na borda da tela. */
    .stage__orbit { width: 96%; }
    .orbit__chip { font-size: .72rem; padding: 4px 10px 4px 4px; gap: 5px; }
    .orbit__avatar { width: 20px; height: 20px; }
}

@media (max-width: 640px) {
    /* Em tela pequena o anel roubaria espaço do vídeo: ficam só 4 chips. */
    .stage__orbit { width: 88%; }
    .orbit__slot--2,
    .orbit__slot--4,
    .orbit__slot--6,
    .orbit__slot--8 { display: none; }
    .orbit__chip { font-size: .68rem; }
    .stage__ring--3 { display: none; }
    /* Cada pixel conta: o vídeo ocupa a largura toda do palco. */
    .stage__video { width: 100%; }
}

/* ---------- Botão de pausa ---------- */
.stage__toggle {
    position: absolute;
    right: 2%;
    bottom: 4%;
    z-index: 2;
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
    background: rgba(12, 6, 38, .55);
    color: #fff;
    cursor: pointer;
    opacity: .35;
    backdrop-filter: blur(6px);
    transition: opacity .2s ease, background-color .2s ease, scale .2s ease;
}
.stage:hover .stage__toggle,
.stage__toggle:hover,
.stage__toggle:focus-visible {
    opacity: 1;
    background: rgba(12, 6, 38, .85);
}
.stage__toggle:hover { scale: 1.08; }
.stage__toggle svg { width: 16px; height: 16px; grid-area: 1 / 1; }

/* Ícone acompanha o estado: ▮▮ tocando, ▶ pausado. */
.stage__toggle-play { display: none; }
.stage.is-paused .stage__toggle-play { display: block; }
.stage.is-paused .stage__toggle-pause { display: none; }
.stage.is-paused .stage__toggle { opacity: 1; }

/**
 * Pausa tudo de uma vez: anel, chips e flutuação. O vídeo é pausado pelo
 * app.js (elemento de mídia não obedece a animation-play-state).
 */
.stage.is-paused .stage__glow,
.stage.is-paused .stage__ring,
.stage.is-paused .stage__sweep,
.stage.is-paused .orbit__slot,
.stage.is-paused .orbit__chip {
    animation-play-state: paused;
}