/**
 * ====================================================================================================
 *   NIGAMA CONNECT — ANIMATIONS, GLOWING AURAS & MOTION PHYSICS
 *   File: css/animations.css
 *   Architecture: GPU-Accelerated Keyframes, Custom Magnetic Cursor & Reduced Motion Overrides
 * ====================================================================================================
 */

/* ----------------------------------------------------------------------------------------------------
 * 1. KEYFRAME ANIMATIONS & GLOWING AURAS
 * ---------------------------------------------------------------------------------------------------- */
@keyframes nc-pulse-halo {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 163, 217, 0.5);
    transform: scale(1);
  }
  50% {
    box-shadow: 0 0 24px 6px rgba(15, 163, 217, 0.25);
    transform: scale(1.02);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 163, 217, 0);
    transform: scale(1);
  }
}

@keyframes nc-pulse-fast {
  0% {
    box-shadow: 0 0 0 0 rgba(15, 163, 217, 0.7);
  }
  70% {
    box-shadow: 0 0 0 8px rgba(15, 163, 217, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(15, 163, 217, 0);
  }
}

@keyframes nc-float-slow {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes nc-spin-slow {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

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

@keyframes nc-drift-orbit {
  0% {
    transform: translate(0px, 0px) rotate(0deg);
  }
  33% {
    transform: translate(12px, -18px) rotate(2deg);
  }
  66% {
    transform: translate(-10px, 10px) rotate(-1deg);
  }
  100% {
    transform: translate(0px, 0px) rotate(0deg);
  }
}

/* Utility Animation Classes */
.nc-anim-halo {
  animation: nc-pulse-halo 3.5s infinite ease-in-out;
}

.nc-anim-float {
  animation: nc-float-slow 4s infinite ease-in-out;
}

.nc-anim-spin-slow {
  animation: nc-spin-slow 24s infinite linear;
}

.nc-anim-drift {
  animation: nc-drift-orbit 12s infinite ease-in-out;
}

/* ----------------------------------------------------------------------------------------------------
 * 2. DUAL-STAGE MAGNETIC POINTER-AWARE CURSOR
 * ---------------------------------------------------------------------------------------------------- */
#nc-cursor-ring {
  position: fixed;
  top: 0;
  left: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid var(--nc-brand-primary);
  pointer-events: none;
  z-index: 10000;
  transform: translate(-50%, -50%);
  transition: width var(--nc-dur-fast) var(--nc-ease-spring),
              height var(--nc-dur-fast) var(--nc-ease-spring),
              border-color var(--nc-dur-fast) ease,
              background-color var(--nc-dur-fast) ease,
              opacity var(--nc-dur-fast) ease;
  will-change: transform, width, height;
  opacity: 0;
}

#nc-cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--nc-brand-primary);
  pointer-events: none;
  z-index: 10001;
  transform: translate(-50%, -50%);
  transition: opacity var(--nc-dur-fast) ease, transform var(--nc-dur-instant) ease;
  will-change: transform;
  opacity: 0;
}

/* Cursor Contextual Morphing States */
body.is-cursor-active #nc-cursor-ring,
body.is-cursor-active #nc-cursor-dot {
  opacity: 1;
}

/* 1. Hovering interactive buttons or links */
#nc-cursor-ring.is-hovering {
  width: 58px;
  height: 58px;
  background-color: rgba(15, 163, 217, 0.12);
  border-color: rgba(15, 163, 217, 0.75);
  box-shadow: 0 0 16px var(--nc-brand-primary-glow);
}

/* 2. Viewing / Inspecting details */
#nc-cursor-ring.is-viewing {
  width: 68px;
  height: 68px;
  background-color: rgba(16, 185, 129, 0.14);
  border-color: var(--nc-brand-secondary);
}

/* 3. Dragging / Swiping */
#nc-cursor-ring.is-dragging {
  width: 64px;
  height: 32px;
  border-radius: var(--nc-radius-full);
  border-color: var(--nc-brand-accent);
}

/* 4. Zooming on Tree Nodes */
#nc-cursor-ring.is-zooming {
  width: 52px;
  height: 52px;
  border-color: var(--nc-brand-gold);
  border-width: 2px;
}

/* When touching or pointer is coarse, suppress cursor elements completely */
@media (pointer: coarse), (max-width: 768px) {
  #nc-cursor-ring,
  #nc-cursor-dot {
    display: none !important;
  }
}

/* ----------------------------------------------------------------------------------------------------
 * 3. ACCESSIBILITY & PREFERS-REDUCED-MOTION OVERRIDES
 * ---------------------------------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  #nc-cursor-ring,
  #nc-cursor-dot {
    display: none !important;
  }

  .nc-tilt-card {
    transform: none !important;
  }
}

/* ----------------------------------------------------------------------------------------------------
 * 4. MOBILE PERFORMANCE: Suppress expensive animations on touch/coarse-pointer devices
 *    Heavy continuous animations (float, drift, spin) consume GPU budget and cause scroll jank.
 *    On mobile we keep only opacity/transform transitions which stay on the compositor thread.
 * ---------------------------------------------------------------------------------------------------- */
@media (pointer: coarse), (max-width: 768px) {
  /* Kill continuous looping animations — these fire 60x/sec and compete with scroll */
  .nc-anim-float,
  .nc-anim-drift,
  .nc-anim-spin-slow,
  .nc-anim-halo {
    animation: none !important;
  }

  /* Suppress pulse halos on mobile — box-shadow changes trigger repaint on every frame */
  .nc-splash-circle-pulse {
    animation: none !important;
  }

  /* Suppress loader bar animation inside phone mockup — not visible below fold anyway */
  .nc-splash-loader-bar::after {
    animation: none !important;
    width: 60%;
    transform: none;
  }

  /* Disable 3D perspective transforms on phone mockup — very expensive on mobile GPU */
  .nc-phone-mockup {
    transform: none !important;
    transition: none !important;
  }

  /* Disable specular glare overlay — mix-blend-mode forces layer compositing */
  .nc-phone-glare {
    display: none !important;
  }

  /* Keep transitions short on mobile to reduce frame budget */
  .nc-phone-stage-view {
    transition: opacity 0.25s ease, visibility 0.25s ease !important;
    transform: none !important;
  }

  .nc-phone-stage-view.is-active {
    transform: none !important;
  }

  /* Disable backdrop-filter on heavy elements — most expensive CSS on mobile */
  .nc-hero-trust-pill {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}