/* ============================================
   SISTEMLUX — Animations
   Keyframes, scroll reveals, transiciones
   ============================================ */

/* ── Keyframes ── */
@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

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

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

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

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

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

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

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

/* ── Scroll Reveal System ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

.reveal--left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

.reveal--right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

.reveal--scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
  will-change: opacity, transform;
}

/* Revealed state (added by Intersection Observer) */
.reveal.revealed,
.reveal--left.revealed,
.reveal--right.revealed,
.reveal--scale.revealed {
  opacity: 1;
  transform: translateY(0) translateX(0) scale(1);
}

/* ── Stagger Children ── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-base), transform var(--transition-base);
}

.stagger-children.revealed > *:nth-child(1) { transition-delay: 0ms; }
.stagger-children.revealed > *:nth-child(2) { transition-delay: 100ms; }
.stagger-children.revealed > *:nth-child(3) { transition-delay: 200ms; }
.stagger-children.revealed > *:nth-child(4) { transition-delay: 300ms; }
.stagger-children.revealed > *:nth-child(5) { transition-delay: 400ms; }
.stagger-children.revealed > *:nth-child(6) { transition-delay: 500ms; }
.stagger-children.revealed > *:nth-child(7) { transition-delay: 600ms; }

.stagger-children.revealed > * {
  opacity: 1;
  transform: translateY(0);
}

/* ── Pulse (para botones CTA) ── */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(187, 152, 88, 0.4);
  }
  50% {
    box-shadow: 0 0 0 10px rgba(187, 152, 88, 0);
  }
}

/* ── Navbar Animation ── */
.navbar--scrolled {
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
}

/* ── Hover Effects & Micro-interactions ── */
.btn, .navbar__link, .service-card, .team-card, .navbar__theme-toggle {
    transition: all var(--transition-base) cubic-bezier(0.4, 0, 0.2, 1);
}

/* Brillo sutil para cards en modo oscuro */
[data-theme="dark"] .card {
    background-image: linear-gradient(
        135deg, 
        rgba(187, 152, 88, 0.05) 0%, 
        transparent 50%
    );
}

/* Efecto de foco para accesibilidad */
:focus-visible {
    outline: 2px solid var(--color-gold);
    outline-offset: 4px;
    transition: outline-offset 0.2s ease;
}

/* Animación de entrada para el logo */
.navbar__logo svg {
    animation: fadeInDown 0.8s ease-out forwards;
}

/* Transición suave para iconos */
svg {
    transition: transform var(--transition-base), color var(--transition-base);
}

.card:hover svg {
    transform: scale(1.1) rotate(5deg);
}