/* =========================================================
   INNOBANC — Escena nocturna (montañas + estrellas)
   Misma identidad visual que la landing (public_html/), en escala de
   grises pura. Versión completa para el login, versión muy sutil como
   ambiente de fondo dentro del resto de la app.
   ========================================================= */

/* ---------- Versión completa (login) ---------- */

.ib-scene {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  isolation: isolate;
  background:
    radial-gradient(circle at 50% 14%, rgba(255,255,255,0.085) 0%, rgba(255,255,255,0.036) 12%, transparent 34%),
    radial-gradient(circle at 50% 42%, rgba(255,255,255,0.02) 0%, transparent 42%),
    linear-gradient(180deg, #060606 0%, #101010 44%, #080808 100%);
}

.ib-scene__night,
.ib-scene__stars,
.ib-scene__shooting,
.ib-scene__veil,
.ib-scene__glow {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ib-scene__night {
  z-index: 0;
  background:
    radial-gradient(circle at 50% 10%, rgba(255,255,255,0.055), transparent 24%),
    radial-gradient(circle at 20% 14%, rgba(255,255,255,0.022), transparent 26%),
    radial-gradient(circle at 80% 16%, rgba(255,255,255,0.022), transparent 26%),
    #060606;
}

.ib-scene__stars, .ib-scene__shooting { z-index: 1; }

.ib-star {
  position: absolute;
  width: var(--size, 1px);
  height: var(--size, 1px);
  border-radius: 999px;
  background: rgba(255,255,255,var(--alpha,0.72));
  box-shadow: 0 0 9px rgba(255,255,255,0.26);
  animation: ibTwinkle var(--speed, 6s) ease-in-out var(--delay, 0s) infinite;
}

@keyframes ibTwinkle {
  0%, 100% { opacity: .46; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.22); }
}

.ib-shooting-star {
  position: absolute;
  width: clamp(120px, 13vw, 200px);
  height: 1px;
  border-radius: 999px;
  opacity: 0;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,0.96) 72%, rgba(255,255,255,0.82) 100%);
  box-shadow: 0 0 8px rgba(255,255,255,0.12), 0 0 16px rgba(255,255,255,0.08);
  transform: rotate(-27deg);
  transform-origin: right center;
  animation: ibMeteor 2.8s cubic-bezier(.2,.62,.18,1) forwards;
}

@keyframes ibMeteor {
  0% { opacity: 0; translate: 0 0; }
  10% { opacity: .32; }
  28% { opacity: .48; }
  62% { opacity: .34; }
  100% { opacity: 0; translate: 46vw 25vh; }
}

.ib-scene__mountains {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: 0;
  width: 130%;
  height: min(38vh, 360px);
  translate: -50% 0;
  overflow: hidden;
  pointer-events: none;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 12%, rgba(0,0,0,.7) 38%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.12) 12%, rgba(0,0,0,.7) 38%, #000 100%);
}

.ib-scene__mountains img {
  /* Sin filter ni animación a propósito (antes tenía las dos a la vez, el combo más caro para
     el navegador: reaplicar un filtro en cada fotograma de una animación) — la foto ya es
     prácticamente blanco y negro de origen, así que el filtro apenas se notaba mientras sí
     costaba batería/fluidez real en teléfonos de gama media/baja. Ver Ampliación 34. */
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
  transform: scale(1.03);
}

.ib-scene__veil { z-index: 3; }
.ib-scene__veil--top { background: linear-gradient(180deg, rgba(0,0,0,0.1) 0%, transparent 30%); }
.ib-scene__veil--bottom { background: linear-gradient(0deg, rgba(0,0,0,0.16) 0%, transparent 40%); }
.ib-scene__glow { z-index: 4; background: radial-gradient(circle at 50% 34%, rgba(255,255,255,0.1), transparent 20%); }

/* ---------- Versión "app" (resto de las pantallas) ---------- */
/* Misma escena que el login (estrellas con JS + montañas), pero más discreta:
   menos estrellas, sin destellos de meteoros tan seguidos, montaña más baja. */

.ib-ambient {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background:
    radial-gradient(circle at 50% 0%, rgba(255,255,255,0.05), transparent 30%),
    var(--ib-bg);
}

.ib-ambient__stars, .ib-ambient__shooting {
  position: absolute;
  inset: 0;
}

.ib-ambient .ib-star { opacity: .75; }

.ib-ambient__mountains {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 160%;
  height: min(32vh, 280px);
  translate: -50% 0;
  overflow: hidden;
  opacity: .3;
  mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 35%, #000 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,.55) 35%, #000 100%);
}

.ib-ambient__mountains img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center bottom;
}

@media (prefers-reduced-motion: reduce) {
  .ib-star { animation: none; }
}