:root {
  --bg: #120d2b;
  /* Encuadre de la portada en pantallas horizontales (el JS lo lee para situar las auras) */
  --art-pos: 50% 35%;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  overflow: hidden;
}

.scene {
  position: fixed;
  inset: 0;
  overflow: hidden;
  isolation: isolate;
}

.scene__blur {
  position: absolute;
  inset: -40px;
  background: url("/img/portada-900.webp") center / cover no-repeat;
  filter: blur(28px) brightness(0.55) saturate(1.2);
  z-index: -1;
}

.scene__art,
.scene__fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.scene__art {
  display: block;
  object-fit: cover;
  object-position: var(--art-pos);
}

.scene__fx {
  pointer-events: none;
}

/* Imagen y partículas respiran juntas para que las auras no se desplacen */
@media (prefers-reduced-motion: no-preference) {
  .scene__art,
  .scene__fx {
    animation: breathe 24s ease-in-out infinite alternate;
    transform-origin: 50% 35%;
  }
}

@keyframes breathe {
  from { transform: scale(1); }
  to   { transform: scale(1.04); }
}

/* Pantallas verticales (móvil): franja centrada que recorta los laterales pero
   nunca el logo (≈820 px de ancho en la imagen original), fundida con el fondo */
@media (max-aspect-ratio: 6/5) {
  .scene__art {
    margin: auto 0;
    height: clamp(56.28vw, 52vh, 114.8vw);
    object-position: 50% 50%;
    -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
    mask-image: linear-gradient(transparent, #000 10%, #000 90%, transparent);
  }
  .scene__art,
  .scene__fx { transform-origin: 50% 50%; }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}