:root {
  color-scheme: dark;

  /* ====================================================
     HOMEPAGE TYPOGRAPHY
     ==================================================== */
  --font-dm-sans: "DM Sans", "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-outfit: "Outfit", sans-serif;
  --font-rajdhani: "Rajdhani", "Barlow Condensed", sans-serif;
  --font-barlow-condensed: "Barlow Condensed", "Rajdhani", Impact, sans-serif;
  --font-bebas-neue: "Bebas Neue", "Barlow Condensed", "Rajdhani", Impact, sans-serif;
  --font-bangers: "Bangers", "Barlow Condensed", "Rajdhani", Impact, sans-serif;
  --font-caveat: "Caveat", cursive;
  --font-handwritten: "Caveat", "Comic Sans MS", cursive;
  --font-rock-salt: "Rock Salt", "Caveat", "Comic Sans MS", cursive;
  --font-editorial-serif: Georgia, serif;
  --font-formular: "Formular", "DM Sans", "Inter", "Helvetica Neue", Helvetica, Roboto, Arial, sans-serif;
  --font-formular-mono: "Formular", "DM Sans", "Inter", monospace;

  --ff-body: var(--font-dm-sans);
  --ff-display: var(--font-barlow-condensed);
  --ff-script: var(--font-caveat);
  --ff-formular: var(--font-formular);

  /* Backward-compatible aliases for the dark portfolio palette. */
  --purple: rgb(var(--theme-primary-rgb));
  --purple-light: rgb(var(--theme-primary-rgb));
  --purple-dark: rgb(var(--theme-primary-rgb));
  --bg: rgb(var(--theme-bg-rgb));
  --bg2: rgb(var(--theme-surface-rgb));
  --bg3: rgb(var(--theme-surface-raised-rgb));
  --text: rgb(var(--theme-text-rgb));
  --muted: rgb(var(--theme-text-rgb) / 0.35);
  --services-card-accent: rgb(var(--theme-primary-rgb));
  --services-card-accent-rgb: var(--theme-primary-rgb);

  --theme-bg-deep-rgb: 0 0 0;
  --theme-bg-rgb: 5 5 6;
  --theme-surface-rgb: 10 10 10;
  --theme-surface-raised-rgb: 16 16 17;
  --theme-ink-rgb: 8 8 10;

  /* White content palette. */
  --theme-text-rgb: 255 255 255;
  --theme-paper-rgb: 255 255 255;

  /* One unified purple accent. */
  --theme-primary-rgb: 117 46 255;

  --theme-blue-rgb: 23 76 255;
  --theme-shadow-rgb: 0 0 0;
}

@font-face {
  font-family: "Formular";
  src:
    url("../Assets/Fonts/Formular-Light.woff") format("woff"),
    url("../Assets/Fonts/Formular-Light.ttf") format("truetype");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Formular";
  src:
    url("../Assets/Fonts/Formular-Medium.woff") format("woff"),
    url("../Assets/Fonts/Formular-Medium.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Formular";
  src:
    url("../Assets/Fonts/Formular-Medium.woff") format("woff"),
    url("../Assets/Fonts/Formular-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Rock Salt";
  src: url("../Assets/Fonts/RockSalt-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}




*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--ff-body);
  overflow-x: hidden;
  min-height: 100vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
  width: 0;
  height: 0;
  display: none;
  background: transparent;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }
}

/* ======================================================
   CUSTOM APEX CURSOR (CENTERED SYMBOLS)
====================================================== */
.cursor-pointer {
  position: fixed;
  top: 0;
  left: 0;
  width: 64px;
  height: 64px;
  pointer-events: none;
  z-index: 100001;
  opacity: 0;
  transition: opacity 0.2s ease;
  will-change: transform, left, top;
  transform: translate(-20px, -19px);
}

.cursor-pointer.is-visible {
  opacity: 1;
}

.cursor-pointer.is-form-hidden {
  opacity: 0;
}

.cursor-pointer.is-hand {
  transform: translate(-29px, -19px);
}

.cursor-hover .cursor-pointer {
  transform: translate(-20px, -19px);
}

.cursor-hover .cursor-pointer.is-hand {
  transform: translate(-29px, -19px);
}

.anime-cursor-svg {
  width: 100%;
  height: 100%;
  display: block;
  overflow: hidden;
}

/* Hide default system cursor on desktop */
@media (pointer: fine) {

  body,
  a,
  button,
  .cv-sw-item,
  .logo-item,
  .header-toggle-btn,
  .service-box,
  .deck-card,
  .comment-nav-btn {
    cursor: none !important;
  }
}

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

  body,
  a,
  button {
    cursor: auto !important;
  }
}

/* ======================================================
   GLOBAL CINEMATIC FILM GRAIN
====================================================== */
@keyframes noise-anim {
  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, 15%);
  }

  80% {
    transform: translate(3%, 35%);
  }

  90% {
    transform: translate(-10%, 10%);
  }

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

.global-grain {
  position: fixed;
  top: -100%;
  left: -100%;
  width: 300%;
  height: 300%;
  z-index: 9990;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.7' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
  opacity: 0.045;
  animation: noise-anim 0.2s infinite;
  mix-blend-mode: overlay;
}