/* D24 reward microinteractions (t1951u) — badge / toast / success-check only.
   Sync-included (NOT lazy-boot) to avoid storefront opacity:0 freeze regressions.
   Tokens align with transitions-dev/_root.css; forest brand overrides demo teal. */

:root {
  /* Notification badge */
  --badge-slide-dur: 260ms;
  --badge-pop-dur: 500ms;
  --badge-pop-close-dur: 180ms;
  --badge-fade-dur: 400ms;
  --badge-fade-close-dur: 180ms;
  --badge-blur: 2px;
  --badge-offset-x: -8.2px;
  --badge-offset-y: 12.4px;
  --badge-slide-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --badge-pop-ease: cubic-bezier(0.34, 1.36, 0.64, 1);
  --badge-close-ease: cubic-bezier(0.4, 0, 0.2, 1);
  /* Toast */
  --toast-open: 350ms;
  --toast-close: 250ms;
  --toast-distance: 16px;
  --toast-blur: 2px;
  --toast-scale: 0.97;
  --toast-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Success check */
  --check-opacity-dur: 500ms;
  --check-rotate-dur: 500ms;
  --check-rotate-from: 80deg;
  --check-bob-dur: 500ms;
  --check-y-amount: 40px;
  --check-blur-dur: 500ms;
  --check-blur-from: 10px;
  --check-path-dur: 500ms;
  --check-path-delay: 80ms;
  --check-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-opacity: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-rotate: cubic-bezier(0.22, 1, 0.36, 1);
  --check-ease-bob: cubic-bezier(0.34, 1.35, 0.64, 1);
  --check-ease-path: cubic-bezier(0.22, 1, 0.36, 1);
}

/* === 03-notification-badge (adapted to cart-count host) === */
@keyframes t-badge-slide-in {
  from { transform: translate(var(--badge-offset-x), var(--badge-offset-y)); }
  to   { transform: translate(0, 0); }
}
@keyframes d24-badge-bump {
  0%   { transform: scale(1); }
  35%  { transform: scale(1.28); }
  100% { transform: scale(1); }
}
.header .icon-btn.cart { position: relative; }
.header .cart-count.t-badge,
.cart-count.t-badge,
.cart-badge.t-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transform-origin: center;
  will-change: transform;
}
.cart-count.t-badge[data-open="true"].is-bump,
.cart-badge.t-badge.is-bump,
.cart-count.is-bump {
  animation:
    t-badge-slide-in var(--badge-slide-dur) var(--badge-slide-ease),
    d24-badge-bump var(--badge-pop-dur) var(--badge-pop-ease);
}

/* === 22-toast === */
.t-toast {
  opacity: 0;
  transform: translateY(var(--toast-distance)) scale(var(--toast-scale));
  filter: blur(var(--toast-blur));
  will-change: transform, opacity, filter;
  transition:
    opacity var(--toast-close) var(--toast-ease),
    transform var(--toast-close) var(--toast-ease),
    filter var(--toast-close) var(--toast-ease);
}
.t-toast.is-open {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
  transition:
    opacity var(--toast-open) var(--toast-ease),
    transform var(--toast-open) var(--toast-ease),
    filter var(--toast-open) var(--toast-ease);
}

/* Host positioning + forest brand (override demo teal/navy) */
.d24-toast.t-toast {
  position: fixed;
  left: 50%;
  bottom: 28px;
  z-index: 120;
  background: color-mix(in oklab, var(--forest, #1C433A) 92%, black);
  color: var(--ivory, #FFFCF6);
  padding: 12px 20px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  border: 1px solid color-mix(in oklab, var(--sage, #3F6B60) 45%, transparent);
  box-shadow: 0 12px 32px rgba(18, 46, 40, 0.28);
  max-width: min(92vw, 420px);
  text-align: center;
  pointer-events: none;
  margin: 0;
  transform: translateX(-50%) translateY(var(--toast-distance)) scale(var(--toast-scale));
}
.d24-toast.t-toast.is-open {
  pointer-events: auto;
  transform: translateX(-50%) translateY(0) scale(1);
}
.cta-toast.t-toast {
  position: static;
  display: block;
  color: var(--sage, #3F6B60);
  font-weight: 600;
  font-size: 13px;
  --toast-distance: 6px;
  --toast-blur: 0px;
  pointer-events: none;
  height: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}
.cta-toast.t-toast.is-open {
  height: auto;
  min-height: 18px;
  margin-top: 10px;
  overflow: visible;
}

/* === 10-success-check === */
.t-success-check {
  display: inline-block;
  transform-origin: center;
  opacity: 0;
  will-change: transform, opacity, filter;
}
.t-success-check svg { display: block; overflow: visible; }
.t-success-check svg path {
  stroke-dasharray: 20;
  stroke-dashoffset: 20;
  stroke: var(--forest, #1C433A);
}
.t-success-check[data-state="in"] {
  animation:
    t-check-fade   var(--check-opacity-dur) var(--check-ease-opacity) forwards,
    t-check-rotate var(--check-rotate-dur)  var(--check-ease-rotate)  forwards,
    t-check-blur   var(--check-blur-dur)    var(--check-ease-out)     forwards,
    t-check-bob    var(--check-bob-dur)     var(--check-ease-bob)     forwards;
}
.t-success-check[data-state="in"] svg path {
  animation: t-check-draw var(--check-path-dur) var(--check-ease-path) var(--check-path-delay, 0ms) forwards;
}
@keyframes t-check-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes t-check-rotate {
  from { transform: rotate(var(--check-rotate-from)); }
  to   { transform: rotate(0deg); }
}
@keyframes t-check-blur {
  from { filter: blur(var(--check-blur-from)); }
  to   { filter: blur(0); }
}
@keyframes t-check-bob {
  from { translate: 0 var(--check-y-amount); }
  to   { translate: 0 0; }
}
@keyframes t-check-draw { to { stroke-dashoffset: 0; } }

/* CTA success pulse (Comprar ahora) */
@keyframes d24-cta-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(28, 67, 58, 0.35); }
  45%  { transform: scale(1.04); box-shadow: 0 0 0 10px rgba(28, 67, 58, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(28, 67, 58, 0); }
}
.d24-cta-pulse {
  animation: d24-cta-pulse 420ms var(--badge-pop-ease);
}

@media (prefers-reduced-motion: reduce) {
  .t-badge, .t-badge-dot,
  .cart-count.t-badge, .cart-badge.t-badge, .cart-count.is-bump,
  .t-toast, .t-success-check, .d24-cta-pulse {
    animation: none !important;
    transition: none !important;
  }
  .t-success-check { opacity: 1; }
  .t-success-check svg path { stroke-dashoffset: 0 !important; }
}