/* Lluvia Sólida — scroll scene. Loaded only where the scene renders.
   Mobile first: the caption sits over the art behind a scrim. From 1024px
   (or on any short landscape screen) the art keeps its own 9:16 ratio and
   the caption moves beside it — a landscape crop would cut the canopy off
   the top and the gel off the bottom, which is the whole point of the art. */

/* The page is paper; the scene is one of its dark blocks, edge to edge. */
.lsb-escena{background:var(--forest);color:var(--paper);padding:72px 0 0}
.lsb-escena__intro{margin-bottom:34px}
.lsb-escena__intro .lsb-eyebrow{color:var(--lime)}
.lsb-escena__intro h2{font-size:clamp(2.1rem,6vw,3.6rem);margin-top:.6rem;color:var(--paper);max-width:16ch}
.lsb-escena__lead{color:#b9cbb6;font-size:1.05rem;max-width:46ch;margin-top:1rem}

.lsb-escena__scene{position:relative}
.lsb-escena__stage{position:sticky;top:var(--hdr);height:calc(100svh - var(--hdr));height:calc(100dvh - var(--hdr));overflow:hidden;background:var(--forest)}
.lsb-escena__frames{position:absolute;inset:0}
.lsb-escena__frame{position:absolute;inset:0;opacity:0}
.lsb-escena__frame img{position:absolute;inset-inline:0;top:0;bottom:auto;width:100%;height:114%;object-fit:cover}

/* The art is busy soil texture, so the caption needs a real scrim — and it has
   to clear fast higher up so the gel beads stay readable. */
/* El texto vive en el CIELO, no sobre el suelo. El horizonte está en el 39-44%
   del lienzo en los 16 fotogramas (medido), así que la mitad de arriba es aire
   vacío y la de abajo trae lo que importa: el surco, la raíz y el producto.
   Con el texto abajo, el degradado enterraba justo eso. */
.lsb-escena__caps{position:absolute;inset-inline:0;top:0;height:min(40%,340px);padding:0 var(--gutter);pointer-events:none}
.lsb-escena__caps::before{content:"";position:absolute;inset-inline:0;top:0;height:124%;
  background:linear-gradient(to bottom,rgba(6,32,13,.94) 0%,rgba(6,32,13,.9) 34%,rgba(6,32,13,.66) 56%,
    rgba(6,32,13,.3) 76%,rgba(6,32,13,.08) 90%,transparent 100%)}
.lsb-escena__cap{position:absolute;z-index:1;inset-inline:var(--gutter);top:18px;bottom:auto;opacity:0}
.lsb-escena__cap i{display:block;font-style:normal;font-size:.76rem;letter-spacing:.28em;text-transform:uppercase;
  color:var(--lime);font-weight:700;margin-bottom:8px}
.lsb-escena__cap b{display:block;font-family:'Bricolage Grotesque',sans-serif;font-weight:800;letter-spacing:-.02em;
  font-size:clamp(1.38rem,5.6vw,2.2rem);line-height:1.08;color:var(--paper);text-wrap:balance}
.lsb-escena__cap span{display:block;color:var(--cream);margin-top:.5rem;font-size:.95rem;max-width:44ch}

.lsb-escena__rail{position:absolute;left:var(--gutter);right:var(--gutter);top:0;height:2px;background:rgba(243,247,234,.16);z-index:2}
.lsb-escena__rail b{display:block;height:100%;width:0;background:var(--lime)}
.lsb-escena__dots{position:absolute;right:var(--gutter);bottom:26px;z-index:2;
  display:flex;gap:8px;margin:0;padding:0;list-style:none}
.lsb-escena__dots li{width:6px;height:6px;border-radius:50%;background:rgba(243,247,234,.28);transition:background .2s,scale .2s}
.lsb-escena__dots li.is-on{background:var(--lime);scale:1.5}

.lsb-escena__noscript ol{padding-left:1.2rem;color:var(--cream)}
.lsb-escena__noscript li{margin-bottom:1rem}
.lsb-escena__noscript b{color:var(--paper)}

/* En pantallas MUY altas y angostas el stage ya es más angosto que 9:16, así
   que el fotograma entra entero y la copa ya se ve: el zoom no aportaría nada
   y solo se comería los costados, donde están los cúmulos (x 15%–80%). Medido:
   a 360x932 el corrimiento del 14% los dejaba fuera de cuadro. */
@media (max-aspect-ratio:42/100){
  .lsb-escena__frame img{height:100%;bottom:0}
}

/* ── Texto plegable (solo teléfono) ────────────────────────────────
   El arte es el contenido; el texto es la leyenda. Por defecto viene
   PLEGADO a una línea para dejar ver el fotograma completo, y quien
   quiera leer lo despliega. En escritorio no existe: ahí el texto va
   al costado y no tapa nada.                                        */
.lsb-escena__toggle{
  position:absolute;z-index:3;top:14px;right:var(--gutter);width:44px;height:44px;
  border-radius:50%;border:1px solid rgba(243,247,234,.3);background:rgba(6,32,13,.55);
  color:var(--paper);display:grid;place-items:center;cursor:pointer;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  transition:background .2s,border-color .2s}
.lsb-escena__toggle:hover{background:rgba(6,32,13,.8);border-color:var(--lime)}
.lsb-escena__toggle svg{transition:transform .3s cubic-bezier(.2,.7,.3,1)}

/* plegado = estado por defecto */
.lsb-escena__caps{height:96px}
.lsb-escena__caps::before{height:190px}
.lsb-escena__cap i,.lsb-escena__cap span{display:none}
.lsb-escena__cap b{display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden;
  font-size:1.06rem;line-height:1.35;padding-inline-end:56px}

/* desplegado */
.lsb-escena.is-open .lsb-escena__caps{height:min(40%,340px)}
.lsb-escena.is-open .lsb-escena__caps::before{height:124%}
.lsb-escena.is-open .lsb-escena__cap i,
.lsb-escena.is-open .lsb-escena__cap span{display:block}
.lsb-escena.is-open .lsb-escena__cap b{-webkit-line-clamp:none;display:block;overflow:visible;
  font-size:clamp(1.38rem,5.6vw,2.2rem);line-height:1.08;padding-inline-end:56px}
.lsb-escena.is-open .lsb-escena__toggle svg{transform:rotate(180deg)}

@media (min-width:1024px),(min-aspect-ratio:1/1) and (max-height:600px){
  /* el fotograma va entero: sin zoom ni corrimiento */
  .lsb-escena__frame img{height:100%;bottom:0}
  .lsb-escena__toggle{display:none}
  .lsb-escena__caps,.lsb-escena.is-open .lsb-escena__caps{height:auto}
  .lsb-escena__cap i,.lsb-escena__cap span{display:block}
  .lsb-escena__cap b{-webkit-line-clamp:none;display:block;overflow:visible;padding-inline-end:0}
  .lsb-escena__stage{display:flex;align-items:center;justify-content:center;
    gap:clamp(32px,4vw,64px);padding-inline:clamp(26px,4vw,64px);
    background-image:radial-gradient(90% 70% at 100% 0%,rgba(198,242,74,.10),transparent 62%)}
  .lsb-escena__frames{position:relative;inset:auto;order:2;flex:none;
    height:min(calc(82dvh - var(--hdr)),780px);aspect-ratio:9/16;border-radius:22px;overflow:hidden;
    box-shadow:0 30px 70px rgba(0,0,0,.34)}
  .lsb-escena__caps{position:relative;inset:auto;order:1;flex:1;padding:0;
    height:min(calc(82dvh - var(--hdr)),780px);max-width:760px}
  .lsb-escena__caps::before{display:none}
  .lsb-escena__cap{position:absolute;inset-inline:0 auto;bottom:auto;top:50%;translate:0 -50%;max-width:44ch;padding:0}
  .lsb-escena__cap b{font-size:clamp(1.6rem,3vw,3rem)}
  .lsb-escena__dots{right:auto;left:clamp(26px,4vw,64px);top:auto;bottom:clamp(30px,5vh,58px);
    translate:0 0;flex-direction:row}
  .lsb-escena__rail{left:clamp(26px,4vw,64px);right:clamp(26px,4vw,64px);top:18px}
}

/* Someone who asked the OS for less motion still gets the scene — the frames
   swap instead of crossfading (handled in JS) and nothing slides. */
@media(prefers-reduced-motion:reduce){
  .lsb-escena__dots li{transition:none}
}