/* ============================================================
   Redwood Privacy — Animations & Keyframes
   ============================================================ */

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

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

@keyframes fadeInDown {
  from { opacity: 0; transform: translateY(-16px); }
  to   { opacity: 1; transform: translateY(0); }
}

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.94); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.55; }
}

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

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

@keyframes shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position: 400px 0; }
}

/* ── Utility Classes ────────────────────────────────────────── */
.animate-fadeIn {
  animation: fadeIn var(--transition-slow) ease both;
}

.animate-fadeInUp {
  animation: fadeInUp 0.7s ease both;
}

.animate-fadeInDown {
  animation: fadeInDown 0.5s ease both;
}

.animate-scaleIn {
  animation: scaleIn 0.4s ease both;
}

.animate-pulse {
  animation: pulse 2s ease-in-out infinite;
}

/* Delay utilities */
.delay-100 { animation-delay: 0.10s; }
.delay-200 { animation-delay: 0.20s; }
.delay-300 { animation-delay: 0.30s; }
.delay-400 { animation-delay: 0.40s; }
.delay-500 { animation-delay: 0.50s; }
.delay-600 { animation-delay: 0.60s; }

/* ── Ticker ─────────────────────────────────────────────────── */
.ticker-wrap {
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 10%, black 90%, transparent);
}

.ticker-track {
  display: flex;
  width: max-content;
  /* animation driven by JS rAF loop in landing.js */
}


/* ── Animated grid / dot background ────────────────────────── */
.bg-grid {
  background-image:
    linear-gradient(rgba(37, 99, 235, 0.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(37, 99, 235, 0.055) 1px, transparent 1px);
  background-size: 40px 40px;
}

/* ── Toast animations ───────────────────────────────────────── */
.toast {
  animation: slideInRight 0.3s ease both;
}

.toast.hiding {
  animation: fadeIn 0.3s ease reverse both;
}