/* =====================================================================
   10 · kids — Corrida Rock Kids com Luna Rock.
   Tom mais leve, mesma paleta. Luna ("lua") toca guitarra dentro de uma
   lua nova com o contorno aceso em neon; o filme f-luna vem sobre preto
   puro e se funde no disco. As quatro fotos são cartões com fita neon,
   distribuídos com a rolagem. Notas musicais e estrelinhas no ar.
   ===================================================================== */
#kids { --moon: min(62svh, 36vw, 560px); }
#kids .kid__stage { position: relative; }

/* ---------- Céu próprio (estrelinhas) ---------- */
#kids .kid__sky { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
#kids .kid__sky::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(40% 55% at 60% 55%, rgba(120, 0, 240, .28), transparent 70%),
    radial-gradient(30% 40% at 85% 30%, rgba(240, 0, 240, .14), transparent 70%),
    radial-gradient(35% 45% at 15% 80%, rgba(0, 216, 248, .1), transparent 70%);
}
#kids .kid__stars { position: absolute; inset: 0; }
#kids .kid__star { position: absolute; width: var(--s, 10px); height: var(--s, 10px); left: var(--x); top: var(--y); color: var(--c, #fff); opacity: .9; }
#kids .kid__star svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 4px currentColor); animation: kid-twinkle var(--d, 3s) var(--dl, 0s) ease-in-out infinite; }
@keyframes kid-twinkle { 0%, 100% { transform: scale(.35) rotate(0deg); opacity: .35; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* ---------- Grade ---------- */
#kids .kid__grid { position: relative; z-index: 1; }
#kids .kid__copy { display: grid; justify-items: start; gap: clamp(14px, 2vh, 24px); min-width: 0; container-type: inline-size; }
/* O kicker é uma linha só: na coluna estreita (1101–1200 px, celular de 320)
   ele quebrava em "…COM LUNA / ROCK". Aperta o espaçamento em vez de quebrar. */
#kids .kid__kicker { white-space: nowrap; }
/* larguras medidas do kicker inteiro: 369 px no corpo 13 (desktop), 319 no corpo 11 (celular) */
@media (min-width: 1101px) { @container (max-width: 372px) {
  #kids .kid__kicker { letter-spacing: .1em; gap: .6em; }
  #kids .kid__kicker::before { width: 24px; }
} }
@media (max-width: 1100px) { @container (max-width: 322px) {
  #kids .kid__kicker { letter-spacing: .1em; gap: .6em; }
  #kids .kid__kicker::before { width: 24px; }
} }
#kids .kid__title { font-size: clamp(52px, 6.3vw, 112px); line-height: 1.12; }
#kids .kid__body { max-width: 44ch; }
#kids .kid__tags .tags { font-size: clamp(15px, .9vw + 7px, 21px); }

/* ---------- Luna na lua ---------- */
#kids .kid__luna { position: relative; display: grid; justify-items: center; gap: clamp(8px, 1.4vh, 16px); min-width: 0; }
/* Linha 1: órbita, lua, Luna e notas empilhadas na mesma célula (tamanho = a lua) */
#kids .kid__luna > .kid__orbit,
#kids .kid__luna > .kid__moon,
#kids .kid__luna > .kid__char,
#kids .kid__luna > .kid__fx { grid-row: 1; grid-column: 1; }
#kids .kid__moon {
  position: relative; width: var(--moon); aspect-ratio: 1; border-radius: 50%; align-self: center; justify-self: center;
  background: radial-gradient(circle at 50% 50%, #000 0 62%, #020006 72%, #07021a 86%, #13053a 100%);
  box-shadow:
    inset 16px -4px 30px -10px rgba(0, 216, 248, .55),
    inset -16px 6px 34px -10px rgba(240, 0, 240, .5),
    0 0 0 1px rgba(170, 160, 230, .22),
    0 0 42px rgba(120, 0, 240, .5),
    0 0 130px rgba(240, 0, 240, .22);
}
#kids .kid__rim {
  position: absolute; inset: -3px; border-radius: 50%;
  background: conic-gradient(from 210deg, transparent 0 18%, rgba(0, 216, 248, .95) 30%, rgba(120, 0, 240, .95) 42%, rgba(240, 0, 240, .95) 54%, transparent 66% 100%);
  -webkit-mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  mask: radial-gradient(circle closest-side, transparent calc(100% - 4px), #000 calc(100% - 3px));
  filter: drop-shadow(0 0 8px rgba(240, 0, 240, .9)) drop-shadow(0 0 18px rgba(0, 216, 248, .5));
  animation: kid-spin 22s linear infinite;
}
#kids .kid__limb {
  position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 68% 42%, transparent 60%, rgba(0, 216, 248, .08) 68%, rgba(0, 216, 248, .22) 72%, transparent 74%);
  opacity: .9;
}
#kids .kid__orbit {
  position: relative; width: calc(var(--moon) * 1.32); height: calc(var(--moon) * 1.32); margin: calc(var(--moon) * -.16); align-self: center; justify-self: center; pointer-events: none;
  /* a órbita some do lado do texto */
  -webkit-mask-image: linear-gradient(90deg, transparent 4%, #000 30%); mask-image: linear-gradient(90deg, transparent 4%, #000 30%);
}
#kids .kid__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
#kids .kid__ring--a { inset: 7%; width: 86%; height: 86%; animation: kid-spin 40s linear infinite; }
#kids .kid__ring--b { inset: 2.5%; width: 95%; height: 95%; animation: kid-spin 64s linear infinite reverse; }
#kids .kid__sat { fill: #fff; filter: drop-shadow(0 0 6px var(--cyan)) drop-shadow(0 0 12px var(--cyan)); }
#kids .kid__sat--m { filter: drop-shadow(0 0 6px var(--magenta)) drop-shadow(0 0 12px var(--magenta)); }
@keyframes kid-spin { to { transform: rotate(1turn); } }

/* O filme vem sobre preto puro: elipse com borda esfumada, dentro do disco preto */
#kids .kid__char { position: relative; height: calc(var(--moon) * .94); aspect-ratio: 3 / 4; align-self: center; justify-self: center; }
#kids .kid__bob { position: absolute; inset: 0; animation: kid-float 5.2s ease-in-out infinite; }
#kids .kid__film {
  position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; background: transparent;
  -webkit-mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 82%, transparent 99%);
  mask-image: radial-gradient(ellipse closest-side at 50% 50%, #000 82%, transparent 99%);
  opacity: 0; transition: opacity .8s var(--ease-out);
}
#kids .kid__cut {
  position: absolute; left: 51%; top: 52%; height: 72%; width: auto; max-width: none;
  transform: translate(-50%, -50%); transform-origin: 50% 90%;
  filter: drop-shadow(0 0 1px rgba(0, 216, 248, .6)) drop-shadow(0 0 16px rgba(120, 0, 240, .45));
  animation: kid-sway 2.6s ease-in-out infinite; transition: opacity .8s var(--ease-out);
}
#kids.has-film .kid__film { opacity: 1; }
#kids.has-film .kid__cut { opacity: 0; }
@keyframes kid-float { 0%, 100% { transform: translateY(-1.2%); } 50% { transform: translateY(1.2%); } }
@keyframes kid-sway { 0%, 100% { transform: translate(-50%, -50%) rotate(-2.2deg); } 50% { transform: translate(-50%, -51.5%) rotate(2.2deg); } }

/* Notas e brilhos */
#kids .kid__fx { position: relative; width: var(--moon); aspect-ratio: 1; align-self: center; justify-self: center; pointer-events: none; z-index: 2; }
#kids .kid__note { position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s); color: var(--c); opacity: 0; }
#kids .kid__note svg { width: 100%; height: 100%; fill: currentColor; filter: drop-shadow(0 0 5px currentColor); }
#kids .kid__note { animation: kid-note var(--d) var(--dl) cubic-bezier(.3, .6, .4, 1) infinite; }
@keyframes kid-note {
  0% { transform: translate(0, 0) scale(.4) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  70% { opacity: .9; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1) rotate(var(--rot)); opacity: 0; }
}

#kids .kid__name {
  grid-row: 2; position: relative; z-index: 3; margin-top: calc(var(--moon) * -.06 - 22px);
  display: grid; justify-items: center; gap: 2px; text-align: center; padding: 8px 22px 10px;
  background: rgba(5, 1, 15, .9); box-shadow: inset 0 0 0 1px rgba(240, 0, 240, .5), inset 0 -2px 0 rgba(0, 216, 248, .6);
  clip-path: polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
#kids .kid__name b {
  font-family: var(--f-display); font-style: italic; font-weight: 900; text-transform: uppercase; font-size: clamp(24px, 2vw, 34px); line-height: 1.12; letter-spacing: .02em; padding-top: .06em;
  background: var(--chrome); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(-1px 0 0 rgba(0, 216, 248, .8)) drop-shadow(1px 0 0 rgba(240, 0, 240, .8));
}
#kids .kid__name small { font-family: var(--f-mono); font-size: 11px; letter-spacing: .24em; text-transform: uppercase; color: var(--magenta); }

/* ---------- Cartões com fita neon ---------- */
#kids .kid__cards { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 1.8vw, 28px) clamp(12px, 1.4vw, 22px); padding-top: 14px; min-width: 0; }
#kids .kid__card { position: relative; }
#kids .kid__card:nth-child(1) { z-index: 4; } #kids .kid__card:nth-child(2) { z-index: 3; } #kids .kid__card:nth-child(3) { z-index: 2; } #kids .kid__card:nth-child(4) { z-index: 1; }
#kids .kid__photo { position: relative; rotate: var(--r, 0deg); padding: 6px; background: linear-gradient(160deg, #272140, #0b0819 60%, #151029); box-shadow: 0 0 0 1px rgba(170, 160, 230, .32), 0 14px 30px rgba(0, 0, 0, .65), 0 0 24px rgba(120, 0, 240, .35); }
#kids .kid__img { display: block; overflow: hidden; aspect-ratio: 3 / 5; background: #0b0819; }
#kids .kid__img img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.12); transform-origin: 50% 40%; transition: transform .6s var(--ease-out); }
#kids .kid__photo:hover .kid__img img { transform: scale(1.2); }
#kids .kid__tape {
  position: absolute; left: 50%; top: -11px; width: 64%; height: 22px; margin-left: -32%; rotate: -4deg; transform-origin: 50% 50%;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(255, 170, 255, .85), rgba(240, 0, 240, .7));
  box-shadow: 0 0 14px rgba(240, 0, 240, .75), 0 0 2px rgba(255, 255, 255, .8) inset;
  clip-path: polygon(0 0, 4% 16%, 0 33%, 4% 50%, 0 67%, 4% 84%, 0 100%, 100% 100%, 96% 84%, 100% 67%, 96% 50%, 100% 33%, 96% 16%, 100% 0);
  opacity: .92;
}
#kids .kid__tape--c {
  rotate: 5deg;
  background:
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .2) 0 2px, transparent 2px 7px),
    linear-gradient(180deg, rgba(170, 245, 255, .85), rgba(0, 216, 248, .7));
  box-shadow: 0 0 14px rgba(0, 216, 248, .75), 0 0 2px rgba(255, 255, 255, .8) inset;
}

#kids .kid__astro { position: absolute; left: 50%; top: 50%; width: 2px; height: 2px; pointer-events: none; }

/* Loops só quando a cena está na tela */
#kids:not(.is-live) .kid__star svg,
#kids:not(.is-live) .kid__note,
#kids:not(.is-live) .kid__rim,
#kids:not(.is-live) .kid__ring,
#kids:not(.is-live) .kid__bob,
#kids:not(.is-live) .kid__cut,
#kids.has-film .kid__cut { animation-play-state: paused; }

/* ---------- Desktop: cena fixada em três colunas ---------- */
@media (min-width: 1101px) and (min-height: 620px) {
  /* O palco daqui é .kid__stage (só vira tela cheia neste layout), então a
     regra do núcleo para .stage não zera o padding: fica este. */
  #kids { padding-block: 0; }
  #kids .kid__stage { height: 100vh; height: 100svh; overflow: clip; }
  /* Bordas do palco esfumadas em preto: o fliperama termina e o P12 começa
     em quadro opaco; sem isto a emenda com o céu vira uma linha reta. */
  #kids .kid__stage::after {
    content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none;
    background: linear-gradient(180deg, #000 0%, rgba(0, 0, 0, .55) 5%, transparent 13%, transparent 85%, rgba(0, 0, 0, .5) 93%, #000 100%);
  }
  #kids .kid__grid {
    height: 100%; max-width: 1520px;
    display: grid; grid-template-columns: minmax(0, 35fr) minmax(0, 38fr) minmax(0, 25fr); align-items: center; gap: clamp(20px, 2.2vw, 40px);
    padding-top: calc(var(--hud-h) + 6px); padding-bottom: 18px;
  }
  #kids .kid__luna { align-self: center; }
}
@media (min-width: 1101px) and (max-height: 780px) {
  #kids { --moon: min(58svh, 34vw, 560px); }
  #kids .kid__title { font-size: clamp(50px, 5.6vw, 96px); }
  #kids .kid__copy { gap: 12px; }
  #kids .kid__body { font-size: 16px; }
}

/* ---------- Tablet e celular: rola normal ---------- */
@media (max-width: 1100px), (max-height: 619px) {
  /* lua e fotos limitadas pela altura: cada bloco cabe inteiro numa parada (janela baixa, tablet deitado) */
  #kids { --moon: min(78vw, 520px, 62svh); }
  #kids .kid__stage { overflow-x: clip; }
  #kids .kid__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(36px, 7vw, 64px); }
  #kids .kid__cards { max-width: min(560px, calc((100svh - 120px) * .6)); width: 100%; justify-self: center; gap: 26px 18px; }
  /* Esfumado no respiro de baixo (fora do conteúdo): o P12 começa em preto opaco */
  #kids::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 72px; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, transparent, #000);
  }
}
@media (min-width: 821px) and (max-width: 1100px) {
  #kids .kid__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
  /* texto em duas colunas (título | parágrafo + tags): sem o meio vazio à direita e a Luna sobe para o primeiro quadro */
  #kids .kid__copy { grid-column: 1 / -1; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); column-gap: clamp(28px, 4vw, 48px); align-items: end; }
  #kids .kid__kicker { grid-column: 1 / -1; }
  #kids .kid__title { grid-column: 1; grid-row: 2 / span 2; }
  #kids .kid__body { grid-column: 2; grid-row: 2; }
  #kids .kid__tags { grid-column: 2; grid-row: 3; }
  #kids { --moon: min(44vw, 520px, 62svh); }
}
@media (max-width: 820px) {
  #kids .kid__title { font-size: clamp(46px, 13.5vw, 72px); }
  #kids .kid__tags { padding: 12px 18px; }
  #kids .kid__tags .tags { font-size: 15px; gap: .3em .6em; }
  #kids .kid__tags .tags > * + *::before { margin-right: .6em; }
}

/* ---------- Movimento reduzido ---------- */
.reduced #kids .kid__star svg,
.reduced #kids .kid__rim,
.reduced #kids .kid__ring,
.reduced #kids .kid__bob,
.reduced #kids .kid__cut { animation: none; }
.reduced #kids .kid__note { animation: none; opacity: .8; transform: translate(calc(var(--dx) * .85), calc(var(--dy) * .85)) scale(.9) rotate(calc(var(--rot) * .8)); }
.reduced #kids .kid__note:nth-child(even) { display: none; }