/* =====================================================
   THEME VARIABLES
===================================================== */
:root {
  /* Swapped for Light Mode */
  --color-white: 0 0 0;
  --color-black: 255 255 255;

  --color-bg: #f9fafb;
  --color-text: #050505;
  --color-sel-bg: #000000;
  --color-sel-text: #ffffff;

  --color-card-08: #ffffff;
  --color-card-07: #ffffff;
  --color-card-0b: #ffffff;
  --color-menu: #ffffff;
}

:root.dark {
  /* Default Dark Mode */
  --color-white: 255 255 255;
  --color-black: 0 0 0;

  --color-bg: #050505;
  --color-text: #ffffff;
  --color-sel-bg: #ffffff;
  --color-sel-text: #000000;

  --color-card-08: #080808;
  --color-card-07: #070707;
  --color-card-0b: #0b0b0b;
  --color-menu: #121212;
}

/* =====================================================
   GLOBAL
===================================================== */

html {
  scroll-behavior: smooth;
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  overflow-x: hidden;
}

::selection {
  background: var(--color-sel-bg);
  color: var(--color-sel-text);
}

a {
  -webkit-tap-highlight-color: transparent;
}

/* =====================================================
   BACKGROUND GRID
===================================================== */

.grid-background {
  background-image:
    linear-gradient(rgb(var(--color-white) / 0.045) 1px, transparent 1px),
    linear-gradient(90deg,
      rgb(var(--color-white) / 0.045) 1px,
      transparent 1px);

  background-size: 60px 60px;
}

/* =====================================================
   NOISE
===================================================== */

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.025;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
}

/* =====================================================
   OUTLINE TYPOGRAPHY
===================================================== */

.outline-text {
  color: transparent;
  -webkit-text-stroke: 1px rgb(var(--color-white) / 0.32);
  transition:
    -webkit-text-stroke 0.5s ease,
    color 0.5s ease;
}

.outline-text:hover {
  color: rgb(var(--color-white));
  -webkit-text-stroke: 1px rgb(var(--color-white));
}

/* =====================================================
   GRADIENT BORDER
===================================================== */

.gradient-border {
  position: relative;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg,
      rgb(var(--color-white) / 0.4),
      rgb(var(--color-white) / 0.03),
      rgb(var(--color-white) / 0.2));
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
}

/* =====================================================
   SCROLL REVEAL
===================================================== */

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

.reveal.animate-in {
  animation: revealAnimation 0.8s ease-out both;
}

@keyframes revealAnimation {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* =====================================================
   SPOTLIGHT
===================================================== */

.spotlight {
  background: radial-gradient(circle at var(--mouse-x, 50%) var(--mouse-y, 50%),
      rgb(var(--color-white) / 0.08),
      transparent 32%);
}

/* =====================================================
   CARD
===================================================== */

.premium-card {
  transition:
    transform 0.45s ease,
    border-color 0.45s ease,
    background 0.45s ease;
}

.premium-card:hover {
  transform: translateY(-6px);
  border-color: rgb(var(--color-white) / 0.28);
  background: rgb(var(--color-white) / 0.045);
}

/* =====================================================
   BUTTON
===================================================== */

.magnetic-button {
  transition:
    transform 0.25s ease,
    background 0.25s ease,
    color 0.25s ease;
}

.magnetic-button:hover {
  transform: translateY(-2px);
}

/* =====================================================
   FORM INPUT
===================================================== */

.input-dark {
  background: rgb(var(--color-white) / 0.03);
  border: 1px solid rgb(var(--color-white) / 0.1);
  color: rgb(var(--color-white));
  transition:
    border-color 0.3s ease,
    background 0.3s ease;
}

.input-dark:focus {
  outline: none;
  border-color: rgb(var(--color-white) / 0.3);
  background: rgb(var(--color-white) / 0.05);
}

.input-dark option {
  background-color: var(--color-card-0b);
  color: rgb(var(--color-white));
}

/* =====================================================
   MARQUEE
===================================================== */

.marquee-track {
  width: max-content;
}

/* =====================================================
   MOBILE MENU
===================================================== */

.mobile-menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition:
    opacity 0.3s ease,
    transform 0.3s ease,
    visibility 0.3s ease;
}

.mobile-menu.open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* =====================================================
   CURSOR
===================================================== */

.cursor-dot {
  position: fixed;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgb(var(--color-white));
  pointer-events: none;
  z-index: 200;
  transform: translate(-50%, -50%);
  mix-blend-mode: difference;
}

@media (max-width: 768px) {
  .cursor-dot {
    display: none;
  }
}

/* =====================================================
   HORIZONTAL LINE
===================================================== */

.section-line {
  height: 1px;
  background: linear-gradient(90deg,
      rgb(var(--color-white) / 0.25),
      transparent);
}

/* =====================================================
   NUMBER
===================================================== */

.giant-number {
  font-family: "Space Grotesk", sans-serif;
  font-size: clamp(4rem, 9vw, 8rem);
  font-weight: 700;
  letter-spacing: -0.07em;
  line-height: 0.8;
}

/* =====================================================
   THEME HELPER CLASSES
===================================================== */
.bg-card07 {
  background-color: var(--color-card-07) !important;
}

.bg-card08 {
  background-color: var(--color-card-08) !important;
}

.bg-card0b {
  background-color: var(--color-card-0b) !important;
}

.bg-menuBg\/95 {
  background-color: var(--color-menu) !important;
  backdrop-filter: blur(24px);
}

.theme-navbar {
  background-color: rgb(var(--color-black) / 0.8) !important;
}

.theme-navbar-scrolled {
  background-color: rgb(var(--color-black) / 0.95) !important;
}

.infinity-size {
  font-size: 1.5em;
  line-height: 0;
  display: inline-block;
  transform: translateY(0.04em);
}