/* ==========================================================================
   ambiente.css — fondo fijo (manchas y partículas) y escenario fijado.
   El fondo se ve siempre; las manchas solo derivan si no se pidió movimiento
   reducido. El escenario fijado solo existe con la clase "movimiento" en
   <html>, que pone movimiento.js cuando GSAP ha cargado. Sin ella, los
   planos se apilan uno debajo de otro y todo se lee de un vistazo.
   ========================================================================== */

/* --- Espera mientras llegan las librerías --- */
/* movimiento.js pone esta clase antes de pintar nada y la quita al arrancar GSAP
   (o a los 3,5 s si el CDN no responde). Sin ella, el texto animado se vería un
   instante, desaparecería al llegar GSAP y volvería. */

.movimiento-cargando .plano--historia {
  opacity: 0;
}

/* --- Fondo fijo detrás de toda la página --- */

.ambiente {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh; /* la altura grande: no deja hueco cuando se esconde la barra del móvil */
  z-index: 0;
  overflow: hidden;
  background-color: var(--fondo);
  pointer-events: none;
}

main {
  position: relative;
  z-index: 1;
}

/* Lo que se desplaza con el scroll (parallax); sobresale para que nunca se vea el borde */
.ambiente__movil {
  position: absolute;
  inset: -15vh -10vw;
  will-change: transform;
}

/* Manchas: degradados radiales sin filtro de desenfoque (el desenfoque es caro en el móvil).
   Juegan entre los dos vinos y tocan el rosa. Solo hay UNA mancha rosa, al 22 %: así, aunque
   pase por encima del vino medio, el crema sigue dando ≥ 5.2:1 (CLAUDE.md, sección 5, regla 4). */
.ambiente__mancha {
  position: absolute;
  border-radius: 50%;
  will-change: transform;
}

.ambiente__mancha--vino {
  top: -10%;
  left: -25%;
  width: 95vmax;
  height: 95vmax;
  background: radial-gradient(closest-side, var(--fondo-medio) 25%, transparent);
  animation: deriva-a 34s ease-in-out infinite alternate;
}

.ambiente__mancha--vino-2 {
  bottom: -20%;
  right: -30%;
  width: 85vmax;
  height: 85vmax;
  background: radial-gradient(closest-side, var(--fondo-medio) 20%, transparent);
  animation: deriva-b 43s ease-in-out infinite alternate;
}

.ambiente__mancha--rosa {
  top: 25%;
  left: 15%;
  width: 70vmax;
  height: 70vmax;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--rosa) 22%, transparent), transparent);
  animation: deriva-c 52s ease-in-out infinite alternate;
}

/* Deriva en reposo: lenta y continua, solo transform */
@keyframes deriva-a {
  0%   { transform: translate3d(0, 0, 0) scale(1); }
  50%  { transform: translate3d(18vw, 12vh, 0) scale(1.1); }
  100% { transform: translate3d(6vw, 30vh, 0) scale(0.95); }
}

@keyframes deriva-b {
  0%   { transform: translate3d(0, 0, 0) scale(1.05); }
  50%  { transform: translate3d(-16vw, -18vh, 0) scale(0.94); }
  100% { transform: translate3d(-28vw, -6vh, 0) scale(1.08); }
}

@keyframes deriva-c {
  0%   { transform: translate3d(0, 0, 0) scale(0.9); }
  33%  { transform: translate3d(22vw, -14vh, 0) scale(1.05); }
  66%  { transform: translate3d(-12vw, 10vh, 0) scale(1.12); }
  100% { transform: translate3d(10vw, 24vh, 0) scale(0.95); }
}

/* Partículas (particulas.js): puntos de pintura dorados y rosas que derivan solos */
.particulas {
  display: none;
}

.movimiento .particulas {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100lvh;
  z-index: 0;
  pointer-events: none;
}

/* --- Escenario fijado --- */
/* Con movimiento: una pantalla que ScrollTrigger deja fija (pin) mientras el scroll avanza
   la línea de tiempo de sus planos. Los planos se apilan uno encima de otro. */

.movimiento .escenario {
  position: relative;
  height: 100vh;
  height: 100svh; /* la altura pequeña: el contenido cabe siempre, con o sin la barra del móvil */
  overflow: hidden;
}

.movimiento .escenario > .plano {
  position: absolute;
  inset: 0;
  min-height: 0;
}

/* El Inicio va encima: su ventana se cierra y deja ver la historia, que espera debajo */
.movimiento .escenario > .plano--inicio {
  z-index: 2;
}

.movimiento .escenario > .plano--historia {
  z-index: 1;
}

/* Ventana de la pintura: movimiento.js anima su máscara (clip-path) para encogerla en una
   ventana redondeada y cerrarla hacia arriba. En el modo sin clip-path, se escala y sube. */
.plano__ventana {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: -1;
}

.movimiento .plano__ventana {
  will-change: clip-path, transform;
}

/* Máscaras (modo "clip-path" de movimiento.js, que pone la clase .mascara-recorte en <html>).
   Se animan variables numéricas y no el clip-path entero: el navegador simplifica
   "inset(0% 0% 0% 0%)" a "inset(0%)" y GSAP mezclaría números que no se corresponden. */
.mascara-recorte .plano__ventana {
  clip-path: inset(
    calc(var(--recorte-arriba, 0) * 1%)
    calc(var(--recorte-lados, 0) * 1%)
    calc(var(--recorte-abajo, 0) * 1%)
    round calc(var(--recorte-radio, 0) * 1px)
  );
}

/* Un momento de la historia sale tapado por su borde de abajo, que sube */
.mascara-recorte .escenario .momento {
  clip-path: inset(-10% 0 calc(var(--recorte-abajo, -10) * 1%) 0);
}

.plano__ventana picture {
  display: block;
  width: 100%;
  height: 100%;
  animation: acercar 42s ease-in-out infinite alternate;
}

.plano__ventana img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* La pintura se acerca casi sin notarse, también en reposo */
@keyframes acercar {
  from { transform: scale(1) translate3d(0, 0, 0); }
  to   { transform: scale(1.045) translate3d(-1%, -0.6%, 0); }
}

/* --- Lenis (scroll suave en escritorio) --- */
/* Lo mínimo de lenis.css. El scroll suave de CSS se apaga para que no choque con Lenis. */

html.lenis,
html.lenis body {
  height: auto;
}

html.lenis {
  scroll-behavior: auto;
}

.lenis.lenis-stopped {
  overflow: clip;
}

/* Mientras la página se desliza, el mapa no se queda con la rueda del ratón */
.lenis.lenis-scrolling iframe {
  pointer-events: none;
}