/* ═══════════════════════════════════════════
   OmniFlow Effects
   Gradient mesh, canvas, reduced motion
   ═══════════════════════════════════════════ */

/* ── Flow field canvas (hero background) ── */
.flow-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}

/* ── Gradient mesh background ── */
.bg-mesh {
  position: relative;
}

.bg-mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

/* Problem section (#2) — 2 blobs */
.bg-mesh--problem::before {
  background:
    radial-gradient(
      ellipse 50% 40% at 30% 40%,
      var(--color-primary),
      transparent
    ),
    radial-gradient(
      ellipse 40% 50% at 70% 60%,
      var(--color-purple),
      transparent
    );
  opacity: var(--mesh-opacity);
  animation: meshDrift 20s ease-in-out infinite alternate;
}

/* Use Cases section (#6) — 1 centered blob */
.bg-mesh--usecases::before {
  background: radial-gradient(
    ellipse 60% 50% at 50% 50%,
    var(--color-primary),
    transparent
  );
  opacity: var(--mesh-opacity);
  animation: meshDrift 25s ease-in-out infinite alternate;
}

/* Security section (#9) — shield-shaped glow */
.bg-mesh--security::before {
  background: radial-gradient(
    ellipse 40% 60% at 50% 40%,
    var(--color-mint),
    transparent
  );
  opacity: var(--mesh-opacity);
  animation: meshDrift 18s ease-in-out infinite alternate;
}

/* Features section (#8) — dual blob */
.bg-mesh--features::before {
  background:
    radial-gradient(
      ellipse 50% 40% at 40% 50%,
      var(--color-primary),
      transparent
    ),
    radial-gradient(
      ellipse 40% 40% at 60% 40%,
      var(--color-purple),
      transparent
    );
  opacity: var(--mesh-opacity);
  animation: meshDrift 22s ease-in-out infinite alternate;
}

/* Traction section (#14) — mint glow */
.bg-mesh--traction::before {
  background: radial-gradient(
    ellipse 45% 50% at 50% 50%,
    var(--color-mint),
    transparent
  );
  opacity: var(--mesh-opacity);
  animation: meshDrift 20s ease-in-out infinite alternate;
}

/* CTA section (#15) — hero callback */
.bg-mesh--cta::before {
  background:
    radial-gradient(
      ellipse 50% 40% at 40% 50%,
      var(--color-primary),
      transparent
    ),
    radial-gradient(
      ellipse 40% 40% at 60% 50%,
      var(--color-purple),
      transparent
    );
  opacity: var(--mesh-opacity);
  animation: meshDrift 22s ease-in-out infinite alternate;
}

@keyframes meshDrift {
  0% {
    transform: translate(0, 0) scale(1);
  }
  100% {
    transform: translate(30px, -20px) scale(1.05);
  }
}

/* ── Rotating gradient border (CTA button) ── */
.btn--rotating-border {
  position: relative;
  z-index: 1;
  background: var(--color-bg-primary);
  color: var(--color-text-primary);
  font-weight: 600;
  padding: 0.85rem 2rem;
  border: none;
}

.btn--rotating-border::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: var(--radius-pill);
  background: conic-gradient(
    from var(--rotate-angle, 0deg),
    #1894e8,
    #9f72ff,
    #62e2a4,
    #1894e8
  );
  z-index: -1;
  animation: rotateBorder 4s linear infinite;
}

.btn--rotating-border::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-pill);
  background: var(--color-gradient);
  z-index: -1;
}

@keyframes rotateBorder {
  to {
    --rotate-angle: 360deg;
  }
}

@property --rotate-angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}

/* ── Glass morphism ── */
.glass {
  background: var(--nav-bg);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

/* ── Badge with gradient border ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
  padding: 0.45rem 1.1rem;
  border-radius: var(--radius-pill);
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-purple);
  background: var(--color-glass);
  position: relative;
}

.badge::before {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: var(--radius-pill);
  padding: 1px;
  background: linear-gradient(135deg, #1894e8, #9f72ff);
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
}

/* ── Floating background icons ── */
.floating-icons {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.floating-icon {
  position: absolute;
  opacity: 0.06;
  animation: floatIcon var(--duration, 22s) ease-in-out infinite
    var(--delay, 0s);
  will-change: transform;
}

[data-theme="light"] .floating-icon {
  opacity: 0.09;
}

@keyframes floatIcon {
  0%,
  100% {
    transform: translateY(0) rotate(0deg);
  }
  25% {
    transform: translateY(-20px) rotate(5deg);
  }
  50% {
    transform: translateY(-8px) rotate(-3deg);
  }
  75% {
    transform: translateY(-25px) rotate(4deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .floating-icon {
    animation: none;
  }
}

/* ── Isometric hero animations ── */
@keyframes floatA {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -6px;
  }
}
@keyframes floatB {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -8px;
  }
}
@keyframes floatC {
  0%,
  100% {
    translate: 0 0;
  }
  50% {
    translate: 0 -5px;
  }
}

.float-a {
  animation: floatA 3s ease-in-out infinite;
}
.float-b {
  animation: floatB 3.4s ease-in-out infinite 0.4s;
}
.float-c {
  animation: floatC 2.8s ease-in-out infinite 0.8s;
}
.float-d {
  animation: floatA 3.2s ease-in-out infinite 0.2s;
}
.float-e {
  animation: floatB 3.6s ease-in-out infinite 0.6s;
}
.float-f {
  animation: floatC 3s ease-in-out infinite 1s;
}
.float-g {
  animation: floatA 3.1s ease-in-out infinite 0.5s;
}
.float-h {
  animation: floatB 2.9s ease-in-out infinite 0.9s;
}

/* Scroll-driven tokens */
.scroll-token {
  pointer-events: none;
  will-change: transform, opacity;
}

/* Dash flow animation */
@keyframes dashFlow {
  to {
    stroke-dashoffset: -24;
  }
}
.flow-line {
  stroke-dasharray: 6 4;
  stroke-width: 1.5;
  animation: dashFlow 1.2s linear infinite;
}

/* Center glow pulse */
@keyframes glowPulse {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 0.6;
  }
}
.center-glow {
  animation: glowPulse 2.5s ease-in-out infinite;
}

/* Sphere body pulse */
@keyframes spherePulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.03);
  }
}
.sphere-pulse {
  animation: spherePulse 3s ease-in-out infinite;
  transform-origin: center;
  transform-box: fill-box;
}

/* Highlight states (toggled via JS) */
.flow-line.highlight {
  stroke-opacity: 1 !important;
  filter: url(#lineGlow);
}
.flow-line.highlight {
  animation-duration: 0.5s;
}

/* Hide on mobile */
@media (max-width: 767px) {
  .hide-mobile {
    display: none;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  .flow-canvas {
    display: none;
  }

  .bg-mesh::before {
    animation: none;
  }

  .btn--rotating-border::before {
    animation: none;
  }

  .float-a,
  .float-b,
  .float-c,
  .float-d,
  .float-e,
  .float-f,
  .float-g,
  .float-h {
    animation: none;
  }
  .flow-line {
    animation: none;
  }
  .center-glow {
    animation: none;
    opacity: 0.5;
  }
  .packet {
    display: none;
  }

  .hero--flow-fallback::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
      radial-gradient(
        ellipse 80% 60% at 30% 40%,
        rgba(24, 148, 232, 0.08) 0%,
        transparent 70%
      ),
      radial-gradient(
        ellipse 60% 50% at 70% 60%,
        rgba(159, 114, 255, 0.06) 0%,
        transparent 70%
      );
  }
}

/* ── Mobile: disable mesh animations ── */
@media (max-width: 767px) {
  .bg-mesh::before {
    animation: none;
  }
}