/* ─── Visimatic — glass/refractive system ─────────────────────────────── */

:root {
  /* prism spectrum — sampled from logo */
  --p-cyan:    #00d4ff;
  --p-blue:    #4a6cff;
  --p-violet:  #8a4dff;
  --p-magenta: #ff2bd8;
  --p-pink:    #ff5fa6;
  --p-coral:   #ff7a4d;
  --p-amber:   #ffb347;
  --p-yellow:  #ffd84d;

  /* base */
  --void:    #06060b;
  --void-2:  #0b0b14;
  --void-3:  #11111c;
  --ink:     #f5f4fa;
  --ink-2:   #c4c2d4;
  --ink-3:   #8a8898;
  --ink-4:   #56546a;
  --line:    rgba(255,255,255,0.08);
  --line-2:  rgba(255,255,255,0.14);

  /* glass */
  --glass:        rgba(255,255,255,0.04);
  --glass-2:      rgba(255,255,255,0.07);
  --glass-hi:     rgba(255,255,255,0.12);
  --glass-edge:   rgba(255,255,255,0.18);

  /* type */
  --font-display: 'Bricolage Grotesque', ui-sans-serif, system-ui, sans-serif;
  --font-serif:   'Instrument Serif', 'Times New Roman', serif;
  --font-sans:    'Hanken Grotesk', ui-sans-serif, system-ui, sans-serif;
  --font-mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* spacing rhythm */
  --pad: 24px;
  --gap: 16px;
  --radius: 18px;
  --radius-sm: 10px;
  --radius-lg: 28px;

  /* density (set by Tweaks) */
  --d-section: 140px;
  --d-block:   72px;
}

/* density variants */
:root[data-density="compact"]  { --d-section: 96px;  --d-block: 48px; }
:root[data-density="spacious"] { --d-section: 200px; --d-block: 110px; }

/* type-pairing variants */
:root[data-typeset="grotesk"] { --font-display: 'Bricolage Grotesque', sans-serif; --font-serif: 'Bricolage Grotesque', sans-serif; }
:root[data-typeset="mono"]    { --font-display: 'JetBrains Mono', monospace; --font-serif: 'JetBrains Mono', monospace; --font-sans: 'JetBrains Mono', monospace; }

/* ─── reset ─── */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--void);
  color: var(--ink);
  font-family: var(--font-sans);
  font-feature-settings: "ss01","ss02","cv11";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
  min-height: 100vh;
  position: relative;
}

/* ambient grain + radial gradient atmosphere */
body::before {
  content: "";
  position: fixed; inset: -10%;
  background:
    radial-gradient(60% 40% at 18% 12%, color-mix(in oklab, var(--p-blue) 38%, transparent), transparent 60%),
    radial-gradient(50% 40% at 92% 8%, color-mix(in oklab, var(--p-magenta) 30%, transparent), transparent 65%),
    radial-gradient(70% 50% at 50% 100%, color-mix(in oklab, var(--p-violet) 28%, transparent), transparent 70%);
  filter: blur(40px);
  z-index: -2;
  opacity: 0.55;
  pointer-events: none;
  animation: ambientShift 24s ease-in-out infinite;
}
body::after {
  content: "";
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.04 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  z-index: -1;
  pointer-events: none;
  mix-blend-mode: overlay;
  opacity: 0.6;
}
@keyframes ambientShift {
  0%, 100% { transform: translate(0,0) rotate(0deg); }
  33% { transform: translate(3%, -2%) rotate(2deg); }
  66% { transform: translate(-2%, 3%) rotate(-1deg); }
}

/* ─── type ─── */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  letter-spacing: -0.025em;
  line-height: 0.95;
  margin: 0;
}
h1 { font-size: clamp(64px, 9.4vw, 168px); letter-spacing: -0.045em; }
h2 { font-size: clamp(40px, 5.6vw, 84px); letter-spacing: -0.035em; }
h3 { font-size: clamp(24px, 2.4vw, 40px); letter-spacing: -0.02em; }

.serif { font-family: var(--font-serif); font-style: italic; font-weight: 400; letter-spacing: -0.02em; }
.mono  { font-family: var(--font-mono); }
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* dispersion / chromatic text */
.chromatic {
  position: relative;
  display: inline-block;
  isolation: isolate;
}
.chromatic::before,
.chromatic::after {
  content: attr(data-text);
  position: absolute; inset: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.chromatic::before { color: var(--p-cyan);    transform: translate(-0.6%, 0); opacity: 0.85; }
.chromatic::after  { color: var(--p-magenta); transform: translate(0.6%, 0);  opacity: 0.85; }

/* spectrum text — gradient fill */
.spectrum {
  background: linear-gradient(96deg,
    var(--p-cyan) 0%,
    var(--p-blue) 22%,
    var(--p-violet) 42%,
    var(--p-magenta) 60%,
    var(--p-coral) 80%,
    var(--p-amber) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* ─── glass surfaces ─── */
.glass {
  background: var(--glass);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  backdrop-filter: blur(20px) saturate(140%);
  position: relative;
}
.glass::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
    rgba(255,255,255,0.22) 0%,
    rgba(255,255,255,0.02) 30%,
    rgba(255,255,255,0.02) 70%,
    rgba(255,255,255,0.12) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;
  pointer-events: none;
}
.glass-hi {
  background: var(--glass-2);
  border-color: var(--line-2);
}

/* prismatic chip / button */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 12px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--glass);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}
.chip-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--p-amber);
  box-shadow: 0 0 12px var(--p-amber);
  animation: dot 2s ease-in-out infinite;
}
@keyframes dot { 50% { opacity: 0.4; } }

/* primary CTA — refractive */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 999px;
  font-family: var(--font-sans);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: -0.005em;
  text-decoration: none;
  cursor: pointer;
  border: 1px solid transparent;
  transition: transform 220ms cubic-bezier(.2,.7,.2,1), background 220ms, border-color 220ms;
  position: relative;
  isolation: isolate;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--void);
  border-color: var(--ink);
}
.btn-primary::before {
  content: "";
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: conic-gradient(from 180deg,
    var(--p-cyan), var(--p-violet), var(--p-magenta),
    var(--p-coral), var(--p-amber), var(--p-cyan));
  z-index: -1;
  opacity: 0;
  filter: blur(8px);
  transition: opacity 220ms;
}
.btn-primary:hover { transform: translateY(-1px); }
.btn-primary:hover::before { opacity: 0.7; }

.btn-ghost {
  background: var(--glass);
  color: var(--ink);
  border-color: var(--line-2);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
.btn-ghost:hover { background: var(--glass-hi); border-color: var(--glass-edge); }

.btn .arr {
  display: inline-block;
  transition: transform 240ms cubic-bezier(.2,.7,.2,1);
}
.btn:hover .arr { transform: translateX(4px); }

/* containers */
.wrap {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 32px;
}
.wrap-wide {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 32px;
}

/* utility */
.row { display: flex; }
.col { display: flex; flex-direction: column; }
.gap-sm { gap: 8px; } .gap-md { gap: 16px; } .gap-lg { gap: 24px; }
.center { align-items: center; }
.between { justify-content: space-between; }
.divider {
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--line-2) 20%, var(--line-2) 80%, transparent);
}

/* selection */
::selection { background: var(--p-violet); color: white; }

/* focus */
:focus-visible { outline: 2px solid var(--p-cyan); outline-offset: 2px; }

/* hide native scrollbar where needed */
.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { scrollbar-width: none; }

/* ─── marquee ─── */
.marquee {
  display: flex;
  overflow: hidden;
  width: 100%;
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.marquee__track {
  display: flex;
  gap: 56px;
  flex-shrink: 0;
  animation: marquee 38s linear infinite;
  padding-right: 56px;
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-100%); }
}

/* spinning prism intro animation */
@keyframes prismFloat {
  0%, 100% { transform: translate3d(0,0,0); }
  50%      { transform: translate3d(0,-4px,0); }
}

/* video tile shimmer-when-loading */
.shimmer {
  background: linear-gradient(90deg, var(--void-2) 0%, var(--void-3) 50%, var(--void-2) 100%);
  background-size: 200% 100%;
  animation: shimmer 1.6s linear infinite;
}
@keyframes shimmer { to { background-position: -200% 0; } }

/* ─── mobile (≤ 768px) ──────────────────────────────────────────────── */
@media (max-width: 768px) {
  :root {
    --d-section: 64px;
    --d-block:   40px;
    --radius-lg: 20px;
  }
  .wrap,
  .wrap-wide { padding: 0 16px; }
  h1 { font-size: clamp(38px, 11vw, 80px); letter-spacing: -0.03em; }
  h2 { font-size: clamp(26px, 8.5vw, 56px); }
  .btn { padding: 12px 18px; font-size: 14px; }
  .marquee__track { gap: 32px; }
  .marquee__track > div > span:first-child { font-size: 40px; }
}