/* La imagen se ancla únicamente dentro del recorrido del hero. */
body { overflow-x: clip; }
#particle-story .hero-grid { align-items: start; }
#particle-story .hero-copy { padding-top: clamp(100px,13.5vw,210px); background: transparent; }
.hero-art-track { min-width: 0; align-self: stretch; }
.hero-art-track::after { content: ''; display: block; height: 42svh; }
#particle-story .hero-art { position: sticky; top: 125px; background: transparent; }
#particle-story .hero-wave { top: clamp(350px,35svh,500px); height: clamp(360px,58svh,680px); }

/* Entradas breves, escalonadas y sin alterar el espacio de cada elemento. */
.enter-once { transition: opacity 850ms cubic-bezier(.22,.61,.36,1), translate 850ms cubic-bezier(.22,.61,.36,1); transition-delay: var(--enter-delay,0ms); }
.motion-ready .enter-once:not(.is-shown) { opacity: 0; translate: 0 28px; }
.motion-ready .enter-once.is-shown { opacity: 1; translate: 0 0; }
.motion-ready .enter-once:focus-within { opacity: 1; translate: 0 0; transition-delay: 0ms; }
.motion-paused .enter-once { opacity: 1 !important; translate: 0 0 !important; transition: none; }
@media(max-width:620px) {
 #particle-story .hero-copy { padding-top: 0; }
 #particle-story .hero-art { top: 96px; }
 .hero-art-track::after { height: 26svh; }
 #particle-story .hero-wave { top: 40%; height: 50%; }
 .motion-ready .enter-once:not(.is-shown) { translate: 0 20px; }
}
@media(prefers-reduced-motion:reduce) {
 #particle-story .hero-art { position: relative; top: auto; }
 .hero-art-track::after { display: none; }
 .motion-ready .enter-once { opacity: 1 !important; translate: none !important; transition: none; }
}