/* ================================================================
   MOTION — living-page system. Alive, not flashy.
   All rules wrapped in prefers-reduced-motion: no-preference.
   IntersectionObserver in scripts/motion.js toggles .is-in.
   ================================================================ */

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. HERO BACKGROUND — breathing grid + slow radial shift.
        Tuned for the dark navy hero: cream lines + warmer red glows. ---------- */
  .hero { position: relative; }
  .hero::before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background-image:
      linear-gradient(to right, rgba(246,241,230,.06) 1px, transparent 1px),
      linear-gradient(to bottom, rgba(246,241,230,.06) 1px, transparent 1px);
    background-size: 56px 56px;
    animation: gridBreath 8s var(--ease-in-out) infinite;
  }
  .hero::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
    background:
      radial-gradient(60% 40% at 30% 20%, rgba(228,33,40,.18), transparent 60%),
      radial-gradient(50% 50% at 80% 80%, rgba(246,241,230,.06), transparent 60%);
    animation: radialShift 20s var(--ease-in-out) infinite alternate;
  }
  @keyframes gridBreath {
    0%, 100% { opacity: .55; }
    50%      { opacity: .25; }
  }
  @keyframes radialShift {
    0%   { background-position: 0% 0%, 100% 100%; }
    100% { background-position: 20% 10%, 80% 90%; }
  }

  /* ---------- HERO BOTTLES — mask reveal sweeps the lineup left → right.
        Feels like the 6 bottles "arrive" into formation on page load. ---------- */
  .hero__image {
    -webkit-mask-image: linear-gradient(90deg, black 50%, transparent 50%);
            mask-image: linear-gradient(90deg, black 50%, transparent 50%);
    -webkit-mask-size: 200% 100%;
            mask-size: 200% 100%;
    -webkit-mask-position: 100% 0;
            mask-position: 100% 0;
    animation:
      bottlesReveal 1.4s var(--ease-out) .35s both,
      bottlesFloat  5s   var(--ease-in-out) 1.8s infinite;
  }
  @keyframes bottlesReveal {
    from {
      -webkit-mask-position: 100% 0;
              mask-position: 100% 0;
      transform: translateY(20px);
      opacity: 0;
    }
    to {
      -webkit-mask-position: 0% 0;
              mask-position: 0% 0;
      transform: translateY(0);
      opacity: 1;
    }
  }
  @keyframes bottlesFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-6px); }
  }

  /* ---------- HERO STENCIL — slow breathe behind bottles ---------- */
  .hero__stencil {
    animation: stencilBreath 6s var(--ease-in-out) infinite;
    will-change: transform, opacity;
  }
  @keyframes stencilBreath {
    0%, 100% { transform: scale(1);    opacity: 1; }
    50%      { transform: scale(1.04); opacity: 0.55; }
  }

  /* ---------- 2. FLOATING PARTICLES — drifting upward in hero ---------- */
  .hero__particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
  }
  .hero__particles span {
    position: absolute;
    bottom: -20px;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #E8D9A8;
    box-shadow: 0 0 4px rgba(232, 217, 168, .8);
    opacity: 0;
    animation: particleDrift linear infinite;
  }
  @keyframes particleDrift {
    0%   { transform: translateY(0)     translateX(0);       opacity: 0; }
    8%   { opacity: .85; }
    92%  { opacity: .85; }
    100% { transform: translateY(-110vh) translateX(var(--drift, 20px)); opacity: 0; }
  }

  /* ---------- 4 + 5 + 10. SCROLL REVEAL (sections, cards, pain) ---------- */
  .reveal {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity .7s var(--ease-out),
      transform .7s var(--ease-out);
    will-change: opacity, transform;
  }
  .reveal.is-in { opacity: 1; transform: translateY(0); }

  /* Pain cards slide in from LEFT, border animates first then content */
  .pain-card {
    opacity: 0;
    transform: translateX(-28px);
    border-left-width: 0;
    transition:
      opacity .55s var(--ease-out) calc(.3s + var(--stagger, 0s)),
      transform .55s var(--ease-out) calc(.3s + var(--stagger, 0s)),
      border-left-width .3s var(--ease-out) var(--stagger, 0s);
  }
  .pain.is-in .pain-card {
    opacity: 1;
    transform: translateX(0);
    border-left-width: var(--stroke-chunk);
  }

  /* Stagger product cards on grid reveal */
  .products.is-in .product-card {
    animation: fadeUp .6s var(--ease-out) both;
    animation-delay: var(--stagger, 0s);
  }

  /* ---------- 6. CTA HEARTBEAT — primary red button pulses ---------- */
  .btn--red {
    animation: ctaHeartbeat 3s var(--ease-out) infinite;
  }
  @keyframes ctaHeartbeat {
    0%   { box-shadow: 0 0 0 0   rgba(228, 33, 40, .55); }
    60%  { box-shadow: 0 0 0 14px rgba(228, 33, 40, 0); }
    100% { box-shadow: 0 0 0 0   rgba(228, 33, 40, 0); }
  }

  /* ---------- 8. NAV ON SCROLL — already triggered by main.js .site-header--scrolled ---------- */
  .site-header {
    transition:
      background .3s var(--ease-out),
      border-bottom-color .3s var(--ease-out),
      box-shadow .3s var(--ease-out);
  }
  .site-header--scrolled {
    border-bottom-color: var(--ink);
    box-shadow: 0 6px 18px -10px rgba(19, 31, 55, .25);
  }

  /* ---------- 9. CARD HOVER LIFT — already on .product-card / .pain-card ----------
     Already covered by the per-card hover rules above. Nothing extra here. */
}