/* ============================================================
   CSN Store — delight layer (pet motif on Aquarium & Pets pages,
   maker/hex motif elsewhere — motion.js picks; brand.css adds the
   hex + nozzle variants and the 3D-print effects).
   Cursor trail, per-category hovers, cart reactions, scroll paw.
   Purely decorative. Everything here is switched off entirely
   under prefers-reduced-motion (guard block at the end).
   Paired with csn-assets/js/motion.js.
   ============================================================ */

/* ---- Paw cursor trail (desktop only; nodes injected by motion.js) ---- */
.csn-trail { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }
.csn-trail-paw {
  position: absolute; width: 22px; height: 22px; margin: -11px 0 0 -11px;
  color: var(--brand); opacity: 0;
}
.csn-trail-paw svg { display: block; width: 100%; height: 100%; }
@keyframes csn-trail-pop {
  0%   { opacity: 0;   transform: scale(.35) rotate(var(--tr, 0deg)); }
  18%  { opacity: .5;  transform: scale(1)   rotate(var(--tr, 0deg)); }
  100% { opacity: 0;   transform: scale(.8)  rotate(var(--tr, 0deg)) translateY(12px); }
}
.csn-trail-paw.is-on { animation: csn-trail-pop .9s ease-out forwards; }

/* ---- Scroll progress with a paw that walks along it ---- */
.csn-scrollbar { position: fixed; top: 0; left: 0; height: 3px; width: 100%; z-index: 9999; pointer-events: none; }
.csn-scrollbar-fill {
  height: 100%; width: 0;
  background: linear-gradient(90deg, var(--accent), var(--brand));
  transition: width .08s linear;
}
.csn-scrollbar-paw {
  position: absolute; top: -7px; left: 0; width: 17px; height: 17px;
  color: var(--brand); transition: left .08s linear;
  animation: csn-paw-step .5s ease-in-out infinite;
}
.csn-scrollbar-paw svg { display: block; width: 100%; height: 100%; }
@keyframes csn-paw-step {
  0%, 100% { transform: translateX(-50%) rotate(-12deg); }
  50%      { transform: translateX(-50%) rotate(12deg); }
}

/* ---- Aquarium card: bubbles rise on hover ---- */
.csn-bubbles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 2; }
.csn-bubbles span {
  position: absolute; bottom: -18px; border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  border: 1px solid rgba(255, 255, 255, .75);
  opacity: 0;
}
@keyframes csn-bubble-rise {
  0%   { opacity: 0;   transform: translateY(0) scale(.6); }
  15%  { opacity: .85; }
  100% { opacity: 0;   transform: translateY(-320px) scale(1.1); }
}
.csn-cat-card[data-cat="aquarium"]:hover .csn-bubbles span { animation: csn-bubble-rise 2.6s ease-in infinite; }

/* ---- Paw stamp that presses in on card hover ---- */
.csn-stamp {
  position: absolute; top: 14px; right: 14px; width: 30px; height: 30px;
  color: rgba(255, 255, 255, .85); opacity: 0;
  transform: scale(.4) rotate(-24deg); pointer-events: none; z-index: 5;
  transition: opacity .3s var(--ease-out), transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.csn-stamp svg { display: block; width: 100%; height: 100%; }
.csn-cat-card:hover .csn-stamp { opacity: 1; transform: scale(1) rotate(-8deg); }

/* ---- "Coming soon" badge: a slow, sleepy breath ---- */
@keyframes csn-breathe { 0%, 100% { opacity: .78; } 50% { opacity: 1; } }
.csn-cat-card[data-empty="1"] .csn-cat-badge { animation: csn-breathe 2.8s ease-in-out infinite; }

/* ---- Header logo gives a little wag ---- */
@keyframes csn-wag {
  0%, 100% { transform: rotate(0); }
  25%      { transform: rotate(-9deg); }
  75%      { transform: rotate(9deg); }
}
.csn-header a:hover img { animation: csn-wag .55s ease-in-out; }

/* ---- Cart badge reacts when something lands in the bag ---- */
@keyframes csn-cart-pop {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.5) rotate(-10deg); }
  70%  { transform: scale(.92) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}
.csn-bag-btn.is-bump { animation: csn-cart-pop .6s cubic-bezier(.34, 1.56, .64, 1); }

/* paw burst fired from the cart button on add */
.csn-burst { position: fixed; pointer-events: none; z-index: 9997; width: 18px; height: 18px; color: var(--brand); }
.csn-burst svg { display: block; width: 100%; height: 100%; }
@keyframes csn-burst-out {
  0%   { opacity: 1; transform: translate(0, 0) scale(.5) rotate(0); }
  100% { opacity: 0; transform: translate(var(--bx), var(--by)) scale(1.15) rotate(var(--brz)); }
}
.csn-burst.is-on { animation: csn-burst-out .75s ease-out forwards; }

/* ---- Category icon hops inside its lifted circle on hover ---- */
@keyframes csn-hop {
  0%, 100% { transform: translateY(0); }
  30%      { transform: translateY(-10px); }
  55%      { transform: translateY(0); }
  72%      { transform: translateY(-4px); }
}
.csn-cat-card:hover .csn-cat-icon svg { animation: csn-hop .7s ease-in-out; }

/* ---- Paw prints walk across a product image on hover ----
   Kept to the lower-left diagonal so they never sit under the wishlist
   and quick-view buttons in the top-right corner. */
.csn-walk { position: absolute; inset: 0; pointer-events: none; z-index: 3; overflow: hidden; }
.csn-walk span {
  position: absolute; width: 20px; height: 20px; color: var(--brand);
  opacity: 0; transform: scale(.5) rotate(38deg);
  filter: drop-shadow(0 2px 5px rgba(60, 40, 30, .28));
  transition: opacity .3s var(--ease-out), transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
.csn-walk span svg { display: block; width: 100%; height: 100%; }
.csn-product-card:hover .csn-walk span { opacity: .92; transform: scale(1) rotate(38deg); }
.csn-product-card:hover .csn-walk span:nth-child(1) { transition-delay: 0ms; }
.csn-product-card:hover .csn-walk span:nth-child(2) { transition-delay: 110ms; }
.csn-product-card:hover .csn-walk span:nth-child(3) { transition-delay: 220ms; }

/* ---- Wishlist / quick-view buttons give a springy nudge ---- */
.csn-wishlist-btn,
.csn-product-card button[data-quick-view] { transition: transform .28s cubic-bezier(.34, 1.56, .64, 1); }
.csn-wishlist-btn:hover,
.csn-product-card button[data-quick-view]:hover { transform: scale(1.18) rotate(-7deg); }

/* ---- Add-to-bag button pulses a soft paw-coloured ring ---- */
@keyframes csn-ring {
  0%   { box-shadow: 0 0 0 0 rgba(224, 122, 95, .45); }
  100% { box-shadow: 0 0 0 15px rgba(224, 122, 95, 0); }
}
.csn-add-btn:not([disabled]):hover { animation: csn-ring 1s ease-out infinite; }

/* ---- Reduced motion: strip every one of the above ---- */
@media (prefers-reduced-motion: reduce) {
  .csn-trail, .csn-scrollbar, .csn-bubbles, .csn-burst { display: none !important; }
  .csn-stamp, .csn-walk { display: none !important; }
  .csn-cat-card:hover .csn-cat-icon svg,
  .csn-add-btn:not([disabled]):hover { animation: none !important; }
  .csn-wishlist-btn:hover,
  .csn-product-card button[data-quick-view]:hover { transform: none !important; }
  .csn-cat-card[data-empty="1"] .csn-cat-badge,
  .csn-header a:hover img,
  .csn-bag-btn.is-bump { animation: none !important; }
}