/* Panda Mood™ — motion layer
   Fluid navigation & scroll choreography. Vanilla, dependency-free.
   Pairs with motion.js — all effects are gated behind html.js-motion,
   so the site stays fully readable if JS never runs. */

/* ---------- Cross-document page transitions (progressive enhancement) */
@view-transition {
  navigation: auto;
}
@keyframes pm-vt-out { from { opacity: 1 } to { opacity: 0 } }
@keyframes pm-vt-in  { from { opacity: 0 } to { opacity: 1 } }
::view-transition-old(root) { animation: 200ms ease both pm-vt-out; }
::view-transition-new(root) { animation: 260ms ease both pm-vt-in; }

/* ---------- Navigation progress bar */
#pm-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: #FAFAFA;
  opacity: 0;
  z-index: 999;
  transition: width .4s ease, opacity .3s ease;
  pointer-events: none;
}
#pm-progress.active { opacity: .9; }

/* ---------- Floating pill nav */
.js-motion body > nav {
  left: 50%;
  right: auto;
  transform: translateX(-50%) translateY(0);
  width: 100%;
  max-width: 100%;
  border-radius: 0;
  border: 1px solid transparent;
  transition:
    max-width .55s cubic-bezier(.22,.61,.36,1),
    top .55s cubic-bezier(.22,.61,.36,1),
    padding .55s cubic-bezier(.22,.61,.36,1),
    border-radius .55s cubic-bezier(.22,.61,.36,1),
    border-color .55s ease,
    background .4s ease,
    box-shadow .55s ease,
    transform .45s cubic-bezier(.22,.61,.36,1);
}
.js-motion body > nav.pm-pill {
  top: 14px;
  max-width: 620px;
  padding: 10px 22px;
  border-radius: 100px;
  background: rgba(10, 10, 10, .72);
  -webkit-backdrop-filter: blur(16px) saturate(1.2);
  backdrop-filter: blur(16px) saturate(1.2);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: 0 10px 40px rgba(0, 0, 0, .45);
}
.js-motion body > nav.pm-hidden {
  transform: translateX(-50%) translateY(calc(-100% - 20px));
}
@media (max-width: 767px) {
  .js-motion body > nav.pm-pill {
    max-width: calc(100vw - 24px);
    padding: 8px 16px;
  }
}

/* ---------- Scroll reveal (cascade) */
.js-motion [data-reveal] {
  opacity: 0;
  transform: translateY(26px);
  transition:
    opacity .8s cubic-bezier(.22,.61,.36,1),
    transform .8s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--pm-i, 0) * 70ms);
}
.js-motion [data-reveal].pm-in {
  opacity: 1;
  transform: none;
}

/* ---------- Parallax targets */
.js-motion .hero-image img,
.js-motion .product-image img {
  will-change: transform;
}

/* ---------- Micro-interactions */
.js-motion .btn-primary,
.js-motion .nav-cta {
  transition: transform .3s cubic-bezier(.22,.61,.36,1), background .3s ease, color .3s ease;
  will-change: transform;
}

/* ---------- Accessibility: kill it all for reduced motion */
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
  .js-motion [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .js-motion body > nav { transition: none; }
  html { scroll-behavior: auto !important; }
}