/* ==========================================================================
   MOMENTO — sticky 100svh + 140vh (--r). Silencio → frase palabra a palabra → línea → los cuatro stickpacks emergen de la línea.
   ========================================================================== */
.moment { --scroll-len: 140vh; position: relative; height: calc(100svh + var(--scroll-len)); background: var(--ink-950); }
/* Luz que se enciende con la línea: transición de luz sin partículas — una pausa */
.moment__stage::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: calc(var(--r-line) * 0.9);
  background: radial-gradient(50% 36% at 50% 56%, color-mix(in oklab, var(--brand-blue) 16%, transparent), transparent 70%), radial-gradient(30% 20% at 50% 62%, color-mix(in oklab, var(--brand-lime) 8%, transparent), transparent 70%); }
.moment__stage {
  --r: 0;
  --r-words: clamp(0, calc((var(--r) - 0.08) / 0.42), 1);   /* 0→0,08: silencio */
  --r-line:  clamp(0, calc((var(--r) - 0.42) / 0.16), 1);
  --r-facts: clamp(0, calc((var(--r) - 0.55) / 0.3), 1);
  --r-out:   clamp(0, calc((var(--r) - 0.9) / 0.1), 1);
  position: sticky; top: 0; height: 100svh; display: grid; place-content: center; justify-items: center; gap: clamp(1rem, 3vh, 2.5rem);
  padding-inline: var(--gutter); text-align: center; overflow: hidden; isolation: isolate;
  opacity: calc(1 - var(--r-out));
}
.moment__phrase { max-width: 14ch; font-size: clamp(1.875rem, 0.8rem + 4.4vw, 5.25rem); transform: translateY(calc(var(--r-facts) * -1.5vh)); }   /* parallax sutil: la frase cede a los datos */
.moment__phrase .w {
  display: inline-block;
  /* cada palabra ocupa 1/5 del tramo de palabras */
  --t: clamp(0, calc((var(--r-words) - var(--w) * 0.16) / 0.28), 1);
  opacity: var(--t); transform: translateY(calc((1 - var(--t)) * 0.4em));
  filter: none;
}
.moment__line { width: min(60vw, 28rem); height: 1px; background: var(--fg); transform: scaleX(var(--r-line)); transform-origin: center; opacity: 0.6; }
/* La línea: los cuatro stickpacks reales emergen de la línea, uno a uno, cada uno encendido con su color — el producto es el protagonista */
.mline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.5rem, 2vw, 2.25rem);
  width: min(100%, 64rem); max-width: calc(100vw - 2 * var(--gutter)); justify-items: center; align-items: end; }
.mline__item {
  --t: clamp(0, calc((var(--r-facts) - var(--f) * 0.16) / 0.42), 1);
  --ease-t: calc(1 - (1 - var(--t)) * (1 - var(--t)));             /* ease-out: frena al llegar */
  position: relative; min-width: 0; width: min(100%, 7.5rem, 12vh); opacity: var(--t);
  transform: translateY(calc((1 - var(--ease-t)) * 18vh)) scale(calc(0.86 + var(--ease-t) * 0.14));
}
.mline__link { display: grid; justify-items: center; gap: var(--s-3); color: inherit; text-decoration: none; isolation: isolate; border-radius: 1rem; }
.mline__link:focus-visible { outline: 2px solid var(--c); outline-offset: 6px; }
.mline__pic { position: relative; z-index: 1; width: 100%; display: block; }
.mline__pic img { display: block; width: 100%; height: auto; filter: drop-shadow(0 18px 28px rgb(0 0 0 / 0.5)); transition: transform var(--dur-base) var(--ease-out); }
/* Luz propia de cada fórmula: se enciende al terminar de subir */
.mline__glow { position: absolute; left: 50%; top: 42%; width: 190%; aspect-ratio: 1; translate: -50% -50%; pointer-events: none; z-index: 0;
  opacity: calc(var(--ease-t) * var(--ease-t) * 0.9);
  background: radial-gradient(closest-side, color-mix(in oklab, var(--c) 34%, transparent), color-mix(in oklab, var(--c) 10%, transparent) 42%, transparent 72%); }
.mline__meta { display: grid; justify-items: center; gap: 0.2rem; line-height: 1.1; opacity: calc(clamp(0, calc((var(--t) - 0.6) / 0.4), 1)); transform: translateY(calc((1 - var(--t)) * 0.5rem)); }
.mline__n { font-size: 0.875rem; letter-spacing: 0.24em; color: var(--c); font-weight: 600; }
.mline__name { font-size: clamp(1.0625rem, 0.8rem + 1vw, 1.25rem); font-weight: 500; letter-spacing: 0.08em; }
.mline__sys { font-size: 0.875rem; letter-spacing: 0.04em; color: var(--fg-muted); text-align: center; text-wrap: balance; max-width: 100%; }
.mline__cap { margin: 0; opacity: calc(clamp(0, calc((var(--r-facts) - 0.78) / 0.22), 1) * 0.7); letter-spacing: 0.26em; }
@media (hover: hover) {
  .mline__link:hover .mline__pic img { transform: translateY(-0.5rem) rotate(-1.5deg); }
  .mline__link:hover .mline__glow { opacity: 1; }
  .mline__link:hover .mline__sys { color: var(--fg); }
}
@media (min-width: 768px) { .mline__item { width: min(100%, 9rem, 13vh); } .mline__meta { gap: 0.3rem; } .mline__sys { font-size: 0.9375rem; letter-spacing: 0.04em; white-space: nowrap; } }
@media (min-width: 1280px) { .mline__item { width: min(100%, 10.5rem, 13.5vh); } }
@media (max-height: 640px) { .mline__item { width: min(100%, 5.5rem); } .mline__sys { display: none; } }
@media (prefers-reduced-motion: reduce) { .mline__item { transform: none; } .mline__pic img { transition: none; } .mline__link:hover .mline__pic img { transform: none; } }
.moment__note { position: absolute; bottom: var(--s-5); left: 0; right: 0; font-size: 0.8125rem; opacity: calc(var(--r-facts) * 0.6); }
@media (min-width: 768px) { .moment__facts { grid-template-columns: repeat(4, auto); } }
@media (prefers-reduced-motion: reduce) { .moment { --scroll-len: 40vh; } }