@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@400;700;900&family=Sora:wght@300;400;500;600;700;800&display=swap');

:root {
  --background: #ffffff;
  --foreground: #0A192F;
  --font-sans: 'Sora', sans-serif;
  --font-serif: 'Merriweather', serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #050B14;
    --foreground: #F5F5F5;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: var(--font-sans);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

h1 { font-family: var(--font-serif); font-weight: 900; letter-spacing: -0.04em; }
h2 { font-family: var(--font-serif); font-weight: 900; letter-spacing: -0.02em; }
h3, h4, h5, h6, p, span, a, button { font-family: var(--font-sans); }

.industrial-cut { clip-path: polygon(0 0, 100% 0, 100% 92%, 96% 100%, 0 100%); }
.industrial-cut-reverse { clip-path: polygon(4% 0, 100% 0, 100% 100%, 0 100%, 0 8%); }
.bg-industrial-grid { background-color: transparent; }
.glass-navy {
  background: rgba(10, 25, 47, 0.98);
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  transition: all 0.3s ease-in-out;
}

* {
  transition-property: background-color, border-color, color, opacity, transform;
  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
  transition-duration: 300ms;
}

/* Custom Scrollbar */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--background); }
::-webkit-scrollbar-thumb { background: #D11218; }
::-webkit-scrollbar-thumb:hover { background: #a50e13; }

/* Modal and Feed Utilities */
[x-cloak] { display: none !important; }

/* Marquee Animation */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  animation: marquee 30s linear infinite;
}

/* ============================================================
   DYNAMIC SITE BACKGROUND
   Pure-CSS layered geometric system — no images, no network.
   Layer 1: Warm off-white base (#f8f8f6)
   Layer 2: Animated fine dot grid (radial-gradient)
   Layer 3: Subtle diagonal red accent hatch lines
   Layer 4: Slow drifting radial spotlight glow (brand-red tint)
   ============================================================ */

@keyframes spotlight-drift {
  0%   { background-position: 0% 0%;    }
  25%  { background-position: 100% 0%;  }
  50%  { background-position: 100% 100%;}
  75%  { background-position: 0% 100%;  }
  100% { background-position: 0% 0%;    }
}

@keyframes grid-pulse {
  0%, 100% { opacity: 0.6; }
  50%       { opacity: 1.0; }
}

.site-bg {
  background-color: #f8f8f6;
  position: relative;
  isolation: isolate;
}

/* Dot grid layer */
.site-bg::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background-image: radial-gradient(circle, rgba(17,17,17,0.065) 1px, transparent 1px);
  background-size: 26px 26px;
  animation: grid-pulse 8s ease-in-out infinite;
}

/* Diagonal hatch + drifting spotlight */
.site-bg::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(
      -50deg,
      transparent 0px,
      transparent 58px,
      rgba(209, 18, 24, 0.022) 58px,
      rgba(209, 18, 24, 0.022) 59px
    ),
    radial-gradient(
      ellipse 90% 70% at 70% 20%,
      rgba(209, 18, 24, 0.05) 0%,
      transparent 65%
    );
  background-size: 100% 100%, 300% 300%;
  animation: spotlight-drift 20s ease-in-out infinite;
}

/* ============================================================
   SHAPE UTILITIES (Business Card Aesthetic)
   ============================================================ */
.shape-right     { clip-path: polygon(25% 0%, 100% 0%, 100% 100%, 0% 100%, 15% 50%); }
.shape-triangle  { clip-path: polygon(0 100%, 100% 100%, 50% 0); }
.shape-card-left { clip-path: polygon(0 0, 100% 0, 75% 100%, 0% 100%); }
.shape-slash     { clip-path: polygon(0 0, 90% 0, 100% 100%, 10% 100%); }

/* Light glass navbar */
.glass-light {
  background: rgba(248, 248, 246, 0.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(17,17,17,0.06);
  box-shadow: 0 1px 24px rgba(17,17,17,0.06);
}