/* =====================================================================
   Roasted Herbs — premium motion layer
   Loaded on the storefront and the admin panel. Uses the theme tokens
   (--color-primary, --ease-out) and animates transform/opacity only.
   Everything here is progressive: pages look and work the same without it.
   ===================================================================== */
:root {
    --pm-ease: cubic-bezier(.22, 1, .36, 1);
    --pm-spring: cubic-bezier(.34, 1.56, .64, 1);
    --pm-fast: .18s;
    --pm-mid: .35s;
    --pm-accent-rgb: var(--color-primary-rgb, 51, 73, 159);
}

/* ---------- 1. Buttons: press, lift, sweep, arrow nudge ---------- */
button, [role="button"], a.btn, .btn-primary,
a[class*="bg-green-600"], a[class*="bg-gray-900"], a[class*="border-green-600"] {
    transition: transform var(--pm-fast) var(--pm-ease), box-shadow var(--pm-fast) var(--pm-ease),
                background-color var(--pm-fast) var(--pm-ease), color var(--pm-fast) var(--pm-ease),
                border-color var(--pm-fast) var(--pm-ease), opacity var(--pm-fast) var(--pm-ease);
}
button:not(:disabled):active, [role="button"]:active, a[class*="bg-green-600"]:active, a[class*="bg-gray-900"]:active {
    transform: scale(.97);
}
/* Primary (filled) actions: gradient sweep on hover + coloured glow */
.pm-sweep { position: relative; overflow: hidden; isolation: isolate; }
.pm-sweep::before {
    content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.22) 50%, rgba(255,255,255,0) 100%);
    transform: translateX(-120%); transition: transform .55s var(--pm-ease);
}
.pm-sweep:hover::before, .pm-sweep:focus-visible::before { transform: translateX(120%); }
.pm-sweep:hover { box-shadow: 0 12px 26px -10px rgba(var(--pm-accent-rgb), .55); transform: translateY(-1px); }
.pm-sweep .fa-arrow-right, .pm-sweep .fa-arrow-right-long, .pm-sweep .fa-chevron-right {
    transition: transform var(--pm-fast) var(--pm-ease);
}
.pm-sweep:hover .fa-arrow-right, .pm-sweep:hover .fa-arrow-right-long, .pm-sweep:hover .fa-chevron-right { transform: translateX(4px); }

/* Icon buttons (header cart, wishlist, admin toolbar): fill + lift on hover */
.pm-iconbtn { transition: transform var(--pm-fast) var(--pm-ease), background-color var(--pm-fast) var(--pm-ease), color var(--pm-fast) var(--pm-ease); border-radius: .75rem; }
.pm-iconbtn:hover { background: rgba(var(--pm-accent-rgb), .1); color: var(--color-primary); transform: translateY(-2px); }

/* Busy / done states for async buttons (idle → busy → done) */
.pm-busy { pointer-events: none; opacity: .85; }
.pm-busy .pm-label { visibility: hidden; }
.pm-busy::after {
    content: ""; position: absolute; width: 18px; height: 18px; border-radius: 50%;
    border: 2px solid currentColor; border-right-color: transparent;
    animation: pmSpin .7s linear infinite;
}
.pm-done { background-color: #15803d !important; border-color: #15803d !important; color: #fff !important; }
@keyframes pmSpin { to { transform: rotate(360deg); } }

/* ---------- 2. Inputs: glow on focus, gentle error shake ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]), select, textarea {
    transition: box-shadow var(--pm-fast) var(--pm-ease), border-color var(--pm-fast) var(--pm-ease), transform var(--pm-fast) var(--pm-ease);
}
input:not([type="checkbox"]):not([type="radio"]):focus, select:focus, textarea:focus {
    box-shadow: 0 0 0 4px rgba(var(--pm-accent-rgb), .13), 0 6px 18px -12px rgba(var(--pm-accent-rgb), .45);
}
.pm-shake { animation: pmShake .4s var(--pm-ease); }
@keyframes pmShake { 20% { transform: translateX(-4px); } 40% { transform: translateX(4px); } 60% { transform: translateX(-3px); } 80% { transform: translateX(3px); } }
/* Character counter */
.pm-counter { font-variant-numeric: tabular-nums; transition: color var(--pm-fast) var(--pm-ease); }
.pm-counter.is-near { color: #b45309; }
.pm-counter.is-full { color: #dc2626; }

/* ---------- 3. Cards & rows: lift, tint, accent bar ---------- */
.pm-card { transition: transform .25s var(--pm-ease), box-shadow .25s var(--pm-ease); }
@media (hover: hover) {
    .pm-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -18px rgba(var(--pm-accent-rgb), .35); }
}
.pm-row { position: relative; transition: background-color var(--pm-fast) var(--pm-ease), transform var(--pm-fast) var(--pm-ease); }
.pm-row::before { content: ""; position: absolute; left: 0; top: 10%; bottom: 10%; width: 3px; border-radius: 3px; background: var(--color-primary); transform: scaleY(0); transition: transform var(--pm-fast) var(--pm-ease); }
.pm-row:hover { background: rgba(var(--pm-accent-rgb), .05); }
.pm-row:hover::before { transform: scaleY(1); }
.pm-row .pm-chev { transition: transform var(--pm-fast) var(--pm-ease); }
.pm-row:hover .pm-chev { transform: translateX(3px); }

/* ---------- 4. Reveal on scroll (JS adds .pm-reveal, then .is-in) ---------- */
.pm-reveal { opacity: 0; transform: translateY(14px); transition: opacity .55s var(--pm-ease), transform .55s var(--pm-ease); transition-delay: var(--pm-delay, 0ms); }
.pm-reveal.is-in { opacity: 1; transform: none; }

/* ---------- 5. Open / close: dropdowns, drawers, sheets, modals ---------- */
.pm-pop { transform-origin: top right; animation: pmPop .22s var(--pm-ease); }
@keyframes pmPop { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
/* Cart drawer: slides from the right instead of appearing */
#cartDrawer > .absolute.right-0 { transform: translateX(100%); transition: transform .4s var(--pm-ease); }
#cartDrawer > .absolute.inset-0 { opacity: 0; transition: opacity .3s var(--pm-ease); }
#cartDrawer.is-open > .absolute.right-0 { transform: none; }
#cartDrawer.is-open > .absolute.inset-0 { opacity: 1; }
/* Modals that toggle .hidden get a scale+fade entrance */
.pm-modal > [class*="rounded"] { animation: pmModal .28s var(--pm-ease); }
@keyframes pmModal { from { opacity: 0; transform: translateY(10px) scale(.97); } to { opacity: 1; transform: none; } }

/* ---------- 6. Toasts: designed object with icon badge + draining bar ---------- */
#toastContainer { pointer-events: none; }
#toastContainer .toast {
    position: relative; overflow: hidden; pointer-events: auto;
    opacity: 0; transform: translateX(24px) scale(.96);
    transition: opacity .3s var(--pm-ease), transform .45s var(--pm-spring);
    box-shadow: 0 18px 40px -16px rgba(27,33,64,.35), 0 0 0 1px rgba(27,33,64,.04);
}
#toastContainer .toast.show { opacity: 1; transform: none; }
#toastContainer .toast .pm-bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: currentColor; opacity: .35; transform-origin: left; animation: pmDrain var(--pm-life, 3s) linear forwards; }
@keyframes pmDrain { from { transform: scaleX(1); } to { transform: scaleX(0); } }
#toastContainer .toast .pm-badge svg path { stroke-dasharray: 24; stroke-dashoffset: 24; animation: pmDraw .45s var(--pm-ease) .1s forwards; }
@keyframes pmDraw { to { stroke-dashoffset: 0; } }

/* ---------- 7. Quantity steppers: press feedback + rolling number ---------- */
.qty-minus, .qty-plus, .pm-step { transition: transform var(--pm-fast) var(--pm-ease), background-color var(--pm-fast) var(--pm-ease); }
.qty-minus:active, .qty-plus:active, .pm-step:active { transform: scale(.85); }
.pm-bump { animation: pmBump .3s var(--pm-spring); }
@keyframes pmBump { 40% { transform: translateY(-5px) scale(1.15); } }

/* ---------- 8. Badges (cart count) pop when they change ---------- */
.pm-pulse { animation: pmPulse .45s var(--pm-spring); }
@keyframes pmPulse { 40% { transform: scale(1.35); } }

/* ---------- 9. Empty-state icons bob gently (only while on screen) ---------- */
.pm-bob { animation: pmBob 3s ease-in-out infinite; }
@keyframes pmBob { 50% { transform: translateY(-6px); } }

/* ---------- 10. Header: condense with a stronger shadow once scrolled ---------- */
header.is-scrolled { box-shadow: 0 8px 24px -16px rgba(27,33,64,.25); }
header .pm-logo { transition: transform .3s var(--pm-ease); transform-origin: left center; }
header.is-scrolled .pm-logo { transform: scale(.92); }

/* ---------- 11. Admin sidebar: travelling accent bar ---------- */
.sidebar-link { position: relative; }
.sidebar-link::before { content: ""; position: absolute; left: 0; top: 20%; bottom: 20%; width: 3px; border-radius: 3px; background: #deac80; transform: scaleY(0); transition: transform var(--pm-fast) var(--pm-ease); }
.sidebar-link:hover::before { transform: scaleY(1); }
.sidebar-link.active { border-left: 0 !important; }
.sidebar-link.active::before { transform: scaleY(1); }

/* ---------- 12. Progress timelines: current step pulses ---------- */
.pm-step-current { position: relative; }
.pm-step-current::after { content: ""; position: absolute; inset: -6px; border-radius: 999px; border: 2px solid rgba(var(--pm-accent-rgb), .45); animation: pmRing 1.6s var(--pm-ease) infinite; }
@keyframes pmRing { 0% { transform: scale(.7); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }

/* ---------- 13. Count-up numbers ---------- */
.pm-count { font-variant-numeric: tabular-nums; }

/* ---------- Reduced motion: instant state swaps ---------- */
@media (prefers-reduced-motion: reduce) {
    .pm-reveal { opacity: 1; transform: none; transition: none; }
    .pm-sweep::before, .pm-bob, .pm-step-current::after, .pm-bump, .pm-pulse, .pm-shake { animation: none !important; }
    #cartDrawer > .absolute.right-0, #cartDrawer > .absolute.inset-0, #toastContainer .toast, .pm-card, .pm-row, .pm-pop, .pm-modal > [class*="rounded"] { transition: none !important; animation: none !important; transform: none !important; }
}