/* ==========================================================================
   MayFlow — chão molhado e céu (hero)
   Chão: superfície preta brilhante que começa atrás do notebook, sem linha
   dura de horizonte; a luz dos arcos reflete em faixas verticais e o
   notebook se espelha logo abaixo da base.
   Céu: Via Láctea suave atrás das estrelas (as estrelas giram no canvas).
   ========================================================================== */
@media (min-width: 941px) {
  .hd { --hd-chao: 24%; }

  /* o notebook fica onde estava: a base agora pousa dentro do chão */
  .hd-lap { bottom: 20.2% !important; }
  .hd--foco .hd-lap { bottom: 19% !important; }

  .hd-chao {
    height: var(--hd-chao) !important;
    background:
      /* brilho molhado logo abaixo do notebook */
      radial-gradient(36% 46% at 66% 34%, rgba(120, 230, 255, 0.2), transparent 70%),
      radial-gradient(26% 40% at 20% 30%, rgba(47, 210, 138, 0.16), transparent 70%),
      /* superfície: começa transparente (sem horizonte) e vira preto brilhante */
      linear-gradient(180deg, rgba(2, 10, 18, 0) 0%, rgba(2, 10, 18, 0.75) 22%, rgba(1, 6, 12, 0.96) 55%, #010307 100%) !important;
  }
  .hd-chao::before { display: none !important; }

  /* reflexos das luzes: faixas verticais longas e borradas, como em piso molhado */
  .hd-chao__reflexos {
    opacity: 1 !important;
    filter: blur(5px) !important;
    background:
      linear-gradient(90deg,
        transparent 0%, rgba(47, 210, 138, 0.55) 2%, transparent 4%,
        transparent 7%, rgba(120, 240, 150, 0.4) 8.5%, transparent 10%,
        transparent 14%, rgba(47, 210, 138, 0.3) 15%, transparent 16.5%,
        transparent 30%, rgba(92, 225, 230, 0.35) 31%, transparent 32.5%,
        transparent 38%, rgba(255, 255, 255, 0.35) 38.6%, transparent 39.4%,
        transparent 47%, rgba(92, 225, 230, 0.45) 48.2%, transparent 49.5%,
        transparent 55%, rgba(156, 239, 255, 0.5) 56%, transparent 57.2%,
        transparent 63%, rgba(255, 255, 255, 0.4) 63.6%, transparent 64.4%,
        transparent 70%, rgba(42, 125, 225, 0.5) 71.4%, transparent 73%,
        transparent 79%, rgba(92, 225, 230, 0.4) 80%, transparent 81.2%,
        transparent 88%, rgba(42, 125, 225, 0.55) 89.5%, transparent 91%,
        transparent 95%, rgba(92, 160, 255, 0.45) 96.4%, transparent 98%) !important;
    -webkit-mask: linear-gradient(180deg, transparent 8%, #000 30%, rgba(0, 0, 0, 0.5) 70%, transparent 100%) !important;
    mask: linear-gradient(180deg, transparent 8%, #000 30%, rgba(0, 0, 0, 0.5) 70%, transparent 100%) !important;
  }
  /* pequenas ondulações de água na superfície */
  .hd-chao__onda {
    display: block !important;
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(180deg, transparent 0 7px, rgba(156, 239, 255, 0.05) 7px 8px);
    -webkit-mask: radial-gradient(55% 70% at 62% 40%, #000, transparent 75%);
    mask: radial-gradient(55% 70% at 62% 40%, #000, transparent 75%);
  }

  /* reflexo do notebook: espelhado na linha onde a base toca o chão */
  .hd-espelho {
    transform-origin: 50% calc(100% - 12.4%) !important;
    opacity: 0.34 !important;
    filter: blur(2.5px) saturate(1.4) !important;
    -webkit-mask: linear-gradient(180deg, transparent calc(100% - 12.4%), #000 calc(100% - 12%), transparent 100%) !important;
    mask: linear-gradient(180deg, transparent calc(100% - 12.4%), #000 calc(100% - 12%), transparent 100%) !important;
  }
  /* sombra de contato bem junto da base */
  .hd-palco::before { left: 30% !important; right: 8% !important; bottom: 8.6% !important; height: 6% !important; z-index: 2 !important; }
}
@media (prefers-reduced-motion: no-preference) and (min-width: 941px) {
  .hd-chao__reflexos { animation: hd-agua-luz 7s ease-in-out infinite alternate !important; }
  .hd-chao__onda { animation: hd-onda 5s linear infinite; }
}
@keyframes hd-agua-luz { from { transform: translateX(0) scaleY(1); opacity: 0.9; } to { transform: translateX(-8px) scaleY(1.06); opacity: 1; } }
@keyframes hd-onda { to { background-position: 0 16px; } }

/* ---------- céu: Via Láctea discreta atrás das estrelas ---------- */
.hd-ceu {
  position: absolute;
  inset: -20% -10%;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 9% at 50% 50%, rgba(170, 210, 255, 0.10), transparent 70%),
    radial-gradient(28% 6% at 38% 48%, rgba(92, 225, 230, 0.08), transparent 70%),
    radial-gradient(22% 5% at 64% 53%, rgba(150, 130, 255, 0.07), transparent 70%),
    radial-gradient(60% 16% at 50% 50%, rgba(40, 90, 160, 0.10), transparent 75%);
  transform: rotate(-24deg);
  filter: blur(6px);
}
@media (prefers-reduced-motion: no-preference) {
  .hd-ceu { animation: hd-ceu-gira 180s ease-in-out infinite alternate; }
}
@keyframes hd-ceu-gira { from { transform: rotate(-24deg); } to { transform: rotate(-18deg); } }

@media (min-width: 941px) {
  /* luz da tela e do anel caindo no piso molhado, bem debaixo do notebook */
  .hd-chao::after {
    content: "";
    position: absolute;
    left: 40%;
    right: 4%;
    top: 30%;
    height: 46%;
    border-radius: 50%;
    background: radial-gradient(closest-side, rgba(170, 240, 255, 0.34), rgba(92, 225, 230, 0.16) 45%, transparent 75%);
    filter: blur(10px);
  }
  /* reflexo mais visível e com fade natural */
  .hd-espelho {
    opacity: 0.45 !important;
    -webkit-mask: linear-gradient(180deg, transparent calc(100% - 12.4%), rgba(0,0,0,0.9) calc(100% - 11.8%), transparent calc(100% - 1%)) !important;
    mask: linear-gradient(180deg, transparent calc(100% - 12.4%), rgba(0,0,0,0.9) calc(100% - 11.8%), transparent calc(100% - 1%)) !important;
  }
}