/* ─────────────────────────────────────────────────────────────
   FX — the high-end visual effects layer.
   Animated mesh gradient, custom cursor, 3D tilt, dot grid,
   counter, command palette, scroll progress.
   Every effect is GPU-only (transform / opacity / filter).
   ───────────────────────────────────────────────────────────── */

/* ── Animated mesh gradient (Stripe-grade aurora) ───────── */
.mesh {
  position: fixed;
  inset: -20vmax;
  z-index: -2;
  pointer-events: none;
  filter: blur(80px) saturate(140%);
  opacity: 0.55;
  transform: translateZ(0);
}
.mesh__blob {
  position: absolute;
  width: 60vmax;
  height: 60vmax;
  border-radius: 50%;
  mix-blend-mode: screen;
  will-change: transform;
}
.mesh__blob.b1 { background: radial-gradient(circle at 50% 50%, var(--mesh-1) 0%, transparent 60%); top: -20%; left: -10%; animation: meshDrift1 28s var(--ease-smooth) infinite alternate; }
.mesh__blob.b2 { background: radial-gradient(circle at 50% 50%, var(--mesh-2) 0%, transparent 60%); top: 10%;  left: 50%; animation: meshDrift2 32s var(--ease-smooth) infinite alternate; }
.mesh__blob.b3 { background: radial-gradient(circle at 50% 50%, var(--mesh-3) 0%, transparent 60%); top: 50%;  left: 10%; animation: meshDrift3 26s var(--ease-smooth) infinite alternate; opacity: 0.6; }
.mesh__blob.b4 { background: radial-gradient(circle at 50% 50%, var(--mesh-4) 0%, transparent 60%); top: 60%;  left: 60%; animation: meshDrift4 34s var(--ease-smooth) infinite alternate; opacity: 0.4; }
.mesh__blob.b5 { background: radial-gradient(circle at 50% 50%, var(--mesh-5) 0%, transparent 60%); top: -10%; left: 60%; animation: meshDrift5 30s var(--ease-smooth) infinite alternate; opacity: 0.5; }
@keyframes meshDrift1 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(20%, 30%, 0) scale(1.15); } }
@keyframes meshDrift2 { 0% { transform: translate3d(0,0,0) scale(1.05); } 100% { transform: translate3d(-25%, 20%, 0) scale(0.95); } }
@keyframes meshDrift3 { 0% { transform: translate3d(0,0,0) scale(0.9); } 100% { transform: translate3d(30%, -15%, 0) scale(1.1); } }
@keyframes meshDrift4 { 0% { transform: translate3d(0,0,0) scale(1.1); } 100% { transform: translate3d(-15%, -25%, 0) scale(0.95); } }
@keyframes meshDrift5 { 0% { transform: translate3d(0,0,0) scale(1); } 100% { transform: translate3d(-20%, 25%, 0) scale(1.05); } }

/* ── Dot grid (subtle tech texture) ─────────────────────── */
.dotgrid {
  position: absolute; inset: 0;
  pointer-events: none;
  background-image: radial-gradient(#ffffff10 1px, transparent 1px);
  background-size: 28px 28px;
  mask-image: radial-gradient(ellipse 70% 60% at 50% 40%, #000 30%, transparent 80%);
}

/* ── Custom cursor — desktop only ───────────────────────── */
@media (pointer: fine) {
  .cursor-on, .cursor-on * { cursor: none !important; }
  .cursor {
    position: fixed; top: 0; left: 0;
    width: 24px; height: 24px;
    border-radius: 50%;
    border: 1.5px solid var(--flame-400);
    background: transparent;
    pointer-events: none;
    transform: translate3d(-50%, -50%, 0);
    transition:
      width  var(--d-base) var(--ease-spring),
      height var(--d-base) var(--ease-spring),
      background var(--d-base),
      border-color var(--d-base);
    z-index: 9999;
    mix-blend-mode: difference;
    will-change: transform;
  }
  .cursor.dot {
    background: var(--flame-400);
    width: 8px; height: 8px;
  }
  .cursor.hover {
    width: 56px; height: 56px;
    background: var(--flame-glow-soft);
    border-color: var(--flame-300);
  }
  .cursor.text {
    width: 4px; height: 28px; border-radius: 2px;
    background: var(--flame-400);
    border-color: transparent;
  }
}

/* ── 3D tilt cards ──────────────────────────────────────── */
[data-tilt] {
  transform-style: preserve-3d;
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transition: transform var(--d-slow) var(--ease-spring);
  will-change: transform;
}
[data-tilt] > * { transform: translateZ(20px); }
[data-tilt]::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: radial-gradient(600px circle at var(--gx, 50%) var(--gy, 50%), #ffffff10, transparent 40%);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--d-base);
}
[data-tilt]:hover::after { opacity: 1; }

/* ── Stats / counters ───────────────────────────────────── */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
  padding: 48px 0;
  border-top: 1px solid var(--ink-hair);
  border-bottom: 1px solid var(--ink-hair);
}
.stat {
  text-align: center;
  position: relative;
}
.stat__num {
  font-family: var(--font-display);
  font-size: clamp(40px, 5vw, 64px);
  font-weight: 700;
  letter-spacing: -0.04em;
  line-height: 1;
  background: linear-gradient(180deg, #fff 30%, #ffffff70);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  font-variant-numeric: tabular-nums;
}
.stat__num .suffix { color: var(--flame-400); -webkit-text-fill-color: var(--flame-400); }
.stat__lbl { color: var(--fg-muted); font-size: var(--text-sm); margin-top: 8px; letter-spacing: 0.02em; }
@media (max-width: 760px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ── Section divider — animated stroke ──────────────────── */
.divider {
  height: 1px; width: 100%;
  background: linear-gradient(90deg, transparent, var(--flame-glow), transparent);
  position: relative;
  overflow: hidden;
}
.divider::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--flame-400), transparent);
  transform: translateX(-100%);
  animation: dividerSweep 4s var(--ease-smooth) infinite;
}
@keyframes dividerSweep {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Scroll progress bar ────────────────────────────────── */
.scrollbar-top {
  position: fixed; top: 0; left: 0;
  height: 2px; width: 100%;
  background: transparent;
  z-index: var(--z-toast);
  pointer-events: none;
}
.scrollbar-top__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--flame-400), var(--mesh-2));
  transform-origin: 0 50%;
  transform: scaleX(var(--scroll, 0));
  box-shadow: 0 0 20px var(--flame-500);
  will-change: transform;
}

/* ── Pricing toggle ─────────────────────────────────────── */
.toggle {
  display: inline-flex;
  padding: 4px;
  border-radius: var(--r-pill);
  background: var(--ink-3);
  border: 1px solid var(--ink-hair-strong);
  position: relative;
}
.toggle__opt {
  padding: 8px 18px;
  font-size: var(--text-sm);
  border-radius: var(--r-pill);
  color: var(--fg-muted);
  font-weight: 540;
  transition: color var(--d-base);
  position: relative;
  z-index: 1;
}
.toggle__opt.on { color: #111; }
.toggle__pill {
  position: absolute;
  top: 4px; bottom: 4px; left: 4px;
  width: var(--pill-w, 0);
  transform: translateX(var(--pill-x, 0));
  background: linear-gradient(180deg, var(--flame-400), var(--flame-600));
  border-radius: var(--r-pill);
  transition: transform var(--d-base) var(--ease-spring), width var(--d-base) var(--ease-spring);
  will-change: transform, width;
}
.save-badge {
  display: inline-block;
  font-size: 10px; padding: 2px 6px;
  background: var(--flame-glow-soft); color: var(--flame-300);
  border: 1px solid var(--flame-glow);
  border-radius: var(--r-pill);
  margin-left: 6px;
  font-weight: 600;
}

/* ── Command palette ────────────────────────────────────── */
.palette {
  position: fixed; inset: 0;
  background: #00000099;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: var(--z-modal);
  display: grid; place-items: start center;
  padding-top: 14vh;
  opacity: 0; pointer-events: none;
  transition: opacity var(--d-base);
}
.palette.open { opacity: 1; pointer-events: auto; }
.palette__panel {
  width: min(640px, calc(100% - 40px));
  background: var(--ink-1);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-3), 0 0 0 1px #ffffff05 inset;
  overflow: hidden;
  transform: translateY(20px) scale(0.96);
  transition: transform var(--d-base) var(--ease-back);
}
.palette.open .palette__panel { transform: translateY(0) scale(1); }
.palette__head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--ink-hair); }
.palette__head svg { width: 16px; height: 16px; color: var(--fg-faint); }
.palette__input { flex: 1; background: transparent; border: none; color: var(--fg-strong); font-size: var(--text-md); }
.palette__input:focus { outline: none; }
.palette__hint { font-family: var(--font-mono); font-size: 10px; color: var(--fg-faint); padding: 2px 6px; border: 1px solid var(--ink-hair-strong); border-radius: 4px; }
.palette__list { max-height: 50vh; overflow-y: auto; padding: 8px; }
.palette__item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background var(--d-fast);
}
.palette__item.active, .palette__item:hover { background: var(--ink-hair-strong); }
.palette__item .ic { width: 28px; height: 28px; border-radius: 8px; background: var(--ink-3); display: grid; place-items: center; font-size: 14px; }
.palette__item .lbl { flex: 1; color: var(--fg-strong); font-size: var(--text-sm); }
.palette__item .grp { color: var(--fg-faint); font-size: var(--text-xs); }

/* ── Typewriter caret ───────────────────────────────────── */
.caret::after {
  content: "▍";
  display: inline-block;
  margin-left: 1px;
  color: var(--flame-400);
  animation: caretBlink 1s steps(2) infinite;
  transform: translateY(-1px);
}
@keyframes caretBlink { 50% { opacity: 0; } }

/* ── Logo strip / partners (animated marquee) ──────────── */
.marquee {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  padding: 18px 0;
}
.marquee__track {
  display: flex; gap: 56px;
  animation: marquee 28s linear infinite;
  width: max-content;
  will-change: transform;
}
.marquee__track > span {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--text-md);
  color: var(--fg-faint);
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0.7;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ── Split text reveal ──────────────────────────────────── */
.split { display: inline-block; }
.split .ch {
  display: inline-block;
  opacity: 0;
  transform: translateY(0.6em) rotate(8deg);
  animation: chIn var(--d-cinema) var(--ease-out-expo) both;
  animation-delay: calc(var(--i, 0) * 26ms);
}
.split.played .ch { opacity: 1; transform: translateY(0) rotate(0); }
@keyframes chIn {
  to { opacity: 1; transform: translateY(0) rotate(0); }
}
.split .sp { display: inline-block; width: 0.28em; }

/* ── Live editable mock cell ────────────────────────────── */
.cell-editable {
  cursor: pointer;
  position: relative;
  transition: color var(--d-base);
}
.cell-editable:hover { color: var(--flame-300); }
.cell-editable::after {
  content: "✎"; opacity: 0; margin-left: 6px;
  transition: opacity var(--d-base);
  font-size: 10px; color: var(--flame-400);
}
.cell-editable:hover::after { opacity: 1; }

/* ── Floating glow orbs (decorative) ────────────────────── */
.orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(40px);
  pointer-events: none;
  will-change: transform;
}
.orb.o1 { width: 240px; height: 240px; background: var(--flame-500); opacity: 0.25; animation: orbFloat1 14s ease-in-out infinite; }
.orb.o2 { width: 320px; height: 320px; background: var(--mesh-2);   opacity: 0.18; animation: orbFloat2 18s ease-in-out infinite; }
@keyframes orbFloat1 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(30px, -40px); } }
@keyframes orbFloat2 { 0%, 100% { transform: translate(0,0); } 50% { transform: translate(-40px, 50px); } }

/* ── Performance tier downshifts ─────────────────────────
   .lite — mid devices: drop blur cost on mesh + grain.
   .bare — low-end / save-data: no mesh, no grain, no tilt.
   .hidden-tab — tab not visible: pause everything decorative.
   .paused-anim — element off-screen: same.
   ──────────────────────────────────────────────────────── */
body.lite .mesh   { filter: blur(40px) saturate(120%); opacity: 0.4; }
body.lite .mesh__blob.b3, body.lite .mesh__blob.b4, body.lite .mesh__blob.b5 { display: none; }
body.lite .grain::before { opacity: 0.03; }
body.lite .hero__aurora { filter: blur(12px); animation-duration: 40s; }

body.bare .mesh, body.bare .grain::before, body.bare .orb,
body.bare .hero__aurora, body.bare .ambient { display: none !important; }
body.bare [data-tilt]   { transform: none !important; transition: none !important; }
body.bare .marquee__track { animation: none !important; }
body.bare .creature       { filter: none !important; }
body.bare .glass, body.bare .palette, body.bare .composer__box, body.bare .nav {
  backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
  background: var(--ink-2) !important;
}

body.hidden-tab .mesh__blob, body.hidden-tab .marquee__track,
body.hidden-tab .hero__aurora, body.hidden-tab .orb, body.hidden-tab .bead,
body.hidden-tab .creature__body.is-idle { animation-play-state: paused !important; }

.paused-anim, .paused-anim *, .paused-anim.marquee__track {
  animation-play-state: paused !important;
}

/* Skip rendering offscreen long sections — huge perf win
   (browser skips paint+layout for what isn't near viewport). */
.section { content-visibility: auto; contain-intrinsic-size: 1px 800px; }

/* ── Loading dots (AI thinking) ─────────────────────────── */
.thinking {
  display: inline-flex; gap: 4px; align-items: center;
  height: 24px; padding: 0 8px;
}
.thinking i {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--fg-muted);
  animation: thinkBob 1s ease-in-out infinite;
}
.thinking i:nth-child(2) { animation-delay: 0.15s; }
.thinking i:nth-child(3) { animation-delay: 0.3s; }
@keyframes thinkBob {
  0%, 80%, 100% { transform: scale(0.5); opacity: 0.4; }
  40%           { transform: scale(1);   opacity: 1; }
}