@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Space+Mono:wght@400;700&family=Syne:wght@700;800&display=swap');

:root {
  --color-bg: #FFFFFF;
  --color-surface: #F8F9FA;
  --color-surface-2: #E8EAED;
  --color-primary: #4285F4;
  --color-gold: #4285F4;
  --color-gold-hover: #1A73E8;
  --color-gold-dim: rgba(66, 133, 244, 0.08);
  --color-text: #202124;
  --color-text-muted: #5F6368;
  --color-border: rgba(0, 0, 0, 0.08);

  --google-blue: #4285F4;
  --google-red: #EA4335;
  --google-yellow: #FBBC05;
  --google-green: #34A853;

  --font-display: 'Syne', sans-serif;
  --font-body: 'Inter', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 14px;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  border-color: var(--color-border);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--color-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--color-surface-2);
  border: 2px solid var(--color-bg);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--color-gold);
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-display);
  color: var(--color-text);
  tracking: -0.025em;
}

/* Glassmorphism Navigation */
.glass {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.06);
}

/* Film Grain Animation */
.grain {
  position: fixed;
  top: -50%;
  left: -50%;
  right: -50%;
  bottom: -50%;
  width: 200%;
  height: 200%;
  background: transparent url('https://grainy-gradients.vercel.app/noise.svg') repeat;
  opacity: 0.12;
  pointer-events: none;
  z-index: 100;
  animation: noise 0.2s infinite;
}

@keyframes noise {
  0% {
    transform: translate(0, 0)
  }

  10% {
    transform: translate(-5%, -5%)
  }

  20% {
    transform: translate(-10%, 5%)
  }

  30% {
    transform: translate(5%, -10%)
  }

  40% {
    transform: translate(-5%, 15%)
  }

  50% {
    transform: translate(-10%, 5%)
  }

  60% {
    transform: translate(15%, 0)
  }

  70% {
    transform: translate(0, 10%)
  }

  80% {
    transform: translate(-15%, 0)
  }

  90% {
    transform: translate(10%, 5%)
  }

  100% {
    transform: translate(5%, 0)
  }
}

/* Reveal Scroll Transitions Fallback (Active only if GSAP fails to load) */
.reveal {
  opacity: 0;
  transform: translateY(20px);
}

.no-gsap .reveal {
  transition: opacity 800ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Text Masking */
.text-mask {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}

/* Custom Cursor */
.cursor-dot {
  position: fixed;
  top: 0;
  left: 0;
  width: 6px;
  height: 6px;
  background-color: var(--color-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  display: none;
}

.cursor-outline {
  position: fixed;
  top: 0;
  left: 0;
  width: 32px;
  height: 32px;
  border: 1px solid var(--color-gold);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.3s, height 0.3s, background-color 0.3s;
  display: none;
}

@media (min-width: 768px) {

  .cursor-dot,
  .cursor-outline {
    display: block;
  }
}

.cursor-outline.hovered {
  width: 48px;
  height: 48px;
  background-color: var(--color-gold-dim);
}