/* ============================================================
   animations.css — Grupo Magnet
   ============================================================ */

/* ── Reveal on scroll ── */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger dins grups */
.reveal-group .reveal:nth-child(1) { transition-delay: 0s; }
.reveal-group .reveal:nth-child(2) { transition-delay: 0.12s; }
.reveal-group .reveal:nth-child(3) { transition-delay: 0.24s; }
.reveal-group .reveal:nth-child(4) { transition-delay: 0.36s; }
.reveal-group .reveal:nth-child(5) { transition-delay: 0.48s; }
.reveal-group .reveal:nth-child(6) { transition-delay: 0.6s; }
.reveal-group .reveal:nth-child(7) { transition-delay: 0.72s; }
.reveal-group .reveal:nth-child(8) { transition-delay: 0.84s; }

/* ── Ken Burns — hero background ── */
@keyframes kenBurns {
  0%   { transform: scale(1); }
  100% { transform: scale(1.08); }
}

/* ── Hero text entrance ── */
@keyframes heroFadeUp {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.hero-animate {
  opacity: 0;
  animation: heroFadeUp 0.9s ease forwards;
}
.hero-animate:nth-child(1) { animation-delay: 0.2s; }
.hero-animate:nth-child(2) { animation-delay: 0.45s; }
.hero-animate:nth-child(3) { animation-delay: 0.65s; }
.hero-animate:nth-child(4) { animation-delay: 0.85s; }

/* ── CTA pulse ── */
@keyframes ctaPulse {
  0%,
  100% { box-shadow: 0 0 0 0 rgba(229, 230, 25, 0.4); }
  50%  { box-shadow: 0 0 0 12px rgba(229, 230, 25, 0); }
}
.btn-pulse {
  animation: ctaPulse 2.5s ease-in-out infinite;
}

/* ── Scroll arrow bounce ── */
@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(8px); }
}
.scroll-arrow {
  animation: scrollBounce 1.6s ease-in-out infinite;
}

/* ── Fade in general (no desplaçament) ── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Spin per loading ── */
@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── Slide overlay (lightbox) ── */
@keyframes lightboxIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes lightboxImageIn {
  from {
    opacity: 0;
    transform: scale(0.92);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* ── Sticky nav transition ── */
.site-nav {
  transition: background 0.35s ease, box-shadow 0.35s ease, padding 0.35s ease;
}
.site-nav.scrolled {
  background: var(--color-primary);
  box-shadow: 0 2px 20px var(--color-shadow);
  padding-top: 0.75rem;
  padding-bottom: 0.75rem;
}

/* ── Stats number counter ── */
.stat-number {
  display: inline-block;
  transition: transform 0.3s ease;
}

/* ── Card hover ── */
.service-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 40px var(--color-shadow);
}
.service-card:hover .card-accent-line {
  width: 100%;
}
.card-accent-line {
  height: 2px;
  background: var(--color-accent);
  width: 0;
  transition: width 0.4s ease;
  margin-top: 0.75rem;
}

/* ── Before/After divisor handle pulse ──
   Puls limitat: crida l'atenció en entrar i para (no competeix
   amb el CTA, l'únic element amb puls permanent de la web) */
@keyframes handlePulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(229, 230, 25, 0.5); }
  50%       { box-shadow: 0 0 0 10px rgba(229, 230, 25, 0); }
}
.ba-handle {
  animation: handlePulse 2s ease-in-out 3;
}
.ba-handle:active {
  animation: none;
}

/* ── Mobile menu overlay ── */
.mobile-menu {
  transition: opacity 0.3s ease, visibility 0.3s ease;
}
.mobile-menu.open {
  opacity: 1;
  visibility: visible;
}

/* ── Hero: un sol moviment (Ken Burns a la img) ── */
.hero-bg img {
  animation: kenBurns 22s ease-in-out alternate infinite;
  height: 100%;
  object-fit: cover;
}

/* ── Moviment reduït: la web funciona en repòs ── */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  .hero-bg img,
  .btn-pulse,
  .ba-handle,
  .scroll-arrow {
    animation: none;
  }
  .hero-animate {
    animation: none;
    opacity: 1;
  }
  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .site-nav,
  .service-card,
  .gallery-item,
  .btn {
    transition: none;
  }
}