/* =====================================================================
   14 · Campeões do Rock (p19)
   Cena fixada: a medalha-fita sob refletores (parallax, feixes, poeira de
   luz) → o texto e o selo "Ativação vendida" carimbado → a campeã real
   entra num telão octogonal com raios nas bordas.
   O CSS descreve o estado FINAL (movimento reduzido e sem JS).
   ===================================================================== */

#campeoes .cp { background: #020008; }

/* ---------- Fundo ---------- */
#campeoes .cp__bg { position: absolute; inset: 0; z-index: 0; overflow: clip; }
#campeoes .cp__bg::before { /* sem imagem: brilho do balcão */
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(34% 40% at 72% 62%, rgba(120, 0, 240, .35), transparent 70%),
    radial-gradient(22% 26% at 60% 30%, rgba(0, 216, 248, .25), transparent 70%),
    linear-gradient(180deg, #050112, #0a0420 70%, #020008);
}
/* bokeh de palco atrás da medalha (substitui a imagem gerada) */
#campeoes .cp__bokeh {
  position: absolute; inset: -10%; filter: blur(34px); opacity: .9;
  background:
    radial-gradient(8% 14% at 58% 18%, rgba(0, 216, 248, .55), transparent 70%),
    radial-gradient(10% 16% at 86% 22%, rgba(240, 0, 240, .55), transparent 70%),
    radial-gradient(9% 15% at 70% 70%, rgba(120, 0, 240, .6), transparent 70%),
    radial-gradient(7% 12% at 94% 62%, rgba(0, 216, 248, .5), transparent 70%),
    radial-gradient(12% 18% at 48% 82%, rgba(240, 0, 240, .35), transparent 70%),
    radial-gradient(6% 10% at 78% 44%, rgba(255, 255, 255, .18), transparent 70%);
}
/* A medalha real: objeto pendurado pela fita, balançando de leve, com recorte neon */
#campeoes .cp__medal {
  position: absolute; z-index: 2; margin: 0; pointer-events: none;
  right: clamp(24px, 9vw, 180px); top: -6vh; height: 94vh; height: 94svh; aspect-ratio: 869 / 1600;
  transform-origin: 50% 0;
}
#campeoes .cp__medal-swing { width: 100%; height: 100%; transform-origin: 50% 0; animation: cp-swing 7s ease-in-out infinite; animation-play-state: paused; }
#campeoes.cp--live .cp__medal-swing { animation-play-state: running; } /* só balança com o capítulo na tela */
#campeoes .cp__medal-img {
  width: 100%; height: 100%; object-fit: contain;
  filter: drop-shadow(-6px 0 14px rgba(0, 216, 248, .45)) drop-shadow(8px 4px 18px rgba(240, 0, 240, .45)) drop-shadow(0 40px 60px rgba(0, 0, 0, .8));
}
@keyframes cp-swing { 0%, 100% { transform: rotate(-1.6deg); } 50% { transform: rotate(1.6deg); } }
.reduced #campeoes .cp__medal-swing { animation: none; }
#campeoes .cp__medal-cap {
  position: absolute; left: 50%; top: calc(100% + 10px); transform: translateX(-50%); white-space: nowrap; /* abaixo da medalha, nunca sobre ela */
  display: inline-flex; gap: 8px; padding: 6px 12px; font-family: var(--f-mono); font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: #dff9ff; background: rgba(4, 1, 12, .72); border: 1px solid rgba(0, 216, 248, .45);
}
#campeoes .cp__medal-cap b { color: var(--cyan); font-weight: 700; }

/* feixes de refletor que descem sobre a medalha */
#campeoes .cp__beams { position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen; overflow: clip; }
#campeoes .cp__beam {
  position: absolute; top: -12%; left: var(--x); width: 24vw; height: 128%; margin-left: -12vw;
  transform-origin: 50% 0; opacity: .34;
  clip-path: polygon(46% 0, 54% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 70%, #fff 30%) 0%, color-mix(in srgb, var(--c) 34%, transparent) 26%, transparent 78%);
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 40%, #000 60%, transparent 96%);
  mask-image: linear-gradient(90deg, transparent 4%, #000 40%, #000 60%, transparent 96%);
}

/* poeira de luz dentro dos feixes (posições determinísticas no JS) */
#campeoes .cp__dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: clip; }
#campeoes .cp__dust i {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, #fff 0 30%, rgba(200, 240, 255, .5) 55%, transparent 72%);
}

/* chão do texto: a esquerda escura; a sombra da direita empurra a medalha para trás quando a foto entra */
#campeoes .cp__veil {
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .82) 0%, rgba(0, 0, 0, .58) 34%, rgba(0, 0, 0, .1) 56%, transparent 70%),
    linear-gradient(180deg, rgba(0, 0, 0, .6) 0%, transparent 22%),
    linear-gradient(0deg, rgba(0, 0, 0, .55) 0%, transparent 24%);
}
#campeoes .cp__shade {
  position: absolute; inset: 0; z-index: 3; pointer-events: none; opacity: .62;
  background: radial-gradient(46% 70% at 74% 54%, rgba(2, 0, 10, .72), rgba(2, 0, 10, .35) 60%, transparent 90%);
}

/* ---------- Grade ---------- */
#campeoes .cp__grid {
  position: relative; z-index: 5; height: 100%;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); align-items: center;
  column-gap: clamp(32px, 5vw, 96px);
  padding-top: var(--hud-h);
}
#campeoes .cp__copy { max-width: 660px; }
#campeoes .cp__title {
  font-size: clamp(56px, min(7.6vw, 11.4vh), 136px);
  margin-top: clamp(6px, 1.2vh, 14px);
}
#campeoes .cp__text { margin-top: clamp(12px, 2.2vh, 24px); max-width: min(54ch, 43vw); color: #d9d3ee; }
#campeoes .cp__row { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 30px; margin-top: clamp(16px, 3vh, 34px); }

#campeoes .cp__day {
  --bevel: 14px;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 16px 26px 16px 20px;
  font-family: var(--f-display); font-style: italic; font-weight: 800; text-transform: uppercase;
  font-size: clamp(18px, 1vw + 8px, 26px); line-height: 1.15; letter-spacing: .04em; color: #fff;
}
#campeoes .cp__nw { white-space: nowrap; }
#campeoes .cp__cup {
  width: 30px; height: 30px; flex: none; fill: none; stroke: var(--cyan); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 6px rgba(0, 216, 248, .8));
}
#campeoes .cp__sold-wrap { position: relative; transform-origin: 22% 12%; } /* o carimbo cresce para a direita/baixo: longe do texto e da placa */
#campeoes .cp__sold-wrap::after { /* onda do carimbo */
  content: ''; position: absolute; inset: -10px; pointer-events: none; border: 2px solid var(--magenta);
  clip-path: polygon(14px 0, calc(100% - 14px) 0, 100% 14px, 100% calc(100% - 14px), calc(100% - 14px) 100%, 14px 100%, 0 calc(100% - 14px), 0 14px);
  transform: rotate(-4deg) scale(calc(1 + var(--ring, 1) * .35));
  opacity: calc((1 - var(--ring, 1)) * .9);
}
#campeoes .cp__sold { padding: 12px 20px 14px; }
#campeoes .cp__sold img { max-height: clamp(44px, 8vh, 66px); width: auto; }

/* ---------- A campeã ---------- */
#campeoes .cp__photo { margin: 0; justify-self: center; height: min(74vh, 74svh, 720px); }
#campeoes .cp__photo-in { position: relative; height: 100%; aspect-ratio: 902 / 1570; }
#campeoes .cp__frame { width: 100%; height: 100%; }
/* a foto aproxima dentro do quadro: o recorte fica num invólucro (escalar a <img> escalaria o recorte junto) */
#campeoes .cp__zoom {
  width: 100%; height: 100%; overflow: hidden; background: #000;
  clip-path: polygon(calc(var(--bv) - 3px) 0, calc(100% - var(--bv) + 3px) 0, 100% calc(var(--bv) - 3px), 100% calc(100% - var(--bv) + 3px), calc(100% - var(--bv) + 3px) 100%, calc(var(--bv) - 3px) 100%, 0 calc(100% - var(--bv) + 3px), 0 calc(var(--bv) - 3px));
}
#campeoes .cp__zoom > img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform-origin: 50% 40%; }
#campeoes .cp__glint {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; mix-blend-mode: screen;
  background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .42) 50%, rgba(0, 216, 248, .18) 56%, transparent 66%);
  transform: translateX(-130%);
}
#campeoes .cp__cap {
  position: absolute; z-index: 2; left: 50%; bottom: clamp(18px, 3vh, 30px); translate: -50% 0; width: max-content; max-width: 84%;
  padding: 7px 12px; background: rgba(4, 1, 12, .72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  border-left: 2px solid var(--magenta);
  font-family: var(--f-mono); font-size: clamp(9.5px, .7vw + 1px, 11px); letter-spacing: .1em; text-transform: uppercase; color: #e9e4fa; line-height: 1.35; text-align: left;
}
#campeoes .cp__cap b { display: block; color: var(--magenta); font-weight: 700; }
/* raios nas laterais do telão (ciano à esquerda, magenta à direita, como na p19) */
#campeoes .cp__edge { position: absolute; top: 6%; bottom: 6%; width: 30px; height: 88%; overflow: visible; pointer-events: none; }
#campeoes .cp__edge--l { left: -34px; }
#campeoes .cp__edge--r { right: -34px; }
#campeoes .cp__bolt { fill: none; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#campeoes .cp__edge--l .cp__bolt { stroke: #bff6ff; filter: drop-shadow(0 0 3px var(--cyan)) drop-shadow(0 0 9px var(--cyan)); }
#campeoes .cp__edge--r .cp__bolt { stroke: #ffd6ff; filter: drop-shadow(0 0 3px var(--magenta)) drop-shadow(0 0 9px var(--magenta)); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) and (min-width: 821px) {
  #campeoes .cp__grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); column-gap: 40px; }
  #campeoes .cp__title { font-size: clamp(52px, min(7vw, 11vh), 110px); }
}

/* ---------- Desktop baixo (1280×720, notebook): mais respiro embaixo do selo ---------- */
@media (min-width: 821px) and (max-height: 780px) {
  #campeoes .cp__title { font-size: clamp(52px, min(7.6vw, 10.2vh), 136px); }
  #campeoes .cp__row { margin-top: clamp(14px, 2.4vh, 34px); }
  #campeoes .cp__day { padding-block: 13px; }
  #campeoes .cp__sold img { max-height: 46px; }
}

/* ---------- Celular: título em cima, selo embaixo, texto e foto trocam no meio ---------- */
@media (max-width: 820px) {
  #campeoes .cp__grid {
    grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr) auto;
    align-items: start; column-gap: 0;
    padding-top: calc(var(--hud-h) + 12px); padding-bottom: 22px;
  }
  #campeoes .cp__copy { display: contents; }
  #campeoes .cp__kicker { grid-area: 1 / 1; font-size: 10.5px; letter-spacing: .14em; }
  #campeoes .cp__kicker::before { width: 26px; }
  #campeoes .cp__title { grid-area: 2 / 1; font-size: min(15.6vw, 72px); }
  #campeoes .cp__text { grid-area: 3 / 1; align-self: start; max-width: none; margin-top: 12px; font-size: 15px; line-height: 1.52; padding: 14px 16px; background: rgba(4, 1, 12, .66); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-left: 2px solid var(--cyan); }
  #campeoes .cp__photo { grid-area: 3 / 1; align-self: stretch; justify-self: center; height: auto; min-height: 0; margin-top: 14px; container-type: size; width: 100%; }
  #campeoes .cp__photo-in { height: 100%; width: auto; max-width: 100%; margin-inline: auto; }
  #campeoes .cp__row { grid-area: 4 / 1; margin-top: 14px; gap: 12px; flex-wrap: nowrap; justify-content: space-between; }
  #campeoes .cp__day { flex: 1 1 auto; padding: 12px 14px 12px 12px; gap: 10px; font-size: 17px; --bevel: 10px; }
  #campeoes .cp__cup { width: 24px; height: 24px; }
  #campeoes .cp__sold { padding: 8px 12px 10px; }
  #campeoes .cp__sold .sold__k { font-size: 12px; }
  #campeoes .cp__sold img { max-height: 46px; }
  #campeoes .cp__edge { width: 18px; }
  #campeoes .cp__edge--l { left: -20px; }
  #campeoes .cp__edge--r { right: -20px; }
  #campeoes .cp__cap { font-size: 9.5px; letter-spacing: .06em; padding: 6px 9px; bottom: 14px; max-width: 90%; text-wrap: balance; }
  #campeoes .cp__veil { background: linear-gradient(180deg, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .4) 34%, rgba(0, 0, 0, .25) 70%, rgba(0, 0, 0, .7) 100%); }
  /* a medalha mora na faixa livre entre o título e a placa (o JS mede --cp-mt/--cp-mh no refresh);
     a fita nasce do escuro, sem corte seco; estado final (foto na tela): quase apagada */
  #campeoes .cp__medal { right: auto; left: 52%; top: var(--cp-mt, 30svh); height: var(--cp-mh, 54svh); margin-left: calc(var(--cp-mh, 54svh) * -.2716); opacity: .1; }
  /* a máscara recorta na caixa do elemento: a caixa sobra 100px em volta para não cortar o brilho neon em retângulo */
  #campeoes .cp__medal-swing {
    position: absolute; inset: -100px; width: auto; height: auto; padding: 100px; transform-origin: 50% 100px;
    -webkit-mask-image: linear-gradient(180deg, transparent 100px, #000 calc(100px + (100% - 200px) * .22));
    mask-image: linear-gradient(180deg, transparent 100px, #000 calc(100px + (100% - 200px) * .22));
  }
  #campeoes .cp__medal-cap { display: none; }
  #campeoes .cp__beam { width: 60vw; margin-left: -30vw; }
}

/* ---------- Movimento reduzido: sem pino, tudo em fluxo ---------- */
.reduced #campeoes .cp { height: auto; min-height: 100vh; min-height: 100svh; }
.reduced #campeoes .cp__grid { height: auto; min-height: 100vh; min-height: 100svh; padding-bottom: 48px; }
/* estado final: a medalha recuada à direita da foto, sem a legenda (ela ficaria sob a foto e pareceria legenda dela) */
.reduced #campeoes .cp__medal { transform: translateX(34%) scale(.86); opacity: .3; }
.reduced #campeoes .cp__medal-cap { visibility: hidden; }
@media (max-width: 820px) {
  .reduced #campeoes .cp__grid { grid-template-rows: auto auto auto auto auto; }
  .reduced #campeoes .cp__medal { transform: none; opacity: .35; }
  .reduced #campeoes .cp__photo { grid-area: 4 / 1; height: 460px; container-type: normal; }
  .reduced #campeoes .cp__photo-in { height: 100%; }
  .reduced #campeoes .cp__row { grid-area: 5 / 1; }
}