/* =======================================================
   SAYONARA V2 — ANIMATIONS
   Keyframes, scroll-reveal, micro-interactions.
   ======================================================= */

/* ── SCROLL REVEAL ───────────────────────────────────── */
/* JS adds .reveal class to elements that should animate in.
   IntersectionObserver then adds .is-visible when they enter viewport. */

.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition:
    opacity   var(--duration-slower) var(--ease-out),
    transform var(--duration-slower) var(--ease-out);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Staggered children — each .reveal child gets a delay */
.reveal-stagger > *:nth-child(1)  { transition-delay: 0ms;   }
.reveal-stagger > *:nth-child(2)  { transition-delay: 80ms;  }
.reveal-stagger > *:nth-child(3)  { transition-delay: 160ms; }
.reveal-stagger > *:nth-child(4)  { transition-delay: 240ms; }
.reveal-stagger > *:nth-child(5)  { transition-delay: 320ms; }
.reveal-stagger > *:nth-child(6)  { transition-delay: 400ms; }
.reveal-stagger > *:nth-child(n+7){ transition-delay: 480ms; }

/* Fade only (no translate) */
.reveal-fade {
  opacity: 0;
  transition: opacity var(--duration-slower) var(--ease-out);
}
.reveal-fade.is-visible { opacity: 1; }

/* Slide from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}
.reveal-left.is-visible { opacity: 1; transform: translateX(0); }

/* Slide from right */
.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity var(--duration-slower) var(--ease-out), transform var(--duration-slower) var(--ease-out);
}
.reveal-right.is-visible { opacity: 1; transform: translateX(0); }

/* ── HERO SECTION ANIMATIONS ─────────────────────────── */

@keyframes hero-text-in {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-eyebrow-anim {
  animation: hero-text-in 0.7s var(--ease-out) 0.2s both;
}
.hero-title-anim {
  animation: hero-text-in 0.8s var(--ease-out) 0.4s both;
}
.hero-subtitle-anim {
  animation: hero-text-in 0.7s var(--ease-out) 0.6s both;
}
.hero-cta-anim {
  animation: hero-text-in 0.7s var(--ease-out) 0.8s both;
}

/* ── SPLASH SCREEN ───────────────────────────────────── */

@keyframes splash-logo-in {
  0%   { opacity: 0; transform: scale(0.5) rotate(-5deg); }
  70%  { opacity: 1; transform: scale(1.08) rotate(0deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}

@keyframes splash-text-in {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes splash-fade-out {
  from { opacity: 1; }
  to   { opacity: 0; pointer-events: none; }
}

@keyframes floating-particle {
  0%   { opacity: 0; transform: translate(0, 0) scale(0.8); }
  25%  { opacity: 0.6; }
  75%  { opacity: 0.4; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1.2); }
}

/* ── HERO SLIDER ─────────────────────────────────────── */

@keyframes ken-burns {
  0%   { transform: scale(1.05); }
  100% { transform: scale(1); }
}

.slide-enter { animation: ken-burns 8s var(--ease-out) forwards; }

/* ── HEADER ──────────────────────────────────────────── */

@keyframes header-slide-down {
  from { transform: translateY(-100%); opacity: 0; }
  to   { transform: translateY(0);     opacity: 1; }
}

/* ── CONTENT PANEL (In-page expanded view) ───────────── */

@keyframes panel-slide-up {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}

@keyframes panel-slide-down {
  from { transform: translateY(0); }
  to   { transform: translateY(100%); }
}

.content-panel-overlay {
  transition: transform 0.5s var(--ease-inout);
}

/* ── MOBILE NAV ──────────────────────────────────────── */

@keyframes mobile-nav-in {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes mobile-nav-item-in {
  from { opacity: 0; transform: translateX(-20px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── ARTICLE DETAIL ──────────────────────────────────── */

@keyframes article-slide-in {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* ── CHECKMARK ANIMATION (contact form success) ──────── */

@keyframes checkmark-draw {
  from { stroke-dashoffset: 100; }
  to   { stroke-dashoffset: 0; }
}

@keyframes checkmark-circle {
  from { transform: scale(0); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.success-checkmark {
  animation: checkmark-circle 0.5s var(--ease-spring) forwards;
}
.success-checkmark .checkmark-path {
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: checkmark-draw 0.5s var(--ease-out) 0.3s forwards;
}

/* ── GENERAL KEYFRAMES ───────────────────────────────── */

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

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

@keyframes scale-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* ── TESTIMONIALS AUTO-SCROLL ────────────────────────── */

@keyframes scroll-testimonials {
  0%   { transform: translateX(0); }
  100% { transform: translateX(calc(-380px * var(--item-count, 6))); }
}

.testimonial-track {
  animation: scroll-testimonials 60s linear infinite;
}
.testimonial-track:hover {
  animation-play-state: paused;
}

/* ── LOGO STRIP ──────────────────────────────────────── */

@keyframes scroll-logos {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── PARTNER / LOGO HOVER ────────────────────────────── */

.partner-logo {
  filter: grayscale(100%) opacity(0.5);
  transition: filter var(--duration-slow) var(--ease-out), transform var(--duration-slow) var(--ease-out);
}
.partner-logo:hover { filter: grayscale(0%) opacity(1); transform: scale(1.05); }

/* On dark backgrounds, logos are white */
.dark-wrapper .partner-logo {
  filter: brightness(0) invert(1) opacity(0.5);
}
.dark-wrapper .partner-logo:hover {
  filter: brightness(0) invert(1) opacity(1);
  transform: scale(1.05);
}

/* ── REDUCE MOTION ───────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-fade,
  .reveal-left,
  .reveal-right {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .testimonial-track { animation: none; }
  .slide-enter { animation: none; }
}