/*! Lector Ambiental — Todos los derechos reservados. Ver LICENSE.md. */
/* Escenarios visuales (ver js/escenarios.js).
 *
 * Cada escenario tiene 4 capas (.l-far, .l-mid, .l-near, .l-glow) hechas solo
 * con degradados: no hay imágenes que descargar. Las animaciones usan solo
 * transform y opacity (no recalculan la página) y solo corren en los modos
 * equilibrado e inmersivo. Las mismas clases dibujan las miniaturas del selector.
 */

/* --- Colores de la interfaz según el escenario -------------------------------------- */

:root,
body[data-atm='biblioteca'] {
  --c-bg: #120c08; --c-ink: #f3e6d3; --c-muted: #b9a184; --c-surface: rgba(30, 20, 14, 0.94);
  --c-surface-2: rgba(255, 236, 210, 0.06); --c-line: rgba(255, 220, 180, 0.14);
  --c-accent: #e8a65d; --c-accent-ink: #1d120a; --c-glow: rgba(232, 166, 93, 0.35); --c-chrome: rgba(18, 12, 8, 0.78);
}
body[data-atm='bosque'] {
  --c-bg: #07130f; --c-ink: #e3f1e8; --c-muted: #9dbcae; --c-surface: rgba(10, 26, 21, 0.94);
  --c-surface-2: rgba(220, 255, 235, 0.06); --c-line: rgba(180, 240, 210, 0.14);
  --c-accent: #8fd6a0; --c-accent-ink: #06140e; --c-glow: rgba(143, 214, 160, 0.35); --c-chrome: rgba(7, 19, 15, 0.78);
}
body[data-atm='espacio'] {
  --c-bg: #04060d; --c-ink: #e6eeff; --c-muted: #93a3c4; --c-surface: rgba(9, 13, 26, 0.94);
  --c-surface-2: rgba(200, 220, 255, 0.06); --c-line: rgba(150, 190, 255, 0.16);
  --c-accent: #6fd3f0; --c-accent-ink: #021018; --c-glow: rgba(111, 211, 240, 0.4); --c-chrome: rgba(4, 6, 13, 0.78);
}
body[data-atm='zen'] {
  --c-bg: #e4e1d9; --c-ink: #2a2c28; --c-muted: #6f726a; --c-surface: rgba(246, 244, 239, 0.96);
  --c-surface-2: rgba(40, 45, 38, 0.05); --c-line: rgba(40, 45, 38, 0.14);
  --c-accent: #5f8a66; --c-accent-ink: #f6f4ef; --c-glow: rgba(95, 138, 102, 0.3); --c-chrome: rgba(240, 238, 232, 0.84);
}
body[data-atm='cafe'] {
  --c-bg: #160f0d; --c-ink: #f4e7dc; --c-muted: #bba08d; --c-surface: rgba(30, 20, 17, 0.94);
  --c-surface-2: rgba(255, 225, 200, 0.06); --c-line: rgba(255, 200, 170, 0.14);
  --c-accent: #ff8a5b; --c-accent-ink: #1e0d06; --c-glow: rgba(255, 138, 91, 0.35); --c-chrome: rgba(22, 15, 13, 0.78);
}
body[data-atm='abstracto'] {
  --c-bg: #0b0d14; --c-ink: #f2f2f6; --c-muted: #a2a6b8; --c-surface: rgba(15, 17, 26, 0.94);
  --c-surface-2: rgba(255, 255, 255, 0.06); --c-line: rgba(255, 255, 255, 0.14);
  --c-accent: #ffb547; --c-accent-ink: #1a1203; --c-glow: rgba(255, 181, 71, 0.35); --c-chrome: rgba(11, 13, 20, 0.78);
}

/* --- Escenario ---------------------------------------------------------------------- */

#stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--c-bg);
}
.stage-layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.85s ease;
}
.stage-layer.active { opacity: 1; }
/* Las capas son un poco más grandes que la pantalla para que el parallax no muestre bordes. */
.stage-layer .l { position: absolute; inset: -32px; will-change: auto; }
body.gfx-equilibrado .stage-layer .l[data-depth],
body.gfx-inmersivo .stage-layer .l[data-depth] { transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
#particles { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Miniaturas del selector: mismas capas, sin animación. */
.atm-preview { position: relative; overflow: hidden; display: block; }
.atm-preview .l { position: absolute; inset: 0; animation: none !important; }

/* --- Biblioteca nocturna: estantes, una ventana con lluvia y una lámpara cálida ---------- */

.atm-biblioteca { background: radial-gradient(120% 90% at 18% 8%, #3a2414 0%, #1a110b 55%, #0d0806 100%); }
.atm-biblioteca .l-far {
  background:
    repeating-linear-gradient(0deg, #170d07 0 6px, transparent 6px 96px),
    repeating-linear-gradient(90deg, #4a2c1a 0 14px, #6b4426 14px 23px, #2e1c12 23px 30px, #7a4f2b 30px 39px,
      #3d2516 39px 47px, #5a3720 47px 58px, #24160d 58px 62px);
  opacity: 0.32;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 75%);
  mask-image: linear-gradient(to top, #000 0%, #000 42%, transparent 75%);
}
.atm-biblioteca .l-mid {
  background:
    linear-gradient(90deg, transparent 49.2%, #24150c 49.2% 50.8%, transparent 50.8%) 80% 10% / 20% 44% no-repeat,
    linear-gradient(0deg, transparent 49%, #24150c 49% 51%, transparent 51%) 80% 10% / 20% 44% no-repeat,
    linear-gradient(180deg, #1d2c3c 0%, #101a26 100%) 80% 10% / 20% 44% no-repeat;
  opacity: 0.85;
}
.atm-biblioteca .l-near { background: linear-gradient(to top, rgba(10, 6, 4, 0.85) 0%, transparent 22%); }
.atm-biblioteca .l-glow { background: radial-gradient(38% 34% at 16% 20%, rgba(255, 184, 96, 0.3), transparent 70%); }
body.gfx-equilibrado .atm-biblioteca .l-glow,
body.gfx-inmersivo .atm-biblioteca .l-glow { animation: lamp-flicker 7s ease-in-out infinite; }

/* --- Bosque fantástico: árboles, neblina y luciérnagas --------------------------------- */

.atm-bosque { background: radial-gradient(120% 90% at 60% 0%, #1f4a3f 0%, #0b1f1b 58%, #06110f 100%); }
.atm-bosque .l-far {
  background:
    radial-gradient(60% 42% at 8% 100%, #0f2e27 60%, transparent 61%),
    radial-gradient(48% 36% at 42% 100%, #12352d 60%, transparent 61%),
    radial-gradient(56% 46% at 86% 100%, #0d2a24 60%, transparent 61%);
}
.atm-bosque .l-mid {
  background: repeating-linear-gradient(90deg, transparent 0 8%, rgba(6, 17, 14, 0.92) 8% 9.4%, transparent 9.4% 19%,
    rgba(6, 17, 14, 0.75) 19% 20%, transparent 20% 31%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 35%);
  opacity: 0.8;
}
.atm-bosque .l-near {
  inset: auto -50% -32px -50%;
  height: 45%;
  background: linear-gradient(to top, rgba(170, 220, 205, 0.14), transparent);
  -webkit-mask-image: radial-gradient(40% 80% at 30% 100%, #000, transparent 70%), radial-gradient(40% 80% at 75% 100%, #000, transparent 70%);
  mask-image: radial-gradient(40% 80% at 30% 100%, #000, transparent 70%), radial-gradient(40% 80% at 75% 100%, #000, transparent 70%);
}
body.gfx-equilibrado .atm-bosque .l-near,
body.gfx-inmersivo .atm-bosque .l-near { animation: mist-drift 40s ease-in-out infinite alternate; }
.atm-bosque .l-glow { background: radial-gradient(34% 30% at 72% 8%, rgba(200, 255, 230, 0.16), transparent 70%); }

/* --- Estación espacial: estrellas, nebulosa y el borde de un planeta --------------------- */

.atm-espacio { background: radial-gradient(110% 90% at 70% 15%, #16233f 0%, #070b16 55%, #020308 100%); }
.atm-espacio .l-far {
  background:
    radial-gradient(1px 1px at 20px 30px, #fff, transparent),
    radial-gradient(1px 1px at 120px 80px, #cfe0ff, transparent),
    radial-gradient(1.5px 1.5px at 60px 150px, #fff, transparent),
    radial-gradient(1px 1px at 170px 120px, #fff, transparent),
    radial-gradient(1px 1px at 90px 190px, #a8c6ff, transparent);
  background-size: 200px 200px;
  opacity: 0.55;
}
.atm-espacio .l-mid {
  background:
    radial-gradient(40% 30% at 28% 62%, rgba(64, 180, 200, 0.18), transparent 70%),
    radial-gradient(35% 25% at 76% 34%, rgba(255, 120, 90, 0.12), transparent 70%);
}
.atm-espacio .l-near {
  background: radial-gradient(120% 60% at 50% 138%, #10213a 60%, rgba(120, 200, 255, 0.55) 60.6%, rgba(120, 200, 255, 0) 62.5%);
}
.atm-espacio .l-glow { background: radial-gradient(60% 30% at 50% 100%, rgba(111, 211, 240, 0.14), transparent 70%); }

/* --- Jardín zen: piedra, arena rastrillada, agua y niebla ------------------------------- */

.atm-zen { background: linear-gradient(180deg, #ecebe6 0%, #dcd8cd 100%); }
.atm-zen .l-far {
  background:
    radial-gradient(70% 30% at 20% 62%, rgba(150, 160, 160, 0.35), transparent 70%),
    radial-gradient(60% 26% at 80% 58%, rgba(140, 150, 152, 0.3), transparent 70%);
}
.atm-zen .l-mid {
  background:
    radial-gradient(7% 5% at 72% 84%, #8d8a80 62%, transparent 64%),
    radial-gradient(4% 3% at 64% 88%, #9c998f 62%, transparent 64%),
    repeating-radial-gradient(ellipse at 72% 85%, rgba(110, 105, 92, 0.12) 0 2px, transparent 2px 16px);
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 70%);
  mask-image: linear-gradient(to top, #000 0%, #000 45%, transparent 70%);
}
.atm-zen .l-near {
  background: linear-gradient(to top, rgba(120, 150, 150, 0.28), transparent 18%);
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 55%);
  mask-image: linear-gradient(90deg, #000 0%, #000 38%, transparent 55%);
}
.atm-zen .l-glow { background: radial-gradient(50% 40% at 30% 10%, rgba(255, 255, 250, 0.7), transparent 70%); }

/* --- Cafetería urbana: ventana con la ciudad desenfocada y lluvia en el vidrio ------------ */

.atm-cafe { background: linear-gradient(180deg, #24180f 0%, #160f0d 100%); }
.atm-cafe .l-far {
  background:
    radial-gradient(2.6% 3.6% at 18% 30%, rgba(255, 190, 90, 0.6), transparent),
    radial-gradient(3.2% 4.4% at 34% 22%, rgba(80, 200, 190, 0.45), transparent),
    radial-gradient(2.2% 3% at 52% 38%, rgba(255, 110, 90, 0.5), transparent),
    radial-gradient(3.6% 5% at 68% 26%, rgba(255, 210, 140, 0.45), transparent),
    radial-gradient(2.4% 3.2% at 84% 36%, rgba(120, 170, 255, 0.45), transparent),
    linear-gradient(180deg, #1c2633 0%, #2b2530 100%) top / 100% 58% no-repeat;
}
.atm-cafe .l-mid {
  background:
    linear-gradient(90deg, transparent 32.6%, #1a110d 32.6% 33.8%, transparent 33.8% 66%, #1a110d 66% 67.2%, transparent 67.2%) top / 100% 58% no-repeat,
    linear-gradient(0deg, #2a1a12 0%, #3b261c 20%, transparent 20.5%);
}
.atm-cafe .l-near { background: linear-gradient(0deg, rgba(0, 0, 0, 0.35), transparent 30%); }
.atm-cafe .l-glow { background: radial-gradient(36% 28% at 50% 0%, rgba(255, 200, 120, 0.22), transparent 70%); }

/* --- Espacio abstracto: formas fluidas de color ---------------------------------------- */

.atm-abstracto { background: #0b0d14; }
.atm-abstracto .l-far {
  background:
    radial-gradient(35% 45% at 25% 30%, rgba(255, 111, 89, 0.55), transparent 70%),
    radial-gradient(40% 40% at 75% 65%, rgba(36, 196, 180, 0.5), transparent 70%);
}
.atm-abstracto .l-mid {
  background:
    radial-gradient(30% 30% at 62% 22%, rgba(255, 200, 64, 0.35), transparent 70%),
    radial-gradient(28% 34% at 20% 80%, rgba(90, 140, 255, 0.28), transparent 70%);
}
body.gfx-equilibrado .atm-abstracto .l-far,
body.gfx-inmersivo .atm-abstracto .l-far { animation: blob-a 34s ease-in-out infinite alternate; }
body.gfx-equilibrado .atm-abstracto .l-mid,
body.gfx-inmersivo .atm-abstracto .l-mid { animation: blob-b 28s ease-in-out infinite alternate; }
.atm-abstracto .l-near { background: linear-gradient(135deg, rgba(255, 255, 255, 0.04), transparent 40%); }
.atm-abstracto .l-glow { background: radial-gradient(60% 50% at 50% 50%, transparent 40%, rgba(0, 0, 0, 0.45) 100%); }

/* --- Animaciones (solo transform y opacity) ------------------------------------------- */

@keyframes lamp-flicker {
  0%, 100% { opacity: 1; }
  45% { opacity: 0.86; }
  50% { opacity: 0.95; }
  70% { opacity: 0.9; }
}
@keyframes mist-drift {
  from { transform: translate3d(-6%, 0, 0); }
  to { transform: translate3d(6%, 0, 0); }
}
@keyframes blob-a {
  from { transform: translate3d(-3%, -2%, 0) scale(1); }
  to { transform: translate3d(4%, 3%, 0) scale(1.08); }
}
@keyframes blob-b {
  from { transform: translate3d(3%, 2%, 0) scale(1.05); }
  to { transform: translate3d(-4%, -3%, 0) scale(0.96); }
}