/* Dirección B «Ventana nocturna»: exterior azul profundo ilustrado + interior cálido (luz, marco, grano) + tarjeta de cristal. */
.stage { position: fixed; inset: 0; height: 100dvh; overflow: hidden; background: var(--night-ink); }

.backdrop { position: absolute; inset: 0; overflow: hidden; background: var(--night-ink); animation: boot 2.6s var(--ease-out) both; }
@keyframes boot { from { opacity: 0; transform: scale(1.06); } }
.bd { position: absolute; inset: 0; will-change: transform, opacity; }
.bd__inner {
  position: absolute; inset: -3%; background-size: cover; background-position: center;
  transform: translate3d(calc(var(--px, 0) * 6px), calc(var(--py, 0) * 4px), 0);
  transition: transform 600ms var(--ease-out);
}
.bd svg { width: 100%; height: 100%; display: block; }

/* Fotografía de fondo (ventana-nocturna.webp, 1376×768): sin estirar, sin deformar */
.bd[data-img] .bd__inner { background-color: #0a0604; background-repeat: no-repeat; background-position: center 72%; }
.bd[data-img] .bd__inner::before { /* oscurecimiento discreto para la lectura del texto, sin tapar la foto */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(6, 8, 16, 0.5) 0%, rgba(6, 8, 16, 0) 42%);
}
/* Apaisado y escritorio: panorámica a sangre (la zona oscura de la izquierda aloja la tarjeta) */
@media (min-aspect-ratio: 1/1) { .bd[data-img] .bd__inner { background-size: cover; } }
/* Vertical (móvil/tablet): la foto ocupa la parte alta centrada en ventana + vela; el resto se funde a oscuro bajo la tarjeta */
@media (max-aspect-ratio: 99/100) {
  .bd[data-img] .bd__inner { background-size: auto 56vh; background-position: 66% 0; }
  .bd[data-img] .bd__inner::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(to bottom, rgba(10, 6, 4, 0) 38%, #0a0604 54%);
  }
}
/* Parallax por capas (solo calidad alta; --px/--py los pone main.js). Unidades = unidades del viewBox */
.L1 { transform: translate(calc(var(--px, 0) * 2px), calc(var(--py, 0) * 1px)); }
.L2 { transform: translate(calc(var(--px, 0) * 5px), calc(var(--py, 0) * 2px)); }
.L3 { transform: translate(calc(var(--px, 0) * 10px), calc(var(--py, 0) * 4px)); }
.L4 { transform: translate(calc(var(--px, 0) * 20px), calc(var(--py, 0) * 8px)); }
.L1, .L2, .L3, .L4 { transition: transform 700ms var(--ease-out); }
/* Matiz distinto por habitación mientras no haya imágenes definitivas */
.stage[data-room="2"] .bd[data-kind="room"] .bd__inner { filter: hue-rotate(-10deg) saturate(1.1); }
.stage[data-room="3"] .bd[data-kind="room"] .bd__inner { filter: hue-rotate(12deg); }

#particles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }

/* Interior cálido: la escena se ve desde dentro de una habitación con una lámpara encendida */
.interior { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.interior .vignette {
  position: absolute; inset: 0;
  background:
    linear-gradient(to top, rgba(24, 12, 8, 0.82) 0%, rgba(24, 12, 8, 0) 24%),
    radial-gradient(130% 95% at 50% 38%, transparent 52%, rgba(20, 9, 6, 0.6) 100%);
  transition: opacity 2.2s var(--ease-in-out);
}
.interior .glow {
  position: absolute; inset: 0; opacity: 0.8;
  background:
    radial-gradient(62% 52% at 10% 100%, rgba(255, 176, 88, 0.42), transparent 70%),
    radial-gradient(38% 34% at 100% 0%, rgba(255, 170, 90, 0.10), transparent 70%);
  transition: opacity 2.2s var(--ease-in-out);
  animation: breathe 7s ease-in-out infinite alternate;
}
@keyframes breathe { to { opacity: 0.58; } }
.stage[data-state="interior"] .glow { opacity: 1; }
.stage[data-state="gift"] .glow, .stage[data-state="gift"] .vignette { opacity: 0.18; }

/* Grano de película muy sutil (estático, una sola vez rasterizado) */
.grain {
  position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}

/* Píldora flotante de cristal (controles) */
.pill {
  position: absolute; z-index: 10; top: max(12px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; padding: 0 4px; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.42);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); font-size: 0.8125rem; font-weight: 500; letter-spacing: 0.01em; color: #fff;
  animation: pill-in 1.4s var(--ease-out) 1.4s both;
}
@keyframes pill-in { from { opacity: 0; transform: translate(-50%, -8px); } }
.pill button { padding: 0 14px; min-height: 44px; border-radius: var(--radius-pill); transition: background 200ms var(--ease-out); }
.pill button:hover { background: rgba(255, 255, 255, 0.14); }
#skip-btn { position: relative; }
#skip-btn::after { content: ""; position: absolute; right: -1px; top: 14px; bottom: 14px; width: 1px; background: rgba(255, 255, 255, 0.28); }

/* Escena y tarjeta de cristal */
#scene-root { position: absolute; inset: 0; z-index: 2; }
.scene {
  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: flex-end; align-items: stretch; gap: var(--sp-4);
  padding: 72px var(--sp-4) max(var(--sp-4), env(safe-area-inset-bottom));
}
.panel {
  position: relative; flex: none; max-height: calc(100dvh - 88px); overflow-y: auto; scrollbar-width: none; padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: linear-gradient(180deg, rgba(26, 40, 74, 0.56), rgba(11, 19, 42, 0.52));
  border: 1px solid rgba(255, 255, 255, 0.2); border-radius: var(--radius-lg);
  backdrop-filter: blur(18px) saturate(1.15); -webkit-backdrop-filter: blur(18px) saturate(1.15); color: var(--ivory);
}
.panel::before { /* filo de luz superior */
  content: ""; position: absolute; left: 24px; right: 24px; top: 0; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(255, 238, 204, 0.55), transparent);
}
@media (min-width: 720px) {
  .scene { align-items: flex-start; padding: 88px var(--sp-8) var(--sp-8); }
  .panel { width: min(100%, 31rem); padding: 36px 40px 32px; }
}

/* Tipografía editorial (peso 400, tracking negativo, interlineado ~1,05) */
.eyebrow { display: flex; align-items: center; gap: 10px; margin: 0 0 var(--sp-3); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ivory-soft); }
.eyebrow::before { content: ""; width: 20px; height: 1px; background: var(--ivory-soft); flex: none; }
.display { margin: 0 0 var(--sp-3); font: 400 var(--fs-display)/1.02 var(--font-serif); letter-spacing: -0.045em; color: #fffaf0; text-wrap: balance; }
.heading { margin: var(--sp-2) 0; font: 400 var(--fs-heading)/1.1 var(--font-serif); letter-spacing: -0.03em; color: #fffaf0; text-wrap: balance; }
.lead { margin: 0 0 var(--sp-5); font-size: var(--fs-lead); line-height: 1.5; color: #eadfc9; text-wrap: pretty; }
.caption { margin: var(--sp-4) 0 0; font-size: var(--fs-caption); letter-spacing: 0.04em; color: var(--ivory-soft); font-variant-numeric: tabular-nums; }

/* Cuenta atrás: cifras compuestas con filetes verticales */
.countdown { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: var(--sp-5) 0 0; border-top: 1px solid rgba(244, 239, 228, 0.22); text-align: center; }
.unit { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.unit + .unit { border-left: 1px solid rgba(244, 239, 228, 0.16); }
.unit__num { font: 400 clamp(2.1rem, 10.5vw, 3.3rem)/1 var(--font-serif); letter-spacing: -0.045em; font-variant-numeric: lining-nums tabular-nums; font-feature-settings: "lnum", "tnum"; color: #fff6e4; }
.unit__num.tick { animation: tick 480ms var(--ease-out); }
@keyframes tick { from { opacity: 0.35; transform: translateY(-6px); } }
.unit__label { font-size: 0.625rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ivory-soft); }

.test-skip { margin-top: var(--sp-3); border-style: dashed; color: var(--warn); border-color: var(--warn); font-size: 0.875rem; }
.test-skip:hover { background: rgba(242, 196, 138, 0.14); color: #ffe0b8; border-color: #ffe0b8; }

/* Calidad baja: sin partículas ni deriva ni efectos de lujo */
[data-quality="low"] #particles, [data-quality="low"] .grain { display: none; }
[data-quality="low"] .interior .glow { animation: none; }
[data-quality="low"] .panel { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(10, 18, 40, 0.84); }
@media (max-height: 520px) and (orientation: landscape) { .scene { padding-top: 64px; } .panel { width: min(52%, 24rem); padding: var(--sp-3) var(--sp-4); } .display { font-size: 1.9rem; } .lead { margin-bottom: var(--sp-3); } .countdown { padding-top: var(--sp-3); } }