/* ==========================================================================
   BOREST — scroll choreography (experimental layer)
   CSS-only scroll-driven animations between sections. The page is complete
   without this file: to roll back, remove its <link> from index.html.
   Runs only where supported and when the visitor has not asked for less motion.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: scroll()) and (animation-timeline: view()) {

    /* Reading progress: a thin light-blue line along the bottom of the header. */
    .store-header::after {
      content: "";
      position: absolute;
      inset-inline: 0;
      bottom: -1px;
      height: 2px;
      background: var(--color-primary);
      transform-origin: right center;
      transform: scaleX(0);
      animation: m-progress linear both;
      animation-timeline: scroll(root);
    }
    html[dir="ltr"] .store-header::after { transform-origin: left center; }

    /* Hero → leaving: the image drifts slower than the page (parallax)
       and the copy lifts away. Uses individual transform properties so it
       layers on top of the load-in animation instead of replacing it. */
    .hero-media {
      animation: hero-settle 2.4s var(--ease-out) both, m-parallax linear both;
      animation-timeline: auto, --sec-home;
      animation-range: normal, exit 0% exit 100%;
    }
    .hero-inner > *, .hero-tag {
      animation: m-lift-out linear both;
      animation-timeline: --sec-home;
      animation-range: exit 0% exit 55%;
    }

    /* Collection → arriving: heading, then the four cards in a cascade. */
    .categories-heading {
      animation: m-rise linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 30%;
    }
    .category-card {
      animation: m-card-in linear both;
      animation-timeline: view();
      animation-range: entry 0% cover 28%;
    }
    .category-card:nth-child(2) { animation-range: entry 8% cover 34%; }
    .category-card:nth-child(3) { animation-range: entry 16% cover 40%; }
    .category-card:nth-child(4) { animation-range: entry 24% cover 46%; }

    /* Guide → the night chapter opens like a curtain from a rounded panel. */
    .guide {
      animation: m-curtain linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 90%;
    }
    .guide-card:nth-child(2) { animation-range: entry 10% cover 30%; }
    .guide-card:nth-child(3) { animation-range: entry 15% cover 35%; }
    .guide-card:nth-child(4) { animation-range: entry 20% cover 40%; }

    /* Statement → the headline comes into focus. */
    .statement h2 {
      animation: m-focus linear both;
      animation-timeline: view();
      animation-range: entry 15% cover 40%;
    }

    /* Footer → settles up into place. */
    .footer-top {
      animation: m-rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 80%;
    }
  }
}

@keyframes m-progress { to { transform: scaleX(1); } }
@keyframes m-parallax { to { translate: 0 28%; } }
@keyframes m-lift-out { to { opacity: 0; translate: 0 -56px; } }
@keyframes m-rise { from { opacity: 0; translate: 0 32px; } }
@keyframes m-card-in { from { opacity: 0; translate: 0 64px; scale: .96; } }
@keyframes m-curtain {
  from { clip-path: inset(0 6% 0 6% round 48px 48px 0 0); }
  to { clip-path: inset(0 0 0 0 round 0); }
}
@keyframes m-focus { from { opacity: 0; filter: blur(10px); translate: 0 24px; } }