/* ========================================
   CAMPUS STUDIO - Animations & Transitions
   ======================================== */

/* --- Panel slide --- */
@keyframes slideIn {
  from { transform: translateX(-16px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
.panel-enter { animation: slideIn 280ms ease forwards; }

/* --- Product card entrance (staggered) --- */
@keyframes cardFadeUp {
  from { transform: translateY(18px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.product-card {
  opacity: 0;
  animation: cardFadeUp 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards;
}
.product-card:nth-child(2) { animation-delay:  60ms; }
.product-card:nth-child(3) { animation-delay: 120ms; }
.product-card:nth-child(4) { animation-delay: 180ms; }
.product-card:nth-child(5) { animation-delay: 240ms; }

/* --- Grid header fade --- */
@keyframes headerFadeDown {
  from { transform: translateY(-10px); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}
.product-grid-header {
  animation: headerFadeDown 320ms ease forwards;
}

/* --- SVG product swap --- */
@keyframes svgEnter {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}
.svg-entering { animation: svgEnter 380ms cubic-bezier(0.4, 0, 0.2, 1) forwards; }

/* --- Zone pulse highlight --- */
@keyframes zonePulse {
  0%, 100% { stroke-opacity: 0.45; stroke-width: 2;   }
  50%      { stroke-opacity: 1.00; stroke-width: 3.5; }
}
.zone-highlight { animation: zonePulse 1.4s ease-in-out infinite; }

/* --- View flip --- */
@keyframes flipOut {
  from { transform: perspective(800px) rotateY(0deg);  }
  to   { transform: perspective(800px) rotateY(90deg); }
}
@keyframes flipIn {
  from { transform: perspective(800px) rotateY(-90deg); }
  to   { transform: perspective(800px) rotateY(0deg);   }
}
.flip-out { animation: flipOut 200ms ease-in  forwards; }
.flip-in  { animation: flipIn  200ms ease-out forwards; }

/* --- Fade in generic --- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.fade-in { animation: fadeIn 280ms ease forwards; }

/* --- Button press --- */
.btn-primary:active, .btn-secondary:active { transform: scale(0.97); }

/* ══════════════════════════════════════
   Smooth color transitions en rutas SVG
   (fill Y stroke para cubrir todos los
   tipos de zonas, incluyendo cordones)
══════════════════════════════════════ */
#product-svg [id^="body-"],
#product-svg [id^="sleeve-"],
#product-svg [id^="hood-"],
#product-svg [id^="cuff-"],
#product-svg [id^="pocket-"],
#product-svg [id^="collar-"],
#product-svg [id^="waist"],
#product-svg [id^="cord-"],
#product-svg [id^="placket"],
#product-svg [id^="arm-trim"],
#product-svg [id^="stripe-"] {
  transition: fill 180ms ease, stroke 180ms ease;
}