/* ========================================================================== CARROSSEL EM ANEL 3D — prefixo ring- Oito cards de foto dispostos sobre um cilindro visto de frente. O anel gira sozinho, no arrasto, nas setas e nos dois botões, encaixando no card da frente. A metade de trás não aparece; as laterais escurecem. Tokens usados: --display --sans tipografia do projeto --ease curva única do projeto --accent anel de foco do palco e hover dos botões --dark véu de profundidade (cortina sólida sobre o card) --dark-rgb gradiente da legenda dentro da foto --dark-2 fundo do card enquanto a foto não pintou --light texto DENTRO da foto — ilha escura, não escopo de tom --radius-media canto do card --radius-pill disco dos botões e pílula da categoria --fg --fg-2 --fg-muted legenda, contador e ícone dos botões --rule-2 borda dos botões O respiro da dobra (--sec-gap) e a coluna (--pad, --max) chegam pelas primitivas .sec-pad e .wrap; nenhuma regra deste arquivo os lê. TRÊS DECISÕES QUE EXPLICAM O ARQUIVO INTEIRO: 1. A GEOMETRIA É UMA CONTA, NÃO UMA TABELA. Cada card só declara --ring-i (a sua casa no anel). O passo (--ring-step = 360/N) e o raio (--ring-radius) são escritos pelo script a partir da largura REAL do card. Seis, oito ou dez cards fecham o anel sozinhos, e mudar --ring-card não pede tocar em mais nada. 2. O FRENTE É O PLANO DA PERSPECTIVA. A cena inteira recua --ring-radius antes de girar, então o card da frente pousa exatamente em z=0: escala 1, sem ampliação e sem o borrão que texto ampliado em 3D carrega. Quem recua é a cena, e não cada card — a conta do anel exige que todos partam do mesmo centro. 3. O RECORTE É DA SEÇÃO. overflow no palco ou na cena achataria o 3D (grouping property: overflow ≠ visible força transform-style:flat). Aqui o palco tem overflow visível e o anel sangra; quem corta é o overflow:hidden do .ring, que está FORA do contexto de perspectiva. ========================================================================== */ .ring{ /* Largura do card. O anel inteiro é dimensionado a partir daqui. */ --ring-card:clamp(180px,17vw,260px); /* Retrato 3:4 — a mesma proporção dos placeholders 900×1200. */ --ring-h:calc(var(--ring-card) * 4 / 3); /* Respiro vertical entre o card mais alto e a borda do palco. Existe para o anel de foco do palco não encostar na foto. */ --ring-air:clamp(16px,2.4vw,34px); /* Profundidade da câmera, em px. Menor = mais dramático. Abaixo de ~900 o card da frente começa a distorcer nas quinas. */ --ring-perspective:1400px; /* FOLGA DO ANEL, sem unidade. O raio de um polígono regular de N lados de largura W é (W/2)/tan(pi/N) — nesse raio os cards fecham como um tambor, encostados um no outro. A folga afasta o card do centro na proporção dada: 1.12 abre um vão de 12% da largura entre vizinhos, o suficiente para o olho ler CARDS EM VOLTA de um eixo, e não uma parede curva. Quem lê e aplica é o script. */ --ring-slack:1.12; /* Velocidade da rotação livre, em GRAUS POR SEGUNDO. A conta do script é por tempo, não por quadro: 60Hz e 120Hz giram igual. 0 deixa o anel parado, girando só no gesto. */ --ring-speed:6; /* Escritos pelo script. Os valores aqui são o estado sem JS: o anel nasce desenhado e legível, com o card 0 na frente. */ --ring-step:45deg; --ring-radius:340px; position:relative; /* Único recorte do componente, e ele é da SEÇÃO — ver a decisão 3 do topo. O anel é mais largo que a coluna e, no celular, mais largo que a janela. */ overflow:hidden; } /* ---------------------------------------------------------------- cabeçalho */ /* Só o ajuste de largura: o resto — inclusive a centralização dos filhos vem do .sec-head do core (desde 2026-09-29) — vem da primitiva. */ .ring-head{--head-max:700px} /* ---------------------------------------------------------------- palco */ /* Irmão do .wrap e filho direto da seção: nasce com a largura da página. O max-width existe só para o anel de foco: sem ele, o retângulo de :focus-visible atravessaria a tela inteira para cercar um anel de 620px. Dois raios é a medida certa, e não dois raios mais um card: o card mais externo que ainda aparece está a ~60° e a perspectiva já o puxou para dentro — medido, 311px de meia-largura contra os 331px do raio. */ .ring-stage{ position:relative; width:100%; max-width:calc(2 * var(--ring-radius)); margin-inline:auto; height:calc(var(--ring-h) + 2 * var(--ring-air)); margin-block:clamp(34px,5vh,56px); perspective:var(--ring-perspective); /* O gesto horizontal é do anel; o vertical continua sendo da página. */ touch-action:pan-y; /* Arrastar sobre foto e legenda selecionaria as duas. */ user-select:none;-webkit-user-select:none; cursor:grab; } .ring-stage.is-dragging{cursor:grabbing} /* O anel de foco do core desenha 3px PARA FORA; aqui ele cairia na borda da seção em tela estreita. Desenhado para dentro, cerca o palco inteiro — que é a verdade do widget: quem tem o foco gira o anel, não um card. */ .ring-stage:focus-visible{outline:2px solid var(--accent);outline-offset:-2px} /* O reveal do core termina em filter:blur(0), que NÃO é filter:none — fica uma superfície de composição permanente no elemento. Medido aqui, sobre o palco, custa 1% do quadro e não achata nada: o palco tem perspective, não preserve-3d. O motivo de tirar mesmo assim é outro: filter é uma das grouping properties que ACHATAM 3D, e o mesmo blur(0px) posto no