/* ===================== MOTION — animaciones del index =====================
   Lirio Collectors. Se carga después de store.css y shop.css.
   Todo el movimiento se activa con la clase .is-in que agrega motion.js;
   si el JS no carga, o si el visitante pidió menos movimiento, todo queda
   visible y estático. */

/* ---------- Transición entre páginas ----------
   La hace el navegador: guarda una foto de la página que dejas, la sostiene en
   pantalla mientras carga la siguiente y funde una con otra. Por eso ya no hay
   ningún cross-fade hecho a mano en motion.js: el JavaScript de la página que
   se va muere en cuanto arranca la carga, así que no puede tapar ese hueco.
   Firefox todavía no la implementa; ahí la navegación queda normal. */
@view-transition { navigation: auto; }

/* ---------- Estado escondido antes del primer pintado ----------
   La clase lc-motion la pone un <script> en línea en el <head> del layout.
   Esta lista tiene que coincidir con TARGETS en motion.js: aquí nacen
   escondidos, y allá se les pone .is-in cuando entran a la pantalla. */
html.lc-motion :is(
  .strip,
  .featured__head,
  .center-cta,
  .ranking__head,
  .contact .section-head,
  .location__info,
  .location__map,
  .footer,
  .page-head
):not(.is-in) {
  opacity: 0;
  transform: translateY(34px);
}

html.lc-motion :is(
  .products__grid,
  .ranking__list,
  .contact__grid,
  .blog-grid
):not(.is-in) > * {
  opacity: 0;
  transform: translateY(34px);
}

/* ---------- Reveal al hacer scroll ----------
   Todo lo que esconde cuelga de html.lc-motion, incluso las reglas por atributo:
   así, si el <script> del <head> quita esa clase porque motion.js no llegó a
   terminar, no queda nada escondido aunque ya se hubieran puesto los atributos. */
html.lc-motion [data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
html.lc-motion [data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Cascada: cada hijo entra un poco después que el anterior */
html.lc-motion [data-reveal-stagger] > * {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s ease, transform .8s ease;
  will-change: opacity, transform;
}
html.lc-motion [data-reveal-stagger].is-in > * {
  opacity: 1;
  transform: none;
}
[data-reveal-stagger].is-in > *:nth-child(1) { transition-delay: 0s; }
[data-reveal-stagger].is-in > *:nth-child(2) { transition-delay: .09s; }
[data-reveal-stagger].is-in > *:nth-child(3) { transition-delay: .18s; }
[data-reveal-stagger].is-in > *:nth-child(4) { transition-delay: .27s; }
[data-reveal-stagger].is-in > *:nth-child(5) { transition-delay: .36s; }
[data-reveal-stagger].is-in > *:nth-child(6) { transition-delay: .45s; }
[data-reveal-stagger].is-in > *:nth-child(7) { transition-delay: .54s; }
[data-reveal-stagger].is-in > *:nth-child(8) { transition-delay: .63s; }

/* ---------- Entrada del hero al cargar la página ---------- */
@keyframes lc-up {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}
.hero__content > * { animation: lc-up .9s ease both; }
.hero__logo             { animation-delay: .05s; }
.hero__eyebrow          { animation-delay: .25s; }
.hero__title            { animation-delay: .38s; }
.hero__subtitle         { animation-delay: .50s; }
.hero__actions          { animation-delay: .62s; }

/* ---------- Parallax del hero ----------
   --lc-scroll lo actualiza motion.js con el scroll de la página. */
.hero__glow {
  transform: translateY(calc(var(--lc-scroll, 0) * .26px)) scale(calc(1 + var(--lc-scroll, 0) * .0005));
  will-change: transform;
}
.hero__content {
  transform: translateY(calc(var(--lc-scroll, 0) * .14px));
  opacity: calc(1 - var(--lc-scroll, 0) / 720);
  will-change: transform, opacity;
}

/* ---------- Header que se compacta al bajar ---------- */
.shop-header__inner { transition: padding .3s ease; }
.shop-header__logo img { transition: height .3s ease; }
.shop-header.is-small .shop-header__inner { padding-top: 7px; padding-bottom: 7px; }
.shop-header.is-small .shop-header__logo img { height: 34px; }

/* ---------- Menos movimiento si el sistema lo pide ---------- */
@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }

  html.lc-motion :is(
    .strip, .featured__head, .center-cta, .ranking__head, .contact .section-head,
    .location__info, .location__map, .footer, .page-head
  ):not(.is-in),
  html.lc-motion :is(
    .products__grid, .ranking__list, .contact__grid, .blog-grid
  ):not(.is-in) > *,
  [data-reveal],
  [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; }

  .hero__content > * { animation: none !important; }
  .hero__glow, .hero__content { transform: none !important; opacity: 1 !important; }
}
