/* =========================================================
   ANIMATIONS — LuxurCars.ch
   Scroll-reveal, ken-burns, ticker, transitions
   ========================================================= */

/* ── Ken Burns ───────────────────────────────────────────── */
@keyframes kenBurns {
  0%   { transform: scale(1) translate(0, 0); }
  50%  { transform: scale(1.06) translate(-1%, -0.5%); }
  100% { transform: scale(1) translate(0, 0); }
}

/* ── Brand ticker ────────────────────────────────────────── */
@keyframes tickerScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

.ticker-track {
  display:   flex;
  gap:       3.5rem;
  width:     max-content;
  animation: tickerScroll 30s linear infinite;
}

.ticker-track:hover {
  animation-play-state: paused;
}

/* ── Fade + rise (scroll reveal) ─────────────────────────── */
@keyframes fadeRise {
  from {
    opacity:   0;
    transform: translateY(24px);
  }
  to {
    opacity:   1;
    transform: translateY(0);
  }
}

.reveal {
  opacity: 0;
  transform: translateY(24px);
}

.reveal.is-visible {
  animation: fadeRise 0.7s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* Stagger delay classes */
.reveal--d1 { animation-delay: 0.1s; }
.reveal--d2 { animation-delay: 0.2s; }
.reveal--d3 { animation-delay: 0.3s; }
.reveal--d4 { animation-delay: 0.4s; }
.reveal--d5 { animation-delay: 0.5s; }
.reveal--d6 { animation-delay: 0.6s; }

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

/* ── Slide from right ─────────────────────────────────────── */
@keyframes slideRight {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}

/* ── Scale in ─────────────────────────────────────────────── */
@keyframes scaleIn {
  from { transform: scale(0.95); opacity: 0; }
  to   { transform: scale(1);    opacity: 1; }
}

/* ── Pulse accent glow ────────────────────────────────────── */
@keyframes pulseGlow {
  0%, 100% { box-shadow: 0 0 20px rgba(166, 43, 43, 0.2); }
  50%       { box-shadow: 0 0 40px rgba(166, 43, 43, 0.45); }
}

/* ── Arrow translate ──────────────────────────────────────── */
.arrow-link {
  display:      inline-flex;
  align-items:  center;
  gap:          0.5rem;
  transition:   gap var(--transition-smooth);
}

.arrow-link:hover {
  gap: 0.85rem;
}

/* ── Nav underline grow ───────────────────────────────────── */
.nav-link {
  position:   relative;
}

.nav-link::after {
  content:    '';
  position:   absolute;
  bottom:     -2px;
  left:       0;
  width:      0;
  height:     1px;
  background: var(--text-primary);
  transition: width var(--transition-smooth);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* ── WhatsApp float pulse ─────────────────────────────────── */
@keyframes floatPulse {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}

/* ── Lightbox open ────────────────────────────────────────── */
@keyframes lightboxOpen {
  from { opacity: 0; transform: scale(0.96); }
  to   { opacity: 1; transform: scale(1); }
}

/* ── Comparator slide up ──────────────────────────────────── */
@keyframes slideUp {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

/* Reduced motion overrides ─────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .ticker-track      { animation: none; }
  .reveal            { opacity: 1; transform: none; }
  .reveal.is-visible { animation: none; }
  .arrow-link:hover  { gap: 0.5rem; }
}