/* ── ELEMENTOS VIVOS STAUF · AXIS — CSS puro, sem JS, sem arquivo externo (a CSP dos sites só aceita imagem própria/data:)
   Depende de stauf-tokens.css. Só anima opacity, transform e background-position (sem recalcular layout), exceto o
   acordeão, que por natureza muda a largura dos cartões. prefers-reduced-motion desliga tudo.
   Origem de cada peça no board Stauf: 439 fenda · 562 foco com grão · 597 halo e risco · 583 prisma · vídeo odanielnr1 acordeão. */

/* 439 · fenda de luz que respira: ciclo medido de 1,61 s entre picos (meio ciclo por direção) */
@keyframes v-respira{from{opacity:.45}to{opacity:1}}
.v-fenda{position:relative}
.v-fenda::after{content:"";position:absolute;top:-2px;left:25%;right:25%;height:5px;pointer-events:none;
  background:radial-gradient(50% 50% at 50% 50%,color-mix(in srgb,var(--luz-quente) 70%,transparent),transparent 100%);
  animation:v-respira calc(var(--dur-respira) / 2) ease-in-out infinite alternate}

/* 562 · foco de luz macio que deriva devagar sobre o grão */
@keyframes v-deriva{from{transform:translate3d(0,0,0)}to{transform:translate3d(90px,48px,0)}}
.v-foco{position:relative;isolation:isolate}
.v-foco::before{content:"";position:absolute;z-index:-1;left:-12%;top:-30%;width:min(1100px,90vw);aspect-ratio:1;pointer-events:none;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--luz-foco) 20%,transparent),color-mix(in srgb,var(--luz-foco) 6%,transparent) 55%,transparent);
  animation:v-deriva var(--dur-deriva) ease-in-out infinite alternate}

/* 597 · anel de halo com um brilho pontual que gira */
@keyframes v-gira{to{transform:translate(-50%,-50%) rotate(1turn)}}
.v-halo{position:absolute;left:50.4%;top:55%;width:96%;aspect-ratio:1;border-radius:50%;pointer-events:none;
  transform:translate(-50%,-50%);border:1px solid color-mix(in srgb,var(--tinta-1) 9%,transparent);
  background:conic-gradient(from 0deg,transparent 0 80%,color-mix(in srgb,var(--luz-quente) 85%,transparent) 84%,transparent 88%);
  -webkit-mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px)); /* breker-ok: raw-color (máscara: só o alfa conta) */
          mask:radial-gradient(closest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px)); /* breker-ok: raw-color */
  animation:v-gira var(--dur-halo) linear infinite}

/* 597 · risco de luz que corre pelo eixo vertical (o fio do A) */
@keyframes v-risco{from{background-position:0 -160px}to{background-position:0 100%}}
.v-risco{position:absolute;left:50.4%;top:-70vh;bottom:11.7%;width:1px;pointer-events:none;
  background:linear-gradient(180deg,transparent,color-mix(in srgb,var(--luz-quente) 95%,transparent),transparent) no-repeat;
  background-size:1px 160px;animation:v-risco var(--dur-risco) cubic-bezier(.45,0,.55,1) infinite}

/* vídeo odanielnr1 · acordeão de cartões de vidro: abre em 220 ms (medido 200 a 233 ms) no hover ou no foco do teclado */
.v-acordeao{display:flex;gap:var(--e-1);height:288px}
.v-acordeao>*{position:relative;flex:1 1 0;min-width:0;overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end;
  gap:var(--e-1);padding:var(--e-3);border:1px solid var(--fio-1);outline-offset:-2px;
  background:linear-gradient(180deg,var(--vidro-3) 0%,var(--vidro-2) 38%,var(--vidro-1) 72%,var(--vidro-fundo) 100%);
  transition:flex-grow var(--dur-acordeao) var(--ez),border-color var(--dur-acordeao) var(--ez)}
.v-acordeao>*::before{content:"";position:absolute;inset:0 0 auto;height:62%;pointer-events:none;opacity:.55;
  background:radial-gradient(120% 90% at 30% 0%,color-mix(in srgb,var(--tinta-card,var(--vidro-brilho)) 34%,transparent),transparent 70%);
  transition:opacity var(--dur-acordeao) var(--ez)}
.v-acordeao:not(:hover):not(:focus-within)>:first-child,.v-acordeao>:hover,.v-acordeao>:focus-within,.v-acordeao>:focus{flex-grow:3.2;border-color:var(--fio-2)}
.v-acordeao:not(:hover):not(:focus-within)>:first-child::before,.v-acordeao>:hover::before,.v-acordeao>:focus::before{opacity:1}

/* 583 · raios de prisma: fundo estático (a referência é um JPEG); a imagem entra por --raios no site */
.v-prisma{position:relative;isolation:isolate}
.v-prisma::after{content:"";position:absolute;z-index:-1;inset:0 -8% 0 38%;pointer-events:none;opacity:.8;
  background:var(--raios) center/contain no-repeat}

@media (prefers-reduced-motion:reduce){
  .v-fenda::after,.v-foco::before,.v-halo,.v-risco{animation:none}
  .v-acordeao>*,.v-acordeao>*::before{transition:none}
}

/* ── BARRA DE ROLAGEM (29/09, pedido do operator: «scroll customizado baseado nas refs do pintrest… sem exagero,
   sutileza, site limpo»). Vocabulário: o trilho é um fio de 1 px (pin 480, fio de luz sobre preto); o polegar é uma
   fenda de luz vertical em prata (pin 439, lida na vertical) e acende em cobre no hover, a mesma cor de acento.
   Chromium/Safari usam ::-webkit-scrollbar. Não declaro scrollbar-width/scrollbar-color para eles de propósito:
   desde o Chrome 121 as propriedades padrão têm precedência e o navegador descarta o desenho dos pseudo-elementos.
   O Firefox (que não reconhece o seletor ::-webkit-scrollbar) recebe só as cores, pelo @supports. */
:root { --rolagem-fio: color-mix(in srgb, var(--tinta-1) 10%, transparent);
        --rolagem-luz: color-mix(in srgb, var(--prata) 62%, transparent); --rolagem-acesa: var(--cobre-texto); }
[data-theme="light"] { --rolagem-fio: rgba(18, 18, 20, .12); --rolagem-luz: rgba(18, 18, 20, .42); --rolagem-acesa: var(--cobre); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: linear-gradient(90deg, transparent 4.5px, var(--rolagem-fio) 4.5px, var(--rolagem-fio) 5.5px, transparent 5.5px); }
::-webkit-scrollbar-thumb {
  border: 3.5px solid transparent; border-radius: 0; background-clip: padding-box;
  background-color: transparent;
  background-image: linear-gradient(180deg, transparent 0%, var(--rolagem-luz) 22%, var(--rolagem-luz) 78%, transparent 100%);
}
::-webkit-scrollbar-thumb:hover, ::-webkit-scrollbar-thumb:active {
  border-width: 3px;
  background-image: linear-gradient(180deg, transparent 0%, var(--rolagem-acesa) 22%, var(--rolagem-acesa) 78%, transparent 100%);
}
::-webkit-scrollbar-corner { background: transparent; }
@supports not selector(::-webkit-scrollbar) {
  html { scrollbar-width: thin; scrollbar-color: var(--rolagem-luz) transparent; }
}