/* D24 reward microinteractions — badge / toast / success-check / panel / modal /
   number-pop / stagger / skeleton (transitions.dev free recipes + forest brand).
   Sync-included (NOT lazy-boot) to avoid storefront opacity:0 freeze regressions.
   Tokens align with team-build/transitions-dev/_root.css. */

: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);
  /* Modal */
  --modal-open-dur: 250ms;
  --modal-close-dur: 150ms;
  --modal-scale: 0.96;
  --modal-scale-close: 0.96;
  --modal-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Panel reveal */
  --panel-open-dur: 400ms;
  --panel-close-dur: 350ms;
  --panel-translate-y: 100px;
  --panel-blur: 2px;
  --panel-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Number pop-in */
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
  /* Texts reveal / stagger */
  --stagger-dur: 500ms;
  --stagger-distance: 12px;
  --stagger-stagger: 40ms;
  --stagger-blur: 3px;
  --stagger-ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* Skeleton */
  --pulse-dur: 1000ms;
  --pulse-count: 1;
  --pulse-min: 0.5;
  --reveal-dur: 400ms;
  --reveal-blur: 2px;
  --reveal-ease: ease-in-out;
}

/* === 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 / Ir a pagar / Pagar 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);
}

/* === 06-modal === */
.t-modal {
  transform-origin: center;
  transform: scale(var(--modal-scale));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-open-dur) var(--modal-ease),
    opacity   var(--modal-open-dur) var(--modal-ease);
  will-change: transform, opacity;
}
.t-modal.is-open {
  transform: scale(1);
  opacity: 1;
  pointer-events: auto;
}
.t-modal.is-closing {
  transform: scale(var(--modal-scale-close));
  opacity: 0;
  pointer-events: none;
  transition:
    transform var(--modal-close-dur) var(--modal-ease),
    opacity   var(--modal-close-dur) var(--modal-ease);
}

/* === 07-panel-reveal (generic Y) === */
.t-panel-slide {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
  will-change: transform, opacity, filter;
}
.t-panel-slide[data-open="true"],
.t-panel-slide.is-open {
  transform: translateY(0);
  opacity: 1;
  filter: blur(0);
  pointer-events: auto;
  transition:
    transform var(--panel-open-dur) var(--panel-ease),
    opacity   var(--panel-open-dur) var(--panel-ease),
    filter    var(--panel-open-dur) var(--panel-ease);
}
.t-panel-slide.is-closing {
  transform: translateY(var(--panel-translate-y));
  opacity: 0;
  filter: blur(var(--panel-blur));
  pointer-events: none;
  transition:
    transform var(--panel-close-dur) var(--panel-ease),
    opacity   var(--panel-close-dur) var(--panel-ease),
    filter    var(--panel-close-dur) var(--panel-ease);
}

/* Cart drawer: class-based only — isolated from .t-panel-slide recipe +
   theme freeze failsafe (transform:none!important). Closed = off-screen. */
.cart-drawer,
.cart-drawer.t-panel-slide {
  --panel-translate-y: 0;
  transform: translateX(100%) !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: none !important;
  transition:
    transform var(--panel-close-dur) var(--panel-ease);
}
.cart-drawer.open,
.cart-drawer[data-open="true"],
.cart-drawer.is-open,
.cart-drawer.t-panel-slide.open,
.cart-drawer.t-panel-slide[data-open="true"],
.cart-drawer.t-panel-slide.is-open {
  transform: translateX(0) !important;
  opacity: 1 !important;
  filter: none !important;
  pointer-events: auto !important;
  transition:
    transform var(--panel-open-dur) var(--panel-ease);
}
.cart-drawer.is-closing,
.cart-drawer.t-panel-slide.is-closing {
  transform: translateX(100%) !important;
  opacity: 1 !important;
  pointer-events: none !important;
  transition:
    transform var(--panel-close-dur) var(--panel-ease);
}

/* Pedido cards: shorter travel, forest soft */
#view-ok.t-panel-slide,
#view-404.t-panel-slide {
  --panel-translate-y: 18px;
  --panel-blur: 2px;
}

/* Pedido fail-open: never leave unpaid CTA invisible/unclickable when panel is shown */
#view-ok.t-panel-slide:not([hidden]),
#view-404.t-panel-slide:not([hidden]) {
  opacity: 1;
  pointer-events: auto;
  filter: none;
  transform: none;
}

/* === 02-number-pop-in === */
@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}

/* Lightweight whole-value pop (cart qty / total) — luxury, not clowny */
@keyframes t-num-pop {
  0% {
    transform: translateY(var(--digit-distance)) scale(0.96);
    opacity: 0.35;
    filter: blur(var(--digit-blur));
  }
  100% {
    transform: translateY(0) scale(1);
    opacity: 1;
    filter: blur(0);
  }
}
.t-num-pop,
#cartTotal.t-num-pop,
.cart-qty-val.t-num-pop,
.cart-qty span.t-num-pop {
  display: inline-block;
  animation: t-num-pop var(--digit-dur) var(--digit-ease) both;
  transform-origin: center bottom;
  will-change: transform, opacity, filter;
}

/* === 18-texts-reveal / stagger (pedido #lines li) === */
.t-stagger-line {
  display: block;
  opacity: 0;
  transform: translateY(var(--stagger-distance));
  filter: blur(var(--stagger-blur));
  transition:
    opacity   var(--stagger-dur) var(--stagger-ease),
    transform var(--stagger-dur) var(--stagger-ease),
    filter    var(--stagger-dur) var(--stagger-ease);
  will-change: transform, opacity, filter;
}
#lines.t-stagger > li.t-stagger-line,
.t-stagger > .t-stagger-line {
  display: flex;
}
.t-stagger.is-shown .t-stagger-line {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}
.t-stagger.is-hiding .t-stagger-line {
  opacity: 0;
  transform: translateY(0);
  filter: blur(0);
  transition:
    opacity 200ms ease,
    transform 0s linear,
    filter 0s linear;
  transition-delay: 0s;
}

/* === 14-skeleton-reveal === */
.t-skel { position: relative; }
.t-skel-skeleton,
.t-skel-content {
  position: absolute;
  inset: 0;
}
.t-skel-skeleton {
  z-index: 1;
  opacity: 1;
  filter: blur(0);
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel-content {
  z-index: 2;
  opacity: 0;
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--reveal-dur) var(--reveal-ease),
    filter  var(--reveal-dur) var(--reveal-ease);
}
.t-skel.is-revealed .t-skel-skeleton {
  opacity: 0;
  filter: blur(var(--reveal-blur));
}
.t-skel.is-revealed .t-skel-content {
  opacity: 1;
  filter: blur(0);
}
.t-skel.is-resetting .t-skel-skeleton,
.t-skel.is-resetting .t-skel-content {
  transition: none !important;
}
.t-skel-skeleton.is-pulsing > * {
  animation: t-skel-pulse var(--pulse-dur) ease-in-out var(--pulse-count);
}
@keyframes t-skel-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: var(--pulse-min); }
}

/* Pedido load skeleton bars (forest tint) */
.pedido-load.t-skel-skeleton,
#pedidoMatrix.t-skel-skeleton {
  min-height: 48px;
}
.d24-skel-bar {
  height: 10px;
  border-radius: 999px;
  background: color-mix(in oklab, var(--sage, #3F6B60) 22%, var(--ivory, #FFFCF6));
  margin: 8px 0;
}
.d24-skel-bar:nth-child(2) { width: 72%; }
.d24-skel-bar:nth-child(3) { width: 54%; }

@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,
  .t-modal, .t-panel-slide, .cart-drawer.t-panel-slide,
  .t-digit-group .t-digit, .t-num-pop,
  #cartTotal.t-num-pop, .cart-qty-val.t-num-pop, .cart-qty span.t-num-pop,
  .t-stagger-line,
  .t-skel-skeleton, .t-skel-content,
  .t-skel-skeleton.is-pulsing > * {
    animation: none !important;
    transition: none !important;
  }
  .t-success-check { opacity: 1; }
  .t-success-check svg path { stroke-dashoffset: 0 !important; }
  .t-panel-slide[data-open="true"]:not(.cart-drawer),
  .t-panel-slide.is-open:not(.cart-drawer),
  .t-stagger.is-shown .t-stagger-line {
    opacity: 1;
    transform: none;
    filter: none;
  }
  .cart-drawer:not(.open):not([data-open="true"]):not(.is-open) {
    transform: translateX(100%) !important;
    pointer-events: none !important;
  }
}