/* =======================
Font Family area
======================= */

/* CODE | font family */
@font-face {
  font-family: "code-regular";
  src: url("/assets/fonts/code/Coda-Regular.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "code-extrabold";
  src: url("/assets/fonts/code/Coda-ExtraBold.ttf") format("truetype");
  font-display: swap;
}

/* Termina | font family */
@font-face {
  font-family: "termina-200";
  src: url("/assets/fonts/termina/TerminaTest-Thin.otf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "termina-300";
  src: url("/assets/fonts/termina/TerminaTest-Light.otf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "termina-400";
  src: url("/assets/fonts/termina/TerminaTest-Regular.otf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "termina-500";
  src: url("/assets/fonts/termina/TerminaTest-Medium.otf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "termina-600";
  src: url("/assets/fonts/termina/TerminaTest-Demi.otf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "termina-700";
  src: url("/assets/fonts/termina/TerminaTest-Bold.otf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "termina-800";
  src: url("/assets/fonts/termina/TerminaTest-Heavy.otf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "termina-900";
  src: url("/assets/fonts/termina/TerminaTest-Black.otf") format("truetype");
  font-display: swap;
}

/* Other | Font Family */
@font-face {
  font-family: "jetbrains";
  src: url("/assets/fonts/JetBrain.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "montserrat";
  src: url("/assets/fonts/Montserrat.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "nunito";
  src: url("/assets/fonts/Nunito.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "sanchez";
  src: url("/assets/common/fonts/Sanchez.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "anta";
  src: url("/assets/fonts/Anta.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "playfair";
  src: url("/assets/fonts/PlayfairDisplay.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "plusjak";
  src: url("/assets/fonts/PlusJakartaSans.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "georgia";
  src: url("/assets/fonts/NotoSansGeorgia.ttf") format("truetype");
  font-display: swap;
}

@font-face {
  font-family: "cormorant";
  src: url("/assets/fonts/Cormorant.ttf") format("truetype");
  font-display: swap;
}

:root {
  /* ==== font-family ==== */

  /* Code Font */
  --atf-font-coda-400: "code-regular", sans-serif;
  --atf-font-coda-900: "code-extrabold", sans-serif;

  /* Termina Font */
  --atf-font-termina-200: "termina-200", sans-serif;
  --atf-font-termina-300: "termina-300", sans-serif;
  --atf-font-termina-400: "termina-400", sans-serif;
  --atf-font-termina-500: "termina-500", sans-serif;
  --atf-font-termina-600: "termina-600", sans-serif;
  --atf-font-termina-700: "termina-700", sans-serif;
  --atf-font-termina-800: "termina-800", sans-serif;
  --atf-font-termina-900: "termina-900", sans-serif;

  /* Other font */
  --atf-font-jet: "jetbrains", sans-serif;
  --atf-font-monts: "montserrat", sans-serif;
  --atf-font-nuni: "nunito", sans-serif;
  --atf-font-sanc: "sanchez", sans-serif;
  --atf-font-nsg: "georgia", sans-serif;
  --atf-font-pj: "plusjak", sans-serif;
  --atf-font-pf: "playfair", sans-serif;
  --atf-font-anta: "anta", sans-serif;
  --atf-font-cormo: "cormorant", sans-serif;

  /* ==== color area ==== */

  /* main colors */
  --atf-primary: #0f0f0f;
  --atf-secondary: #1a60fe;
  --atf-accent: #014cf6;
  --atf-link: #0135ad;

  /* dark colors */
  --atf-black: #000000;
  --atf-darkest-blue: #00091e;
  --atf-darkest-blue-v1: #001033;
  --atf-darkest-blue-v2: #001647;

  /* light colors */
  --atf-white: #ffffff;
  --atf-OffWhite: #fafafa;
  --atf-semi-OffWhite: #faf9f673;
  --atf-text: #949494;

  /* notice colors */
  --atf-red: #c20000;
  --atf-green: #00991f;

  /* with transparency Color */
  --atf-semi-w-trans: rgb(255 255 255 / 12%);
  --atf-semi-w-trans-v1: rgb(255 255 255 / 20%);
  --atf-semi-black: rgb(0 0 0 / 55%);
  --atf-darkest-blue-semi-v2: #001b55b1;

  /* cursor  */
  --atf-semi-b: rgba(255, 255, 255, 0.12);
  --atf-semi-b-1: rgba(255, 255, 255, 0.05);
  --atf-semi-b-2: rgba(255, 255, 255, 0);
  --atf-cursor-ripple-border: rgba(255, 255, 255, 0.4);
  --atf-cursor-ripple-bg: rgba(255, 255, 255, 0.06);

  /* border */
  --atf-border: #3f3f3f;
  --atf-border-v1: #747474;
  --atf-border-d: #201f1f;

  /* box shadows */
  --atf-box-shadow:
    inset -4px 0px 7px 3px rgb(77 77 77 / 76%),
    inset 4px 7px 20px 0px rgb(12 12 12 / 60%);
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent !important;
  -webkit-touch-callout: none;
}

a,
button {
  -webkit-tap-highlight-color: transparent;
  outline: none;
}

a:focus,
a:focus-visible,
button:focus,
button:focus-visible {
  outline: none;
}

/* Base Body */
html,
body {
  overflow-x: hidden;
  overflow-y: auto;
}

body {
  min-height: 100vh;
  background-color: var(--atf-black);
  font-family: var(--atf-font-nuni);
  outline: none !important;
}

/* ============ 
LENIS FIX 
============  */
html.lenis,
html.lenis body {
  height: auto;
}

.lenis.lenis-smooth {
  scroll-behavior: auto !important;
}

/* ========================================
   CUSTOM NATIVE SCROLLBAR
======================================== */

html {
  scrollbar-width: thin;
  scrollbar-color: transparent transparent;
}

/* Chrome / Edge / Safari */

html::-webkit-scrollbar {
  width: 10px;
  height: 5px;
}

html::-webkit-scrollbar-track {
  background: transparent;
}

html::-webkit-scrollbar-thumb {
  background: transparent;
  border-radius: 100px;
}

/* Visible while scrolling */

html.is-scrolling {
  scrollbar-color: var(--atf-OffWhite) transparent;
}

html.is-scrolling::-webkit-scrollbar-thumb {
  background: var(--atf-OffWhite);
}

html.is-scrolling::-webkit-scrollbar-track {
  background: transparent;
}

/* ============ 
Custom Classes 
============  */
.cp {
  cursor: pointer;
}

.inner {
  width: clamp(280px, 95%, 1600px) !important;
}