/* Guate Bag Print — Escenas animadas SVG */

.anim-scene {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(180deg, var(--sky-soft) 0%, white 100%);
  border: 1px solid var(--sky-muted);
  box-shadow: var(--shadow-sm);
}

.anim-scene--wide { max-width: 100%; }

.anim-scene--hero {
  max-width: none;
  min-height: 320px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--sky-soft) 0%, #fff 45%, var(--cream) 100%);
  border: 1px solid var(--sky-muted);
  box-shadow: 0 12px 40px var(--sky-glow);
}

.anim-scene svg {
  width: 100%;
  height: auto;
  display: block;
}

.info-card--animated {
  overflow: hidden;
  padding: 0;
}

.info-card--animated .info-card-scene {
  padding: 1rem 1rem 0;
  background: var(--sky-soft);
  border-bottom: 1px solid var(--sky-muted);
}

.info-card--animated .info-card-body {
  padding: 1.25rem 1.5rem 1.5rem;
}

.info-card--animated h3 {
  margin: 0 0 0.75rem;
}

.info-card--animated ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ── Factory ── */
@keyframes factory-belt {
  from { transform: translateX(0); }
  to { transform: translateX(-40px); }
}

@keyframes factory-arm {
  0%, 100% { transform: rotate(-8deg); }
  50% { transform: rotate(8deg); }
}

@keyframes factory-smoke {
  0% { opacity: 0.4; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-18px) scale(1.4); }
}

@keyframes factory-gear {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.anim-factory .belt-dash {
  animation: factory-belt 1.2s linear infinite;
}

@keyframes factory-items-move {
  from { transform: translateX(0); }
  to { transform: translateX(-360px); }
}

.anim-factory .belt-items {
  animation: factory-items-move 12s linear infinite;
}

.anim-factory .robot-arm {
  transform-origin: 118px 95px;
  animation: factory-arm 2.5s ease-in-out infinite;
}

.anim-delivery .pay-bag,
.anim-payment .pay-bag {
  animation: delivery-bounce 1.2s ease-in-out infinite;
}

.anim-factory .smoke {
  animation: factory-smoke 2.5s ease-out infinite;
}

.anim-factory .smoke-2 { animation-delay: 0.8s; }

.anim-factory .gear {
  transform-origin: center;
  animation: factory-gear 4s linear infinite;
}

/* ── Delivery ── */
@keyframes delivery-drive {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(12px); }
}

@keyframes delivery-bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-3px); }
}

@keyframes delivery-walk {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(8px); }
}

@keyframes delivery-arm {
  0%, 100% { transform: rotate(0deg); }
  50% { transform: rotate(-12deg); }
}

@keyframes delivery-road {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: -24; }
}

.anim-delivery .van {
  animation: delivery-drive 3s ease-in-out infinite;
}

.anim-delivery .courier {
  animation: delivery-walk 2s ease-in-out infinite;
}

.anim-delivery .courier-arm {
  transform-origin: 248px 118px;
  animation: delivery-arm 1s ease-in-out infinite;
}

.anim-delivery .package-hand {
  animation: delivery-bounce 1s ease-in-out infinite;
}

.anim-delivery .road-line {
  stroke-dasharray: 12 12;
  animation: delivery-road 0.8s linear infinite;
}

.anim-delivery .cloud {
  animation: delivery-drive 5s ease-in-out infinite reverse;
}

/* ── Payment ── */
@keyframes pay-tap {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  40% { transform: translateY(-4px) rotate(-5deg); }
  60% { transform: translateY(-2px) rotate(2deg); }
}

@keyframes pay-check {
  0% { stroke-dashoffset: 30; opacity: 0; }
  40% { opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 1; }
}

@keyframes pay-cash-slide {
  0%, 100% { transform: translateX(0); opacity: 0.6; }
  50% { transform: translateX(6px); opacity: 1; }
}

@keyframes pay-phone-glow {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 0.7; }
}

.anim-payment .hand-card {
  transform-origin: 175px 130px;
  animation: pay-tap 2s ease-in-out infinite;
}

.anim-payment .check-mark {
  stroke-dasharray: 30;
  animation: pay-check 2.5s ease forwards infinite;
}

.anim-payment .cash-bill {
  animation: pay-cash-slide 2.5s ease-in-out infinite;
}

.anim-payment .cash-bill-2 { animation-delay: 0.4s; }

.anim-payment .phone-glow {
  animation: pay-phone-glow 2s ease-in-out infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  .anim-factory *,
  .anim-delivery *,
  .anim-payment * {
    animation: none !important;
  }
}