/* ──────────────────────────────────────────────────────────────
   Penworthy — Motion layer
   A single, self-contained motion system: scroll reveals, route
   entrances, refined hover/press easing, and feedback pops.
   Portable to a WordPress theme as one stylesheet + motion.js.
   Everything degrades gracefully (no-JS, prefers-reduced-motion,
   and a hard "off" escape hatch via html[data-motion="off"]).
   ────────────────────────────────────────────────────────────── */

:root {
  /* Shared easing — the "premium" feel lives in these curves */
  --pw-ease-out:    cubic-bezier(.22, .61, .36, 1);   /* settle / entrances */
  --pw-ease-in-out: cubic-bezier(.65, .05, .36, 1);   /* moves */
  --pw-ease-spring: cubic-bezier(.34, 1.4, .64, 1);   /* pops / badges */

  /* Reveal tuning (overridden per intensity below) */
  --pw-reveal-y: 24px;
  --pw-reveal-dur: .7s;
  --pw-stagger: 80ms;
}

html[data-motion="subtle"]   { --pw-reveal-y: 14px; --pw-reveal-dur: .55s; --pw-stagger: 55ms; }
html[data-motion="standard"] { --pw-reveal-y: 24px; --pw-reveal-dur: .70s; --pw-stagger: 80ms; }
html[data-motion="playful"]  { --pw-reveal-y: 34px; --pw-reveal-dur: .82s; --pw-stagger: 110ms; }

/* ── Things that only happen when motion is welcome ───────────── */
@media (prefers-reduced-motion: no-preference) {

  /* Scroll reveal — JS tags blocks with [data-reveal], flips .is-in on enter */
  html.pw-motion [data-reveal] {
    opacity: 0;
    transform: translateY(var(--pw-reveal-y));
    transition:
      opacity   var(--pw-reveal-dur) var(--pw-ease-out),
      transform var(--pw-reveal-dur) var(--pw-ease-out);
    transition-delay: var(--pw-reveal-delay, 0ms);
    will-change: opacity, transform;
  }
  html.pw-motion [data-reveal].is-in {
    opacity: 1;
    transform: none;
    will-change: auto;
  }

  /* Route change — the new page glides up as one coordinated unit.
     Transform-only on purpose: content is never gated behind opacity,
     so it can't blank the page if the animation is throttled/paused. */
  .route-view { animation: pwRouteIn .5s var(--pw-ease-out) both; }
  @keyframes pwRouteIn {
    from { transform: translateY(10px); }
    to   { transform: none; }
  }

  /* Cart badge — pops each time the count changes (keyed remount) */
  .pw-cart-btn .cart-count { animation: pwBadgePop .42s var(--pw-ease-spring) both; }
  @keyframes pwBadgePop {
    0%   { transform: scale(.2); }
    55%  { transform: scale(1.3); }
    100% { transform: scale(1); }
  }

  /* Menus / dropdowns — settle down from the trigger */
  .pw-menu-pop { animation: pwMenuPop .2s var(--pw-ease-out) both; transform-origin: top right; }
  @keyframes pwMenuPop {
    from { opacity: 0; transform: translateY(-6px) scale(.97); }
    to   { opacity: 1; transform: none; }
  }
}

/* ── Hard off switch (tweak) — show everything, no animation ──── */
html[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; }
html[data-motion="off"] .route-view  { animation: none !important; }

/* ──────────────────────────────────────────────────────────────
   Hover & press polish — applies app-wide via existing classes.
   These run regardless of reduced-motion: they're tiny, instant,
   and user-initiated, which reduced-motion users still expect.
   ────────────────────────────────────────────────────────────── */

/* Buttons — lift on hover, sink on press */
.btn {
  transition:
    transform .28s var(--pw-ease-out),
    box-shadow .28s var(--pw-ease-out),
    background .2s ease,
    filter .2s ease;
}
.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0) scale(.97); transition-duration: .06s; }
.btn-primary:hover     { box-shadow: 0 10px 24px rgba(41,101,161,.28); }
.btn-orange:hover      { box-shadow: 0 10px 26px rgba(224,160,64,.42); }
.btn-outline-blue:hover { box-shadow: 0 8px 20px rgba(41,101,161,.14); }
.btn-yellow:hover      { box-shadow: 0 8px 20px rgba(248,228,154,.5); }

/* Arrow nudge inside buttons/links on hover */
.btn svg { transition: transform .25s var(--pw-ease-out); }
.btn:hover svg { transform: translateX(3px); }

/* Product cover — slow, premium zoom on hover */
.cover img { transition: transform .65s var(--pw-ease-out); will-change: transform; }
.cover:hover img,
.card:hover .cover img { transform: scale(1.06); }

/* Header — gains a soft shadow once you start scrolling */
.pw-header { transition: box-shadow .3s var(--pw-ease-out); }
.pw-header.is-scrolled { box-shadow: 0 6px 22px rgba(3,55,89,.18); }

/* Header icon affordances */
.pw-cart-btn, .pw-avatar {
  transition: background .18s ease, transform .18s var(--pw-ease-out);
}
.pw-cart-btn:hover, .pw-avatar:hover { transform: translateY(-1px); }

/* Nav — hover grows the same label underline the active state uses,
   so hover and active share one geometry */
.pw-nav-item:hover .pw-nav-label::after { transform: scaleX(1); }

/* Inputs — soft focus ring that fades in */
.input { transition: border-color .2s ease, box-shadow .2s ease; }
.input:focus { box-shadow: 0 0 0 3px var(--pw-blue-tint); }

/* Inline "→" links — gap opens slightly on hover */
.acct-link { transition: gap .2s var(--pw-ease-out); }
.acct-link:hover { gap: 10px; }