/* Shared motion widget. Palette comes from the store; no container transforms. */
lord-icon.icon{display:inline-block;position:relative;vertical-align:middle;animation:none!important}
lord-icon.icon>svg{width:100%;height:100%;display:block}
@keyframes content-enter {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: none; }
}
@keyframes icon-pop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.18); }
  70% { transform: scale(.94); }
}
@keyframes icon-sway {
  0%, 100% { transform: rotate(0); }
  30% { transform: rotate(-14deg); }
  65% { transform: rotate(12deg); }
}
@keyframes icon-forward {
  0%, 100% { transform: translateX(0); }
  45% { transform: translateX(4px); }
}
@keyframes photo-enter {
  from { transform: scale(1.045); }
  to { transform: scale(1); }
}
@keyframes toast-enter {
  from { opacity: 0; translate: 0 12px; }
  to { opacity: 1; translate: 0 0; }
}
@keyframes loading-turn { to { transform: rotate(360deg); } }

@media (prefers-reduced-motion: no-preference) {
  .motion-in { animation: content-enter .65s cubic-bezier(.2,.7,.25,1) var(--motion-delay, 0ms) both; }
  .hero.intro { animation: none; }
  .hero-media { animation: photo-enter 1.8s ease-out; }
  .icon { transform-origin: center; --icon-motion: icon-pop; }
  .icon-arrow, .icon-truck, .icon-cart { --icon-motion: icon-forward; }
  .icon-flower, .icon-gift, .icon-user { --icon-motion: icon-sway; }
  :is(a, button, summary):focus-visible .icon,
  .icon-playing .icon,
  .mobile-bottom [aria-current=page] .icon,
  .hero-benefits .motion-in .icon,
  .personalizer-copy.motion-in .icon {
    animation: var(--icon-motion) .65s ease-in-out;
  }
  .mobile-bottom [aria-current=page] .icon { animation-delay: .3s; }
  .photo-window > img { transition: transform .55s ease, filter .25s; }
  .button:active { transform: scale(.97); }
  .mobile-bottom > :active .icon { scale: .9; }
  .mobile-bottom .icon { transition: scale .2s; }
  .header nav.open, #search.open input, dialog[open],
  details[open] > :not(summary), [data-gallery-image]:not([hidden]) {
    animation: content-enter .3s ease-out;
  }
  details summary > span { transition: transform .25s; }
  dialog[open]::backdrop { animation: toast-enter .25s ease-out; }
  #toast.visible { animation: toast-enter .3s ease-out; }
  @media (hover: hover) {
    :is(a, button, summary):hover .icon { animation: var(--icon-motion) .65s ease-in-out; }
    :is(.product-picture, .category, .tarjeta-categoria):hover .photo-window > img { transform: scale(1.045); }
  }
}

/* Feedback follows the real request lifecycle, including reduced-motion users. */
[data-commerce-form][data-sending] button[type=submit] { opacity: .75; }
[data-commerce-form][data-sending] button[type=submit]::after {
  content: ''; width: 14px; height: 14px; flex: 0 0 14px;
  border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
}
@media (prefers-reduced-motion: no-preference) {
  [data-commerce-form][data-sending] button[type=submit]::after { animation: loading-turn .8s linear infinite; }
}