/* ══════════════════════════════════════════════
   ANIMATIONS — Baltic Flooring
   ══════════════════════════════════════════════ */

/* ── Scroll reveal base states ── */
.reveal-fade {
  opacity: 0;
  transition: opacity 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.75s var(--ease-out), transform 0.75s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}

/* ── Triggered states ── */
.reveal-fade.is-visible {
  opacity: 1;
}

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

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

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

/* ── Hero scroll line keyframe ── */
@keyframes scrollLine {
  0%   { transform: scaleY(0); transform-origin: top; opacity: 1; }
  50%  { transform: scaleY(1); transform-origin: top; opacity: 1; }
  51%  { transform: scaleY(1); transform-origin: bottom; opacity: 1; }
  100% { transform: scaleY(0); transform-origin: bottom; opacity: 0.3; }
}

/* ── Particle float keyframes ── */
@keyframes particleFloat {
  0%   { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; }
  33%  { transform: translateY(-20px) translateX(8px) scale(1.05); opacity: 0.9; }
  66%  { transform: translateY(-12px) translateX(-6px) scale(0.95); opacity: 0.6; }
  100% { transform: translateY(0) translateX(0) scale(1); opacity: 0.7; }
}

@keyframes particleDrift {
  0%   { transform: translateY(100vh) rotate(0deg); opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.4; }
  100% { transform: translateY(-10vh) rotate(360deg); opacity: 0; }
}

/* ── Counter tick animation ── */
@keyframes counterPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.08); }
  100% { transform: scale(1); }
}

.stat-number.animating {
  animation: counterPop 0.2s ease;
}

/* ── Shimmer for accent elements ── */
@keyframes shimmerAccent {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

/* ── Hero title reveal ── */
@keyframes heroTitleIn {
  from {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-title-line1 {
  animation: heroTitleIn 0.8s var(--ease-out) 0.2s both;
}

.hero-title-line2 {
  animation: heroTitleIn 0.8s var(--ease-out) 0.4s both;
}

.hero-eyebrow {
  animation: heroTitleIn 0.7s var(--ease-out) 0.05s both;
}

.hero-sub {
  animation: heroTitleIn 0.7s var(--ease-out) 0.65s both;
}

.hero-ctas {
  animation: heroTitleIn 0.7s var(--ease-out) 0.85s both;
}

/* ── Scroll hint pulse ── */
@keyframes scrollHintPulse {
  0%, 100% { opacity: 0.5; }
  50%       { opacity: 1; }
}

.hero-scroll-hint {
  animation: scrollHintPulse 2.5s ease-in-out infinite;
}

/* ── Gallery transition (handled by JS + CSS) ── */
.gallery-track {
  will-change: transform;
}

/* ── Tab content fade ── */
@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ── Glow pulse on stat numbers ── */
@keyframes glowPulse {
  0%, 100% { text-shadow: 0 0 14px rgba(200, 168, 75, 0.35); }
  50%       { text-shadow: 0 0 28px rgba(200, 168, 75, 0.65); }
}

.stat-number {
  animation: glowPulse 3s ease-in-out infinite;
}

/* ── Testimonial card hover lift (already in layout, but define keyframe) ── */
@keyframes cardLiftIn {
  from { opacity: 0; transform: translateY(24px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Why item icon pulse ── */
.why-icon {
  transition: box-shadow var(--duration-normal), transform var(--duration-normal) var(--ease-out);
}

.why-item:hover .why-icon {
  transform: scale(1.1);
  box-shadow: var(--glow-accent-sm);
}

/* ── Accent border pulse on focused inputs ── */
@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.08); }
  50%       { box-shadow: 0 0 0 3px rgba(200, 168, 75, 0.20); }
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  animation: borderGlow 2s ease-in-out infinite;
}