/* ============ Design tokens ============ */
:root {
  --bg: 0 0% 4%;
  --surface: 0 0% 8%;
  --text: 0 0% 96%;
  --muted: 0 0% 53%;
  --stroke: 0 0% 12%;
  --accent: 0 0% 96%;

  --font-body: 'Inter', system-ui, sans-serif;
  --font-display: 'Instrument Serif', 'Times New Roman', serif;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: hsl(var(--bg));
  color: hsl(var(--text));
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

body { font-feature-settings: "ss01", "cv11"; }

.font-display { font-family: var(--font-display); }
.font-body { font-family: var(--font-body); }

/* ============ Accent gradient ============ */
.accent-gradient {
  background: linear-gradient(90deg, #89AACC 0%, #4E85BF 100%);
}
.accent-gradient-anim {
  background: linear-gradient(90deg, #89AACC 0%, #4E85BF 50%, #89AACC 100%);
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
}

/* ============ Keyframes ============ */
@keyframes scroll-down {
  0%   { transform: translateY(-100%); }
  100% { transform: translateY(200%); }
}
.animate-scroll-down {
  animation: scroll-down 1.5s ease-in-out infinite;
}

@keyframes role-fade-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
.animate-role-fade-in {
  animation: role-fade-in 0.4s ease-out;
}

@keyframes gradient-shift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.6; transform: scale(0.85); }
}
.pulse-dot { animation: pulse-dot 2s ease-in-out infinite; }

/* ============ Color utilities (so Tailwind-named classes still work) ============ */
.bg-bg        { background-color: hsl(var(--bg)); }
.bg-surface   { background-color: hsl(var(--surface)); }
.bg-surface\/30 { background-color: hsl(var(--surface) / 0.3); }
.bg-stroke    { background-color: hsl(var(--stroke)); }
.bg-stroke\/50 { background-color: hsl(var(--stroke) / 0.5); }
.text-text-primary { color: hsl(var(--text)); }
.text-muted   { color: hsl(var(--muted)); }
.border-stroke { border-color: hsl(var(--stroke)); }

/* ============ Halftone overlay ============ */
.halftone {
  background-image: radial-gradient(circle, #000 1px, transparent 1px);
  background-size: 4px 4px;
  mix-blend-mode: multiply;
  opacity: 0.2;
}

/* ============ Logo ring with rotating gradient ============ */
.logo-ring {
  background: conic-gradient(from 0deg, #89AACC, #4E85BF, #89AACC);
  transition: transform 0.6s ease;
}
.logo-wrap:hover .logo-ring {
  transform: rotate(-180deg);
}
.logo-wrap:hover .logo-inner {
  transform: scale(1.1);
}
.logo-inner { transition: transform 0.3s ease; }

/* ============ Gradient border button (the "ring on hover" trick) ============ */
.gradient-ring {
  position: relative;
  isolation: isolate;
}
.gradient-ring::before {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  background: linear-gradient(90deg, #89AACC 0%, #4E85BF 50%, #89AACC 100%);
  background-size: 200% 200%;
  animation: gradient-shift 6s ease infinite;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: -1;
}
.gradient-ring:hover::before { opacity: 1; }

/* ============ Tabular nums ============ */
.tabular-nums { font-variant-numeric: tabular-nums; }

/* ============ Misc ============ */
.no-scrollbar::-webkit-scrollbar { display: none; }

/* The hero name reveal & blur-in start hidden; GSAP brings them in. */
.name-reveal { opacity: 0; transform: translateY(50px); }
.blur-in     { opacity: 0; transform: translateY(20px); filter: blur(10px); }

/* Image placeholder striping (when not using a real image) */
.placeholder-stripes {
  background:
    repeating-linear-gradient(135deg,
      rgba(255,255,255,0.04) 0 12px,
      rgba(255,255,255,0.015) 12px 24px),
    linear-gradient(180deg, #1a1a1a 0%, #0e0e0e 100%);
}

/* Marquee */
.marquee-track {
  display: inline-flex;
  white-space: nowrap;
  will-change: transform;
}

/* Smooth scroll */
html { scroll-behavior: smooth; }

/* Selection */
::selection { background: rgba(137,170,204,0.35); color: #fff; }