/* ar · #areas — "Áreas": o grande arco do anel com cinco pontos; a área aberta é a estação acesa */
@property --ar-a {            /* ângulo do ponto aceso (a partir do eixo x, sentido horário) */
  syntax: '<angle>';
  inherits: true;
  initial-value: -30deg;
}
@property --ar-rot {          /* giro das cores do anel */
  syntax: '<angle>';
  inherits: true;
  initial-value: 0deg;
}

/* ---------- abertura ---------- */
.ar-cabeca {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  column-gap: 4rem; align-items: end;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.ar-cabeca .wf-titulo { font-size: clamp(2.4rem, 1.2rem + 3.4vw, 4.6rem); }
.ar-intro { margin: 0 0 .5rem; }

/* ---------- palco: arco + foto à esquerda, painel à direita ---------- */
.ar-palco {
  position: relative;
  display: grid;
  grid-template-columns: 40rem minmax(0, 1fr);
  column-gap: 3rem;
  min-height: 40rem;
}

/* a lista é o sistema de coordenadas do arco */
.ar-lista {
  position: absolute; inset: 0 auto 0 0; width: 40rem;
  z-index: 2; pointer-events: none;
  --R: 32rem;             /* raio do anel */
  --cx: -8rem;            /* centro do anel (fora, à esquerda) */
  --a0: -30; --passo: 15; /* ângulos dos cinco pontos, em graus */
  --rp: calc(var(--R) * .96);   /* raio do meio da faixa */
  --ar-rot: 0deg;
  transition: --ar-a 1.8s var(--ease), --ar-rot 1.8s var(--ease);
}
.ar-lista.ar-entrando { transition-duration: 2.8s; transition-delay: .35s; }
.ar-roda {
  position: absolute;
  left: calc(var(--cx) - var(--R)); top: calc(50% - var(--R));
  width: calc(var(--R) * 2); height: calc(var(--R) * 2);
  /* as pontas do arco se dissolvem: nada passa sobre a abertura */
  --ar-meio: 16.5rem; --ar-fim: 21rem;
  -webkit-mask: linear-gradient(transparent calc(50% - var(--ar-fim)), #000 calc(50% - var(--ar-meio)), #000 calc(50% + var(--ar-meio)), transparent calc(50% + var(--ar-fim)));
          mask: linear-gradient(transparent calc(50% - var(--ar-fim)), #000 calc(50% - var(--ar-meio)), #000 calc(50% + var(--ar-meio)), transparent calc(50% + var(--ar-fim)));
}
.ar-anel.wf-anel, .ar-luz {
  position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 50%;
  /* as quatro estações se repetem a cada 100°: o trecho visível do arco mostra o ciclo inteiro */
  background: repeating-conic-gradient(from var(--ar-rot) in oklch, var(--inverno) 0deg, var(--primavera) 25deg, var(--verao) 50deg, color-mix(in oklab, var(--outono) 80%, var(--verao)) 75deg, var(--inverno) 100deg);
}
/* anel de base: fino, a meia-luz */
.ar-anel.wf-anel {
  --tam: 100%; animation: none; opacity: .75;
  -webkit-mask: radial-gradient(closest-side, transparent 94%, #000 95.3%, #000 96.7%, transparent 98%);
          mask: radial-gradient(closest-side, transparent 94%, #000 95.3%, #000 96.7%, transparent 98%);
}
/* janela de luz: a estação acesa, mais grossa, só no trecho da área aberta; o halo é uma segunda janela, larga e suave */
.ar-luz {
  filter: saturate(1.3) brightness(.97);
  -webkit-mask:
    radial-gradient(closest-side, transparent 92.8%, #000 94.6%, #000 97.4%, transparent 99.2%),
    conic-gradient(from calc(90deg + var(--ar-a) - 9deg), transparent, #000 5deg, #000 13deg, transparent 18deg, transparent);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(closest-side, transparent 92.8%, #000 94.6%, #000 97.4%, transparent 99.2%),
    conic-gradient(from calc(90deg + var(--ar-a) - 9deg), transparent, #000 5deg, #000 13deg, transparent 18deg, transparent);
  mask-composite: intersect;
}
.ar-luz--halo {
  filter: saturate(1.4); opacity: .5;
  -webkit-mask:
    radial-gradient(closest-side, transparent 88%, #000 96%, transparent 100%),
    conic-gradient(from calc(90deg + var(--ar-a) - 16deg), transparent, #000 12deg, #000 20deg, transparent 32deg, transparent);
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(closest-side, transparent 88%, #000 96%, transparent 100%),
    conic-gradient(from calc(90deg + var(--ar-a) - 16deg), transparent, #000 12deg, #000 20deg, transparent 32deg, transparent);
  mask-composite: intersect;
}

/* os cinco pontos sobre o arco */
.ar-item {
  --a: calc((var(--a0) + var(--i) * var(--passo)) * 1deg);
  --pt: 14px;
  position: absolute;
  left: calc(var(--cx) + var(--rp) * cos(var(--a)) - var(--pt) / 2 - .55rem);
  top: calc(50% + var(--rp) * sin(var(--a)));
  transform: translateY(-50%);
  display: grid; grid-template-columns: var(--pt) auto; grid-template-rows: auto auto;
  column-gap: 1.1rem; align-items: center;
  min-height: 48px; padding: .45rem 1.3rem .5rem .55rem; border-radius: 99px;
  text-decoration: none; color: var(--tinta-suave);
  pointer-events: auto;
  transition: color .5s var(--ease), background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.ar-ponto {
  grid-row: 1 / 3; width: var(--pt); height: var(--pt); border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tinta) 18%, transparent), 0 0 0 4px var(--papel);
  transition: box-shadow .6s var(--ease), transform .6s var(--ease);
}
.ar-item--todas .ar-ponto { background: conic-gradient(in oklch, var(--inverno), var(--primavera), var(--verao), var(--outono), var(--inverno)); }
.ar-num { font-size: .72rem; font-weight: 500; letter-spacing: .2em; color: var(--tinta-suave); }
.ar-item .ar-num { grid-column: 2; }
.ar-nome { grid-column: 2; font-family: var(--f-titulo); font-size: 1.55rem; line-height: 1.05; }
.ar-nome small { display: block; font-family: var(--f-texto); font-size: .8rem; letter-spacing: .02em; margin-top: .2rem; }
.ar-item:hover { color: var(--tinta); }
.ar-item[aria-selected="true"] { color: var(--tinta); }
.ar-item[aria-selected="true"] .ar-nome { font-style: italic; color: var(--outono); }
.ar-item[aria-selected="true"] .ar-ponto {
  transform: scale(1.3);
  box-shadow: 0 0 0 1px color-mix(in oklab, var(--tinta) 18%, transparent), 0 0 0 3.5px var(--papel), 0 0 0 5px color-mix(in oklab, var(--outono) 75%, transparent);
}

/* foto, aninhada dentro do arco (o arco passa por trás) */
.ar-foto {
  position: absolute; z-index: 3; left: 0;
  top: calc(50% - 12.5rem); width: 18rem;
}
.ar-foto img { aspect-ratio: 18 / 25; object-fit: cover; object-position: 50% 14%; }
.ar-foto figcaption {
  position: absolute; left: 1.2rem; bottom: -1.5rem; margin: 0;
  display: inline-flex; flex-direction: column; gap: .1rem;
  padding: .55rem 1rem .6rem; border-radius: 18px;
  background: color-mix(in oklab, var(--papel) 70%, transparent);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2);
  box-shadow: 0 8px 24px -14px color-mix(in oklab, var(--outono) 50%, transparent);
  color: var(--tinta);
}
.ar-foto figcaption b { font-family: var(--f-titulo); font-weight: 400; font-size: 1.15rem; line-height: 1.1; }
.ar-foto figcaption span { white-space: nowrap; font-size: .7rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--tinta-suave); }

/* ---------- painéis ---------- */
.ar-paineis { grid-column: 2; align-self: center; }
.ar-painel { padding: 1rem 0 1.5rem; scroll-margin-top: 1.5rem; }
.ar-p-meta { margin: 0 0 1rem; font-size: .75rem; font-weight: 500; letter-spacing: .2em; color: var(--tinta-suave); }
.ar-p-meta span { color: var(--outono); }
.ar-p-meta::before { content: ''; display: inline-block; vertical-align: -.1em; margin-right: .8rem; width: .75rem; height: .75rem; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px color-mix(in oklab, var(--tinta) 18%, transparent), 0 0 0 3px var(--papel), 0 0 0 4.5px color-mix(in oklab, var(--outono) 60%, transparent); }
#ar-p5 .ar-p-meta::before { background: conic-gradient(in oklch, var(--inverno), var(--primavera), var(--verao), var(--outono), var(--inverno)); }
.ar-p-nome { margin: 0; font-family: var(--f-titulo); font-weight: 400; font-size: clamp(2.3rem, 1.3rem + 2vw, 3.4rem); line-height: 1; letter-spacing: -.01em; text-wrap: balance; }
.ar-p-linha { margin: .9rem 0 0; font-size: var(--t-corpo); font-weight: 400; line-height: 1.55; color: var(--tinta-suave); max-width: 32rem; }
.ar-p-fala { margin: 1.9rem 0 0; font-size: clamp(1.55rem, 1.2rem + .8vw, 2.05rem); line-height: 1.16; color: var(--tinta); max-width: 32rem; }
.ar-p-fala p { text-indent: -.45em; }
.ar-aspa { color: color-mix(in oklab, var(--c) 55%, var(--outono)); }
.ar-p-fala p, .ar-p-mais p { margin: 0; }
.ar-p-mais { margin: 1.3rem 0 0; padding-left: 1.1rem; border-left: 2px solid color-mix(in oklab, var(--c) 70%, var(--outono)); font-size: .98rem; font-weight: 350; line-height: 1.6; color: var(--tinta-suave); max-width: 32rem; }
.ar-p-mais p + p { margin-top: .7rem; }
.ar-p-chips { list-style: none; margin: 1.4rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ar-p-chips li {
  display: inline-flex; align-items: center; gap: .5em;
  padding: .4em .9em .45em .7em; border-radius: 99px; font-size: .875rem;
  background: color-mix(in oklab, var(--papel) 74%, transparent);
  border: 1px solid color-mix(in oklab, white 60%, transparent);
  box-shadow: 0 6px 18px -12px color-mix(in oklab, var(--outono) 45%, transparent);
}
.ar-p-chips li::before { content: ''; width: .5em; height: .5em; border-radius: 50%; background: var(--c); box-shadow: 0 0 0 1px color-mix(in oklab, var(--tinta) 15%, transparent); }
.ar-p-selo { margin: 1.3rem 0 0; font-size: .875rem; color: var(--tinta-suave); }
.ar-p-selo b { font-weight: 600; color: var(--tinta); }
.ar-p-link {
  display: inline-flex; align-items: center; gap: .8rem; min-height: 48px;
  margin-top: 1.6rem; padding: .3rem .35rem .3rem 1.2rem; border-radius: 99px;
  font-size: .95rem; color: var(--tinta); text-decoration: none;
  border: 1px solid color-mix(in oklab, var(--tinta) 22%, transparent);
  background: color-mix(in oklab, var(--papel) 60%, transparent);
  transition: border-color .4s var(--ease), background-color .4s var(--ease);
}
.ar-p-link svg { width: 2.3rem; height: 2.3rem; padding: .55rem; border-radius: 50%; background: color-mix(in oklab, var(--c) 45%, var(--papel)); fill: none; stroke: var(--tinta); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform .45s var(--ease); }
.ar-p-link:hover { border-color: var(--tinta); }
.ar-p-link:hover svg { transform: translateX(3px); }

/* com JS: um painel por vez (todos na mesma célula, sem pulo de altura) */
.js .ar-paineis { display: grid; }
.js .ar-painel {
  grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translate3d(0, 14px, 0);
  transition: opacity .7s var(--ease), transform .9s var(--ease), visibility 0s linear .7s;
}
.js .ar-painel.on { visibility: visible; opacity: 1; transform: none; transition-delay: .3s, .3s, 0s; }

/* ---------- notebook ---------- */
@media (max-width: 1260px) and (min-width: 1024px) {
  .ar-cabeca { column-gap: 2.5rem; }
  .ar-palco { grid-template-columns: 33rem minmax(0, 1fr); column-gap: 2rem; min-height: 38rem; }
  .ar-lista { width: 33rem; --R: 27rem; --cx: -9rem; }
  .ar-roda { --ar-meio: 14rem; --ar-fim: 19rem; }
  .ar-foto { width: 14rem; top: calc(50% - 9.75rem); }
  .ar-foto figcaption span { letter-spacing: .12em; }
  .ar-nome { font-size: 1.35rem; }
}

/* ---------- celular e tablet: arco à esquerda, lista vertical, painel embaixo ---------- */
@media (max-width: 1023px) {
  .ar-cabeca { grid-template-columns: 1fr; }
  .ar-intro { margin-top: 1.3rem; }
  .ar-palco { display: block; min-height: 0; }
  .ar-foto { position: relative; top: auto; width: 100%; margin: 0 0 2.6rem; }
  .ar-foto figcaption { left: auto; right: 1rem; }
  .ar-foto img { aspect-ratio: 16 / 11; object-position: 50% 17%; }
  .ar-lista {
    position: relative; inset: auto; width: auto; height: 24rem;
    --R: 18rem; --cx: -13rem; --a0: -36; --passo: 18;
  }
  .ar-roda { --ar-meio: 11rem; --ar-fim: 14rem; }
  .ar-nome { font-size: 1.4rem; }
  .ar-foto figcaption span { font-size: .75rem; letter-spacing: .14em; }
  .ar-item[aria-selected="true"] {
    background: color-mix(in oklab, var(--papel) 78%, transparent);
    box-shadow: 0 0 0 1px color-mix(in oklab, white 70%, transparent), 0 10px 26px -14px color-mix(in oklab, var(--outono) 45%, transparent);
  }
  .ar-paineis { margin-top: 1rem; padding-top: 1.6rem; border-top: 1px solid color-mix(in oklab, var(--tinta) 12%, transparent); }
  .js .ar-paineis { display: block; }
  .js .ar-painel:not(.on) { display: none; }
}
@media (max-width: 899px) {
  .ar-num, .ar-p-meta { font-size: .875rem; letter-spacing: .16em; }
  .ar-nome small { font-size: .875rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ar-lista, .js .ar-painel { transition: none; }
}