/* src/styles/base.css */
html { font-size: 62.5%; -webkit-font-smoothing: antialiased; background: #000; }
html.lenis, html.lenis body { height: auto; }
body {
  margin: 0;
  background: var(--bg-body);
  color: var(--text-body);
  font-family: "Satoshi", system-ui, sans-serif !important;
  font-size: 1.7rem;
  line-height: 1.6;
  overflow-x: hidden;
}
h1, h2, h3, h4, button, input, select, textarea { font-family: "Satoshi", system-ui, sans-serif !important; }
h1, h2, h3, h4 { color: var(--text-title); font-weight: 500; letter-spacing: -0.03em; line-height: 1.05; margin: 0; }
p { margin: 0; }
a { color: inherit; text-decoration: none; }
::selection { background: var(--primary); color: #fff; }

/* static glow fallback: painted by CSS on first frame, canvas fades in over it */
body::before {
  content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(60% 55% at 30% 25%, hsla(214,95%,62%,.42), transparent 70%),
    radial-gradient(50% 45% at 75% 60%, hsla(200,95%,62%,.26), transparent 70%),
    radial-gradient(60% 60% at 50% 90%, hsla(230,95%,62%,.22), transparent 70%);
}
#glow-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; image-rendering: auto; transform: translateZ(0); }
html.glow-ready #glow-canvas { opacity: 1; }
html.glow-ready body::before { opacity: 0; transition: opacity 1.2s ease; }
main, header, footer { position: relative; z-index: 1; }

/* preloader: only shown when JS is confirmed, removed by motion.js */
#preloader { display: none; position: fixed; inset: 0; z-index: 1000; background: #000; align-items: center; justify-content: center; flex-direction: column; gap: 28px; }
html.js #preloader { display: flex; }
html.loaded #preloader { pointer-events: none; }
.preloader-logo { height: 26px; width: auto; opacity: .9; filter: drop-shadow(0 0 24px rgba(59,139,255,.6)); }
.preloader-bar { width: 120px; height: 2px; background: rgba(255,255,255,.1); border-radius: 2px; overflow: hidden; }
.preloader-bar i { display: block; height: 100%; width: 40%; background: var(--primary); border-radius: 2px; animation: pl-slide 1.1s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes pl-slide { 0% { transform: translateX(-120%); } 100% { transform: translateX(320%); } }

/* reveal defaults, only once JS is confirmed running */
html.js:not(.reduce-motion) [data-reveal] { opacity: 0; transform: translateY(24px); }
html.js:not(.reduce-motion) [data-split] { visibility: hidden; }
html.js:not(.reduce-motion) [data-split].ready { visibility: visible; }

/* hero video: poster img sits on top with the same transform, fades out when the video plays */
.hero-media { background: #000; }

/* client logo marquee: sizing lives in the site stylesheet */

/* glass: real backdrop blur only on small, few elements (nav, pills); large cards get a solid translucent surface */
.glass {
  position: relative;
  background: rgba(14,17,26,0.72);
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.12), 0 20px 60px -30px rgba(59,139,255,0.35);
}
.nav-bar.glass, .hero-tag.glass, .work-pill.glass {
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: radial-gradient(600px circle at var(--mx, 50%) var(--my, 0%), rgba(255,255,255,0.10), transparent 40%);
  opacity: 0; transition: opacity .4s ease;
}
.glass:hover::before { opacity: 1; }