/* ═══════════════════════════════════════════════
   SPARIFY - MAIN STYLESHEET
   Complete rebuild with modular CSS architecture

   CSS Architecture:
   1. variables.css - Design tokens (colors, spacing, typography)
   2. components.css - Reusable components (buttons, cards, icons)
   3. sections.css - Section-specific layouts (hero, problem, app, etc.)
   4. style.css (this file) - Base styles + optimized background animations
   ═══════════════════════════════════════════════ */

/* ═══════════════════ RESET & BASE STYLES ═══════════════════ */

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  color: var(--color-ink);
  background: var(--color-base);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* ═══════════════════ GLOBAL BACKGROUND ANIMATIONS ═══════════════════ */
/* OPTIMIZED: Using will-change, reduced blur, and requestAnimationFrame in JS */
/* Updated to use new color variables from variables.css */

/* SVG Animations */
@keyframes float {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-10px);
  }

  100% {
    transform: translateY(0);
  }
}

@keyframes pulse-soft {
  0% {
    opacity: 0.6;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 0.6;
  }
}

.hero-image,
.box-product-image,
.feature-visual svg,
.feature-visual img {
  animation: float 6s ease-in-out infinite;
}

.sensor-indicator {
  animation: pulse-soft 2s ease-in-out infinite;
}

/* Base moving gradient layer with teal and orange */
body::before {
  content: "";
  position: fixed;
  inset: -25%;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(1000px 650px at calc(20% + var(--mx) * 8%) calc(10% + var(--my) * 6%),
      var(--color-primary-glow), transparent 58%),
    radial-gradient(900px 560px at calc(85% - var(--mx) * 7%) calc(16% + var(--my) * 7%),
      var(--color-secondary-a-glow), transparent 56%),
    linear-gradient(180deg,
      rgba(0, 177, 183, calc(0.60 - var(--scroll) * 0.48)) 0%,
      rgba(0, 177, 183, calc(0.20 - var(--scroll) * 0.12)) 34%,
      var(--color-base) 78%);
  transform: translate3d(0, calc(var(--scroll) * 18px), 0) scale(1.02);
  filter: saturate(1.05);
  animation: globalDrift 18s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes globalDrift {
  0% {
    background-position: 0% 0%, 100% 0%, 50% 0%;
  }

  100% {
    background-position: 20% 10%, 80% 6%, 50% 100%;
  }
}

/* Light blobs layer - REDUCED BLUR for better performance */
body::after {
  content: "";
  position: fixed;
  inset: -20%;
  z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle 800px at calc(10% + var(--mx) * 12%) calc(88% - var(--my) * 10%),
      var(--color-secondary-b-glow), transparent 65%),
    radial-gradient(circle 700px at calc(92% - var(--mx) * 9%) calc(12% + var(--my) * 8%),
      var(--color-primary-glow), transparent 60%);
  filter: blur(6px);
  opacity: 0.8;
  transform: translate3d(0, calc(var(--scroll) * -14px), 0) scale(1.05);
  animation: blobFloat 20s ease-in-out infinite alternate-reverse;
  will-change: transform;
}

@keyframes blobFloat {
  0% {
    transform: translate3d(0, calc(var(--scroll) * -14px), 0) scale(1.05);
  }

  100% {
    transform: translate3d(0, calc(var(--scroll) * -18px - 14px), 0) scale(1.05);
  }
}

/* Sparkles layer with parallax - NO BLUR for maximum performance */
.bg-sparkles {
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image:
    radial-gradient(circle 2px at 15% 20%, var(--color-primary) 1px, transparent 1px),
    radial-gradient(circle 2px at 85% 30%, var(--color-secondary-a) 1px, transparent 1px),
    radial-gradient(circle 2px at 45% 70%, var(--color-secondary-b) 1px, transparent 1px),
    radial-gradient(circle 2px at 75% 85%, var(--color-primary) 1px, transparent 1px),
    radial-gradient(circle 2px at 25% 50%, var(--color-secondary-a) 1px, transparent 1px);
  background-size: 100% 100%;
  opacity: 0.15;
  animation: sparkleShift 40s linear infinite;
  /* Subtle parallax effect based on mouse position */
  transform: translate(calc(var(--mx) * -5px),
      calc(var(--my) * -5px));
  transition: transform 0.3s ease-out;
}

@keyframes sparkleShift {
  0% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 0% 0%, 0% 0%;
  }

  100% {
    background-position: 10% 20%, -10% 15%, 15% -10%, -5% -15%, 20% 10%;
  }
}

/* Dark mode adjustments for backgrounds */
:root[data-theme="dark"] body::before {
  background:
    radial-gradient(1000px 650px at calc(20% + var(--mx) * 8%) calc(10% + var(--my) * 6%),
      var(--color-primary-glow), transparent 58%),
    radial-gradient(900px 560px at calc(85% - var(--mx) * 7%) calc(16% + var(--my) * 7%),
      var(--color-secondary-a-glow), transparent 56%),
    linear-gradient(180deg,
      rgba(0, 212, 218, calc(0.40 - var(--scroll) * 0.30)) 0%,
      rgba(0, 212, 218, calc(0.15 - var(--scroll) * 0.10)) 34%,
      var(--color-paper) 78%);
}

:root[data-theme="dark"] body::after {
  background:
    radial-gradient(circle 800px at calc(10% + var(--mx) * 12%) calc(88% - var(--my) * 10%),
      var(--color-secondary-b-glow), transparent 65%),
    radial-gradient(circle 700px at calc(92% - var(--mx) * 9%) calc(12% + var(--my) * 8%),
      var(--color-primary-glow), transparent 60%);
  opacity: 0.6;
}

/* ═══════════════════ UTILITY CLASSES ═══════════════════ */

/* Text alignment */
.text-center {
  text-align: center;
}

.text-left {
  text-align: left;
}

.text-right {
  text-align: right;
}

/* Visibility */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* ═══════════════════ PRINT STYLES ═══════════════════ */

@media print {

  body::before,
  body::after,
  .bg-sparkles,
  .nav,
  .mobile-menu-overlay,
  .theme-toggle,
  .footer-social {
    display: none !important;
  }

  body {
    background: white !important;
    color: black !important;
  }

  a {
    text-decoration: underline !important;
  }

  .hero,
  .problem-section,
  .solution-section,
  .app-showcase,
  .box-showcase,
  .calculator-section,
  .team-section {
    page-break-inside: avoid;
  }
}

/* Sticky Mobile CTA Padding */
@media (max-width: 768px) {
  body {
    padding-bottom: 90px;
  }
}