/* ═══════════════════════════════════════════════════════
   URANUN — animations.css
   Animaciones premium: landing, hero, cards, navbar, CTA
   No sobreescribe variables ni layout existente.
   ═══════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────
   1. LANDING — Entrada escalonada de secciones
   ───────────────────────────────────────── */

/* Eyebrow: desliza desde abajo con fade */
.landing-eyebrow {
  opacity: 0;
  animation: u-fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.1s forwards;
}

/* Título principal: entrada más dramática */
.landing-title {
  opacity: 0;
  animation: u-fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.25s forwards;
}

/* Subtítulo */
.landing-subtitle {
  opacity: 0;
  animation: u-fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.4s forwards;
}

/* Botones CTA del hero landing */
.landing-cta-group {
  opacity: 0;
  animation: u-fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.55s forwards;
}

/* Stats: aparecen en cascada */
.landing-stat:nth-child(1) { opacity: 0; animation: u-fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.6s forwards; }
.landing-stat:nth-child(2) { opacity: 0; animation: u-fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.72s forwards; }
.landing-stat:nth-child(3) { opacity: 0; animation: u-fadeUp 0.6s cubic-bezier(0.22,1,0.36,1) 0.84s forwards; }

/* Feature cards: entrada con scroll (usando IntersectionObserver vía clase) */
.landing-feature-card {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-feature-card.u-visible {
  opacity: 1;
  transform: translateY(0);
}
.landing-feature-card:nth-child(2) { transition-delay: 0.1s; }
.landing-feature-card:nth-child(3) { transition-delay: 0.2s; }

/* Cat cards */
.landing-cat-card {
  opacity: 0;
  transform: translateY(24px) scale(0.97);
  transition: opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s, background 0.25s, box-shadow 0.25s;
}
.landing-cat-card.u-visible {
  opacity: 1;
  transform: translateY(0) scale(1);
}
.landing-cat-card:nth-child(2) { transition-delay: 0.08s; }
.landing-cat-card:nth-child(3) { transition-delay: 0.16s; }
.landing-cat-card:nth-child(4) { transition-delay: 0.24s; }

/* Final CTA section */
.landing-final-cta-title {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
.landing-final-cta-title.u-visible {
  opacity: 1;
  transform: translateY(0);
}
.landing-final-cta-sub {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s,
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.landing-final-cta-sub.u-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─────────────────────────────────────────
   2. LANDING NAV — efecto al hacer scroll
   ───────────────────────────────────────── */
.landing-nav {
  transition: box-shadow 0.3s ease, background 0.3s ease;
}
.landing-nav.scrolled {
  box-shadow: 0 2px 24px rgba(0,0,0,0.07);
  background: rgba(250,249,247,0.98);
}


/* ─────────────────────────────────────────
   3. LANDING HERO — parallax suave del fondo
   ───────────────────────────────────────── */
.landing-hero-slide,
.landing-hero-bg-img {
  will-change: transform;
  transition: transform 0.1s linear, opacity 1.2s cubic-bezier(0.4, 0, 0.2, 1);
}


/* ─────────────────────────────────────────
   4. NAV PRINCIPAL — shrink al scroll
   ───────────────────────────────────────── */
#navbar {
  transition: height 0.3s cubic-bezier(0.4,0,0.2,1),
              box-shadow 0.3s ease,
              background 0.3s ease;
}
#navbar.u-scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.06);
}
html.dark #navbar.u-scrolled {
  box-shadow: 0 2px 20px rgba(0,0,0,0.35);
}


/* ─────────────────────────────────────────
   5. PRODUCT CARDS — 3D tilt + float image
   ───────────────────────────────────────── */
.product-card {
  transform-style: preserve-3d;
  perspective: 600px;
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s;
  will-change: transform;
}

/* La imagen dentro de la card flota hacia el frente al hover */
@media (hover: hover) {
  .product-card:hover img {
    transform: scale(1.04) translateY(-3px);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  }
}
.product-card img {
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* Shimmer de brillo sobre la card al hover */
.product-card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,0.06) 50%,
    rgba(255,255,255,0) 100%
  );
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}
@media (hover: hover) {
  .product-card:hover::after { opacity: 1; }
}


/* ─────────────────────────────────────────
   6. BOTÓN WHATSAPP — pulso dorado
   ───────────────────────────────────────── */

/* El botón de WhatsApp en el modal tiene esta clase en cart.js */
.co-order-btn {
  position: relative;
  overflow: hidden;
}
.co-order-btn::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.12) 50%, transparent 100%);
  transform: translateX(-100%);
  animation: u-shimmerBtn 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes u-shimmerBtn {
  0%   { transform: translateX(-100%); }
  50%  { transform: translateX(100%); }
  100% { transform: translateX(100%); }
}

/* Pulso radial detrás del botón de checkout */
.co-order-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 0 0 0 rgba(17,17,17,0.25);
  animation: u-pulseCTA 2.5s ease-out infinite;
  pointer-events: none;
}
@keyframes u-pulseCTA {
  0%   { box-shadow: 0 0 0 0 rgba(17,17,17,0.2); }
  70%  { box-shadow: 0 0 0 12px rgba(17,17,17,0); }
  100% { box-shadow: 0 0 0 0 rgba(17,17,17,0); }
}


/* ─────────────────────────────────────────
   7. SECCIÓN LANDING — header de sección
   ───────────────────────────────────────── */
.landing-section-eyebrow {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.landing-section-eyebrow.u-visible {
  opacity: 1;
  transform: translateY(0);
}
.landing-section-title {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s,
              transform 0.6s cubic-bezier(0.22,1,0.36,1) 0.1s;
}
.landing-section-title.u-visible {
  opacity: 1;
  transform: translateY(0);
}


/* ─────────────────────────────────────────
   8. HERO PRINCIPAL (tienda) — title chars
   ───────────────────────────────────────── */
.hero-title {
  animation: u-fadeUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}
.hero-eyebrow {
  animation: u-fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0s both;
}
.hero-sub {
  animation: u-fadeUp 0.8s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}
.hero-cta {
  animation: u-fadeUp 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}


/* ─────────────────────────────────────────
   9. LOADER — logo con efecto de brillo
   ───────────────────────────────────────── */
.logo-load .carnation-logo {
  filter: drop-shadow(0 0 0px rgba(184,150,90,0));
  animation: carnation-pulse 1.8s ease-in-out infinite,
             u-logoGlow 3s ease-in-out infinite;
}
@keyframes u-logoGlow {
  0%, 100% { filter: drop-shadow(0 0 0px rgba(184,150,90,0)); }
  50%       { filter: drop-shadow(0 4px 16px rgba(184,150,90,0.35)); }
}


/* ─────────────────────────────────────────
   10. KEYFRAMES BASE
   ───────────────────────────────────────── */
@keyframes u-fadeUp {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes u-fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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


/* ─────────────────────────────────────────
   11. MODAL — entrada más fluida
   ───────────────────────────────────────── */
.modal-overlay.open .modal-sheet {
  transform: translateY(0);
  /* ya viene de styles.css, solo reforzamos el easing */
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}


/* ─────────────────────────────────────────
   12. FILTER BUTTONS — entrada al cargar
   ───────────────────────────────────────── */
.filter-btn {
  opacity: 0;
  animation: u-fadeIn 0.4s ease forwards;
}
/* El delay se aplica via JS con style inline si se quiere escalonar;
   aquí fallback general */
.filter-btn:nth-child(1)  { animation-delay: 0.05s; }
.filter-btn:nth-child(2)  { animation-delay: 0.10s; }
.filter-btn:nth-child(3)  { animation-delay: 0.15s; }
.filter-btn:nth-child(4)  { animation-delay: 0.20s; }
.filter-btn:nth-child(5)  { animation-delay: 0.25s; }
.filter-btn:nth-child(6)  { animation-delay: 0.30s; }
.filter-btn:nth-child(7)  { animation-delay: 0.35s; }
.filter-btn:nth-child(8)  { animation-delay: 0.40s; }


/* ─────────────────────────────────────────
   13. REDUCED MOTION — respeta preferencias
   ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .landing-eyebrow,
  .landing-title,
  .landing-subtitle,
  .landing-cta-group,
  .landing-stat,
  .landing-feature-card,
  .landing-cat-card,
  .landing-final-cta-title,
  .landing-final-cta-sub,
  .landing-section-eyebrow,
  .landing-section-title,
  .hero-title, .hero-eyebrow, .hero-sub, .hero-cta,
  .filter-btn {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
  .product-card::after { display: none; }
  .co-order-btn::before, .co-order-btn::after { display: none; }
  .logo-load .carnation-logo { animation: carnation-pulse 1.8s ease-in-out infinite; filter: none; }
}