/* =============================================================
   konekti.css — Shared design system styles, animations & effects
   ============================================================= */

/* ---------------------------------------------------------------
   0. SVG Design Tokens — used by inline SVG stroke/fill attributes
   --------------------------------------------------------------- */
:root {
  --color-primary:   #691AB8;
  --color-secondary: #9B59D0;
  --color-highlight: #cebdff;
}

/* ---------------------------------------------------------------
   1. Base
   --------------------------------------------------------------- */
html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Work Sans', sans-serif;
  background-color: #031441;
  color: #e2e8f0;
  animation: bodyFadeIn 0.6s ease forwards;
}

@keyframes bodyFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.font-headline {
  font-family: 'Sofia Sans', 'Work Sans', sans-serif;
}

svg text {
  font-family: 'Work Sans', sans-serif;
}

/* ---------------------------------------------------------------
   2. Common Components
   --------------------------------------------------------------- */
.glass-card {
  background: rgba(1, 13, 45, 0.6);
  backdrop-filter: blur(12px);
}

.cta-gradient {
  background: linear-gradient(135deg, #691AB8 0%, #7622C9 100%);
}

/* ---------------------------------------------------------------
   3. Accessibility
   --------------------------------------------------------------- */
.skip-link {
  position: absolute; top: -200%; left: 1rem;
  background: #691AB8; color: #fff; padding: 8px 16px;
  border-radius: 6px; font-size: 14px; font-weight: 600;
  z-index: 9999; text-decoration: none;
}
.skip-link:focus { top: 1rem; }

:focus-visible {
  outline: 2px solid #9B59D0;
  outline-offset: 3px;
  border-radius: 4px;
}

[id] { scroll-margin-top: 128px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal, .reveal-left, .reveal-right { opacity: 1 !important; transform: none !important; }
}

/* ---------------------------------------------------------------
   4. Nav Dropdown
   --------------------------------------------------------------- */
.nav-dd { position: relative; }

.nav-dd-panel {
  position: absolute; top: 100%; left: 0; width: 320px; padding-top: 8px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity 0.15s, visibility 0.15s;
}

.nav-dd:hover .nav-dd-panel,
.nav-dd.open .nav-dd-panel {
  opacity: 1; visibility: visible; pointer-events: auto;
}

/* ---------------------------------------------------------------
   5. Subnav
   --------------------------------------------------------------- */
.subnav-link {
  color: #6b7280; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.08em;
  white-space: nowrap; text-decoration: none;
  padding-bottom: 3px; border-bottom: 2px solid transparent;
  transition: color 0.15s, border-color 0.15s;
}
.subnav-link:hover { color: #e2e8f0; }
.subnav-link.active { color: #cebdff; border-bottom-color: #691AB8; }

/* ---------------------------------------------------------------
   6. Custom Cursor (desktop only — suppressed on product/use-case
      pages with #cursor-dot, #cursor-outline { display: none })
   --------------------------------------------------------------- */
.custom-cursor-active,
.custom-cursor-active * {
  cursor: none !important;
}

.cursor-dot {
  position: fixed; top: 0; left: 0;
  width: 8px; height: 8px;
  background: #691AB8; border-radius: 50%;
  pointer-events: none; z-index: 99999;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 10px 3px rgba(105,26,184,0.6), 0 0 20px 6px rgba(105,26,184,0.2);
  transition: width 0.15s ease, height 0.15s ease, background 0.15s ease;
}

.cursor-outline {
  position: fixed; top: 0; left: 0;
  width: 36px; height: 36px;
  border: 1.5px solid rgba(105,26,184,0.5); border-radius: 50%;
  pointer-events: none; z-index: 99998;
  transform: translate(-50%, -50%);
  transition: width 0.2s ease, height 0.2s ease, border-color 0.2s ease;
}

.cursor-dot.cursor-hover   { width: 14px; height: 14px; background: #7622C9; }
.cursor-outline.cursor-hover { width: 52px; height: 52px; border-color: rgba(118,34,201,0.7); }

/* ---------------------------------------------------------------
   7. Scroll Reveal Classes
   --------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}

.reveal-right {
  opacity: 0;
  transform: translateX(40px);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.65s cubic-bezier(0.4,0,0.2,1), transform 0.65s cubic-bezier(0.4,0,0.2,1);
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Stagger delay utilities */
.delay-100 { transition-delay: 100ms; }
.delay-200 { transition-delay: 200ms; }
.delay-300 { transition-delay: 300ms; }
.delay-400 { transition-delay: 400ms; }
.delay-500 { transition-delay: 500ms; }
.delay-600 { transition-delay: 600ms; }

/* ---------------------------------------------------------------
   8. Button Effects
   --------------------------------------------------------------- */
a, button {
  transition: color 0.2s ease, background-color 0.2s ease,
              box-shadow 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

/* Shimmer sweep */
.btn-shimmer { position: relative; overflow: hidden; }

.btn-shimmer::after {
  content: '';
  position: absolute; top: 0; left: -100%; width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent 20%, rgba(255,255,255,0.35) 50%, transparent 80%);
  transition: left 0.55s ease;
  pointer-events: none;
}
.btn-shimmer:hover::after { left: 160%; }

/* Ripple — JS injects .ripple spans */
button, a.cta-gradient, a.gradient-cta {
  position: relative;
  overflow: hidden;
}

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

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

/* ---------------------------------------------------------------
   9. Card 3D Tilt
   --------------------------------------------------------------- */
.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.12s ease, box-shadow 0.2s ease;
  will-change: transform;
}

.card-tilt:hover {
  box-shadow: 0 24px 60px rgba(1,13,45,0.7), 0 0 40px rgba(105,26,184,0.1);
}

/* ---------------------------------------------------------------
   10. Animated Gradient Orbs
   --------------------------------------------------------------- */
@keyframes orbFloat {
  0%   { transform: translateY(0px) translateX(0px) scale(1); }
  25%  { transform: translateY(-18px) translateX(10px) scale(1.04); }
  50%  { transform: translateY(-8px) translateX(-12px) scale(0.97); }
  75%  { transform: translateY(12px) translateX(8px) scale(1.02); }
  100% { transform: translateY(0px) translateX(0px) scale(1); }
}

@keyframes orbColorShift {
  0%   { filter: hue-rotate(0deg) blur(var(--orb-blur, 80px)); }
  50%  { filter: hue-rotate(20deg) blur(var(--orb-blur, 80px)); }
  100% { filter: hue-rotate(0deg) blur(var(--orb-blur, 80px)); }
}

.orb-animate {
  animation: orbFloat 9s ease-in-out infinite, orbColorShift 12s ease-in-out infinite;
  will-change: transform, filter;
}

/* ---------------------------------------------------------------
   11. Glow Pulse
   --------------------------------------------------------------- */
@keyframes glowPulse {
  0%   { box-shadow: 0 0 0 0 rgba(105,26,184,0); }
  40%  { box-shadow: 0 0 24px 8px rgba(105,26,184,0.18); }
  100% { box-shadow: 0 0 0 0 rgba(105,26,184,0); }
}

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

/* ---------------------------------------------------------------
   12. Gradient Text Animation
   --------------------------------------------------------------- */
@keyframes gradientTextMove {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.text-animate-gradient {
  background: linear-gradient(135deg, #691AB8 0%, #9B59D0 30%, #7622C9 60%, #691AB8 100%);
  background-size: 250% 250%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: gradientTextMove 4s ease infinite;
}

/* ---------------------------------------------------------------
   13. Hero Particle Canvas
   --------------------------------------------------------------- */
#particle-canvas {
  position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
  width: 100%; height: 100%;
}

.hero-particles > * { position: relative; z-index: 2; }
.hero-particles      { position: relative; }

/* ---------------------------------------------------------------
   14. Nav Scroll State
   --------------------------------------------------------------- */
nav {
  transition: padding 0.3s ease, backdrop-filter 0.3s ease, background-color 0.3s ease;
}

nav.nav-scrolled {
  backdrop-filter: blur(28px) saturate(180%);
  -webkit-backdrop-filter: blur(28px) saturate(180%);
  background-color: rgba(3,20,65,0.9) !important;
}

nav.nav-scrolled .flex.justify-between {
  padding-top: 0.5rem !important;
  padding-bottom: 0.5rem !important;
}

/* ---------------------------------------------------------------
   15. Horizontal Rule Animations
   --------------------------------------------------------------- */
.hr-animate {
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.8s cubic-bezier(0.4,0,0.2,1);
}
.hr-animate.visible { transform: scaleX(1); }

/* ---------------------------------------------------------------
   16. Mobile Menu
   --------------------------------------------------------------- */
#mobile-menu {
  transform: translateY(-100%);
  opacity: 0;
  pointer-events: none;
  transition: transform 0.3s cubic-bezier(0.4,0,0.2,1), opacity 0.3s ease;
}

#mobile-menu.menu-open {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

#menu-toggle span {
  display: block; width: 22px; height: 2px;
  background: #cbd5e1; border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
}

#menu-toggle.is-open span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
#menu-toggle.is-open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
#menu-toggle.is-open span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }