/* VARS  */
:root {
  --transition: all 0.3s ease-out;
  --ease: cubic-bezier(0.625, 0.05, 0, 1);
  --swiper-transition: transform 0.8s cubic-bezier(0.075, 0.82, 0.165, 1);
  --font-180: clamp(100px, calc(16rem + 6px), 18rem);
  --font-90: clamp(50px, calc(8.5rem + 6px), 9rem);
  --font-25: clamp(15px, calc(2.1rem + 8px), 2.5rem);
  --font-24: clamp(13px, calc(2.3rem + 6px), 2.4rem);
  --font-22: clamp(13px, calc(2.1rem + 6px), 2.2rem);
  --font-20: clamp(12px, calc(1.8rem + 6px), 2rem);
  --font-50: clamp(30px, calc(4.5rem + 6px), 5rem);
  --font-45: clamp(25px, calc(4rem + 6px), 4.5rem);
  --font-35: clamp(20px, calc(3.8rem + 6px), 3.5rem);
  --font-112: clamp(80px, calc(11.2rem + 5px), 12.9rem);
  --font-40: clamp(20px, calc(3.6rem + 6px), 4rem);
}

/* CUSTOM RESET */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Futura";
  font-weight: 500;
  font-style: normal;
}

img,
video {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

picture {
  height: 100%;
}

button {
  background: transparent;
  border: none;
}

a {
  text-decoration: none;
  color: inherit;
}

li {
  list-style: none;
}

body {
  background: #171717;
}

/* RESPONSIVE */
html {
  font-size: clamp(8px, calc(10 * (calc(100vw + 2.1rem) / 1920)), 19px);
}

/* === LANDSCAPE === */
@media screen and (min-width: 1500px) and (max-width: 1600px) and (orientation: landscape) {
  html {
    font-size: clamp(7.5px, calc(10 * (calc(100vw + 2.1rem) / 1920)), 19px);
  }
}

@media screen and (min-width: 1300px) and (max-width: 1499px) and (orientation: landscape) {
  html {
    font-size: clamp(7px, calc(10 * (calc(100vw + 2.1rem) / 1920)), 19px);
  }
}

@media screen and (min-width: 1101px) and (max-width: 1299px) and (orientation: landscape) {
  html {
    font-size: clamp(6px, calc(10 * (calc(100vw + 2.1rem) / 1920)), 19px);
  }
}

@media screen and (max-width: 1100px) and (orientation: landscape) {
  html {
    font-size: calc(10 * (100vw / 1920));
  }
}

/* === MOBILE PORTRAIT === */
@media screen and (max-width: 481px) and (orientation: portrait) {
  html {
    font-size: calc(10 * (100vw / 375));
  }
}

/* === TABLET PORTRAIT=== */
@media screen and (min-width: 482px) and (max-width: 991px) and (orientation: portrait) {
  html {
    font-size: calc(10 * (100vw / 550));
  }
}

/* === DESKTOP PORTRAIT === */
@media screen and (min-width: 992px) and (orientation: portrait) {
  html {
    font-size: calc(10 * (100vw / 600));
  }
}

/* SROLLBAR */
::-webkit-scrollbar {
  display: none;
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5);
  border-radius: 4px;
}

::-webkit-scrollbar-track {
}

/*  SELECTION */
::selection {
  color: #009ca8;
  background-color: #fff;
}

/*  CLIP PATHS */
.clippy {
  position: absolute;
  top: -999px;
  left: -999px;
  width: 0;
  height: 0;
}

.overflow-wrapper {
  overflow: hidden;
  width: 100%;
  margin-inline: auto;
  max-width: 3440px;
}

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

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

.cursor {
  width: 19rem;
  height: 19rem;
  position: absolute;
  top: 0;
  left: 0;
  transform-origin: center;
  transition: all 0.6s cubic-bezier(0.2, 0.8, 0.4, 1);
  pointer-events: none;
  user-select: none;
  display: grid;
  grid-template-areas: "stack";
  place-items: center;
  opacity: 0;
  z-index: 10;
}

@media screen and (orientation: portrait) {
  .cursor {
    display: none;
  }
}

.cursor-inner-bg {
  grid-area: stack;
  background-color: #009ca8;
  width: 13.5rem;
  height: 13.5rem;
  transform: rotate(43.26deg);
}

.cursor .cursor-inner-text {
  position: relative;
  grid-area: stack;
  color: #fff;
  text-align: center;
  font-size: 1.8rem;
  line-height: normal;
  letter-spacing: 3.24px;
  width: fit-content;
  height: fit-content;
}