/* ═══════════════════════════════════════════════════
   Viral Machine — Animation Framework (Emil Kowalski)
   ═══════════════════════════════════════════════════ */

/* ── Keyframes ──────────────────────────────────── */

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

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

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@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 pressPop {
  0%   { transform: scale(1); }
  40%  { transform: scale(0.94); }
  100% { transform: scale(1); }
}

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

@keyframes countPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.15); }
  100% { transform: scale(1); }
}

@keyframes dotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(0.8); }
}

@keyframes navBlurIn {
  from { background: rgba(10,10,15,0.4); backdrop-filter: blur(0px); }
  to   { background: rgba(10,10,15,0.92); backdrop-filter: blur(20px); }
}

/* ── Entrance Utility Classes ──────────────────── */

.anim-hidden {
  opacity: 0;
  transform: translateY(24px);
}

.anim-visible {
  animation: fadeInUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-visible-scale {
  animation: fadeInScale 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-visible-left {
  animation: slideInLeft 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.anim-visible-right {
  animation: slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Stagger delays */
.stagger-1  { animation-delay: 80ms;  }
.stagger-2  { animation-delay: 160ms; }
.stagger-3  { animation-delay: 240ms; }
.stagger-4  { animation-delay: 320ms; }
.stagger-5  { animation-delay: 400ms; }
.stagger-6  { animation-delay: 480ms; }
.stagger-7  { animation-delay: 560ms; }
.stagger-8  { animation-delay: 640ms; }
.stagger-9  { animation-delay: 720ms; }
.stagger-10 { animation-delay: 800ms; }
.stagger-11 { animation-delay: 880ms; }
.stagger-12 { animation-delay: 960ms; }

/* ── Button Micro-Interactions ─────────────────── */

.btn-press {
  cursor: pointer;
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1),
              box-shadow 0.2s ease;
  will-change: transform;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

.btn-press:hover {
  transform: translateY(-1px);
}

.btn-press:active {
  transform: scale(0.95);
  transition-duration: 0.06s;
}

.btn-pop {
  transition: transform 0.1s cubic-bezier(0.34, 1.56, 0.64, 1),
              background 0.15s ease;
}
.btn-pop:active {
  transform: scale(0.88);
  transition-duration: 0.05s;
}

/* ── Card Hover Effects ────────────────────────── */

.card-lift {
  transition: transform 0.25s cubic-bezier(0.16, 1, 0.3, 1),
              border-color 0.25s ease,
              box-shadow 0.25s ease;
  will-change: transform;
}

.card-lift:hover {
  transform: translateY(-3px);
  border-color: rgba(57,255,20,0.3);
  box-shadow: 0 8px 30px -12px rgba(57,255,20,0.15);
}

/* ── Nav Scroll Effect ─────────────────────────── */

.nav-scrolled {
  animation: navBlurIn 0.3s ease forwards;
}

/* ── Number Spinner Animation ──────────────────── */

.spinner-value {
  display: inline-block;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.spinner-value.pop {
  animation: countPop 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ── Queue Load Dot Animation ──────────────────── */

.dot-active {
  animation: dotPulse 2s ease-in-out infinite;
}

/* ── Modal Entrance ────────────────────────────── */

.modal-overlay {
  opacity: 0;
  transition: opacity 0.25s ease;
}

.modal-overlay.active {
  opacity: 1;
}

.modal-content {
  transform: scale(0.92) translateY(12px);
  opacity: 0;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.25s ease;
}

.modal-overlay.active .modal-content {
  transform: scale(1) translateY(0);
  opacity: 1;
}

/* ── Marquee GPU Boost ─────────────────────────── */

.marquee-track {
  will-change: transform;
}

/* ── Section Scroll Padding for Fixed Nav ──────── */

section[id] {
  scroll-margin-top: 90px;
}

/* ── Legacy Button Hover Visuals (restored from original CSS) ── */

.btn-ghost.btn-press:hover {
  border-color: var(--accent);
  color: var(--text);
}

.btn-primary.btn-press {
  transition: background .2s ease, transform .12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.btn-primary.btn-press:hover {
  opacity: 0.85;
}