/* ============================================================
   PYXEON v3 — FUTURISTIC UPGRADE LAYER
   Loaded AFTER enhancements.css. Pure additive.
   Theme: "the signal becomes tangible" — kinetic typography,
   Vercel-style frame motif, bento grid, pipeline ribbon,
   monumental footer wordmark.
   ============================================================ */

/* ============================================================
   v3: KILL GRADIENT TEXT ANIMATION — was causing perceived lag
   (static gradient is kept, just no background-position shift)
   ============================================================ */
.g-text {
  animation: none !important;
}

/* ============================================================
   v3 REVIEW PASS: REMOVE CUSTOM CURSOR
   The glow ring/dot added mousemove overhead and felt intrusive.
   ============================================================ */
.cursor-dot,
.cursor-ring { display: none !important; }
body.has-custom-cursor,
body.has-custom-cursor a,
body.has-custom-cursor button,
body.has-custom-cursor input,
body.has-custom-cursor select,
body.has-custom-cursor textarea,
body.has-custom-cursor [role="button"] {
  cursor: auto !important;
}

/* ============================================================
   v3 FIX: restore absolute positioning on pricing glow + badge
   (v2's `.pr-card > * { position: relative }` was breaking these)
   ============================================================ */
.pr-card .pr-glow,
.pr-card .pr-badge {
  position: absolute !important;
}

/* ============================================================
   v3 REVIEW PASS: FREEZE KINETIC LETTERS (lag source)
   JS is also short-circuited in enhancements-v3.js. This CSS
   resets any inline weight/transform that might already be set.
   ============================================================ */
.kinetic-char {
  font-variation-settings: normal !important;
  transform: none !important;
  transition: none !important;
  color: inherit !important;
}

/* ============================================================
   v3: LOGO MARK MODERNIZATION
   Glowing four-pointed star logo:
   - filter glow that pulses blue→cyan
   - 4 petals brighten in sequence (radar sweep)
   - central circle breathes
   - hover: whole mark scales + SVG rotates 45°
   ============================================================ */
.logo-mark {
  width: 44px !important;
  height: 44px !important;
  position: relative;
  overflow: visible;
  filter:
    drop-shadow(0 0 6px rgba(59, 130, 246, 0.5))
    drop-shadow(0 0 16px rgba(139, 92, 246, 0.3));
  animation: logo-glow-pulse 3.6s ease-in-out infinite;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
              filter 0.35s;
  isolation: isolate;
}
@keyframes logo-glow-pulse {
  0%, 100% {
    filter:
      drop-shadow(0 0 6px rgba(59, 130, 246, 0.5))
      drop-shadow(0 0 16px rgba(139, 92, 246, 0.3));
  }
  50% {
    filter:
      drop-shadow(0 0 10px rgba(59, 130, 246, 0.8))
      drop-shadow(0 0 24px rgba(139, 92, 246, 0.5));
  }
}

/* Hover: spring scale + icon rotates 45° */
.logo-mark:hover {
  transform: scale(1.08);
  filter:
    drop-shadow(0 0 14px rgba(59, 130, 246, 0.9))
    drop-shadow(0 0 32px rgba(139, 92, 246, 0.7));
  animation-play-state: paused;
}
.logo-mark svg {
  width: 30px !important;
  height: 30px !important;
  position: relative;
  z-index: 2;
  transition: transform 0.55s cubic-bezier(.22,.61,.36,1), filter 0.3s;
}
.logo-mark:hover svg {
  transform: rotate(45deg) scale(1.08);
  filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7));
}

/* Petals — smooth continuous sinusoidal brightness (radar sweep) */
.logo-mark svg path {
  animation: logo-petal-sweep 2.8s ease-in-out infinite;
  transform-origin: center;
  transform-box: view-box;
}
.logo-mark svg path:nth-of-type(1) { animation-delay: 0s;    } /* top */
.logo-mark svg path:nth-of-type(4) { animation-delay: 0.7s;  } /* right */
.logo-mark svg path:nth-of-type(2) { animation-delay: 1.4s;  } /* bottom */
.logo-mark svg path:nth-of-type(3) { animation-delay: 2.1s;  } /* left */
@keyframes logo-petal-sweep {
  0%, 100% { opacity: 0.85; }
  50%      { opacity: 1; filter: drop-shadow(0 0 4px rgba(255, 255, 255, 0.95)); }
}

/* Central circle breathes */
.logo-mark svg circle:last-of-type {
  animation: logo-core-breathe 2.4s ease-in-out infinite;
  transform-origin: center;
  transform-box: view-box;
}
@keyframes logo-core-breathe {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* Accessibility: hold still when user prefers reduced motion */
@media (prefers-reduced-motion: reduce) {
  .logo-mark,
  .logo-mark svg path,
  .logo-mark svg circle {
    animation: none !important;
  }
}

/* ============================================================
   v3: REMOVE STAT RINGS — they read as broken progress arcs.
   The stat numbers + labels carry the section on their own.
   ============================================================ */
.sp-ring { display: none !important; }
#social-proof .sp-stat {
  padding: 36px 24px !important;
}

/* ============================================================
   FONT FACES — True-variable Geist + Geist Mono from Vercel CDN
   (Google Fonts serves Geist as 9 static weights, which breaks
    continuous weight morphing — we need the variable file.)
   ============================================================ */
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-sans/Geist-Variable.woff2') format('woff2-variations');
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('https://cdn.jsdelivr.net/npm/geist@1.3.1/dist/fonts/geist-mono/GeistMono-Variable.woff2') format('woff2-variations');
}

/* ============================================================
   TYPOGRAPHY — Geist (variable) for display, Inter for body
   ============================================================ */
:root {
  --font-display: 'Geist', 'Inter', ui-sans-serif, system-ui, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, Menlo, 'SF Mono', monospace;
}
body {
  font-feature-settings: "cv11", "ss01", "ss03";
}
h1, h2, h3, h4, h5,
.logo-name,
.metric-val,
.sp-num,
.pr-amt,
.feat-num {
  font-family: var(--font-display);
  letter-spacing: -0.028em;
  font-variation-settings: "wght" 700;
}
#hero h1 { letter-spacing: -0.045em; }
.section-header h2 { letter-spacing: -0.04em; }
code,
.fc-k, .fc-s, .fc-p, .fc-c,
.feat-code, .feat-code *,
.tc-text code,
.tc-text,
pre, kbd {
  font-family: var(--font-mono) !important;
}

/* ============================================================
   FRAME MOTIF — Vercel-style crop marks + faint dotted grid
   ============================================================ */
.frame-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 5;
  background-image:
    linear-gradient(0deg,  rgba(255,255,255,0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.025) 1px, transparent 1px);
  background-size: 96px 96px;
  background-position: center center;
  mask-image: radial-gradient(ellipse at center, transparent 20%, black 90%);
  -webkit-mask-image: radial-gradient(ellipse at center, transparent 20%, black 90%);
  opacity: 0.55;
}

.crop-mark {
  position: fixed;
  width: 22px; height: 22px;
  z-index: 9997;
  pointer-events: none;
  opacity: 0;
  animation: crop-fade-in 1.2s 0.4s ease forwards;
}
.crop-mark::before,
.crop-mark::after {
  content: "";
  position: absolute;
  background: currentColor;
  transition: background 0.8s ease;
}
.crop-mark-tl { top: 22px; left: 22px;    color: rgba(167,139,250,0.7); }
.crop-mark-tr { top: 22px; right: 22px;   color: rgba(96,165,250,0.7);  }
.crop-mark-bl { bottom: 22px; left: 22px; color: rgba(34,211,238,0.7);  }
.crop-mark-br { bottom: 22px; right: 22px;color: rgba(52,211,153,0.7);  }

.crop-mark-tl::before { top: 0; left: 0; width: 100%; height: 1px; }
.crop-mark-tl::after  { top: 0; left: 0; width: 1px;  height: 100%; }
.crop-mark-tr::before { top: 0; right: 0; width: 100%; height: 1px; }
.crop-mark-tr::after  { top: 0; right: 0; width: 1px;  height: 100%; }
.crop-mark-bl::before { bottom: 0; left: 0; width: 100%; height: 1px; }
.crop-mark-bl::after  { bottom: 0; left: 0; width: 1px;  height: 100%; }
.crop-mark-br::before { bottom: 0; right: 0; width: 100%; height: 1px; }
.crop-mark-br::after  { bottom: 0; right: 0; width: 1px;  height: 100%; }

@keyframes crop-fade-in {
  0%   { opacity: 0; transform: scale(0.6); }
  100% { opacity: 1; transform: scale(1); }
}

/* Tiny coordinate label next to each crop-mark — Vercel-esque */
.crop-coord {
  position: fixed;
  z-index: 9997;
  font-family: var(--font-mono);
  font-size: 9px;
  color: rgba(255,255,255,0.28);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  animation: crop-fade-in 1.2s 0.8s ease forwards;
}
.crop-coord-tl { top: 28px; left: 52px;    }
.crop-coord-tr { top: 28px; right: 52px;   }
.crop-coord-bl { bottom: 28px; left: 52px; }
.crop-coord-br { bottom: 28px; right: 52px;}

/* ============================================================
   SIDE DOCK — right-edge vertical section indicator
   ============================================================ */
.side-dock {
  position: fixed;
  right: 20px;
  top: 50%;
  transform: translate(14px, -50%);
  z-index: 998;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 9px;
  background: rgba(12,12,26,0.55);
  backdrop-filter: blur(12px) saturate(150%);
  -webkit-backdrop-filter: blur(12px) saturate(150%);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 100px;
  opacity: 0;
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.side-dock.ready {
  opacity: 1;
  transform: translate(0, -50%);
}
.side-dock-dot {
  position: relative;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s, box-shadow 0.3s;
}
.side-dock-dot:hover { background: rgba(255,255,255,0.6); transform: scale(1.25); }
.side-dock-dot.active {
  background: var(--accent, #8b5cf6);
  box-shadow: 0 0 0 3px rgba(var(--accent-rgb, 139, 92, 246), 0.2),
              0 0 12px var(--accent, #8b5cf6);
  transform: scale(1.35);
}
.side-dock-label {
  position: absolute;
  right: calc(100% + 14px);
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  background: rgba(12,12,26,0.95);
  border: 1px solid rgba(255,255,255,0.08);
  color: #fff;
  padding: 5px 11px;
  border-radius: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, transform 0.2s ease;
}
.side-dock-dot:hover .side-dock-label {
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* ============================================================
   KINETIC HEADLINE — per-letter weight morph toward cursor
   Works inside the existing .reveal-word spans from v2.
   ============================================================ */
.kinetic-char {
  display: inline-block;
  font-variation-settings: "wght" var(--wght, 700);
  transition: font-variation-settings 0.12s ease-out,
              transform 0.15s ease-out,
              color 0.2s;
  will-change: font-variation-settings, transform;
}
.kinetic-char.hot {
  color: #fff;
}
/* Prevent per-letter line-breaks inside a word */
#hero h1 .reveal-word {
  white-space: nowrap;
}

/* ============================================================
   BENTO GRID — replaces uniform feat-hero + feat-grid
   ============================================================ */
.bento-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(290px, auto);
  gap: 16px;
  margin-top: 32px;
  align-items: stretch;
}
.bento-cell {
  position: relative;
  overflow: hidden;
}
/* size variants — 2 rows × 4 cols = 8 spots, 4 cells fill perfectly */
.bento-lg { grid-column: span 2; grid-row: span 2; }
.bento-md { grid-column: span 2; grid-row: span 1; }
.bento-sm { grid-column: span 1; grid-row: span 1; }

/* Keep feat-hero and feat-card styling inheritance — just override layout */
.bento-grid .feat-hero {
  flex-direction: row;
  padding: 32px !important;
  display: flex;
  gap: 28px;
  align-items: flex-start; /* top-align so overflow only happens at bottom, not both ends */
}
.bento-grid .feat-card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
.bento-grid .feat-hero .feat-hero-content { flex: 1; }
.bento-grid .feat-hero .feat-hero-visual { flex: 1; min-width: 0; }
.bento-grid .feat-card {
  padding: 28px !important;
}
.bento-grid .bento-sm .feat-tags { display: none; }
.bento-grid .bento-sm p { font-size: 0.88rem; }

/* Bento: stack on narrow screens */
@media (max-width: 960px) {
  .bento-grid {
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: auto;
  }
  .bento-lg { grid-column: span 2; grid-row: span 1; }
  .bento-md { grid-column: span 2; grid-row: span 1; }
  .bento-sm { grid-column: span 1; grid-row: span 1; }
  .bento-grid .feat-hero { flex-direction: column; }
}

/* Bento small cells get a subtle decorative corner mark */
.bento-sm::before {
  content: "◆";
  position: absolute;
  top: 16px; right: 16px;
  font-size: 10px;
  color: rgba(139,92,246,0.4);
  z-index: 2;
  transition: color 0.3s, transform 0.3s;
}
.bento-sm:hover::before {
  color: #a78bfa;
  transform: rotate(90deg);
}

/* ============================================================
   PIPELINE SECTION — animated ribbon with traveling packets
   ============================================================ */
#pipeline {
  position: relative;
}
.pipeline-track {
  display: flex;
  align-items: center;
  gap: 0;
  padding: 48px 0 24px;
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
}
.pipeline-node {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  flex: 0 0 auto;
  width: 110px;
}
.pn-icon {
  width: 68px; height: 68px;
  border-radius: 50%;
  background: rgba(12,12,26,0.9);
  border: 1px solid rgba(139,92,246,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #a78bfa;
  font-size: 22px;
  position: relative;
  transition: transform 0.35s cubic-bezier(.22,.61,.36,1),
              background 0.4s, box-shadow 0.4s, border-color 0.4s, color 0.4s;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.06),
              0 10px 30px -8px rgba(139,92,246,0.25);
}
.pipeline-node.node-lit .pn-icon {
  background: linear-gradient(135deg, #8b5cf6, #3b82f6, #06b6d4);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 0 0 4px rgba(139,92,246,0.18),
              0 0 40px rgba(139,92,246,0.65);
  transform: translateY(-2px) scale(1.03);
}
.pipeline-node.node-lit .pn-label {
  color: #fff;
}
.pipeline-node:hover .pn-icon {
  transform: scale(1.08);
  border-color: rgba(139,92,246,0.6);
}
.pn-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
  text-align: center;
  letter-spacing: -0.01em;
  transition: color 0.4s;
}
.pn-step {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.pipeline-connector {
  flex: 1;
  height: 2px;
  position: relative;
  background: rgba(255,255,255,0.06);
  overflow: visible;
  margin: 0 -4px;
}
.pipeline-connector::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(139,92,246,0.4), rgba(6,182,212,0.4));
  opacity: 0.6;
}
.pipeline-packet {
  position: absolute;
  top: 50%;
  left: 0;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 0 3px rgba(139,92,246,0.35),
              0 0 20px rgba(139,92,246,0.9);
  pointer-events: none;
  z-index: 4;
}
.pipeline-packet.animated {
  animation: packet-travel var(--packet-duration, 7s) linear infinite;
  animation-delay: var(--packet-delay, 0s);
}
@keyframes packet-travel {
  0%   { left: 0%;   opacity: 0; }
  6%   { opacity: 1; }
  94%  { opacity: 1; }
  100% { left: 100%; opacity: 0; }
}

/* Copy chip + description under the pipeline */
.pipeline-caption {
  text-align: center;
  margin-top: 32px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--text-3);
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.pipeline-caption strong {
  color: #a78bfa;
  font-weight: 700;
}

/* Responsive — stack nodes vertically on narrow */
@media (max-width: 900px) {
  .pipeline-track { flex-direction: column; gap: 16px; padding: 32px 0; }
  .pipeline-node { flex-direction: row; width: 100%; justify-content: flex-start; gap: 16px; }
  .pipeline-connector { width: 2px; height: 40px; flex: 0 0 auto; margin: 0 0 0 34px; }
  .pipeline-connector::before { background: linear-gradient(180deg, rgba(139,92,246,0.4), rgba(6,182,212,0.4)); }
  .pipeline-packet.animated { animation-name: packet-travel-v; }
  @keyframes packet-travel-v {
    0%   { top: 0%;   left: 50%; opacity: 0; }
    6%   { opacity: 1; }
    94%  { opacity: 1; }
    100% { top: 100%; left: 50%; opacity: 0; }
  }
}

/* ============================================================
   FOOTER WORDMARK — monumental PYXEON with scroll-driven reveal
   ============================================================ */
.footer-wordmark-wrap {
  position: relative;
  padding: 64px 24px 24px;
  overflow: hidden;
  text-align: center;
}
.footer-wordmark {
  font-family: var(--font-display);
  font-weight: 900;
  font-variation-settings: "wght" 900;
  font-size: clamp(70px, 22vw, 320px);
  line-height: 0.82;
  letter-spacing: -0.06em;
  background: linear-gradient(180deg,
    rgba(167,139,250,0.55) 0%,
    rgba(59,130,246,0.35) 50%,
    rgba(6,182,212,0.1)  100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  pointer-events: none;
  user-select: none;
  display: inline-block;
  margin: 0;
}
.footer-wordmark-sub {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-3);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-top: 12px;
}

/* Scroll-driven reveal (progressive enhancement) */
@supports (animation-timeline: view()) {
  .footer-wordmark {
    animation: wordmark-reveal linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 50%;
  }
  @keyframes wordmark-reveal {
    0%   { font-variation-settings: "wght" 100; letter-spacing: 0.2em; opacity: 0.2; }
    100% { font-variation-settings: "wght" 900; letter-spacing: -0.06em; opacity: 1; }
  }
}

/* ============================================================
   NATIVE CSS SCROLL-DRIVEN ANIMATIONS (enhancement layer)
   Replaces/augments IntersectionObserver reveals where supported
   ============================================================ */
@supports (animation-timeline: view()) {
  .bento-cell {
    animation: cell-rise linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 30%;
  }
  @keyframes cell-rise {
    0%   { opacity: 0; transform: translateY(40px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
  .pipeline-node {
    animation: node-rise linear both;
    animation-timeline: view();
    animation-range: entry 0% cover 40%;
  }
  @keyframes node-rise {
    0%   { opacity: 0; transform: translateY(24px); }
    100% { opacity: 1; transform: translateY(0); }
  }
}

/* ============================================================
   FIX: push hero content above the frame-grid z-index
   ============================================================ */
#navbar { z-index: 1000 !important; }

/* ============================================================
   MOBILE — kill heavy extras
   ============================================================ */
@media (max-width: 768px) {
  .frame-grid { display: none; }
  .crop-mark { display: none; }
  .crop-coord { display: none; }
  .side-dock { display: none; }
  .footer-wordmark { font-size: clamp(60px, 28vw, 120px); }
}