/* ═══════════════════════════════════════════════════════════════════════════
  AMANO - ANIMATIONS
   Animaciones sutiles y elegantes para interacciones
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────────────────────────────────────────────────────────────────────
   SCROLL REVEAL - Elementos que aparecen al hacer scroll
   ────────────────────────────────────────────────────────────────────────── */

[data-reveal] {
  opacity: 0;
  transition: all 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

[data-reveal].revealed {
  opacity: 1;
}

[data-reveal="fade"] {
  opacity: 0;
}

[data-reveal="slide-left"] {
  opacity: 0;
  transform: translateX(-40px);
}

[data-reveal="slide-left"].revealed {
  transform: translateX(0);
}

[data-reveal="slide-right"] {
  opacity: 0;
  transform: translateX(40px);
}

[data-reveal="slide-right"].revealed {
  transform: translateX(0);
}

[data-reveal="scale"] {
  opacity: 0;
  transform: scale(0.9);
}

[data-reveal="scale"].revealed {
  transform: scale(1);
}

/* Delays escalonados para grupos */
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }
[data-reveal-delay="5"] { transition-delay: 0.5s; }

/* ──────────────────────────────────────────────────────────────────────────
   SHIMMER EFFECT - Brillo sutil en hover
   ────────────────────────────────────────────────────────────────────────── */

/* Efecto shimmer elegante */
.shimmer {
  position: relative;
  overflow: hidden;
}

.shimmer::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.3) 50%,
    transparent 100%
  );
  transform: translateX(-100%);
  transition: transform 0.8s ease;
  pointer-events: none;
}

.shimmer:hover::after {
  transform: translateX(100%);
}

/* Glow suave en botones primarios */
.btn-primary {
  position: relative;
}

.btn-primary::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--pink), var(--pink-strong));
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
  filter: blur(12px);
}

.btn-primary:hover::before {
  opacity: 0.6;
}

/* ──────────────────────────────────────────────────────────────────────────
   FLOATING ANIMATIONS - Movimientos suaves
   ────────────────────────────────────────────────────────────────────────── */

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}

@keyframes float-reverse {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(10px); }
}

.float { animation: float 4s ease-in-out infinite; }
.float-reverse { animation: float-reverse 5s ease-in-out infinite; }
.float-slow { animation: float 6s ease-in-out infinite; }

/* ──────────────────────────────────────────────────────────────────────────
   CARD ANIMATIONS - Interacciones con tarjetas de productos
   ────────────────────────────────────────────────────────────────────────── */

.card {
  transition: all 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.card:hover {
  transform: translateY(-4px);
}

.card__img {
  transition: transform 0.35s ease;
}

.card:hover .card__img {
  transform: scale(1.05);
}

/* ──────────────────────────────────────────────────────────────────────────
   CART DRAWER ANIMATIONS - Entrada/salida del carrito
   ────────────────────────────────────────────────────────────────────────── */

.cart-drawer {
  transition: transform 0.35s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.cart-drawer[aria-hidden="true"] {
  transform: translateX(100%);
}

.cart-drawer[aria-hidden="false"] {
  transform: translateX(0);
}

.cart-item {
  animation: slideInRight 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes slideInRight {
  from {
    opacity: 0;
    transform: translateX(30px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.cart-item:nth-child(1) { animation-delay: 0s; }
.cart-item:nth-child(2) { animation-delay: 0.05s; }
.cart-item:nth-child(3) { animation-delay: 0.1s; }
.cart-item:nth-child(4) { animation-delay: 0.15s; }
.cart-item:nth-child(5) { animation-delay: 0.2s; }

/* ──────────────────────────────────────────────────────────────────────────
   MODAL ANIMATIONS - Entrada/salida de modales
   ────────────────────────────────────────────────────────────────────────── */

.modal {
  transition: all 0.3s ease;
  opacity: 0;
}

.modal[aria-hidden="false"] {
  opacity: 1;
}

.modal__dialog {
  transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
  transform: scale(0.9);
}

.modal[aria-hidden="false"] .modal__dialog {
  transform: scale(1);
}

/* ──────────────────────────────────────────────────────────────────────────
   HERO ANIMATIONS - Animación de entrada del hero
   ────────────────────────────────────────────────────────────────────────── */

.hero__copy > * {
  opacity: 0;
  animation: fadeInUp 0.6s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.hero__copy .eyebrow { animation-delay: 0.1s; }
.hero__copy h1 { animation-delay: 0.2s; }
.hero__copy .lede { animation-delay: 0.3s; }
.hero__copy .hero__actions { animation-delay: 0.4s; }
.hero__copy .hero__badges { animation-delay: 0.5s; }

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.photo-frame {
  animation: fadeInScale 0.7s cubic-bezier(0.25, 0.8, 0.25, 1) forwards;
}

.photo-frame:nth-child(1) { animation-delay: 0.3s; }
.photo-frame--2 { animation-delay: 0.5s; }
.photo-frame--3 { animation-delay: 0.7s; }

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.8) rotate(0deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(var(--rotate, 0deg));
  }
}

/* ──────────────────────────────────────────────────────────────────────────
   STEP CARDS - Animaciones para tarjetas de pasos
   ────────────────────────────────────────────────────────────────────────── */

.step-card {
  transition: all 0.3s ease;
}

.step-card:hover {
  transform: translateY(-2px);
}

.step-number {
  transition: transform 0.3s ease;
}

.step-card:hover .step-number {
  transform: scale(1.1);
  box-shadow: 0 8px 25px rgba(180, 124, 86, 0.4);
}

/* ──────────────────────────────────────────────────────────────────────────
   PILL & FILTER ANIMATIONS - Animaciones para filtros
   ────────────────────────────────────────────────────────────────────────── */

.pill, .filter {
  transition: all 0.2s ease;
}

.filter:hover:not(.active) {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(180, 124, 86, 0.2);
}

.filter.active {
  animation: pillPop 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

@keyframes pillPop {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

/* ──────────────────────────────────────────────────────────────────────────
   SKELETON LOADING - Estados de carga
   ────────────────────────────────────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(
    90deg,
    rgba(180, 124, 86, 0.08) 0%,
    rgba(180, 124, 86, 0.15) 50%,
    rgba(180, 124, 86, 0.08) 100%
  );
  background-size: 200% 100%;
  animation: skeleton 1.5s ease-in-out infinite;
  border-radius: var(--radius-md);
}

@keyframes skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ──────────────────────────────────────────────────────────────────────────
   TOPBAR ANIMATIONS - Animación del header sticky
   ────────────────────────────────────────────────────────────────────────── */

.topbar {
  transition: all 0.3s ease;
}

.topbar.sticky-shadow {
  box-shadow: 0 10px 30px rgba(46, 40, 36, 0.08);
  background: rgba(250, 249, 246, 0.98);
}

/* ──────────────────────────────────────────────────────────────────────────
   MISC UTILITY ANIMATIONS
   ────────────────────────────────────────────────────────────────────────── */

/* Pulse animation para badges */
@keyframes pulse {
  0% { transform: scale(1); }
  50% { transform: scale(1.15); }
  100% { transform: scale(1); }
}

.cart-pulse {
  animation: pulse 300ms ease;
}

/* Spin animation para loaders */
@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.spin {
  animation: spin 1s linear infinite;
}

/* Bounce para elementos destacados */
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.bounce {
  animation: bounce 0.6s ease;
}