/* ── KEYFRAMES ─────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes pulse-dot {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(245,158,11,0.4); }
  50%       { opacity: .7; box-shadow: 0 0 0 4px rgba(245,158,11,0); }
}
@keyframes shimmer {
  0%   { background-position: -400% 0; }
  100% { background-position: 400% 0; }
}
@keyframes borderPulse {
  0%, 100% { border-color: rgba(245,158,11,0.1); }
  50%       { border-color: rgba(245,158,11,0.3); }
}
@keyframes countUp {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes loadBar {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ── HERO GLOW — Cypher style ──────────────────────────────── */
.hero-radial {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% 0%, rgba(245,158,11,0.1) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 80% 60%, rgba(234,88,12,0.07) 0%, transparent 50%);
  pointer-events: none; z-index: 0;
}

/* Subtle dot grid — Cypher */
.dot-grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(rgba(255,255,255,0.06) 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 0%, #000 20%, transparent 80%);
  z-index: 0;
}

/* ── SCROLL ANIMATIONS ─────────────────────────────────────── */
.anim {
  opacity: 0;
  transform: translateY(18px);
  transition:
    opacity .65s cubic-bezier(.16,1,.3,1),
    transform .65s cubic-bezier(.16,1,.3,1);
}
.anim.anim--left  { transform: translateX(-18px); }
.anim.anim--right { transform: translateX(18px); }
.anim.anim--scale { transform: scale(.96); }
.anim.visible     { opacity: 1; transform: none; }

/* stagger delays */
.d1 { transition-delay: .07s; }
.d2 { transition-delay: .14s; }
.d3 { transition-delay: .21s; }
.d4 { transition-delay: .28s; }
.d5 { transition-delay: .35s; }
.d6 { transition-delay: .42s; }

/* page load */
.load-1 { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .05s both; }
.load-2 { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .15s both; }
.load-3 { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .25s both; }
.load-4 { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .35s both; }
.load-5 { animation: fadeUp .6s cubic-bezier(.16,1,.3,1) .45s both; }

/* ── MARQUEE ───────────────────────────────────────────────── */
.marquee-wrap {
  overflow: hidden;
  user-select: none;
  mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 10%, #000 90%, transparent 100%);
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }
.marquee-item {
  display: flex; align-items: center; gap: 10px;
  padding: 0 28px;
  font-family: var(--body);
  font-size: 13px;
  font-weight: 400;
  color: var(--text-3);
  white-space: nowrap;
  transition: color .2s;
}
.marquee-item:hover { color: var(--text-2); }
.marquee-sep {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--text-4);
  flex-shrink: 0;
}

/* ── CARD HOVER LINE (top accent) ──────────────────────────── */
.card-accent {
  position: relative;
  overflow: hidden;
}
.card-accent::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: var(--grad);
  opacity: 0;
  transition: opacity .28s;
}
.card-accent:hover::before { opacity: 1; }