/* ═════════════════════════════════════════════════
   base.css
   ═════════════════════════════════════════════════ */

/* Reset, variables, typography */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#08111f;--surface:#0e1425;--surface2:#141c2e;
  --violet:#7c3aed;--cyan:#06b6d4;--green:#22c55e;--amber:#f59e0b;--coral:#ef4444;
  --text:#f8fafc;--text-dim:#9fb0c8;--line:rgba(148,163,184,.14);
  --mono:'JetBrains Mono',monospace;--sans:'Inter',-apple-system,sans-serif;
}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--text);font-family:var(--sans);overflow-x:hidden;line-height:1.5}
a{color:inherit;text-decoration:none;cursor:pointer}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer}

/* ═══ CURSOR GLOW (follows native cursor) ═══ */
#cursor-glow{
  position:fixed;top:0;left:0;width:380px;height:380px;
  border-radius:50%;pointer-events:none;z-index:9999;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(124,58,237,.11) 0%,rgba(6,182,212,.06) 32%,transparent 65%);
  mix-blend-mode:screen;
  filter:blur(8px);
  opacity:0;
  transition:opacity .4s ease,width .3s ease,height .3s ease;
  will-change:transform,opacity;
}
#cursor-glow.active{opacity:1}
#cursor-glow.hover{
  width:480px;height:480px;
  background:radial-gradient(circle,rgba(6,182,212,.16) 0%,rgba(124,58,237,.08) 35%,transparent 70%);
}


/* ═══ CLICK RIPPLE ═══ */
.click-ripple{
  position:fixed;width:14px;height:14px;border-radius:50%;pointer-events:none;z-index:9998;
  transform:translate(-50%,-50%);
  background:radial-gradient(circle,rgba(6,182,212,.85) 0%,rgba(124,58,237,.5) 45%,transparent 70%);
  box-shadow:0 0 28px rgba(6,182,212,.8);
  animation:rippleOut .55s cubic-bezier(.2,.9,.4,1.1) forwards;
}
@keyframes rippleOut{
  0%{width:14px;height:14px;opacity:1}
  100%{width:180px;height:180px;opacity:0}
}


/* ═══ 3D WORLD ═══ */
#world-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0}

/* Depth overlays */
.depth-layer{position:fixed;inset:0;pointer-events:none;z-index:1}
.depth-layer.top{background:linear-gradient(180deg,rgba(8,17,31,.92) 0%,transparent 38%)}
.depth-layer.bottom{background:linear-gradient(0deg,rgba(8,17,31,.94) 0%,transparent 42%)}
.depth-layer.vignette{box-shadow:inset 0 0 240px 80px rgba(8,17,31,.75)}

.scanlines{position:fixed;inset:0;z-index:2;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.04) 2px,rgba(0,0,0,.04) 4px);opacity:.5}
.grid-reflection{position:fixed;bottom:0;left:0;right:0;height:38vh;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(6,182,212,.025) 0%,transparent 100%);
  mask-image:linear-gradient(0deg,rgba(0,0,0,.5) 0%,transparent 100%)}

/* Audio viz */
.audio-viz{position:fixed;bottom:0;left:0;right:0;height:90px;z-index:3;pointer-events:none;
  display:flex;align-items:flex-end;justify-content:center;gap:2px;padding:0 15%;opacity:.28}
.viz-bar{width:3px;border-radius:2px 2px 0 0;background:linear-gradient(to top,var(--cyan),var(--violet));transition:height .08s}


/* ═══ GRAIN / NOISE OVERLAY — film-grain texture across the whole viewport ═══ */
body::after {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  pointer-events: none;
  z-index: 9996;
  opacity: 0.105;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 1 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
  background-size: 220px 220px;
}

/* ═══ FIGMA-STYLE DOT GRID on major cards ═══ */
.feature,
.price-face,
.use-card,
.story-card,
.friction-card,
.metric,
.step,
.bullet {
  background:
    radial-gradient(circle at center, rgba(255,255,255,0.11) 1.2px, transparent 1.4px) 0 0 / 20px 20px,
    rgba(14,20,37,0.62) !important;
}

/* ═══ GPU composite layer for silky hover transitions (no jank) ═══ */
.use-card,
.story-card,
.friction-card,
.metric,
.step,
.testimonial,
.int-card,
.feature {
  will-change: transform;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.price-card { will-change: transform; }

/* Smooth hover lifts across cards, buttons, and interactive controls */
:root {
  --hover-lift-duration: .68s;
  --hover-lift-ease: cubic-bezier(.22, 1, .36, 1);
}

.btn-primary,
.btn-secondary,
.nav-cta,
.nav-link,
.site-header .nav-cta,
.cb-btn,
.modal-dl,
.modal-dl-light,
.bullet,
.int-card,
.feature,
.feature-cta,
.friction-card,
.scheduled-item,
.step,
.metric,
.price-card,
.price-cta,
.use-card,
.story-card,
.story-link,
.testimonial,
.cap-tab,
.cap-visual-box,
.product-showcase-shell,
.app-tab,
.app-nav-item,
.app-quick-chip,
.app-tool,
.app-mini-btn,
.app-panel,
.app-user-card,
.app-task,
.app-step-item,
.job-card,
.btn,
.apply-btn {
  transition-property: transform, box-shadow, border-color, background, color, opacity, filter !important;
  transition-duration: var(--hover-lift-duration), .72s, .52s, .52s, .32s, .32s, .32s !important;
  transition-timing-function: var(--hover-lift-ease), var(--hover-lift-ease), ease, ease, ease, ease, ease !important;
}

.product-showcase-frame {
  transition: transform .18s ease-out, box-shadow .72s var(--hover-lift-ease), border-color .52s ease !important;
}

/* ═══ SCROLL PROGRESS BAR ═══ */
#scroll-progress {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 3px;
  z-index: 10000;
  background: linear-gradient(90deg, var(--cyan), var(--violet), #ec4899);
  transform-origin: left center;
  transform: scaleX(0);
  box-shadow: 0 0 14px rgba(6,182,212,0.55), 0 0 24px rgba(124,58,237,0.3);
  pointer-events: none;
  will-change: transform;
  transition: transform 0.08s ease-out;
}

/* ═══ HERO H1 — WORD-BY-WORD REVEAL (triggers after loader hides) ═══ */
.hero-h1-reveal .word {
  display: inline-block;
  opacity: 0;
  transform: translateY(30px);
}
body.loader-done .hero-h1-reveal .word {
  animation: heroWordReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--i) * 150ms + 400ms);
}
/* Gradient words keep their gradient-shift animation AND get the reveal on top */
body.loader-done .hero-h1-reveal .gradient .word {
  animation:
    heroWordReveal 1.2s cubic-bezier(0.22, 1, 0.36, 1) forwards,
    gradShift 8s ease infinite;
  animation-delay: calc(var(--i) * 150ms + 400ms), 0s;
}
@keyframes heroWordReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
.d-none {
  display: none !important;
}