/* =====================================================================
   Hau & Miau - delight layer (micro-animations, spec 12.4)
   Rules: transform/opacity only, 150-300ms for UI transitions, slow and
   subtle ambient loops for decor, everything off under reduced motion,
   no layout shift, nothing here is required for the page to work.
   The html.hm-dl class is set by delight.js: without JS nothing is hidden.
   ===================================================================== */

/* ---- 1. Reveal on scroll (fade + 8px rise, once, staggered) ---------- */
.hm-dl .hm-dl-reveal{opacity:0;transform:translateY(8px);transition:opacity .3s ease,transform .3s ease;transition-delay:var(--dl-delay,0ms);will-change:opacity,transform}
.hm-dl .hm-dl-reveal.is-in{opacity:1;transform:none;will-change:auto}
/* revealed elements must not keep a transform (position:fixed children, sticky bars) */
.hm-dl .hm-dl-reveal.is-in{transform:none!important}

/* ---- 2. Buttons: lift + soft shadow on hover, press on active -------- */
@media (hover:hover){
  .hm-dl .hm-btn:not(:disabled):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]):hover{transform:translateY(-2px);box-shadow:0 8px 18px rgba(60,50,20,.14)}
  .hm-dl .hm-btn--ghost:not(:disabled):not(.is-disabled):hover{box-shadow:0 8px 18px rgba(60,50,20,.08)}
}
.hm-dl .hm-btn:not(:disabled):not(.is-disabled):not(.is-loading):not([aria-disabled="true"]):active{transform:scale(.98);box-shadow:none;transition-duration:.1s}

/* ---- 3. Product cards: gentle image zoom, wish heart pop -------------- */
.hm-dl .hm-card__img img,.hm-dl .hm-cat__img img{transition:transform .3s ease}
@media (hover:hover){
  .hm-dl .hm-card:hover .hm-card__img img{transform:scale(1.03)}
}
.hm-dl .hm-card__wish svg{transition:transform .2s ease,fill .2s ease}
.hm-dl .hm-card__wish.is-on svg{fill:currentColor}
.hm-dl .hm-card__wish.hm-dl-beat svg{animation:hm-dl-heart .3s cubic-bezier(.34,1.56,.64,1)}
@keyframes hm-dl-heart{0%{transform:scale(.7)}55%{transform:scale(1.25)}100%{transform:scale(1)}}

/* ---- 4. Hero decor: hearts float, spark strokes draw in --------------- */
.hm-dl .hm-hero__doodle--hearts{animation:hm-dl-float 4.5s ease-in-out infinite;transform-origin:center}
.hm-dl .hm-hero__doodle--hearts path:nth-child(2){animation:hm-dl-float 4.5s ease-in-out infinite;animation-delay:-1.6s;transform-origin:center;transform-box:fill-box}
@keyframes hm-dl-float{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-3px) scale(1.04)}}
.hm-dl .hm-hero__doodle--spark path{stroke-dasharray:16;stroke-dashoffset:16;animation:hm-dl-draw .3s ease-out forwards}
.hm-dl .hm-hero__doodle--spark path:nth-child(2){animation-delay:.12s}
.hm-dl .hm-hero__doodle--spark path:nth-child(3){animation-delay:.24s}
@keyframes hm-dl-draw{to{stroke-dashoffset:0}}

/* Paw trail near the hero CTA (injected by delight.js, home page, desktop only) */
.hm-dl-paws{position:absolute;left:14px;bottom:10px;width:64px;height:56px;pointer-events:none;color:var(--hm-olive);z-index:1}
.hm-dl-paws svg{position:absolute;width:14px;height:14px;opacity:0;transform:rotate(-24deg) scale(.6);animation:hm-dl-paw .3s ease-out forwards}
.hm-dl-paws svg:nth-child(1){left:46px;bottom:0;animation-delay:.5s}
.hm-dl-paws svg:nth-child(2){left:32px;bottom:13px;animation-delay:.8s}
.hm-dl-paws svg:nth-child(3){left:20px;bottom:26px;animation-delay:1.1s}
.hm-dl-paws svg:nth-child(4){left:6px;bottom:39px;animation-delay:1.4s}
@keyframes hm-dl-paw{to{opacity:.38;transform:rotate(-24deg) scale(1)}}
@media (max-width:820px){.hm-dl-paws{display:none}}

/* ---- 5. Add-to-cart pop (heart rising from the button, 300ms) -------- */
.hm-dl-pop{position:fixed;z-index:1200;width:26px;height:26px;margin:-13px 0 0 -13px;pointer-events:none;color:var(--hm-orange);opacity:0;animation:hm-dl-rise .3s ease-out forwards}
.hm-dl-pop svg{width:100%;height:100%;fill:currentColor;stroke:none}
.hm-dl-pop--2{animation-delay:.08s;color:var(--hm-olive)}
.hm-dl-pop--3{animation-delay:.14s}
@keyframes hm-dl-rise{0%{opacity:0;transform:translate(0,0) scale(.5)}30%{opacity:1}100%{opacity:0;transform:translate(var(--dl-x,0),-34px) scale(1.05)}}

/* ---- 6. Calculator: result numbers count up (overlay, a11y-safe) ------ */
.hm-dl .hm-dl-count{position:relative;color:transparent!important}
.hm-dl .hm-dl-count__num{position:absolute;inset:0;display:block;color:var(--dl-color,inherit);font-variant-numeric:tabular-nums}
.hm-dl .hm-calc__result-hero .big{transition:transform .3s ease,opacity .3s ease}

/* ---- 7. Empty states: line-art pets (dog for empty cart, cat for 404 / no results) ---- */
.hm-dl-pet{display:block;width:100%;height:100%;color:inherit;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;fill:none;overflow:visible}
.hm-dl-pet .hm-dl-pet__eye{fill:currentColor;stroke:none;transform-box:fill-box;transform-origin:center;animation:hm-dl-blink 4.2s ease-in-out infinite}
.hm-dl-pet--cat .hm-dl-pet__eye{animation-delay:1.3s}
.hm-dl-pet .hm-dl-pet__tail{transform-box:fill-box;transform-origin:left bottom;animation:hm-dl-wag 1.4s ease-in-out infinite}
.hm-dl-pet--cat .hm-dl-pet__tail{transform-origin:right bottom;animation-duration:2.6s}
.hm-dl-pet .hm-dl-pet__ear{transform-box:fill-box;transform-origin:top center}
.hm-dl-pet--dog .hm-dl-pet__ear{animation:hm-dl-ear 4.2s ease-in-out infinite}
@keyframes hm-dl-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
@keyframes hm-dl-wag{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(10deg)}}
@keyframes hm-dl-ear{0%,88%,100%{transform:rotate(0)}91%{transform:rotate(-6deg)}94%{transform:rotate(4deg)}}
/* fit inside the existing round icon wells */
.hm-empty__icon .hm-dl-pet,.hm-404__icon .hm-dl-pet,.hm-cempty__icon .hm-dl-pet,.hm-shop-empty__icon .hm-dl-pet{width:70%;height:70%}

/* ---- 8. Footer leaf sway ------------------------------------------- */
.hm-dl .hm-footer__leaf{transition:transform .3s ease;transform-origin:bottom left}
@media (hover:hover){.hm-dl .hm-footer__brand:hover .hm-footer__leaf,.hm-dl .hm-footer__col:first-child:hover .hm-footer__leaf,.hm-dl .hm-footer__leaf:hover{transform:rotate(-8deg)}}

/* ---- 9. Small touches ---------------------------------------------- */
.hm-dl .hm-trust__item svg,.hm-dl .hm-step__n{transition:transform .2s ease}
@media (hover:hover){
  .hm-dl .hm-trust__item:hover svg{transform:translateY(-2px)}
  .hm-dl details summary{transition:color .15s ease}
}

/* ---- Reduced motion: everything in this file is off ------------------ */
@media (prefers-reduced-motion:reduce){
  .hm-dl .hm-dl-reveal{opacity:1!important;transform:none!important;transition:none!important}
  .hm-dl .hm-btn:hover,.hm-dl .hm-btn:active{transform:none!important;box-shadow:none}
  .hm-dl .hm-card:hover .hm-card__img img{transform:none!important}
  .hm-dl .hm-card__img img,.hm-dl .hm-cat__img img,.hm-dl .hm-card__wish svg,.hm-dl .hm-footer__leaf,.hm-dl .hm-trust__item svg,.hm-dl .hm-step__n{transition:none!important}
  .hm-dl .hm-hero__doodle--hearts,.hm-dl .hm-hero__doodle--hearts path,.hm-dl .hm-hero__doodle--spark path,.hm-dl-paws svg,.hm-dl-pop,.hm-dl .hm-card__wish.hm-dl-beat svg,.hm-dl-pet .hm-dl-pet__eye,.hm-dl-pet .hm-dl-pet__tail,.hm-dl-pet .hm-dl-pet__ear{animation:none!important}
  .hm-dl .hm-hero__doodle--spark path{stroke-dashoffset:0}
  .hm-dl-paws svg{opacity:.38;transform:rotate(-24deg)}
  .hm-dl-pop{display:none}
  .hm-dl .hm-footer__brand:hover .hm-footer__leaf,.hm-dl .hm-footer__leaf:hover{transform:none}
}