/* ============================================================================
   Piano & Teclado — tema "Marfim & Noite" + hero teclado-horizonte.
   A estrutura (c-hero/c-learn/c-band/c-faq/c-next/curtain/sound-chip/c-g3d)
   vem de cursos.css — aqui só o tema e o que é específico desta página.
   ============================================================================ */

.t-piano {
  --c-bg: #0e0e13;
  --c-bg2: #14141b;
  --c-bg3: #0a0a0e;
  --c-ink: #f2efe6;
  --c-muted: #b9b6ab;
  --c-acc: #c8a24b;
  --c-acc-strong: #e0be6a;
  --c-line: rgba(242, 239, 230, 0.14);
  --c-soft: rgba(200, 162, 75, 0.12);
}

/* ---- hero: noite sobre o teclado-horizonte ---- */
.t-piano .c-hero {
  background:
    radial-gradient(110% 64% at 50% 106%, rgba(200, 162, 75, 0.13), transparent 60%),
    linear-gradient(180deg, #08080c 0%, #0e0e13 58%, #12121a 100%);
}
#keysScene { touch-action: pan-y; cursor: pointer; }

/* o teclado vive na faixa inferior: copy e hint sobem pra não pousar nas teclas */
.t-piano .c-hero-copy { padding-bottom: calc(28svh + 40px); }
.t-piano .c-hint { bottom: calc(28svh + 46px); }

/* ---- fallback estático (prefers-reduced-motion / canvas indisponível) ---- */
.c-keys-fallback { position: absolute; inset: 0; display: none; pointer-events: none; }
.c-hero.static .c-keys-fallback { display: block; }
.c-hero.static .c-hint { display: none; }

/* céu: pontos-estrela discretos */
.c-keys-fallback::before {
  content: ""; position: absolute; inset: 0 0 26% 0;
  background-image:
    radial-gradient(1.4px 1.4px at 11% 26%, rgba(242, 239, 230, 0.7) 50%, transparent 52%),
    radial-gradient(1px 1px at 23% 58%, rgba(242, 239, 230, 0.45) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 34% 18%, rgba(224, 190, 106, 0.6) 50%, transparent 52%),
    radial-gradient(1px 1px at 47% 44%, rgba(242, 239, 230, 0.5) 50%, transparent 52%),
    radial-gradient(1.5px 1.5px at 58% 15%, rgba(242, 239, 230, 0.65) 50%, transparent 52%),
    radial-gradient(1px 1px at 66% 52%, rgba(242, 239, 230, 0.4) 50%, transparent 52%),
    radial-gradient(1.2px 1.2px at 76% 30%, rgba(224, 190, 106, 0.55) 50%, transparent 52%),
    radial-gradient(1px 1px at 85% 62%, rgba(242, 239, 230, 0.45) 50%, transparent 52%),
    radial-gradient(1.4px 1.4px at 93% 22%, rgba(242, 239, 230, 0.6) 50%, transparent 52%);
}

/* teclado: brancas + pretas em camadas de gradiente (stops em % do tile,
   pra escalar junto com o background-size no mobile) */
.c-keys-fallback::after {
  content: ""; position: absolute; left: -2%; right: -2%; bottom: 0; height: 26%;
  border-top: 1px solid rgba(242, 239, 230, 0.28);
  box-shadow: 0 -34px 70px rgba(200, 162, 75, 0.1);
  background-image:
    linear-gradient(180deg, rgba(8, 8, 12, 0.34), rgba(8, 8, 12, 0) 34%),
    linear-gradient(90deg,
      transparent 0 10.25%, #0a0a0e 10.25% 18.32%,
      transparent 18.32% 24.53%, #0a0a0e 24.53% 32.61%,
      transparent 32.61% 53.11%, #0a0a0e 53.11% 61.18%,
      transparent 61.18% 67.39%, #0a0a0e 67.39% 75.47%,
      transparent 75.47% 81.68%, #0a0a0e 81.68% 89.75%,
      transparent 89.75% 100%),
    linear-gradient(90deg, #e9e4d4 0 95.65%, #0e0e13 95.65% 100%);
  background-size: 100% 100%, 322px 58%, 46px 100%;
  background-repeat: no-repeat, repeat-x, repeat-x;
  background-position: 0 0, 0 0, 0 0;
  transform: perspective(720px) rotateX(4deg);
  transform-origin: 50% 100%;
}

/* ---- ajustes mobile do hero ---- */
@media (max-width: 820px) {
  .t-piano .c-hero {
    background:
      radial-gradient(150% 46% at 50% 108%, rgba(200, 162, 75, 0.12), transparent 62%),
      linear-gradient(180deg, #08080c 0%, #0e0e13 58%, #12121a 100%);
  }
  .t-piano .c-hero-copy { padding-bottom: calc(19svh + 34px); }
  .c-keys-fallback::before { inset: 0 0 21% 0; }
  .c-keys-fallback::after { height: 21%; background-size: 100% 100%, 252px 58%, 36px 100%; }
}