/* ============================================================
   AARTUX — ANIMATIONS (animations.css)
   Keyframes, scroll reveals, hero orb, marquee, grain, glow.
   ============================================================ */

/* ── Scroll reveal ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-d1 { transition-delay: 0.1s; }
.reveal-d2 { transition-delay: 0.2s; }
.reveal-d3 { transition-delay: 0.3s; }
.reveal-d4 { transition-delay: 0.4s; }


/* ── Hero orb ── */
.hero-orb {
  width: clamp(280px, 25vw, 440px);
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 40%, var(--c-accent) 0%, transparent 50%),
    radial-gradient(circle at 70% 60%, #00d4ff 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, var(--c-surface) 0%, var(--c-bg) 100%);
  filter: blur(1px);
  animation: orbFloat 8s ease-in-out infinite;
}

@keyframes orbFloat {
  0%, 100% { transform: translateY(0) scale(1); }
  50%      { transform: translateY(-20px) scale(1.03); }
}

/* Orbit rings */
.hero-visual::before,
.hero-visual::after {
  content: '';
  position: absolute;
  border: 1px solid var(--c-border);
  border-radius: 50%;
  animation: orbSpin 20s linear infinite;
}

.hero-visual::before { width: 120%; height: 120%; }
.hero-visual::after  { width: 150%; height: 150%; animation-duration: 30s; animation-direction: reverse; }

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


/* ── Marquee ── */
.marquee-inner {
  animation: marquee 30s linear infinite;
}

@keyframes marquee {
  to { transform: translateX(-50%); }
}


/* ── Grain overlay ── */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9999;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px;
}


/* ── Cursor glow (desktop only) ── */
.cursor-glow {
  position: fixed;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(200, 255, 0, 0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 0;
  transform: translate(-50%, -50%);
  transition: left 0.3s ease-out, top 0.3s ease-out;
}

@media (max-width: 1024px) {
  .cursor-glow { display: none; }
}