/* av · Avaliações (#avaliacoes, noite) — as falas como rótulos de atlas presos ao aro do logo.
   Gesto: escolher uma fala a leva ao centro, e um trecho aceso corre pelo aro até o ponto dela (js/av.js). */

.av-sec{background:linear-gradient(in oklab 180deg, #05223F, var(--noite) 55%, #03192F)}

/* malhas lentas nas bordas (cores vizinhas, closest-side, sem blur) */
.av-malha{position:absolute;inset:0;z-index:-1;pointer-events:none}
.av-malha i{position:absolute;display:block;border-radius:50%}
.av-malha i:nth-child(1){width:70vmax;height:70vmax;left:-28vmax;top:-30vmax;background:radial-gradient(circle closest-side in oklch, #17345A, color-mix(in oklch, #17345A 45%, transparent) 50%, transparent);animation:av-deriva 36s ease-in-out infinite alternate}
.av-malha i:nth-child(2){width:64vmax;height:64vmax;right:-30vmax;bottom:-26vmax;background:radial-gradient(circle closest-side in oklch, var(--salvia-apagada), color-mix(in oklch, var(--salvia-apagada) 40%, transparent) 50%, transparent);opacity:.55;animation:av-deriva 42s ease-in-out infinite alternate-reverse}
.av-malha i:nth-child(3){width:60vmax;height:60vmax;right:-20vmax;top:-24vmax;background:radial-gradient(circle closest-side in oklch, #173F55, color-mix(in oklch, #173F55 40%, transparent) 50%, transparent);opacity:.8;animation:av-deriva 31s ease-in-out infinite alternate}
@keyframes av-deriva{to{transform:translate3d(5vw,4vh,0) scale(1.06)}}

/* ---------- cabeçalho: título e os números ---------- */
.av-cab{text-align:center;display:flex;flex-direction:column;align-items:center}
.av-numeros{margin-top:26px;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 40px}
.av-num{margin:0;display:flex;align-items:baseline;gap:10px}
.av-num strong{font-weight:800;font-variation-settings:"wdth" 75;font-size:2.4rem;line-height:1;color:var(--tinta)}
.av-estrelas{color:var(--estrela);letter-spacing:.14em;font-size:.95rem}
.av-num-txt{font-family:var(--f-mono);font-size:.8rem;letter-spacing:.04em;color:var(--tinta-suave)}
.av-num-2{padding-left:40px;border-left:1px solid rgba(181,195,184,.25)}

/* ---------- palco (desktop): aro no centro, falas presas por fios ---------- */
.av-palco{position:relative;margin:clamp(-8px, -1vw, 0px) auto 0;aspect-ratio:1280/780;container-type:inline-size}
/* a luz da prancha, dentro do aro */
.av-palco::before{content:"";position:absolute;left:50%;top:50%;width:46%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  background:radial-gradient(circle closest-side in oklch, rgba(60,120,140,.34), rgba(30,80,100,.12) 62%, transparent)}
.av-svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.av-aro{fill:none;stroke:rgba(244,245,250,.34);stroke-width:1.3;vector-effect:non-scaling-stroke;stroke-dasharray:1;stroke-dashoffset:0}
.av-aro2{fill:none;stroke:rgba(181,195,184,.22);stroke-width:1;stroke-dasharray:2 7;vector-effect:non-scaling-stroke}
.av-luz{fill:none;stroke:var(--salvia);stroke-width:2.6;stroke-linecap:round;stroke-dasharray:22 338;vector-effect:non-scaling-stroke;
  transform-box:view-box;transform-origin:640px 390px;transform:rotate(var(--av-ang, 221deg));transition:transform 1.3s var(--curva-articula), opacity .6s;filter:drop-shadow(0 0 6px rgba(181,195,184,.55))}
.av-fio{fill:none;stroke:rgba(181,195,184,.42);stroke-width:1;vector-effect:non-scaling-stroke;transition:stroke .5s}
.av-ponto{fill:#2B4A5C;stroke:var(--salvia);stroke-width:1.2;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;transition:fill .5s, transform .5s var(--curva)}
.av-ponto.av-on{fill:var(--salvia);transform:scale(1.35)}
.av-fio.av-on{stroke:var(--salvia)}

/* a gravura do logo, quase invisível atrás da fala */
.av-meio{position:absolute;inset:0;display:grid;place-items:center;pointer-events:none}
.av-meio::before{content:"";position:absolute;left:50%;top:50%;width:38%;aspect-ratio:1;transform:translate(-50%,-50%);background:var(--osso);opacity:.05;
  -webkit-mask:url(../img/osso-escapula-umero.svg) center/contain no-repeat;mask:url(../img/osso-escapula-umero.svg) center/contain no-repeat}
.av-centro{position:relative;width:32%;margin:0;text-align:center;pointer-events:auto}
.av-centro-n{margin:0 0 16px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--salvia)}
.av-centro-n b{font-weight:500;color:var(--gelo)}
.av-grande{margin:0}
.av-grande p{margin:0;font-weight:700;font-variation-settings:"wdth" 80;font-size:clamp(1.35rem, 2.3cqi, 1.95rem);line-height:1.16;text-wrap:balance;transition:opacity .45s var(--curva), transform .6s var(--curva)}
.av-quem{display:block;margin:12px 0 0;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.06em;color:var(--tinta-fina)}
.av-centro-quem{margin-top:16px;transition:opacity .45s var(--curva)}
.av-trocando .av-grande p{opacity:0;transform:translateY(8px)}
.av-trocando .av-centro-quem{opacity:0}

/* ---------- os rótulos: cada fala é um botão ---------- */
.av-falas{list-style:none;margin:0;padding:0}
.av-fala{position:absolute;top:var(--y);width:24.4%;transform:translateY(-50%)}
.av-e{right:75.2%}
.av-d{left:75.2%}
.av-bt{box-sizing:border-box;display:grid;grid-template-columns:auto 1fr;column-gap:12px;width:100%;padding:10px 12px;border-radius:8px;transition:background .4s}
.av-bt[role=button]{cursor:pointer}
.av-e .av-bt{grid-template-columns:1fr auto;text-align:right}
.av-e .av-n{grid-column:2;grid-row:1}
.av-e .av-txt,.av-e .av-quem{grid-column:1}
.av-e .av-txt{grid-row:1}
.av-n{font-family:var(--f-mono);font-size:.7rem;letter-spacing:.08em;color:var(--salvia);padding-top:.32em}
.av-txt{font-size:clamp(.92rem, 1.25cqi, 1.04rem);line-height:1.45;color:var(--tinta-suave);text-wrap:pretty;transition:color .4s}
.av-bt .av-quem{grid-column:2;margin-top:6px}
.av-e .av-bt .av-quem{grid-column:1}
.av-bt[role=button]:hover{background:rgba(244,245,250,.05)}
.av-bt[role=button]:hover .av-txt{color:var(--tinta)}
.av-bt:focus-visible{outline:2px solid var(--salvia);outline-offset:2px}
.av-ativa .av-bt{background:rgba(181,195,184,.09)}
.av-ativa .av-txt{color:var(--tinta)}
.av-ativa .av-n{color:var(--gelo)}

/* a fala ativa se recolhe no rótulo: ela está no centro */
.av-no-centro{display:none;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--salvia)}
.av-d .av-no-centro span{display:inline-block;transform:scaleX(-1)}
.av-d .av-no-centro{flex-direction:row-reverse;justify-content:flex-end}
@media (min-width:1101px){
  .av-ativa .av-txt{display:none}
  .av-ativa .av-no-centro{display:flex;gap:8px;grid-column:2;align-items:center}
  .av-e.av-ativa .av-no-centro{grid-column:1;justify-content:flex-end}
  .av-ativa .av-no-centro span{animation:av-aponta 1.6s var(--curva) infinite}
}
@keyframes av-aponta{50%{translate:4px 0}}
.av-d.av-ativa .av-no-centro span{animation-name:av-aponta-e}
@keyframes av-aponta-e{50%{translate:-4px 0}}

/* aspas-glifo e setas do centro */
.av-aspas{display:block;height:.5em;margin:-2px 0 10px;font-family:var(--f-titulo);font-weight:800;font-variation-settings:"wdth" 75;font-size:clamp(4rem, 7cqi, 6rem);line-height:1;color:var(--salvia);opacity:.55}
.av-centro-n{display:flex;align-items:center;justify-content:center;gap:10px}
.av-seta{all:unset;box-sizing:border-box;width:44px;height:44px;display:inline-grid;place-items:center;border-radius:50%;cursor:pointer;font-family:var(--f-mono);font-size:1.1rem;color:var(--salvia);border:1px solid rgba(181,195,184,.28);transition:background .3s, border-color .3s, color .3s}
.av-seta:hover{background:rgba(181,195,184,.1);border-color:rgba(181,195,184,.6);color:var(--gelo)}
.av-seta:focus-visible{outline:2px solid var(--salvia);outline-offset:2px}
.av-dica{position:absolute;left:50%;bottom:0;transform:translateX(-50%);margin:0;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;color:var(--tinta-fina);white-space:nowrap}

/* o aro pontilhado gira devagar, como a luneta de um instrumento */
.av-aro2{transform-box:view-box;transform-origin:640px 390px;animation:av-gira 140s linear infinite}
@keyframes av-gira{to{transform:rotate(360deg)}}

/* ---------- entrada: aro se desenha, pontos, fios, falas ---------- */
.js .av-palco .av-aro{stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--curva-articula)}
.js .av-palco .av-aro + .av-aro{transition-delay:.2s}
.js .av-palco .av-aro2,.js .av-palco .av-luz{opacity:0;transition:opacity 1s ease .9s, transform 1.3s var(--curva-articula)}
.js .av-palco .av-ponto{opacity:0;transition:opacity .5s var(--curva) calc(.9s + var(--i) * .07s), fill .5s, transform .5s var(--curva)}
.js .av-palco .av-fio{stroke-dasharray:240;stroke-dashoffset:240;transition:stroke-dashoffset .8s var(--curva) calc(1s + var(--i) * .07s), stroke .5s}
.js .av-palco .av-fala{opacity:0;transition:opacity .8s var(--curva) calc(1.2s + var(--i) * .07s)}
.js .av-palco::before{opacity:0;transition:opacity 1.6s ease .4s}
.av-palco.av-dentro .av-aro,.av-palco.av-dentro .av-fio{stroke-dashoffset:0}
.av-palco.av-dentro .av-aro2,.av-palco.av-dentro .av-luz,.av-palco.av-dentro .av-ponto,.av-palco.av-dentro .av-fala,.av-palco.av-dentro::before{opacity:1}

/* ---------- rodapé ---------- */
.av-rodape{margin-top:clamp(8px, 1.5vw, 24px);padding-top:22px;border-top:1px solid rgba(181,195,184,.2);display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px 32px}
.av-data{margin:0;font-family:var(--f-mono);font-size:.74rem;letter-spacing:.03em;color:var(--tinta-fina);max-width:52em}
.av-links{margin:0;display:flex;flex-wrap:wrap;gap:4px 28px}
.av-links .wf-link{border-color:rgba(181,195,184,.5)}
.av-links .wf-link:hover{border-color:var(--gelo)}

/* ---------- até notebook estreito: lista com o fio à esquerda ---------- */
@media (max-width:1100px){
  .av-palco{aspect-ratio:auto;container-type:normal;max-width:720px}
  .av-palco::before,.av-svg,.av-meio::before{display:none}
  .av-meio{position:static;display:block}
  .av-centro{width:auto;text-align:left;padding:0 0 36px}
  .av-centro-n{display:none}
  .av-grande p{font-size:clamp(1.5rem, 1.1rem + 1.6vw, 2rem)}
  .av-falas{position:relative;padding-left:26px;border-left:1px solid rgba(181,195,184,.3)}
  .js .av-palco .av-fala{opacity:1}
  .av-fala{position:relative;top:auto;left:auto;right:auto;width:auto;transform:none;padding:0 0 10px}
  .av-fala::before{content:"";position:absolute;left:-30px;top:1.05em;width:7px;height:7px;border-radius:50%;background:#2B4A5C;box-shadow:inset 0 0 0 1.2px var(--salvia)}
  .av-ativa::before{background:var(--salvia)}
  .av-e .av-bt,.av-bt{grid-template-columns:auto 1fr;text-align:left}
  .av-e .av-n{grid-column:1}
  .av-e .av-txt,.av-e .av-bt .av-quem{grid-column:2}
  .av-bt{padding:8px 10px}
  /* no celular a fala do centro não troca: a lista já mostra todas; o botão só marca */
  .av-ativa .av-bt{background:none}
  .av-ativa .av-txt{color:var(--tinta-suave)}
  .av-fala:first-child{display:none}
}
@media (max-width:1100px){
  .av-seta,.av-dica,.av-no-centro{display:none}
  .av-centro-n{display:none}
  .av-aspas{margin:0 0 4px;font-size:4.4rem;height:.42em}
  .av-fala::before{top:calc(10px + .62em)}
  .av-n{padding-top:.28em}
}
@media (max-width:620px){
  .av-cab{text-align:left;align-items:flex-start}
  .av-cab .wf-prancha-n{justify-content:flex-start}
  .av-numeros{flex-direction:column;align-items:flex-start;gap:12px;margin-top:22px}
  .av-num{flex-wrap:wrap;gap:4px 10px}
  .av-num strong{font-size:2.1rem}
  .av-num-2{padding-left:0;border-left:0}
  .av-palco{margin-top:36px}
  .av-rodape{flex-direction:column;align-items:flex-start}
}