/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS.CSS — Reveal, Scroll, Entrance, Tilt, Spotlight
═══════════════════════════════════════════════════════════════ */

/* ══════════════════════ REVEAL STATES ══════════════════════ */

/* Initial hidden states — set before JS kicks in */
.reveal-up {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-right {
  opacity: 0;
  transform: translateX(50px);
  transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

.reveal-card {
  opacity: 0;
  transform: translateY(30px) scale(0.97);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal-float {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s var(--ease-out), transform 1s var(--ease-out);
}

.reveal-step {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

/* Visible states — added by IntersectionObserver */
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-card.visible,
.reveal-float.visible,
.reveal-step.visible {
  opacity: 1;
  transform: none;
}

/* Staggered delays for cards */
.reveal-card[data-delay="0"]   { transition-delay: 0ms; }
.reveal-card[data-delay="100"] { transition-delay: 100ms; }
.reveal-card[data-delay="200"] { transition-delay: 200ms; }
.reveal-card[data-delay="300"] { transition-delay: 300ms; }
.reveal-card[data-delay="400"] { transition-delay: 400ms; }
.reveal-card[data-delay="500"] { transition-delay: 500ms; }

/* ══════════════════════ HERO ENTRANCE ══════════════════════ */

/* Page load sequence */
@keyframes heroFadeIn {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-badge    { animation: heroFadeIn 0.8s var(--ease-out) 0.2s both; }
.hero-line-1   { animation: heroFadeIn 0.9s var(--ease-out) 0.4s both; }
.hero-line-2   { animation: heroFadeIn 0.9s var(--ease-out) 0.6s both; }
.hero-subtext  { animation: heroFadeIn 0.8s var(--ease-out) 0.8s both; }
.hero-actions  { animation: heroFadeIn 0.8s var(--ease-out) 1.0s both; }
.hero-stats    { animation: heroFadeIn 0.8s var(--ease-out) 1.2s both; }

.holo-card-1 { animation: holoFloat1 6s ease-in-out infinite, heroFadeIn 1s var(--ease-out) 1.4s both; }
.holo-card-2 { animation: holoFloat2 7s ease-in-out infinite, heroFadeIn 1s var(--ease-out) 1.6s both; }
.holo-card-3 { animation: holoFloat3 8s ease-in-out infinite, heroFadeIn 1s var(--ease-out) 1.8s both; }

/* ══════════════════════ TEXT SCRAMBLE ══════════════════════ */

.scramble-char {
  display: inline-block;
  transition: opacity 0.05s;
}

/* ══════════════════════ 3D TILT CARDS ══════════════════════ */

.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
}

.tilt-card .feature-icon-wrap,
.tilt-card h3,
.tilt-card p {
  transform: translateZ(20px);
  transition: transform var(--dur-med) var(--ease-out);
}

/* ══════════════════════ SPOTLIGHT HOVER ══════════════════════ */

.spotlight-card {
  position: relative;
  overflow: hidden;
}

.spotlight-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    300px circle at var(--spotlight-x, -100%) var(--spotlight-y, -100%),
    rgba(255,255,255,0.06),
    transparent 40%
  );
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s;
}

.spotlight-card:hover::after { opacity: 1; }

/* ══════════════════════ MAGNETIC BUTTON EFFECT ══════════════════════ */

.magnetic-btn {
  will-change: transform;
}

/* ══════════════════════ ANIMATED GRADIENT BORDER ══════════════════════ */

.grad-border {
  position: relative;
}

.grad-border::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(var(--angle, 0deg), var(--cyan), var(--purple), var(--mint), var(--cyan));
  background-size: 300% 300%;
  z-index: -1;
  opacity: 0;
  transition: opacity var(--dur-med);
  animation: borderRotate 4s linear infinite;
}

.grad-border:hover::before { opacity: 1; }

@keyframes borderRotate {
  0%   { --angle: 0deg; }
  100% { --angle: 360deg; }
}

/* ══════════════════════ PRICING CARD GLOW BORDER ══════════════════════ */

.pricing-card.popular::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(135deg, var(--cyan), var(--purple), var(--mint));
  z-index: -1;
  opacity: 0.4;
  animation: pricingBorderPulse 3s ease-in-out infinite;
}

@keyframes pricingBorderPulse {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.6; }
}

/* ══════════════════════ COUNTER ANIMATION ══════════════════════ */

.stat-num {
  display: inline-block;
  transition: transform 0.1s;
}

.stat-num.counting {
  animation: countBounce 0.1s ease-out;
}

@keyframes countBounce {
  0%   { transform: scale(1.1); }
  100% { transform: scale(1); }
}

/* ══════════════════════ SECTION TRANSITIONS ══════════════════════ */

/* Fade between sections */
section {
  position: relative;
}

section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border), transparent);
}

/* ══════════════════════ CURSOR TRAIL ══════════════════════ */

.cursor-trail {
  position: fixed;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9997;
  transform: translate(-50%, -50%);
  animation: trailFade 0.6s ease-out forwards;
}

@keyframes trailFade {
  0%   { opacity: 0.6; transform: translate(-50%, -50%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0); }
}

/* ══════════════════════ INFINITE MARQUEE ══════════════════════ */

.marquee-track {
  will-change: transform;
}

/* ══════════════════════ FORM SUCCESS STATE ══════════════════════ */

.contact-form.success {
  animation: formSuccess 0.5s var(--ease-spring);
}

@keyframes formSuccess {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.01); }
  100% { transform: scale(1); }
}

.submit-success {
  color: var(--mint);
}

/* ══════════════════════ LOADING SHIMMER ══════════════════════ */

.shimmer {
  background: linear-gradient(
    90deg,
    var(--surface) 0%,
    var(--surface-2) 50%,
    var(--surface) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 1.5s ease-in-out infinite;
}

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

/* ══════════════════════ GLOW PULSE ══════════════════════ */

.glow-pulse {
  animation: glowPulse 3s ease-in-out infinite;
}

@keyframes glowPulse {
  0%, 100% { box-shadow: 0 0 20px rgba(0,212,255,0.2); }
  50%       { box-shadow: 0 0 40px rgba(0,212,255,0.4), 0 0 80px rgba(123,47,255,0.2); }
}

/* ══════════════════════ MESH GRADIENT ANIMATION ══════════════════════ */

.mesh-gradient {
  background:
    radial-gradient(ellipse at 20% 50%, rgba(0,212,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(123,47,255,0.08) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 80%, rgba(0,255,179,0.05) 0%, transparent 50%);
  animation: meshShift 8s ease-in-out infinite;
}

@keyframes meshShift {
  0%, 100% {
    background:
      radial-gradient(ellipse at 20% 50%, rgba(0,212,255,0.08) 0%, transparent 50%),
      radial-gradient(ellipse at 80% 20%, rgba(123,47,255,0.08) 0%, transparent 50%),
      radial-gradient(ellipse at 50% 80%, rgba(0,255,179,0.05) 0%, transparent 50%);
  }
  50% {
    background:
      radial-gradient(ellipse at 80% 30%, rgba(0,212,255,0.1) 0%, transparent 50%),
      radial-gradient(ellipse at 20% 70%, rgba(123,47,255,0.1) 0%, transparent 50%),
      radial-gradient(ellipse at 60% 20%, rgba(0,255,179,0.06) 0%, transparent 50%);
  }
}

/* ══════════════════════ SVG PATH DRAW ══════════════════════ */

.draw-path {
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 2s var(--ease-out);
}

.draw-path.drawn { stroke-dashoffset: 0; }

/* ══════════════════════ DEPTH BLUR ══════════════════════ */

.depth-blur-near  { filter: blur(0px); }
.depth-blur-mid   { filter: blur(1px); opacity: 0.8; }
.depth-blur-far   { filter: blur(3px); opacity: 0.5; }

/* ══════════════════════ NOISE DISPLACEMENT ══════════════════════ */

.noise-transition {
  transition: filter 0.5s var(--ease-out);
}

.noise-transition:hover {
  filter: url(#noise-filter);
}

/* ══════════════════════ PERFORMANCE OPTIMIZATIONS ══════════════════════ */

/* GPU-accelerated layers for heavy animations */
.hero-canvas,
.particle-field,
.bg-blobs,
.mouse-orb,
.marquee-track,
.floating-cards,
.holo-card {
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }

  .marquee-track { animation: none; }
  .grain-overlay { animation: none; }
  .blob { animation: none; }
  .streak { animation: none; }
}