/* ============================================
   ANIMATIONS CSS
   ============================================ */

/* ── Fade-in on scroll (used by GSAP) ── */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Stagger children ── */
.stagger-child { opacity: 0; transform: translateY(30px); }

/* ── Split text chars ── */
.char { display: inline-block; opacity: 0; }

/* ── Gradient text animation ── */
.animated-gradient {
  background: linear-gradient(
    270deg,
    #6c63ff, #00d4ff, #ff6584, #6c63ff
  );
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s ease infinite;
}
@keyframes gradientShift {
  0%   { background-position: 0%   50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0%   50%; }
}

/* ── Magnetic hover effect ── */
.magnetic { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Noise texture overlay ── */
.noise-overlay {
  position: fixed; inset: 0; z-index: 9996;
  pointer-events: none;
  opacity: 0.025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 200px 200px;
}

/* ── Page transition overlay ── */
.page-transition {
  position: fixed; inset: 0; z-index: 9990;
  background: var(--primary);
  transform: translateY(100%);
  pointer-events: none;
}

/* ── Glitch effect (optional use) ── */
@keyframes glitch {
  0%   { text-shadow: 2px 0 #00d4ff, -2px 0 #ff6584; }
  25%  { text-shadow: -2px 0 #00d4ff,  2px 0 #ff6584; }
  50%  { text-shadow: 2px 2px #6c63ff, -2px -2px #ff6584; }
  75%  { text-shadow: -2px 2px #00d4ff, 2px -2px #6c63ff; }
  100% { text-shadow: 2px 0 #00d4ff, -2px 0 #ff6584; }
}
.glitch:hover { animation: glitch 0.4s steps(2) infinite; }

/* ── Shimmer loading skeleton ── */
.shimmer {
  background: linear-gradient(
    90deg,
    rgba(255,255,255,0.04) 25%,
    rgba(255,255,255,0.09) 37%,
    rgba(255,255,255,0.04) 63%
  );
  background-size: 400px 100%;
  animation: shimmer 1.4s ease infinite;
}
@keyframes shimmer {
  from { background-position: -400px 0; }
  to   { background-position: 400px 0; }
}

/* ── Orbit decoration ── */
.orbit-ring {
  position: absolute;
  border-radius: 50%;
  border: 1px dashed rgba(108, 99, 255, 0.2);
  animation: orbitSpin 20s linear infinite;
  pointer-events: none;
}
@keyframes orbitSpin { to { transform: rotate(360deg); } }