/* Trabajo Astra@ R9 · EXPERIMENT · M10.
   Una sola cabaña lejana, a partir de las dos composiciones existentes.
   Las ventanas se apagan con una copia oscurecida de sus propios píxeles:
   no se altera ninguna imagen ni el símbolo Ñ aprobado. app.js es el único reloj;
   la elección manual sólo prevalece sobre su valor de luz. */
#noche { --noche-luz:1; --noche-dorado:#edc77d; --noche-continuidad:#091e34; background:var(--noche-continuidad); }
#noche .noche-escena { height:100svh; min-height:560px; overflow:hidden; }
#noche .noche-cielo { position:relative; height:100%; overflow:hidden; isolation:isolate; container-type:size; }
#noche .noche-paisajes { position:absolute; inset:0; }
#noche .noche-plano {
  position:absolute; --ar:1.7777778;
  width:max(100cqw,calc(100cqh * var(--ar))); aspect-ratio:var(--ar);
  left:calc((100cqw - max(100cqw,calc(100cqh * var(--ar)))) * .5);
  top:calc((100cqh - max(100cqh,calc(100cqw / var(--ar)))) * .52);
}
#noche .noche-plano > picture, #noche .noche-plano > picture img { position:absolute; inset:0; width:100%; height:100%; }
#noche .noche-plano > picture img { object-fit:cover; }
#noche .noche-vertical { display:none; --ar:.5625; }
#noche .noche-apagada {
  z-index:3; filter:brightness(.09) saturate(.2);
  clip-path:polygon(62.98% 61.15%,64.40% 61.12%,64.35% 68.85%,62.90% 68.85%);
  opacity:calc(1 - var(--noche-luz-manual,var(--noche-luz))); pointer-events:none;
}
#noche .noche-vertical .noche-apagada { clip-path:polygon(61.23% 66.1%,63.72% 65.85%,63.72% 70.52%,61.23% 70.72%); }
#noche .noche-ambiente { position:absolute; inset:0; z-index:2; pointer-events:none; }
#noche .noche-ambiente video {
  --vx:0%; --vy:0%; --vw:100%; --vh:100%; object-fit:fill;
  /* Cada vídeo ocupa su lámina exacta. La ventana conserva los píxeles
     originales del póster para que el control de luz actúe sobre ellos. */
  -webkit-mask-image:radial-gradient(ellipse 3.2% 8% at 64% 65%,transparent 70%,#000 100%);
  mask-image:radial-gradient(ellipse 3.2% 8% at 64% 65%,transparent 70%,#000 100%);
}
#noche .noche-vertical .noche-ambiente video {
  -webkit-mask-image:radial-gradient(ellipse 4% 5% at 62.475% 68.285%,transparent 70%,#000 100%);
  mask-image:radial-gradient(ellipse 4% 5% at 62.475% 68.285%,transparent 70%,#000 100%);
}
#noche .noche-luz-control {
  position:absolute; z-index:4; left:63.69%; top:65%;
  width:max(44px,1.8%); height:max(44px,7.8%);
  min-width:44px; min-height:44px; padding:0;
  transform:translate(-50%,-50%); border:0; border-radius:12px;
  background:transparent; color:var(--noche-dorado); cursor:pointer;
  touch-action:pan-y; -webkit-tap-highlight-color:transparent;
}
#noche .noche-luz-control[hidden] { display:none; }
#noche .noche-vertical .noche-luz-control { left:62.475%; top:68.285%; height:max(44px,4.9%); }
#noche .noche-luz-control:focus-visible { outline:2px solid var(--noche-dorado); outline-offset:5px; background:rgb(237 199 125/.07); }
@media (hover:hover) {
  #noche .noche-luz-control:hover { box-shadow:0 0 18px rgb(237 199 125/.18); }
}
#noche .noche-manual .noche-apagada { transition:opacity .22s ease; }
#noche .noche-sin-movimiento .noche-apagada { transition:none; }
#noche .noche-fundido {
  position:absolute; inset:0; z-index:3; pointer-events:none;
  background:linear-gradient(#09213f 0%,transparent 12%,transparent 72%,rgb(9 30 52/.48) 86%,var(--noche-continuidad) 100%);
}
#noche .noche-mensaje {
  --noche-mensaje-top:clamp(82px,13svh,155px); --noche-mensaje-respiro:16px;
  /* At the final scroll frame the scene has moved up by the credits plus any
     extra scene height. cqh reads its actual height, including sticky overrides.
     Protect the whole symbol, rather than only the first line of the phrase. */
  position:absolute; top:max(var(--noche-mensaje-top),calc(var(--noche-creditos-h,var(--noche-creditos-estimada,184px)) + max(0px,calc(100cqh - 100svh)) + var(--noche-mensaje-respiro))); left:50%; transform:translateX(-50%);
  width:min(90%,38rem); z-index:5; display:flex; flex-direction:column; align-items:center; text-align:center; pointer-events:none;
}
#noche .noche-ene { display:block; width:clamp(48px,5.4vw,76px); height:clamp(48px,5.4vw,76px); fill:var(--noche-dorado); flex:none; margin-bottom:clamp(18px,2.2svh,30px); }
#noche .noche-frase { max-width:10em; color:var(--noche-dorado); font-size:clamp(2.4rem,3.7vw,3.5rem); line-height:1.07; text-wrap:balance; text-shadow:0 2px 14px rgb(3 15 28/.8); }
#noche .noche-en { margin-top:14px; color:#dfc49b; font-size:clamp(1.1rem,1.6vw,1.35rem); text-shadow:0 2px 10px #09213f; }
#noche .noche-pie { position:absolute; inset:auto 0 0; z-index:6; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 28px; text-align:center; padding:18px var(--gutter) max(65px,calc(55px + env(safe-area-inset-bottom))); background:linear-gradient(transparent,var(--noche-continuidad)); text-shadow:0 2px 8px #031323; }
/* R13: el mismo azul cruza el borde del paisaje. Debajo continúa una impresión
   desenfocada de su bosque/agua, sin repetir la cabaña ni añadir otra imagen. */
#noche .noche-creditos { position:relative; isolation:isolate; overflow:hidden; display:flex; flex-direction:column; align-items:center; gap:5px; padding:14px var(--gutter) max(28px,calc(16px + env(safe-area-inset-bottom))); text-align:center; background:var(--noche-continuidad); }
#noche .noche-creditos::before {
  content:""; position:absolute; z-index:-1; inset:-20px; pointer-events:none;
  background:linear-gradient(rgb(9 30 52/.88),rgb(9 30 52/.66) 45%,rgb(9 30 52/.9)),url("kit/img/codex-noche_lofi_16x9-1664.webp") center bottom / 100% auto no-repeat;
  filter:blur(16px) saturate(.65);
  -webkit-mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);
  mask-image:linear-gradient(transparent,#000 24%,#000 76%,transparent);
}
#noche .noche-marca { margin:0 0 2px; color:var(--papel); font-size:1.25rem; }
#noche .lofi-nav ul { gap:2px clamp(10px,1.8vw,26px); }
#noche .lofi-credito { max-width:42rem; line-height:1.65; }
#noche .lofi-estado { max-width:34rem; font-size:.7rem; line-height:1.6; opacity:.8; }
#noche .lofi-redes { margin:0; }
@media (orientation:portrait) {
  #noche .noche-escena { min-height:650px; }
  #noche .noche-horizontal { display:none; }
  #noche .noche-vertical { display:block; }
  #noche .noche-mensaje { --noche-mensaje-top:clamp(110px,18svh,210px); --noche-creditos-estimada:calc(184px + max(0px,calc(env(safe-area-inset-bottom) - 12px))); width:min(86%,31rem); }
  #noche .noche-frase { font-size:clamp(2.35rem,8.8vw,3.7rem); }
  #noche .noche-ene { width:60px; height:60px; margin-bottom:24px; }
  #noche .noche-pie { flex-direction:column; gap:0; padding:12px 12px max(30px,calc(18px + env(safe-area-inset-bottom))); }
  #noche .lofi-nav ul { flex-wrap:nowrap; gap:8px; }
  #noche .lofi-nav a { font-size:.65rem; letter-spacing:.09em; padding-inline:3px; }
  #noche .noche-creditos { padding-top:10px; }
  #noche .noche-creditos::before { background-image:linear-gradient(rgb(9 30 52/.88),rgb(9 30 52/.66) 45%,rgb(9 30 52/.9)),url("kit/img/codex-noche_lofi_9x16-1664.webp"); }
}
@media (orientation:portrait) and (max-height:620px) {
  #noche .noche-mensaje { --noche-creditos-estimada:calc(202px + max(0px,calc(env(safe-area-inset-bottom) - 12px))); }
  #noche .noche-ene { width:44px; height:44px; margin-bottom:12px; }
  #noche .noche-frase { font-size:2.1rem; }
  #noche .noche-en { margin-top:2px; font-size:1rem; line-height:1; }
}
@media (max-height:559px) and (orientation:landscape) {
  #noche .noche-escena { height:110svh; min-height:400px; }
  #noche .noche-mensaje { --noche-mensaje-top:72px; left:29%; width:42%; }
  #noche .noche-ene { width:42px; height:42px; margin-bottom:14px; }
  #noche .noche-frase { font-size:clamp(1.8rem,3.8vw,2.45rem); }
  #noche .noche-en { font-size:1.05rem; }
  /* R2 · 2.2b · apaisado bajo: el pie (48 % del ancho, 48 px de relleno) subía los enlaces sobre «Deja una luz encendida.»
     y su degradado dejaba una costura vertical a media pantalla. Ahora va a todo el ancho y pegado al borde de la escena. */
  #noche .noche-pie { left:0; right:0; bottom:0; width:auto; padding:6px 8px max(12px,env(safe-area-inset-bottom)); gap:0 14px; }
  #noche .lofi-nav ul { gap:8px; }
  #noche .lofi-nav a { font-size:.6rem; letter-spacing:.06em; }
  #noche .lofi-redes a { font-size:.9rem; }
}
/* R2 · 2.2b · apaisado muy bajo (iPhone SE, 568×320): la escena deja 120 px al final; Ñ y frase algo menores y los enlaces
   en una sola fila para que no se monten sobre «Deja una luz encendida.». */
@media (max-height:340px) and (orientation:landscape) {
  #noche .noche-ene { width:30px; height:30px; margin-bottom:8px; }
  #noche .noche-frase { font-size:1.7rem; }
  #noche .noche-pie { flex-wrap:nowrap; gap:0 10px; }
  #noche .lofi-nav ul { gap:6px; flex-wrap:nowrap; }
  #noche .lofi-nav a { font-size:.56rem; letter-spacing:.04em; }
  #noche .lofi-redes a { font-size:.82rem; }
}
@media (prefers-reduced-motion:reduce) {
  #noche .noche-ambiente { display:none; }
  #noche .noche-apagada { transition:none; }
}
@media print {
  #noche .noche-luz-control { display:none; }
  #noche .noche-escena { height:170mm; min-height:0; break-inside:avoid; }
  #noche .noche-pie { padding-bottom:24px; }
  #noche .noche-creditos { padding-bottom:16px; }
}