/* scenery.css - El Cielo de Noche Alebrije */

body, html {
  /* Fondo negro puro para preservar el estilo premium y el arte alebrije */
  background: var(--bg-primary);
  background-color: var(--bg-primary); /* fallback */
  background-repeat: no-repeat;
  /* Min height ensuring the gradient covers nicely */
  min-height: 100vh;
  min-height: 100dvh;
}

/* ── Contenedor Fixed del Paisaje (siempre visible en viewport) ── */
.global-scenery {
  position: fixed; /* fixed = siempre anclado al viewport, sin importar el scroll */
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;  /* Visible sobre el canvas de humo. El hero’s fondo propio lo cubre en el inicio */
  pointer-events: none;
  /* Suavizar el borde inferior simulando neblina negra al hacer scroll */
  -webkit-mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 65%, transparent 100%);
}

/* ── Estrellas CSS puros (Box-Shadow Trick) ── */
.stars-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%; /* Cubren todo el lienzo, la máscara gradient se encargará de cortarlas suavemente abajo */
  background: transparent;
  /* Generaremos las estrellas con un tile o SVG */
  background-image: url("data:image/svg+xml,%3Csvg width='400' height='400' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='60' r='1' fill='%23ffffff' opacity='0.8'/%3E%3Ccircle cx='120' cy='220' r='1.5' fill='%23ffffff' opacity='0.9'/%3E%3Ccircle cx='300' cy='80' r='1' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='350' cy='300' r='2' fill='%23ffffff' opacity='0.7'/%3E%3Ccircle cx='200' cy='150' r='1' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='50' cy='350' r='1' fill='%23ffffff' opacity='0.4'/%3E%3Ccircle cx='180' cy='30' r='1.5' fill='%23ffffff' opacity='0.8'/%3E%3C/svg%3E");
  background-repeat: repeat;
  /* Animación lente de parpadeo */
  animation: starlight 8s infinite alternate ease-in-out;
}

/* Una segunda capa para paralaje sutil y más estrellas */
.stars-layer--dense {
  background-image: url("data:image/svg+xml,%3Csvg width='250' height='250' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='20' cy='180' r='0.8' fill='%23ffffff' opacity='0.5'/%3E%3Ccircle cx='200' cy='40' r='1' fill='%23ffffff' opacity='0.6'/%3E%3Ccircle cx='100' cy='200' r='1' fill='%23ffffff' opacity='0.3'/%3E%3C/svg%3E");
  animation: starlight 6s infinite alternate-reverse ease-in-out;
}

@keyframes starlight {
  0% { opacity: 0.6; }
  100% { opacity: 1; }
}

/* ── Luna Cinemática (fondo transparente, sin caja negra) ── */
.mystic-moon {
  position: absolute;
  top: 5vh;
  right: 5vw;
  width: 110px;
  height: 110px;
  background-image: url('../../assets/images/luna_transparente.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  /* Sin mix-blend-mode: la imagen ya tiene fondo transparente */
  filter: drop-shadow(0 0 40px rgba(255, 220, 150, 0.3));
  animation: floatMoon 8s infinite alternate ease-in-out;
}

@media (min-width: 768px) {
  .mystic-moon {
    top: 5vh;
    right: 6vw;
    width: 220px;
    height: 220px;
    filter: drop-shadow(0 0 60px rgba(255, 220, 150, 0.25));
  }
}

@keyframes floatMoon {
  0%   { transform: translateY(0px); }
  100% { transform: translateY(-12px); }
}

/* ── Montañas Cinemáticas de Cobre (position absolute, al final de la página) ── */
/* Las montañas sobresalen hacia arriba del footer para eliminar la línea de corte */
.mountains-scenery {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90vh;  /* Muy alto para que suban bastante por encima del footer */
  top: auto;
  margin-top: -40vh; /* NEGATIVO: hace que suban por encima del borde del footer */
  pointer-events: none;
  z-index: -1;
}

.mountains-scenery__img {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../../assets/images/puras_montanas_cinematicas.png'); /* ruta correcta desde css/components/ */
  background-size: cover;
  background-position: bottom center;
  background-repeat: no-repeat;
  mix-blend-mode: screen;
  /* Difuminar el borde superior para que se integre con el negro */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 100%);
  /* Convertir a gris/plata (moonlight) en móvil usando CSS filter, igual que en desktop pero en vivo */
  filter: grayscale(1) brightness(0.85);
}

/* ── Desktop: montañas detrás del maguey ── */
@media (min-width: 768px) {
  .mountains-scenery {
    height: 100vh;
    margin-top: -45vh;
    bottom: 0;
  }
  .mountains-scenery__img {
    background-image: url('../../assets/images/montanas_alpha.png');
    background-size: cover;          
    background-position: bottom center; 
    filter: none;
    /* Desactivamos blend mode para que la montaña física tape a la luna por detrás */
    mix-blend-mode: normal;
    /* Eliminamos la difuminación artificial de CSS para que el pico sea 100% sólido y bloquee la luna */
    -webkit-mask-image: none;
    mask-image: none;
  }
}