/* ══════════════════════════════════════════════════════════════
   ONE INSIDER v1 — Animations
   animations.css — keyframes, utility classes, skeleton, spinner
══════════════════════════════════════════════════════════════ */

/* ── KEYFRAMES ────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes slideRight {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes slideLeft {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.45; transform: scale(0.82); }
}
@keyframes livePulse {
  0%   { box-shadow: 0 0 0 0 rgba(82,183,136,0.5); }
  70%  { box-shadow: 0 0 0 8px rgba(82,183,136,0); }
  100% { box-shadow: 0 0 0 0 rgba(82,183,136,0); }
}
@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
@keyframes toastIn {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes toastOut {
  from { opacity: 1; transform: translateX(0); }
  to   { opacity: 0; transform: translateX(20px); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}
@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(245,200,66,0.12); }
  50%       { box-shadow: 0 0 40px rgba(245,200,66,0.28); }
}
@keyframes glowPulseRed {
  0%, 100% { box-shadow: 0 0 6px rgba(245,84,66,0.3); }
  50%       { box-shadow: 0 0 18px rgba(245,84,66,0.7); }
}
@keyframes borderGlow {
  0%, 100% { border-color: var(--border); }
  50%       { border-color: rgba(245,200,66,0.3); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes dotBounce {
  0%, 80%, 100% { transform: translateY(0); }
  40%            { transform: translateY(-6px); }
}
@keyframes scanline {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(100vh); }
}
@keyframes counterUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── UTILITY CLASSES ─────────────────────────────────────────── */
.anim-fade-up    { animation: fadeUp    0.5s cubic-bezier(0.23,1,0.32,1) forwards; }
.anim-fade-in    { animation: fadeIn    0.4s ease forwards; }
.anim-fade-down  { animation: fadeDown  0.4s ease forwards; }
.anim-slide-r    { animation: slideRight 0.4s ease forwards; }
.anim-slide-l    { animation: slideLeft  0.4s ease forwards; }
.anim-scale-in   { animation: scaleIn   0.35s cubic-bezier(0.23,1,0.32,1) forwards; }
.anim-float      { animation: float 3.5s ease-in-out infinite; }
.anim-glow       { animation: glowPulse 2.5s ease-in-out infinite; }
.anim-glow-red   { animation: glowPulseRed 2s ease-in-out infinite; }
.anim-pulse      { animation: pulse 1.8s ease-in-out infinite; }

/* Stagger children */
.stagger > *:nth-child(1) { animation-delay: 0.04s; }
.stagger > *:nth-child(2) { animation-delay: 0.10s; }
.stagger > *:nth-child(3) { animation-delay: 0.16s; }
.stagger > *:nth-child(4) { animation-delay: 0.22s; }
.stagger > *:nth-child(5) { animation-delay: 0.28s; }
.stagger > *:nth-child(6) { animation-delay: 0.34s; }
.stagger > *:nth-child(7) { animation-delay: 0.40s; }
.stagger > *:nth-child(8) { animation-delay: 0.46s; }

/* Observer reveal */
.reveal {
  opacity: 0; transform: translateY(20px);
  transition: opacity 0.55s cubic-bezier(0.23,1,0.32,1),
              transform 0.55s cubic-bezier(0.23,1,0.32,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Stagger reveal for grid children */
.reveal-stagger > * {
  opacity: 0; transform: translateY(18px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.reveal-stagger.visible > *:nth-child(1) { opacity:1; transform:none; transition-delay:0.05s; }
.reveal-stagger.visible > *:nth-child(2) { opacity:1; transform:none; transition-delay:0.10s; }
.reveal-stagger.visible > *:nth-child(3) { opacity:1; transform:none; transition-delay:0.15s; }
.reveal-stagger.visible > *:nth-child(4) { opacity:1; transform:none; transition-delay:0.20s; }
.reveal-stagger.visible > *:nth-child(5) { opacity:1; transform:none; transition-delay:0.25s; }
.reveal-stagger.visible > *:nth-child(6) { opacity:1; transform:none; transition-delay:0.30s; }
.reveal-stagger.visible > *:nth-child(7) { opacity:1; transform:none; transition-delay:0.35s; }
.reveal-stagger.visible > *:nth-child(8) { opacity:1; transform:none; transition-delay:0.40s; }
.reveal-stagger.visible > *:nth-child(n+9){ opacity:1; transform:none; transition-delay:0.45s; }

/* ── SKELETON LOADER ─────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--surface) 25%,
    var(--surface-2) 50%,
    var(--surface) 75%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease-in-out infinite;
  border-radius: var(--r2);
}

/* ── SPINNER ─────────────────────────────────────────────────── */
.spinner {
  width: 20px; height: 20px;
  border: 2px solid var(--border-2);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}
.spinner--sm { width: 14px; height: 14px; }
.spinner--lg { width: 28px; height: 28px; border-width: 3px; }

/* ── LOADING DOTS ────────────────────────────────────────────── */
.loading-dots { display: inline-flex; gap: 4px; align-items: center; }
.loading-dots span {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--text-3); animation: dotBounce 1.2s infinite;
}
.loading-dots span:nth-child(2) { animation-delay: 0.15s; }
.loading-dots span:nth-child(3) { animation-delay: 0.30s; }

/* ── HERO GRID ───────────────────────────────────────────────── */
.hero-grid {
  position: absolute; inset: 0; z-index: 0; overflow: hidden;
  background-image:
    linear-gradient(var(--border) 1px, transparent 1px),
    linear-gradient(90deg, var(--border) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 0%, black 0%, transparent 80%);
}

/* ── ACCENT LINE ─────────────────────────────────────────────── */
.accent-line {
  width: 32px; height: 2px; background: var(--accent);
  border-radius: 99px; margin-bottom: var(--s4);
  box-shadow: 0 0 10px rgba(245,200,66,0.5);
}

/* ── PAGE TRANSITION ─────────────────────────────────────────── */
.page-enter { animation: fadeUp 0.4s ease forwards; }