/* ============================================
   NUTREON — Interactions CSS
   Glow cursor, proximity cards, parallax, scroll
   ============================================ */

/* ── Normal cursor stays ── */
html, body {
  cursor: auto;
}

/* ── Mouse Glow Light ── */
/* Primary soft orb that follows the mouse */
#mouse-glow {
  position: fixed;
  width: 700px;
  height: 700px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
  transform: translate(-50%, -50%);
  will-change: transform;
  background: radial-gradient(
    circle,
    rgba(37, 99, 235, 0.13) 0%,
    rgba(6, 182, 212, 0.07) 35%,
    rgba(124, 58, 237, 0.04) 60%,
    transparent 72%
  );
  transition: opacity 0.6s ease;
  mix-blend-mode: screen;
}

/* Bright inner core — tighter, more intense */
#mouse-glow-core {
  position: fixed;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  pointer-events: none;
  z-index: 3;
  transform: translate(-50%, -50%);
  will-change: transform;
  background: radial-gradient(
    circle,
    rgba(99, 179, 255, 0.18) 0%,
    rgba(37, 99, 235, 0.1) 45%,
    transparent 75%
  );
  transition: opacity 0.4s ease;
  mix-blend-mode: screen;
}

/* State: hovering over interactive element */
#mouse-glow.glow-hover {
  background: radial-gradient(
    circle,
    rgba(6, 182, 212, 0.18) 0%,
    rgba(37, 99, 235, 0.1) 35%,
    rgba(124, 58, 237, 0.05) 60%,
    transparent 72%
  );
}

#mouse-glow-core.glow-hover {
  width: 220px;
  height: 220px;
  background: radial-gradient(
    circle,
    rgba(34, 211, 238, 0.22) 0%,
    rgba(6, 182, 212, 0.12) 45%,
    transparent 75%
  );
}

/* State: clicking */
#mouse-glow.glow-click {
  background: radial-gradient(
    circle,
    rgba(124, 58, 237, 0.2) 0%,
    rgba(37, 99, 235, 0.1) 40%,
    transparent 70%
  );
}

/* Hidden when mouse leaves window */
#mouse-glow.glow-hidden,
#mouse-glow-core.glow-hidden {
  opacity: 0;
}

/* ── Card proximity glow overlay ── */
/* Each card gets this — it lights up based on cursor nearness */
.card-proximity-glow {
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  pointer-events: none;
  z-index: 3;
  opacity: 0;
  /* Updated dynamically via JS: --px, --py = cursor position relative to card */
  background: radial-gradient(
    circle at var(--px, 50%) var(--py, 50%),
    rgba(37, 99, 235, 0.22) 0%,
    rgba(6, 182, 212, 0.1) 40%,
    transparent 68%
  );
  transition: opacity 0.35s ease;
}

/* Glowing border that appears on proximity */
.card-proximity-border {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  border: 1px solid transparent;
  background: linear-gradient(var(--bg-primary), var(--bg-primary)) padding-box,
    radial-gradient(
      circle at var(--px, 50%) var(--py, -20%),
      rgba(99, 179, 255, 0.8) 0%,
      rgba(37, 99, 235, 0.5) 30%,
      rgba(124, 58, 237, 0.3) 60%,
      transparent 100%
    ) border-box;
  transition: opacity 0.35s ease;
}

/* ── Magnetic Button Wrapper ── */
.magnetic-wrap {
  display: inline-block;
  position: relative;
}

/* ── 3D Card Tilt ── */
.tilt-card {
  transform-style: preserve-3d;
  will-change: transform;
  /* Smooth reset transition */
  transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1),
              box-shadow 0.4s ease,
              border-color 0.4s ease !important;
}

.tilt-card .card-body,
.tilt-card .card-body-full {
  transform: translateZ(6px);
}

.tilt-card .card-thumbnail-placeholder,
.tilt-card .card-thumb-full {
  transform: translateZ(3px);
}

/* ── Parallax Hero Layers ── */
.parallax-layer {
  will-change: transform;
  transition: transform 0.05s linear;
}

/* ── Scroll Progress Bar ── */
#scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, #2563eb, #06b6d4, #7c3aed);
  z-index: 10001;
  width: 0%;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(6, 182, 212, 0.6);
}

/* ── Stagger Reveal ── */
.stagger-child {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagger-child.stagger-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Section Wipe Reveal ── */
.section-wipe {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.9s cubic-bezier(0.77, 0, 0.175, 1);
}

.section-wipe.wipe-visible {
  clip-path: inset(0 0 0% 0);
}

/* ── Animated Gradient Text ── */
.gradient-text-animated {
  background: linear-gradient(
    90deg,
    #3b82f6 0%,
    #06b6d4 25%,
    #7c3aed 50%,
    #3b82f6 75%,
    #06b6d4 100%
  );
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientShift 5s linear infinite;
}

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

/* ── Hero Title Mouse Reaction ── */
.hero-title {
  transition: transform 0.15s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

/* ── Magnetic Button ── */
.btn-primary, .btn-secondary, .btn-nav-cta, .btn-view-all {
  will-change: transform;
  transition:
    transform 0.4s cubic-bezier(0.23, 1, 0.32, 1),
    box-shadow 0.4s ease,
    background 0.3s ease,
    border-color 0.3s ease !important;
}

/* ── Floating Orb Extra ── */
.hero-gradient-orb {
  transition: transform 0.08s linear !important;
  will-change: transform;
}

/* ── Interactive Particle ── */
.i-particle {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  will-change: transform, opacity;
  animation: iParticleFade 1.2s ease-out forwards;
}

@keyframes iParticleFade {
  0% { opacity: 0.8; transform: scale(1) translate(0, 0); }
  100% { opacity: 0; transform: scale(0.3) translate(var(--dx), var(--dy)); }
}

/* ── Scroll-velocity blur effect ── */
body.scrolling-fast .hero-content {
  filter: blur(0.5px);
  transition: filter 0.1s;
}

body.scrolling-fast .hero-bg .hero-gradient-orb {
  filter: blur(100px);
}

/* ── Section split text ── */
.split-char {
  display: inline-block;
  opacity: 0;
  transform: translateY(40px) rotateX(-20deg);
  transition:
    opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: bottom center;
}

.split-char.char-visible {
  opacity: 1;
  transform: translateY(0) rotateX(0deg);
}

/* ── Glow pulse on badge dot ── */
.badge-dot {
  animation: badgePulse 2.5s ease-in-out infinite !important;
}

@keyframes badgePulse {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(6,182,212,0), 0 0 8px rgba(6,182,212,0.8);
  }
  50% {
    box-shadow: 0 0 0 6px rgba(6,182,212,0), 0 0 20px rgba(6,182,212,0.6);
  }
}

/* ── Hover ripple ── */
.ripple-origin {
  position: relative;
  overflow: hidden;
}

.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transform: scale(0);
  animation: rippleAnim 0.6s linear forwards;
  pointer-events: none;
}

@keyframes rippleAnim {
  to { transform: scale(4); opacity: 0; }
}

/* ── Scroll-triggered counter ── */
.stat-number.counting {
  animation: countPulse 0.1s ease;
}

@keyframes countPulse {
  0% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* ── Interactive footer / about card ── */
.tech-item, .tech-pill, .value-card {
  transition:
    transform 0.3s cubic-bezier(0.4, 0, 0.2, 1),
    background 0.3s ease,
    border-color 0.3s ease,
    box-shadow 0.3s ease !important;
}

.tech-item:hover {
  transform: translateY(-4px) scale(1.04) !important;
  box-shadow: 0 8px 24px rgba(37, 99, 235, 0.2);
}

/* ── Nav glow on scroll ── */
.navbar.scrolled {
  box-shadow: 0 4px 40px rgba(0,0,0,0.4), 0 0 1px rgba(37,99,235,0.2) !important;
}

/* ── Section entrance: slide from sides ── */
.slide-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

.slide-left.slide-visible,
.slide-right.slide-visible {
  opacity: 1;
  transform: translateX(0);
}

/* ── Platform section header glow ── */
.platform-section:hover .section-bg-glow {
  opacity: 1.4;
  transition: opacity 1s ease;
}

/* ── Scroll snap feel ── */
.platform-section {
  scroll-margin-top: var(--nav-height);
}

/* ── Number counter animation ── */
@keyframes numberFlip {
  0% { transform: translateY(8px); opacity: 0; }
  100% { transform: translateY(0); opacity: 1; }
}

/* ── Hide glow on mobile ── */
@media (max-width: 768px) {
  #mouse-glow, #mouse-glow-core { display: none !important; }
}