/* =========================================================
   SP3 DIGITAL — ANIMATIONS
   ========================================================= */

/* -------------------- Scroll reveal -------------------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}
[data-reveal].is-visible { opacity: 1; transform: translateY(0); }

[data-reveal="fade"] { transform: none; }
[data-reveal-delay="1"] { transition-delay: 0.08s; }
[data-reveal-delay="2"] { transition-delay: 0.16s; }
[data-reveal-delay="3"] { transition-delay: 0.24s; }
[data-reveal-delay="4"] { transition-delay: 0.32s; }
[data-reveal-delay="5"] { transition-delay: 0.4s; }
[data-reveal-delay="6"] { transition-delay: 0.48s; }

@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* -------------------- Hero network -------------------- */
.hero-network { position: absolute; inset: 0; z-index: 0; }
.hero-network .n-line {
  stroke: rgba(37, 99, 235, 0.22);
  stroke-width: 1;
  stroke-dasharray: 6 260;
  animation: travel 7s linear infinite;
}
.hero-network .n-line:nth-child(odd) { animation-duration: 9s; stroke: rgba(20,184,166,0.22); }
.hero-network .n-node { fill: var(--primary); opacity: 0.55; animation: pulse 3.2s ease-in-out infinite; }
.hero-network .n-node.alt { fill: var(--accent); animation-duration: 4s; }

@keyframes travel {
  to { stroke-dashoffset: -520; }
}
@keyframes pulse {
  0%, 100% { opacity: 0.35; r: 3; }
  50% { opacity: 0.9; r: 4.4; }
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(70px);
  opacity: 0.5;
  animation: drift 14s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(24px, -30px) scale(1.08); }
}

/* -------------------- Floating shapes -------------------- */
.float-y { animation: floatY 5s ease-in-out infinite; }
@keyframes floatY {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-14px); }
}

/* -------------------- Hero entrance -------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to { opacity: 1; transform: translateY(0); }
}
.hero-copy > * { animation: fadeUp 0.9s var(--ease-out) both; }
.hero-copy > *:nth-child(1) { animation-delay: 0.05s; }
.hero-copy > *:nth-child(2) { animation-delay: 0.15s; }
.hero-copy > *:nth-child(3) { animation-delay: 0.25s; }
.hero-copy > *:nth-child(4) { animation-delay: 0.35s; }
.hero-copy > *:nth-child(5) { animation-delay: 0.45s; }

.hero-visual { animation: fadeUp 1.1s var(--ease-out) 0.3s both; }

@media (prefers-reduced-motion: reduce) {
  .hero-copy > *, .hero-visual, .blob, .float-y,
  .hero-network .n-line, .hero-network .n-node { animation: none !important; }
}

/* -------------------- Marquee (tech strip) -------------------- */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; gap: var(--space-2xl); width: max-content; animation: scroll-x 28s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes scroll-x { to { transform: translateX(-50%); } }

/* -------------------- Loader / progress -------------------- */
.page-progress {
  position: fixed; top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, var(--primary), var(--accent));
  z-index: 200; width: 0%;
  transition: width 0.15s linear;
}