/* ============================================================
   animations.css — Keyframes y transiciones de DANREINA (nivel superior)
   ============================================================ */

/* ═══════════════════════════════════════════════════════════
   LOADER
═══════════════════════════════════════════════════════════ */
@keyframes loaderProgress {
  0%   { width: 0%; }
  20%  { width: 30%; }
  50%  { width: 62%; }
  80%  { width: 88%; }
  100% { width: 100%; }
}

@keyframes loaderLogoIn {
  from { opacity: 0; transform: translateY(20px) scale(0.9); letter-spacing: 0.4em; }
  to   { opacity: 1; transform: translateY(0)   scale(1);   letter-spacing: 0.12em; }
}

@keyframes loaderFadeOut {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes loaderCounterUp {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   HERO SCROLL INDICATOR
═══════════════════════════════════════════════════════════ */
@keyframes chevronPulse {
  0%, 100% { opacity: 0.4; transform: rotate(45deg) translateY(0);  }
  50%       { opacity: 0.9; transform: rotate(45deg) translateY(6px); }
}

/* ═══════════════════════════════════════════════════════════
   FADE-IN UTILITARIOS
═══════════════════════════════════════════════════════════ */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(32px); }
  to   { opacity: 1; transform: translateY(0);    }
}

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-32px); }
  to   { opacity: 1; transform: translateY(0);     }
}

@keyframes fadeInLeft {
  from { opacity: 0; transform: translateX(-32px); }
  to   { opacity: 1; transform: translateX(0);     }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.78); }
  to   { opacity: 1; transform: scale(1);    }
}

@keyframes rotateIn {
  from { opacity: 0; transform: rotate(-10deg) scale(0.9); }
  to   { opacity: 1; transform: rotate(0)      scale(1);   }
}

/* ═══════════════════════════════════════════════════════════
   AURORA — fondo animado para secciones oscuras
═══════════════════════════════════════════════════════════ */
@keyframes aurora {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

@keyframes auroraFloat {
  0%   { transform: translateX(0)   translateY(0)   scale(1);    opacity: 0.4; }
  33%  { transform: translateX(5%)  translateY(-3%) scale(1.04); opacity: 0.5; }
  66%  { transform: translateX(-4%) translateY(4%)  scale(0.97); opacity: 0.35; }
  100% { transform: translateX(0)   translateY(0)   scale(1);    opacity: 0.4; }
}

/* ═══════════════════════════════════════════════════════════
   GRADIENT TEXT — texto con gradiente animado
═══════════════════════════════════════════════════════════ */
@keyframes gradientText {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

.gradient-text {
  background: linear-gradient(90deg, #06b6d4, #a855f7, #22d3ee, #06b6d4);
  background-size: 300% 300%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientText 4s ease infinite;
}

/* ═══════════════════════════════════════════════════════════
   SHINE SWEEP — brillo que cruza las tarjetas
═══════════════════════════════════════════════════════════ */
@keyframes cardShine {
  0%   { transform: translateX(-100%) skewX(-12deg); }
  100% { transform: translateX(250%)  skewX(-12deg); }
}

.card-shine {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  overflow: hidden;
  border-radius: inherit;
}

.card-shine::after {
  content: '';
  position: absolute;
  top: 0;
  left: -80%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255,255,255,0.12) 50%,
    transparent 80%
  );
  transition: none;
  opacity: 0;
}

.product-card:hover .card-shine::after {
  opacity: 1;
  animation: cardShine 0.7s ease forwards;
}

/* ═══════════════════════════════════════════════════════════
   GRAIN / RUIDO DE PELÍCULA
═══════════════════════════════════════════════════════════ */
@keyframes grainMove {
  0%   { transform: translate(0, 0);       }
  20%  { transform: translate(-2%, -3%);   }
  40%  { transform: translate(3%, 2%);     }
  60%  { transform: translate(-1%, 4%);    }
  80%  { transform: translate(2%, -1%);    }
  100% { transform: translate(0, 0);       }
}

#grain-overlay {
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  pointer-events: none;
  z-index: 9998;
  opacity: 0.028;
  mix-blend-mode: overlay;
  animation: grainMove 0.18s steps(1) infinite;
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════
   FLOAT BOB — flotación suave
═══════════════════════════════════════════════════════════ */
@keyframes floatBob {
  0%, 100% { transform: translateY(0px);   }
  50%       { transform: translateY(-10px); }
}

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

/* ═══════════════════════════════════════════════════════════
   SCROLL PROGRESS BAR
═══════════════════════════════════════════════════════════ */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  width: 0%;
  background: linear-gradient(90deg, #06b6d4, #a855f7, #22d3ee);
  z-index: 99999;
  transition: width 0.1s linear;
  box-shadow: 0 0 10px rgba(6, 182, 212, 0.6);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT — VUELO AL CARRITO (multi-partícula)
═══════════════════════════════════════════════════════════ */
@keyframes flyToCart {
  0%   { transform: translate(0,0)                                scale(1);   opacity: 1; }
  70%  { transform: translate(var(--fly-x), var(--fly-y))         scale(0.3); opacity: 0.8; }
  100% { transform: translate(var(--fly-x), var(--fly-y)) scale(0); opacity: 0; }
}

/* ═══════════════════════════════════════════════════════════
   CARRITO BOUNCE
═══════════════════════════════════════════════════════════ */
@keyframes cartBounce {
  0%   { transform: scale(1);    }
  25%  { transform: scale(1.38); }
  60%  { transform: scale(0.88); }
  80%  { transform: scale(1.08); }
  100% { transform: scale(1);    }
}

/* ═══════════════════════════════════════════════════════════
   BADGE PULSE
═══════════════════════════════════════════════════════════ */
@keyframes badgePulse {
  0%, 100% { transform: scale(1);    }
  50%       { transform: scale(1.28); }
}

/* ═══════════════════════════════════════════════════════════
   BOTÓN CONFIRMACIÓN
═══════════════════════════════════════════════════════════ */
@keyframes btnConfirm {
  0%   { background: var(--color-accent); }
  35%  { background: #16a34a; transform: scale(0.96); }
  65%  { transform: scale(1.03); }
  100% { background: var(--color-accent); transform: scale(1); }
}

/* ═══════════════════════════════════════════════════════════
   RIPPLE — para botones
═══════════════════════════════════════════════════════════ */
@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

.ripple-effect {
  position: absolute;
  border-radius: 50%;
  width: 8px;
  height: 8px;
  background: rgba(255,255,255,0.35);
  transform: scale(0);
  animation: rippleExpand 0.55s linear;
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   DRAWER SLIDE
═══════════════════════════════════════════════════════════ */
@keyframes drawerSlideIn  { from { transform: translateX(100%); } to { transform: translateX(0); } }
@keyframes drawerSlideOut { from { transform: translateX(0); }    to { transform: translateX(100%); } }

/* ═══════════════════════════════════════════════════════════
   MODAL
═══════════════════════════════════════════════════════════ */
@keyframes modalAppear {
  from { opacity: 0; transform: scale(0.90) translateY(24px); }
  to   { opacity: 1; transform: scale(1)    translateY(0);    }
}

/* ═══════════════════════════════════════════════════════════
   ITEM CARRITO ELIMINAR
═══════════════════════════════════════════════════════════ */
@keyframes itemRemove {
  from { opacity: 1; transform: translateX(0)   scaleY(1);   max-height: 120px; }
  to   { opacity: 0; transform: translateX(64px) scaleY(0.4); max-height: 0;     padding: 0; }
}

/* ═══════════════════════════════════════════════════════════
   CART ITEM ENTRADA
═══════════════════════════════════════════════════════════ */
@keyframes cartItemEnter {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0);    }
}

/* ═══════════════════════════════════════════════════════════
   STOCK BLINK
═══════════════════════════════════════════════════════════ */
@keyframes stockBlink {
  0%, 100% { opacity: 1;   }
  50%       { opacity: 0.5; }
}

/* ═══════════════════════════════════════════════════════════
   GLOW PULSE ACCENT
═══════════════════════════════════════════════════════════ */
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 16px rgba(6, 182, 212, 0.3); }
  50%       { box-shadow: 0 0 40px rgba(6, 182, 212, 0.7); }
}

@keyframes glowPulseRing {
  0%   { box-shadow: 0 0 0 0   rgba(6, 182, 212, 0.5); }
  70%  { box-shadow: 0 0 0 12px rgba(6, 182, 212, 0);   }
  100% { box-shadow: 0 0 0 0   rgba(6, 182, 212, 0);   }
}

/* ═══════════════════════════════════════════════════════════
   BORDER GRADIENT animado
═══════════════════════════════════════════════════════════ */
@keyframes borderGradientSpin {
  to { --bg-angle: 360deg; }
}

/* ═══════════════════════════════════════════════════════════
   REVEAL CLIP — entrada dramática con clip-path
═══════════════════════════════════════════════════════════ */
@keyframes revealFromBottom {
  from { clip-path: inset(100% 0 0 0); opacity: 0; }
  to   { clip-path: inset(0% 0 0 0);   opacity: 1; }
}

@keyframes revealFromLeft {
  from { clip-path: inset(0 100% 0 0); opacity: 0; }
  to   { clip-path: inset(0 0% 0 0);   opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════
   SPIN LENTO
═══════════════════════════════════════════════════════════ */
@keyframes spinSlow {
  from { transform: rotate(0deg);   }
  to   { transform: rotate(360deg); }
}

/* ═══════════════════════════════════════════════════════════
   SHIMMER skeleton
═══════════════════════════════════════════════════════════ */
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 0%,
    rgba(255,255,255,0.10) 50%,
    rgba(255,255,255,0.04) 100%
  );
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite;
}

/* ═══════════════════════════════════════════════════════════
   TOAST
═══════════════════════════════════════════════════════════ */
@keyframes toastIn {
  from { opacity: 0; transform: translateY(20px) scale(0.88); }
  to   { opacity: 1; transform: translateY(0)    scale(1);    }
}

@keyframes toastOut {
  from { opacity: 1; transform: translateY(0)     scale(1);    }
  to   { opacity: 0; transform: translateY(-12px) scale(0.94); }
}

.toast {
  animation: toastIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

.toast.removing {
  animation: toastOut 0.3s ease forwards;
}

/* ═══════════════════════════════════════════════════════════
   MAGNETIC HOVER
═══════════════════════════════════════════════════════════ */
.magnetic-hover {
  transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

/* ═══════════════════════════════════════════════════════════
   PRODUCT CARD HOVER (enhanced)
═══════════════════════════════════════════════════════════ */
.product-card {
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base);
  transform-style: preserve-3d;
  will-change: transform;
}

.product-img-wrapper img,
.product-img-wrapper svg {
  transition: transform var(--transition-slow);
}

.product-card:hover .product-img-wrapper img,
.product-card:hover .product-img-wrapper svg {
  transform: scale(1.08);
}

/* ═══════════════════════════════════════════════════════════
   FILTROS — transición
═══════════════════════════════════════════════════════════ */
.products-grid .product-card {
  transition:
    box-shadow var(--transition-base),
    border-color var(--transition-base),
    opacity 0.3s ease,
    filter 0.3s ease;
}

.products-grid .product-card.filtered-out {
  opacity: 0;
  filter: blur(4px);
  pointer-events: none;
}

/* ═══════════════════════════════════════════════════════════
   CLASES UTILITARIAS
═══════════════════════════════════════════════════════════ */
.animate-fadeInUp    { animation: fadeInUp 0.6s cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-scaleIn     { animation: scaleIn  0.5s cubic-bezier(0.4, 0, 0.2, 1) both; }
.animate-glow        { animation: glowPulse 2.5s ease-in-out infinite; }
.animate-float       { animation: floatBob 3.5s ease-in-out infinite; }
.animate-float-slow  { animation: floatBobSlow 5s ease-in-out infinite; }


/* ═══════════════════════════════════════════════════════════
   VIDEO SECTION
═══════════════════════════════════════════════════════════ */
.video-section {
  width: 100%;
  background: #000;
  line-height: 0;
}
.video-section video {
  width: 100%;
  height: auto;
  display: block;
}
.video-section .video-mobile { display: none; }
@media (max-width: 767px) {
  .video-section .video-desktop { display: none; }
  .video-section .video-mobile  { display: block; }
}