:root {
  --brand: #0000FE;
  --brand-soft: #4A4AFF;
  --ink: #0A0A12;
  --paper: #ffffff;
}

html, body {
  background: #000;
  color: #fff;
  font-family: 'Recursive', system-ui, sans-serif;
  font-variation-settings: "MONO" 0, "CASL" 0, "slnt" 0, "CRSV" 0;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  letter-spacing: -0.005em;
}

.font-display { font-family: 'Recursive', system-ui, sans-serif; font-variation-settings: "MONO" 0, "CASL" 0; }
.font-mono { font-family: 'Recursive', ui-monospace, monospace; font-variation-settings: "MONO" 1, "CASL" 0; }

/* ===== Hero / cursor proximity ===== */
.proxi-letter {
  display: inline-block;
  font-variation-settings: "MONO" 0, "CASL" 0, "wght" 360, "slnt" 0, "CRSV" 0;
  transition: font-variation-settings 0.32s cubic-bezier(.2,.7,.2,1), transform 0.32s cubic-bezier(.2,.7,.2,1), color 0.28s ease;
  will-change: font-variation-settings, transform;
  transform-origin: center;
}

/* ===== Lamp ===== */
.lamp-stage {
  background: #05050a;
}
.lamp-cone-left {
  background-image: conic-gradient(from 70deg at 50% 100%, #0000FE, transparent 25%, transparent);
}
.lamp-cone-right {
  background-image: conic-gradient(from 290deg at 50% 100%, transparent, transparent 75%, #0000FE);
}

.mask-fade-top { -webkit-mask-image: linear-gradient(to top, white, transparent); mask-image: linear-gradient(to top, white, transparent); }
.mask-fade-right { -webkit-mask-image: linear-gradient(to right, white, transparent); mask-image: linear-gradient(to right, white, transparent); }
.mask-fade-left { -webkit-mask-image: linear-gradient(to left, white, transparent); mask-image: linear-gradient(to left, white, transparent); }

@keyframes lamp-bloom-l {
  from { opacity: .35; width: 15rem; }
  to   { opacity: 1;   width: 32rem; }
}
@keyframes lamp-bloom-r {
  from { opacity: .35; width: 15rem; }
  to   { opacity: 1;   width: 32rem; }
}
@keyframes lamp-line {
  from { width: 12rem; opacity: .4; }
  to   { width: 32rem; opacity: 1; }
}
@keyframes lamp-dot {
  from { width: 6rem; opacity: .4; }
  to   { width: 18rem; opacity: 1; }
}
@keyframes lamp-headline {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lamp-in .lamp-cone-left  { animation: lamp-bloom-l 1.4s .2s cubic-bezier(.2,.7,.2,1) forwards; }
.lamp-in .lamp-cone-right { animation: lamp-bloom-r 1.4s .2s cubic-bezier(.2,.7,.2,1) forwards; }
.lamp-in .lamp-line       { animation: lamp-line     1.4s .2s cubic-bezier(.2,.7,.2,1) forwards; }
.lamp-in .lamp-dot        { animation: lamp-dot      1.4s .2s cubic-bezier(.2,.7,.2,1) forwards; }
.lamp-in .lamp-headline   { animation: lamp-headline 1.0s .8s cubic-bezier(.2,.7,.2,1) forwards; }

/* ===== Shader-style mesh gradient (CSS substitute) ===== */
.mesh-bg {
  position: absolute; inset: 0;
  background-color: #000;
  background-image:
    radial-gradient(60% 60% at 20% 30%, rgba(0,0,254,0.85) 0%, rgba(0,0,254,0) 60%),
    radial-gradient(45% 45% at 80% 25%, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 65%),
    radial-gradient(55% 55% at 70% 80%, rgba(0,0,254,0.7) 0%, rgba(0,0,254,0) 60%),
    radial-gradient(40% 40% at 30% 85%, rgba(120,120,255,0.5) 0%, rgba(0,0,0,0) 70%),
    radial-gradient(50% 50% at 50% 50%, rgba(0,0,254,0.4) 0%, rgba(0,0,0,0) 70%);
  background-size: 200% 200%, 220% 220%, 240% 240%, 260% 260%, 200% 200%;
  background-position: 0% 0%, 100% 0%, 50% 100%, 0% 100%, 50% 50%;
  filter: saturate(1.05);
  animation: mesh-drift 22s ease-in-out infinite alternate;
}
.mesh-bg::after {
  content: '';
  position: absolute; inset: 0;
  background-image:
    radial-gradient(35% 35% at 60% 40%, rgba(255,255,255,0.12), transparent 70%),
    radial-gradient(25% 25% at 25% 70%, rgba(0,0,254,0.6), transparent 70%);
  mix-blend-mode: screen;
  animation: mesh-drift2 14s ease-in-out infinite alternate;
}
@keyframes mesh-drift {
  0%   { background-position: 0% 0%,   100% 0%, 50% 100%, 0% 100%, 50% 50%; }
  50%  { background-position: 30% 20%, 70% 30%, 60% 70%,  20% 80%, 40% 60%; }
  100% { background-position: 60% 40%, 40% 60%, 30% 50%,  60% 40%, 60% 50%; }
}
@keyframes mesh-drift2 {
  0%   { transform: translate3d(0,0,0); }
  100% { transform: translate3d(2%,-2%,0); }
}

.mesh-wire {
  position: absolute; inset: 0;
  pointer-events: none;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0 1px, transparent 1px 80px),
    repeating-linear-gradient(0deg,  rgba(255,255,255,0.04) 0 1px, transparent 1px 80px);
  mask-image: radial-gradient(70% 70% at 50% 50%, black 30%, transparent 75%);
  opacity: 0.5;
}

/* Glass tint behind the badge */
.glass-tint {
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.12);
}
.glass-tint::before {
  content:''; position:absolute; top:0; left:6px; right:6px; height:1px;
  background: linear-gradient(90deg, transparent, rgba(0,0,254,0.7), transparent);
}

/* Pulsing border substitute */
@keyframes pulse-border-spin { to { transform: rotate(360deg); } }
@keyframes pulse-border-pulse { 0%,100% { box-shadow: 0 0 24px 2px rgba(0,0,254,0.6), 0 0 60px 8px rgba(0,0,254,0.25); } 50% { box-shadow: 0 0 36px 4px rgba(0,0,254,0.85), 0 0 90px 16px rgba(0,0,254,0.35); } }

.pulse-ring {
  position: relative;
  width: 64px; height: 64px;
  border-radius: 50%;
  background:
    conic-gradient(from 0deg,
      #0000FE 0deg,
      #ffffff 60deg,
      #0000FE 130deg,
      transparent 180deg,
      #5050FF 220deg,
      #ffffff 290deg,
      #0000FE 360deg);
  animation: pulse-border-spin 6s linear infinite, pulse-border-pulse 2.4s ease-in-out infinite;
  -webkit-mask: radial-gradient(circle, transparent 22px, black 24px, black 30px, transparent 32px);
          mask: radial-gradient(circle, transparent 22px, black 24px, black 30px, transparent 32px);
  filter: blur(0.3px);
}

@keyframes spin-slow { to { transform: rotate(360deg); } }
.spin-slow { animation: spin-slow 20s linear infinite; }

/* Generic reveal */
@keyframes fadeup { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
.reveal-in > * { animation: fadeup .8s cubic-bezier(.2,.7,.2,1) both; }
.reveal-in > *:nth-child(1) { animation-delay: .05s; }
.reveal-in > *:nth-child(2) { animation-delay: .18s; }
.reveal-in > *:nth-child(3) { animation-delay: .32s; }
.reveal-in > *:nth-child(4) { animation-delay: .46s; }

/* Hairline */
.hairline { border-color: rgba(255,255,255,0.12); }

/* Scroll cue arrow — gentle bob */
@keyframes scroll-cue-bob {
  0%, 100% { transform: translateY(0); opacity: .85; }
  50%      { transform: translateY(4px); opacity: 1; }
}
.scroll-cue-arrow {
  animation: scroll-cue-bob 2s cubic-bezier(.4,.0,.2,1) infinite;
}

/* Hide scrollbars on the proximity hero container only */
section[data-section] { position: relative; }

/* Tasteful scrollbar */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #1a1a26; border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }