/* 08 · experiencia — três anéis de atividade desenhados pela rolagem, "9,46" no centro,
   foto real de comemoração sangrando à direita. Tudo sob #experiencia. */
#experiencia .ef-stage {
  --c1: var(--honey);
  --c2: var(--offwhite);
  --c3: color-mix(in srgb, var(--violet) 76%, var(--offwhite));  /* violeta da marca, aberto p/ ler no escuro */
  --ring: clamp(260px, 50vh, 540px);
  background: radial-gradient(70% 90% at 18% 60%, rgba(74, 31, 96, .34), transparent 70%), var(--ink);
}

/* foto: fora da grade, medida pela altura; dissolve por máscara do lado do texto */
#experiencia .ef-photo { position: absolute; top: 0; bottom: 0; right: 0; width: clamp(46%, 104vh, 64%); z-index: 0; background: var(--ink);
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 15%); mask-image: linear-gradient(90deg, transparent 0, #000 15%); }
#experiencia .ef-photo img { object-position: 55% 40%; transform-origin: 55% 40%; will-change: transform; }
#experiencia .ef-photo__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(14, 7, 19, .5) 0%, rgba(14, 7, 19, .16) 12%, rgba(14, 7, 19, 0) 22%),
    linear-gradient(0deg, rgba(14, 7, 19, .5) 0%, rgba(14, 7, 19, 0) 16%); }
#experiencia .ef-checker { z-index: 0; }

#experiencia .ef-wrap { position: relative; z-index: 2; height: 100%; display: grid; align-content: center; padding-top: calc(var(--hud-h) + clamp(12px, 2.4vh, 28px)); padding-bottom: clamp(24px, 4vh, 48px); }
#experiencia .ef-copy { --span: 1 / 6; display: grid; justify-items: start; gap: clamp(16px, 2.8vh, 28px); }
#experiencia .ef-title { margin: 0; }

/* os anéis */
#experiencia .ef-rings { position: relative; width: min(100%, var(--ring)); aspect-ratio: 1; container-type: inline-size; }
#experiencia .ef-rings__svg { width: 100%; height: 100%; overflow: visible; }
#experiencia .ef-ring circle { fill: none; stroke-width: 26; } /* era 30: o furo cresce e o "9,46" (27,5cqi) não encosta no anel de dentro */
#experiencia .ef-ring__track { opacity: .15; }
#experiencia .ef-ring__fill { stroke-linecap: round; transform: rotate(-90deg); transform-box: fill-box; transform-origin: center; stroke-dasharray: 0 2000; }
#experiencia .ef-ring--1 circle { stroke: var(--c1); }
#experiencia .ef-ring--2 circle { stroke: var(--c2); }
#experiencia .ef-ring--3 circle { stroke: var(--c3); }
#experiencia .ef-ring--1 .ef-ring__fill { filter: drop-shadow(0 0 10px rgba(244, 178, 35, .45)); }

#experiencia .ef-core { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; text-align: center; gap: 2cqi; }
#experiencia .ef-core__n { font-size: calc(25cqi * var(--ts, 1)); color: var(--honey); line-height: 1; }
#experiencia .ef-core__l { max-width: 13em; font-size: calc((clamp(12px, 3.5cqi, 18px)) * var(--ts, 1)); color: var(--text); letter-spacing: .08em; line-height: 1.25; }

/* rótulos dos anéis médio e interno */
#experiencia .ef-legend { display: grid; gap: clamp(10px, 1.8vh, 18px); }
#experiencia .ef-leg { display: grid; grid-template-columns: auto 1fr; align-items: center; column-gap: 16px; }
#experiencia .ef-leg__sw { width: clamp(36px, 4.6vh, 46px); max-width: none; height: auto; aspect-ratio: 1; overflow: visible; } /* sem o max-width do núcleo: a linha sem quebra não espreme o ícone */
#experiencia .ef-leg__sw circle { fill: none; stroke-width: 4; stroke: rgba(245, 238, 224, .16); }
#experiencia .ef-leg--2 .ef-leg__sw .is-on { stroke: var(--c2); }
#experiencia .ef-leg--3 .ef-leg__sw .is-on { stroke: var(--c3); }
/* rótulo sempre numa linha ao lado do número: com o texto 10% maior "disseram que voltariam em 2027" caía
   para baixo do número em 1920/2560 e só esse item ficava em duas linhas. Em 1920+ a linha passa ~40 px da
   coluna, sobre a borda da foto que ainda está dissolvendo (fundo roxo do backdrop) */
#experiencia .ef-leg__t { display: flex; align-items: baseline; flex-wrap: nowrap; gap: 2px 14px; white-space: nowrap; }
#experiencia .ef-leg__n { font-family: var(--f-display); font-style: italic; font-weight: 900; font-size: calc((clamp(34px, 3.6vh + 10px, 52px)) * var(--ts, 1)); line-height: 1; padding-top: .06em; font-variant-numeric: tabular-nums; }
#experiencia .ef-leg--2 .ef-leg__n { color: var(--c2); }
#experiencia .ef-leg--3 .ef-leg__n { color: var(--c3); }
#experiencia .ef-leg__t span { font-family: var(--f-display); font-weight: 700; font-size: calc((clamp(15px, .5vw + 10px, 19px)) * var(--ts, 1)); letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }

/* tablet em pé e janelas estreitas: foto em cima, anéis e rótulos lado a lado embaixo */
@media (max-aspect-ratio: 1/1), (max-width: 980px) {
  #experiencia .ef-stage { --ring: clamp(260px, 34vh, 470px); }
  #experiencia .ef-photo { top: 0; bottom: auto; left: 0; right: 0; width: 100%; height: 56%;
    -webkit-mask-image: linear-gradient(0deg, transparent 0, #000 22%); mask-image: linear-gradient(0deg, transparent 0, #000 22%); }
  #experiencia .ef-photo__veil { background: linear-gradient(0deg, rgba(14, 7, 19, .5) 0%, rgba(14, 7, 19, 0) 30%); }
  #experiencia .ef-photo .credit { bottom: auto; top: calc(var(--hud-h) + 12px); }
  #experiencia .ef-wrap { align-content: end; }
  #experiencia .ef-copy { --span: 1 / -1; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: clamp(24px, 3vh, 48px); }
  #experiencia .ef-title { grid-column: 1 / -1; }
  #experiencia .ef-rings { width: var(--ring); }
  /* ao lado do anel não cabe número + rótulo numa linha: os dois itens empilham igual (número em cima) */
  #experiencia .ef-leg { align-items: start; }
  #experiencia .ef-leg__t { flex-direction: column; align-items: flex-start; gap: 4px; white-space: normal; }
  #experiencia .ef-leg__sw { margin-top: .2em; }
}