/* ==========================================================================
   Hero — escena de capas con paralax de scroll
   --------------------------------------------------------------------------
   Todas las capas son PNG/WebP de 1190x1684 exportados desde nuevaweb.ai
   con el mismo recorte de mesa de trabajo, así que se apilan ya registradas.

   El movimiento se controla con dos variables que escribe parallax.js:
     --p      progreso del scroll del hero, de 0 a 1
     --slack  píxeles de recorrido vertical disponibles (paneo de cámara)

   Cada capa declara su propio --k (factor de profundidad):
     k = 0    la capa viaja pegada al suelo (plano de referencia)
     k > 0    la capa resiste la cámara -> se percibe lejana
     k < 0    la capa adelanta a la cámara -> se percibe cercana
   ========================================================================== */

@property --p     { syntax: "<number>"; inherits: true; initial-value: 0; }
@property --slack { syntax: "<length>"; inherits: true; initial-value: 0px; }

.hero {
  --p: 0;
  --slack: 0px;
  /* Cuánto sube el globo respecto a su sitio del catálogo en --p: 0.
     En apaisado la cámara ya hace un paneo largo, así que basta un empujón;
     en vertical no hay paneo posible y el descenso tiene que hacerlo el globo. */
  --descenso: 13%;
  position: relative;
  background: var(--c-cielo);
}

/* Pista de scroll: su altura define cuánto dura el descenso. */
.hero__pista { height: 320svh; }

.hero__escenario {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  background: var(--c-cielo);
  contain: paint;
}

/* --- La escena: caja con la proporción exacta del arte, escalada a cover --- */

.escena {
  position: absolute;
  left: 50%;
  bottom: 0;
  /* El póster cabe entero: se limita por altura y se deja desbordar un poco
     de ancho en móvil, lo justo para que los tres sacos siempre se vean. */
  width: min(
    calc(100% * var(--desborde-x)),
    calc(100svh * var(--arte-prop) * var(--zoom-escena))
  );
  aspect-ratio: var(--arte-ratio);
  /* Anclada abajo: en --p 0 el borde superior del arte coincide con el borde
     superior de la pantalla y en --p 1 lo hace el inferior. Si la escena no
     llega a llenar el alto, el sobrante queda arriba, sobre cielo plano. */
  transform: translate3d(-50%, calc((1 - var(--p)) * var(--slack)), 0);
}

.capa {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  transform: translate3d(0, calc(var(--p) * var(--slack) * var(--k, 0)), 0);
}

/* --------------------------------------------------------------------------
   Bandas espejadas
   El póster es vertical y la pantalla suele ser horizontal. En vez de
   deformar el dibujo, las capas de fondo se repiten volteadas a izquierda y
   derecha: como el espejo comparte la columna de píxeles del borde, la costura
   es invisible y el mar, la arena y las plantas llegan hasta los extremos.
   -------------------------------------------------------------------------- */

.banda {
  position: absolute;
  inset: 0;
  transform: translate3d(0, calc(var(--p) * var(--slack) * var(--k, 0)), 0);
}

.banda__pieza {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.banda__pieza--izq { left: -100%; scale: -1 1; }
.banda__pieza--der { left:  100%; scale: -1 1; }

/* La fila inferior de la montaña es arena lisa (#fed8a7): se prolonga hacia
   abajo para que ningún medio píxel deje ver el cielo por debajo. */
.banda--montana::after {
  content: "";
  position: absolute;
  left: -100%;
  right: -100%;
  top: 100%;
  height: 50svh;
  background: var(--c-arena);
}

/* --- Profundidad por capa --- */

.banda--nubes   { --k:  0.30; }

/* La misma imagen de nubes repetida a tres alturas, cada una más pequeña y
   más lenta que la anterior. Puebla el cielo de arriba abajo y da profundidad
   sin pesar nada: el navegador reutiliza el archivo ya descargado. */
.banda--nubes-media {
  --k: 0.40;
  transform:
    translate3d(0, calc(var(--p) * var(--slack) * var(--k)), 0)
    translateY(-30%)
    scale(0.86);
  opacity: 0.92;
}

.banda--nubes-alta {
  --k: 0.52;
  transform:
    translate3d(0, calc(var(--p) * var(--slack) * var(--k)), 0)
    translateY(-62%)
    scale(0.7);
  opacity: 0.8;
}
.capa--hashtag  { --k:  0.35; }
.banda--montana { --k:  0;    }
.banda--confeti { --k:  0.22; }
/* Las plantas son el primer plano: en vez de desplazarse (lo que destaparía
   el borde inferior del dibujo) se acercan creciendo desde el propio suelo. */
.banda--plantas {
  --k: 0;
  transform-origin: 50% 100%;
  transform: translate3d(0, 0, 0) scale(calc(1 + var(--p) * 0.07));
}
.capa--aloha    { --k: -0.03; }
.capa--logo     { --k:  0;    }

/* El globo se exporta en una mesa de trabajo propia y más amplia, porque en la
   del catálogo salía cortado por tres lados. Se recoloca aquí con el desfase
   exacto entre ambas mesas, así vuelve a encajar con el resto de capas. */
.capa--globo {
  /* right/bottom en auto: con los cuatro lados fijados por `inset: 0` el
     navegador sobredetermina la caja e ignora el ancho declarado. */
  inset: -4.3940% auto auto -5.5616%;
  width: 121.8931%;
  height: 90.6888%;
  max-width: none;   /* el max-width:100% global lo recortaba a la escena */
}

/* La sombra no se desplaza: crece y se oscurece según baja el globo. */
.capa--sombra {
  --k: 0;
  transform-origin: 74% 92%;
  transform:
    translate3d(0, 0, 0)
    scale(calc(0.82 + var(--p) * 0.18));
  opacity: calc(0.12 + var(--p) * 0.83);
}

/* --------------------------------------------------------------------------
   El globo: desciende de -13% de la escena hasta su posición original.
   En --p: 1 la composición coincide exactamente con la portada del catálogo.
   -------------------------------------------------------------------------- */

.globo {
  position: absolute;
  inset: 0;
  transform-origin: 62% 84%;
  transform:
    translate3d(
      calc(var(--p) * 1.5%),
      calc(var(--p) * var(--slack) * 0.18 + (var(--p) - 1) * var(--descenso)),
      0
    )
    scale(calc(0.93 + var(--p) * 0.07));
  will-change: transform;
}

/* Balanceo continuo, independiente del scroll. */
.globo__flotar {
  position: absolute;
  inset: 0;
  animation: flotar 7s ease-in-out infinite alternate;
  transform-origin: 62% 20%;
}

@keyframes flotar {
  from { transform: translate3d(-0.5%, 0.6%, 0) rotate(-0.7deg); }
  to   { transform: translate3d( 0.5%, -0.6%, 0) rotate(0.7deg); }
}

/* --------------------------------------------------------------------------
   Los tres sacos = los tres botones de navegación
   Posiciones calculadas del canal alfa de cada capa exportada.
   -------------------------------------------------------------------------- */

/* El contenedor ocupa toda la escena para que la ilustración quede registrada,
   así que no debe capturar el puntero: sólo lo hace la zona del saco. */
.saco {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.saco__arte {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  transform-origin: var(--centro-x) var(--centro-y);
  transition: transform var(--dur-normal) var(--ease-rebote);
}

.saco__zona {
  position: absolute;
  display: block;
  pointer-events: auto;
  left: var(--zona-x);
  top: var(--zona-y);
  width: var(--zona-w);
  height: var(--zona-h);
  border-radius: 50% 50% 46% 46% / 40% 40% 58% 58%;
  transition: box-shadow var(--dur-normal) var(--ease-salida);
}

.saco--ukes {
  --zona-x: 52.27%; --zona-y: 70.72%; --zona-w: 9.50%;  --zona-h: 10.45%;
  --centro-x: 57.02%; --centro-y: 75.94%;
  --acento: var(--acento-ukes-relleno);
  --sobre-acento: var(--acento-ukes-sobre);
}
.saco--kalimbas {
  --zona-x: 66.55%; --zona-y: 66.69%; --zona-w: 9.66%;  --zona-h: 10.39%;
  --centro-x: 71.38%; --centro-y: 71.89%;
  --acento: var(--acento-kalimbas-relleno);
  --sobre-acento: var(--acento-kalimbas-sobre);
}
.saco--ymas {
  --zona-x: 78.15%; --zona-y: 63.60%; --zona-w: 11.51%;  --zona-h: 9.50%;
  --centro-x: 83.91%; --centro-y: 68.35%;
  --acento: var(--acento-ymas-relleno);
  --sobre-acento: var(--acento-ymas-sobre);
}

/* Estados: el saco se levanta y aparece su etiqueta. */
.saco:has(.saco__zona:hover) .saco__arte,
.saco:has(.saco__zona:focus-visible) .saco__arte { transform: scale(1.14) translateY(-0.6%); }

.saco__zona:focus-visible { outline-offset: 6px; }

.saco__etiqueta {
  position: absolute;
  left: 50%;
  bottom: 100%;
  translate: -50% 0;
  margin-bottom: 0.6rem;
  padding: 0.35em 0.95em;
  background: var(--acento);
  color: var(--sobre-acento);
  font-family: var(--fuente-display);
  font-weight: 700;
  font-size: clamp(0.7rem, 0.45rem + 0.75vw, 1.05rem);
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: 999px;
  box-shadow: 0 0.35em 0 color-mix(in srgb, var(--acento) 65%, #000);
  opacity: 0;
  scale: 0.75;
  transition:
    opacity var(--dur-rapida) var(--ease-salida),
    scale var(--dur-normal) var(--ease-rebote);
  pointer-events: none;
}

.saco__zona:hover .saco__etiqueta,
.saco__zona:focus-visible .saco__etiqueta { opacity: 1; scale: 1; }

/* Pulso sutil para que se lea que son pulsables, sólo al final del descenso. */
.hero[data-aterrizado="si"] .saco__zona {
  animation: pulso 2.6s var(--ease-salida) infinite;
}
.saco--kalimbas .saco__zona { animation-delay: 0.35s; }
.saco--ymas     .saco__zona { animation-delay: 0.7s; }

@keyframes pulso {
  0%, 70%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--acento) 55%, transparent); }
  35%           { box-shadow: 0 0 0 1.1vmin color-mix(in srgb, var(--acento) 0%, transparent); }
}

/* --- Indicador de scroll --- */

.hero__indicador {
  position: absolute;
  left: 50%;
  bottom: clamp(1rem, 3svh, 2.5rem);
  translate: -50% 0;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--c-tinta);
  background: color-mix(in srgb, #fff 80%, transparent);
  backdrop-filter: blur(6px);
  border-radius: 50%;
  opacity: calc(1 - var(--p) * 3);
  pointer-events: none;
}

.hero__indicador::after {
  content: "";
  width: 1.05rem;
  height: 1.05rem;
  margin-top: -0.3rem;
  border-right: var(--trazo) solid currentColor;
  border-bottom: var(--trazo) solid currentColor;
  border-radius: 0 0 3px 0;
  rotate: 45deg;
  animation: bajar 1.8s var(--ease-salida) infinite;
}

@keyframes bajar {
  0%, 100% { transform: translateY(-0.25rem); opacity: 0.35; }
  50%      { transform: translateY(0.25rem);  opacity: 1; }
}

/* --------------------------------------------------------------------------
   Pantallas verticales (móvil)
   El póster cabe entero a lo ancho, así que sobra cielo por arriba. Ese hueco
   se convierte en cabecera: logo centrado y nubes altas, y el globo entra
   bajando desde fuera de pantalla hasta su posición del catálogo.
   -------------------------------------------------------------------------- */

/* La marca se declara primero y el media query la enciende después: al revés
   la regla base ganaría por orden y el logo nunca aparecería. */
.hero__marca {
  display: none;
  position: absolute;
  left: 50%;
  top: clamp(1rem, 3.5svh, 2.5rem);
  z-index: 2;            /* el globo pasa por detrás al bajar */
  translate: -50% 0;
  width: clamp(5rem, 24vw, 8rem);
  filter: drop-shadow(0 0.4rem 0.8rem rgb(34 34 33 / 0.25));
  transition: transform var(--dur-normal) var(--ease-rebote);
}

.hero__marca:hover { transform: scale(1.05); }

@media (max-aspect-ratio: 4 / 5) {
  .hero { --descenso: 40%; }

  /* El logo redondo de la ilustración se sustituye por el de cabecera para no
     repetir la misma marca dos veces en pantalla. */
  .capa--logo  { display: none; }
  .hero__marca { display: block; }

  /* El hashtag queda a caballo del recorte lateral y se leería partido.
     Sigue estando completo en el pie. */
  .capa--hashtag { display: none; }
}

/* --------------------------------------------------------------------------
   Sin movimiento: la escena se congela en la composición original del
   catálogo y los sacos siguen siendo botones.
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .hero__pista      { height: auto; }
  .hero__escenario  { position: relative; height: 100svh; }
  .escena           { --p: 1; --slack: 0px; transform: translate3d(-50%, 0, 0); }
  .globo            { transform: none; }
  .globo__flotar    { animation: none; }
  .capa,
  .banda,
  .banda--plantas   { transform: none; }
  .capa--sombra     { transform: none; opacity: 0.9; }
  .hero__indicador  { display: none; }
  .hero            { --descenso: 0%; }
  .hero[data-aterrizado="si"] .saco__zona { animation: none; }
}