/* =========================================================
   SITI — landing · 8. hero de noche (Juárez antes de amanecer)
   Siempre es de noche, sea cual sea el tema: dentro del hero y del día
   los tokens se quedan en la paleta oscura (data-dark).
   ========================================================= */
[data-dark],
.nav.is-dark{
  --bg:var(--d-bg); --bg-2:var(--d-bg-2); --fg:var(--d-fg); --surface:var(--d-surface);
  --muted:var(--d-muted); --line:var(--d-line); --line-2:var(--d-line-2);
  --card:var(--d-card); --ink:var(--d-ink); --shadow:var(--d-shadow);
  color:var(--fg);
}

.noche{background:#090909;isolation:isolate;padding:130px 0 110px}
.noche__sky{position:absolute;inset:0;z-index:-1;pointer-events:none}
.noche__glow{
  position:absolute;left:50%;bottom:-38vh;width:150vw;height:70vh;transform:translateX(-50%);
  background:radial-gradient(closest-side,rgba(var(--hot),.22),rgba(var(--hot),.06) 60%,transparent);
}

/* estrellas: puntitos en un fondo repetido que parpadea */
.stars{
  position:absolute;inset:0;opacity:.8;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%,#fff 50%,transparent),
    radial-gradient(1px 1px at 28% 42%,#fff 50%,transparent),
    radial-gradient(1.6px 1.6px at 46% 12%,#ffe3c2 50%,transparent),
    radial-gradient(1px 1px at 63% 30%,#fff 50%,transparent),
    radial-gradient(1.3px 1.3px at 78% 9%,#fff 50%,transparent),
    radial-gradient(1px 1px at 88% 36%,#ffe3c2 50%,transparent),
    radial-gradient(1.2px 1.2px at 6% 56%,#fff 50%,transparent),
    radial-gradient(1px 1px at 54% 58%,#fff 50%,transparent);
  background-size:420px 360px;
  animation:twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle{from{opacity:.45}to{opacity:.9}}

.noche__in{grid-template-columns:minmax(0,1fr) minmax(300px,.95fr)}
.noche__copy{position:relative;z-index:2}
.noche .hero__h1{margin-bottom:28px}

/* ---------- el diorama ---------- */
.noche__visual{width:100%;max-width:620px;justify-self:end}
.noche__zoom{position:relative;aspect-ratio:1;transform-origin:50% 60%}
.noche__halo{
  position:absolute;inset:4%;border-radius:50%;filter:blur(80px);
  background:rgba(var(--hot),.26);animation:halo 5s ease-in-out infinite;
}
@keyframes halo{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.12);opacity:1}}

.noche__city{position:absolute;inset:0}
/* el video trae fondo #090909: se agranda, sus orillas se difuminan y con lighten el halo se ve a través del negro */
.noche__video{
  position:absolute;top:-9.5%;left:-9.5%;width:119%;height:119%;max-width:none;object-fit:cover;mix-blend-mode:lighten;
  -webkit-mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
          mask-image:radial-gradient(closest-side,#000 80%,transparent 100%);
}
.noche__still{position:absolute;inset:0;width:100%;height:100%;display:none;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}

/* objetos 3D alrededor: JS los mueve con el mouse y los avienta al bajar */
.obj{position:absolute;left:var(--x);top:var(--y);width:var(--w);z-index:2;pointer-events:none;will-change:transform}
.obj img{
  width:100%;height:auto;user-select:none;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.45));
  animation:flotar 6s ease-in-out infinite;animation-delay:calc(var(--i) * -1.3s);
}
@keyframes flotar{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(3deg)}}

/* ---------- notificación de SITI (también la usa el día) ---------- */
.push{
  display:flex;align-items:flex-start;gap:12px;width:min(320px,86vw);padding:12px 14px 13px;
  border-radius:20px;color:#141414;text-align:left;
  background:rgba(250,249,246,.9);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 22px 50px -18px rgba(0,0,0,.65),inset 0 0 0 1px rgba(255,255,255,.6);
}
.push__app{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:11px;background:#141414}
.push__app img{width:auto;height:24px}
.push__body{display:flex;flex-direction:column;gap:2px;min-width:0}
.push__top{display:flex;justify-content:space-between;gap:10px;font-size:.74rem;color:rgba(20,20,20,.55)}
.push__top b{font-family:var(--f-dis);font-weight:800;color:#141414;letter-spacing:.02em}
.push__msg{font-family:var(--f-dis);font-weight:600;font-size:.92rem;line-height:1.35;letter-spacing:-.01em}

.push--hero{position:absolute;z-index:3;right:-2%;bottom:-4%;transform-origin:100% 100%}

/* ---------- "baja despacito" ---------- */
.noche__hint{
  position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:10px;
  font-family:var(--f-dis);font-weight:600;font-size:.86rem;color:var(--muted);transition:color .3s;
}
.noche__hint:hover{color:var(--fg)}
.noche__mouse{display:flex;justify-content:center;width:24px;height:38px;padding-top:7px;border:2px solid currentColor;border-radius:99px}
.noche__mouse i{width:4px;height:8px;border-radius:99px;background:var(--orange);animation:rueda 1.8s ease-in-out infinite}
@keyframes rueda{0%,100%{transform:translateY(0);opacity:1}50%{transform:translateY(10px);opacity:.2}}

@media (prefers-reduced-motion:reduce){
  .noche__video{display:none}
  .noche__still{display:block}
}
@media (max-width:860px){
  .noche{padding:110px 0 120px;min-height:auto}
  .noche__in{grid-template-columns:1fr}
  .noche__visual{justify-self:center;max-width:min(520px,88vw)}
  .push--hero{left:0;right:0;margin-inline:auto;transform-origin:50% 100%;bottom:-12%}
}
@media (max-width:560px){
  .push{gap:10px;padding:10px 12px}
  .push__msg{font-size:.84rem}
  .noche__hint{display:none}
}