/* ----------------- RESET ----------------- */

*,
*::before,
*::after {

  margin: 0;
  padding: 0;

  box-sizing: border-box;

}

/* ----------------- HTML ----------------- */

html {

}

/* ----------------- BODY ----------------- */

body {

  background: var(--color-navy);

  color: var(--color-white);

  font-family: var(--font-body);

  font-size: 16px;

  line-height: 1.6;

  overflow-x: hidden;

  -webkit-font-smoothing: antialiased;

}

/* ----------------- TYPOGRAPHY ----------------- */

h1,
h2,
h3,
h4,
h5,
h6 {

  font-family: var(--font-heading);

  font-weight: 600;

  line-height: 1.1;

}

p {

  color: var(--color-gray-light);

  line-height: 1.95;

}

/* ----------------- LINKS ----------------- */

a {

  color: inherit;

  text-decoration: none;

}

/* ----------------- LISTS ----------------- */

ul {

  list-style: none;

}

/* ----------------- IMAGES ----------------- */

img {

  max-width: 100%;

  display: block;

}

/* ----------------- BUTTONS ----------------- */

button {

  border: none;

  background: none;

  cursor: pointer;

  font-family: inherit;

}

/* ----------------- SELECTION ----------------- */

::selection {

  background: var(--color-gold);

  color: var(--color-navy);

}

/* ----------------- SCROLLBAR ----------------- */

::-webkit-scrollbar {

  width: 10px;

}

::-webkit-scrollbar-track {

  background: var(--color-navy);

}

::-webkit-scrollbar-thumb {

  background: rgba(201,168,76,0.35);

}

::-webkit-scrollbar-thumb:hover {

  background: rgba(201,168,76,0.55);

}




/* ----------------- GLOBAL ATMOSPHERE ----------------- */

body::before {

  content: '';

  position: fixed;

  inset: 0;

  background:

    radial-gradient(
      circle at top left,
      rgba(201,168,76,0.045),
      transparent 28%
    ),

    radial-gradient(
      circle at bottom right,
      rgba(30,51,80,0.22),
      transparent 34%
    );

  pointer-events: none;

  z-index: -2;

}

/* ----------------- NOISE LAYER ----------------- */

body::after {

  content: '';

  position: fixed;

  inset: 0;

  background-image:
    url("https://www.transparenttextures.com/patterns/asfalt-light.png");

  opacity: 0.025;

  pointer-events: none;

  z-index: -1;

}


/* ----------------- SCROLL REFINEMENT ----------------- */

html {

  scroll-padding-top: 140px;

}

body {

  overscroll-behavior-y: none;

}


/* ----------------- TYPOGRAPHY RENDERING ----------------- */

html {

  -webkit-font-smoothing: antialiased;

  -moz-osx-font-smoothing: grayscale;

  text-rendering: optimizeLegibility;

}

/* ----------------- IMAGE RENDERING ----------------- */

img {

  image-rendering: auto;

}

/* ----------------- SELECTION ----------------- */

::selection {

  background:
    rgba(201,168,76,0.28);

  color: var(--color-white);

}


/* ----------------- INITIAL CINEMATIC LOAD ----------------- */

body {

  opacity: 0;

  animation:
    pageEntrance 1.2s ease forwards;

}

@keyframes pageEntrance {

  from {

    opacity: 0;

  }

  to {

    opacity: 1;

  }

}