/*! File name: loader.css
 * ------------------------------------------------
 *
 * ------------------------------------------------
 * Table of Contents
 * ------------------------------------------------
 *  01. Loader Styles
 * ------------------------------------------------
 * Table of Contents End
 * ------------------------------------------------ */
:root {
  --_size: 1.8rem;
  --_font-default: "Funnel Sans", sans-serif;
  --_font-accent: "Funnel Display", sans-serif;
  --_radius-s: 1rem;
  --_radius-m: 1.6rem;
  --_radius-pt-m: 1.6rem;
  --_radius-l: 3.8rem;
  --_radius-xl: 6rem;
  --_animspeed-fast: 0.1s;
  --_animspeed-medium: 0.3s;
  --_animspeed-slow: 0.6s;
  --_animbezier: cubic-bezier(0.23, 0.65, 0.74, 1.09);
  /* light color scheme */
  --base--light: #FAF7F6;
  --base-rgb--light: 250, 247, 246;
  --base-tint--light: #FFFFFF;
  --base-shade--light: #e0dddb;
  --base-opp--light: #161616;
  --base-opp-tint--light: #1C1C1C;
  --accent--light: #9F8BE7;
  --accent-rgb--light: 159, 139, 231;
  --additional--light: #DDF160;
  --additional-rgb--light: 221, 241, 96;
  --neutral-transparent--light: rgba(255, 255, 255, 0.3);
  --st-bright--light: #161616;
  --st-medium--light: #7C7C7C;
  --st-muted--light: #E0DDDB;
  --st-opp-bright--light: #FFFFFF;
  --fw-regular--light: 400;
  --fw-medium--light: 600;
  --fw-semibold--light: 700;
  --fw-bold--light: 800;
  --fw-regular-opp--light: 300;
  --fw-medium-opp--light: 500;
  --t-bright--light: #161616;
  --t-medium--light: #303030;
  --t-muted--light: #585858;
  --t-muted-extra--light: #B2AEAD;
  --t-opp-bright--light: #FFFFFF;
  --t-opp-medium--light: #ACACAC;
  --t-opp-muted--light: #838383;
  --bg-demo-screen-01--light: url(../img/demo/screens/01.webp);
  --bg-demo-screen-02--light: url(../img/demo/screens/02.webp);
  --bg-demo-screen-03--light: url(../img/demo/screens/03.webp);
  --bg-demo-screen-04--light: url(../img/demo/screens/04.webp);
  --bg-demo-screen-05--light: url(../img/demo/screens/05.webp);
  --bg-demo-screen-06--light: url(../img/demo/screens/06.webp);
  --bg-demo-screen-07--light: url(../img/demo/screens/07.webp);
  --bg-demo-screen-08--light: url(../img/demo/screens/08.webp);
  --bg-demo-screen-09--light: url(../img/demo/screens/09.webp);
  /* dark color scheme */
  --base--dark: #161616;
  --base-rgb--dark: 22, 22, 22;
  --base-tint--dark: #1C1C1C;
  --base-shade--dark: #0a0a0a;
  --base-opp--dark: #FAF7F6;
  --base-opp-tint--dark: #ffffff;
  --accent--dark: #DDF160;
  --accent-rgb--dark: 221, 241, 96;
  --additional--dark: #9F8BE7;
  --additional-rgb--dark: 159, 139, 231;
  --neutral-transparent--dark: rgba(0, 0, 0, 0.3);
  --st-bright--dark: #FFFFFF;
  --st-medium--dark: #646464;
  --st-muted--dark: #252525;
  --st-opp-bright--dark: #0f0f0f;
  --fw-regular--dark: 300;
  --fw-medium--dark: 500;
  --fw-semibold--dark: 600;
  --fw-bold--dark: 700;
  --fw-regular-opp--dark: 400;
  --fw-medium-opp--dark: 600;
  --t-bright--dark: #FFFFFF;
  --t-medium--dark: #ACACAC;
  --t-muted--dark: #838383;
  --t-muted-extra--dark: #535151;
  --t-opp-bright--dark: #161616;
  --t-opp-medium--dark: #303030;
  --t-opp-muted--dark: #969696;
  --bg-demo-screen-01--dark: url(../img/demo/screens/01-d.webp);
  --bg-demo-screen-02--dark: url(../img/demo/screens/02-d.webp);
  --bg-demo-screen-03--dark: url(../img/demo/screens/03-d.webp);
  --bg-demo-screen-04--dark: url(../img/demo/screens/04-d.webp);
  --bg-demo-screen-05--dark: url(../img/demo/screens/05-d.webp);
  --bg-demo-screen-06--dark: url(../img/demo/screens/06-d.webp);
  --bg-demo-screen-07--dark: url(../img/demo/screens/07-d.webp);
  --bg-demo-screen-08--dark: url(../img/demo/screens/08-d.webp);
  --bg-demo-screen-09--dark: url(../img/demo/screens/09-d.webp);
  /* permanent colors */
  --pt-base: #FFFFFF;
  --pt-base-dark: #161616;
  --pt-t-light-bright: #FFFFFF;
  --pt-t-dark-bright: #161616;
  --pt-st-light-bright: #FFFFFF;
  --pt-st-dark-bright: #161616;
  --pt-purple-rgb: 159, 139, 231;
  --pt-purple-dark-rgb: 33, 10, 113;
  /* neutral colors */
  --nl-white: #ffffff;
  --nl-black: #000000;
}

@media only screen and (min-width: 768px) {
  :root {
    --_radius-m: 2.6rem;
    --_radius-l: 5rem;
    --_radius-xl: 8rem;
  }
}

@media only screen and (min-width: 1200px) {
  :root {
    --_radius-xl: 8rem;
  }
}

/* defaults */
@media (prefers-color-scheme: light) {
  :root {
    --base: var(--base--light);
    --base-rgb: var(--base-rgb--light);
    --base-tint: var(--base-tint--light);
    --base-shade: var(--base-shade--light);
    --base-opp: var(--base-opp--light);
    --base-opp-tint: var(--base-opp-tint--light);
    --accent: var(--accent--light);
    --accent-rgb: var(--accent-rgb--light);
    --additional: var(--additional--light);
    --additional-rgb: var(--additional-rgb--light);
    --neutral-transparent: var(--neutral-transparent--light);
    --st-bright: var(--st-bright--light);
    --st-medium: var(--st-medium--light);
    --st-muted: var(--st-muted--light);
    --st-opp-bright: var(--st-opp-bright--light);
    --fw-regular: var(--fw-regular--light);
    --fw-medium: var(--fw-medium--light);
    --fw-semibold: var(--fw-semibold--light);
    --fw-bold: var(--fw-bold--light);
    --fw-regular-opp: var(--fw-regular-opp--light);
    --fw-medium-opp: var(--fw-medium-opp--light);
    --t-bright: var(--t-bright--light);
    --t-medium: var(--t-medium--light);
    --t-muted: var(--t-muted--light);
    --t-muted-extra: var(--t-muted-extra--light);
    --t-opp-bright: var(--t-opp-bright--light);
    --t-opp-medium: var(--t-opp-medium--light);
    --t-opp-muted: var(--t-opp-muted--light);
    --bg-demo-screen-01: var(--bg-demo-screen-01--light);
    --bg-demo-screen-02: var(--bg-demo-screen-02--light);
    --bg-demo-screen-03: var(--bg-demo-screen-03--light);
    --bg-demo-screen-04: var(--bg-demo-screen-04--light);
    --bg-demo-screen-05: var(--bg-demo-screen-05--light);
    --bg-demo-screen-06: var(--bg-demo-screen-06--light);
    --bg-demo-screen-07: var(--bg-demo-screen-07--light);
    --bg-demo-screen-08: var(--bg-demo-screen-08--light);
    --bg-demo-screen-09: var(--bg-demo-screen-09--light);
  }
}

@media (prefers-color-scheme: dark) {
  :root {
    --base: var(--base--dark);
    --base-rgb: var(--base-rgb--dark);
    --base-tint: var(--base-tint--dark);
    --base-shade: var(--base-shade--dark);
    --base-opp: var(--base-opp--dark);
    --base-opp-tint: var(--base-opp-tint--dark);
    --accent: var(--accent--dark);
    --accent-rgb: var(--accent-rgb--dark);
    --additional: var(--additional--dark);
    --additional-rgb: var(--additional-rgb--dark);
    --neutral-transparent: var(--neutral-transparent--dark);
    --st-bright: var(--st-bright--dark);
    --st-medium: var(--st-medium--dark);
    --fw-semibold: var(--fw-semibold--dark);
    --st-muted: var(--st-muted--dark);
    --st-opp-bright: var(--st-opp-bright--dark);
    --fw-regular: var(--fw-regular--dark);
    --fw-medium: var(--fw-medium--dark);
    --fw-bold: var(--fw-bold--dark);
    --fw-regular-opp: var(--fw-regular-opp--dark);
    --fw-medium-opp: var(--fw-medium-opp--dark);
    --t-bright: var(--t-bright--dark);
    --t-medium: var(--t-medium--dark);
    --t-muted: var(--t-muted--dark);
    --t-muted-extra: var(--t-muted-extra--dark);
    --t-opp-bright: var(--t-opp-bright--dark);
    --t-opp-medium: var(--t-opp-medium--dark);
    --t-opp-muted: var(--t-opp-muted--dark);
    --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
    --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
    --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
    --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
    --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
    --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
    --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
    --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
    --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
  }
}

[color-scheme=light] {
  --base: var(--base--light);
  --base-rgb: var(--base-rgb--light);
  --base-tint: var(--base-tint--light);
  --base-shade: var(--base-shade--light);
  --base-opp: var(--base-opp--light);
  --base-opp-tint: var(--base-opp-tint--light);
  --accent: var(--accent--light);
  --accent-rgb: var(--accent-rgb--light);
  --additional: var(--additional--light);
  --additional-rgb: var(--additional-rgb--light);
  --neutral-transparent: var(--neutral-transparent--light);
  --st-bright: var(--st-bright--light);
  --st-medium: var(--st-medium--light);
  --st-muted: var(--st-muted--light);
  --st-opp-bright: var(--st-opp-bright--light);
  --fw-regular: var(--fw-regular--light);
  --fw-medium: var(--fw-medium--light);
  --fw-semibold: var(--fw-semibold--light);
  --fw-bold: var(--fw-bold--light);
  --fw-regular-opp: var(--fw-regular-opp--light);
  --fw-medium-opp: var(--fw-medium-opp--light);
  --t-bright: var(--t-bright--light);
  --t-medium: var(--t-medium--light);
  --t-muted: var(--t-muted--light);
  --t-muted-extra: var(--t-muted-extra--light);
  --t-opp-bright: var(--t-opp-bright--light);
  --t-opp-medium: var(--t-opp-medium--light);
  --t-opp-muted: var(--t-opp-muted--light);
  --bg-demo-screen-01: var(--bg-demo-screen-01--light);
  --bg-demo-screen-02: var(--bg-demo-screen-02--light);
  --bg-demo-screen-03: var(--bg-demo-screen-03--light);
  --bg-demo-screen-04: var(--bg-demo-screen-04--light);
  --bg-demo-screen-05: var(--bg-demo-screen-05--light);
  --bg-demo-screen-06: var(--bg-demo-screen-06--light);
  --bg-demo-screen-07: var(--bg-demo-screen-07--light);
  --bg-demo-screen-08: var(--bg-demo-screen-08--light);
  --bg-demo-screen-09: var(--bg-demo-screen-09--light);
}

[color-scheme=dark] {
  --base: var(--base--dark);
  --base-rgb: var(--base-rgb--dark);
  --base-tint: var(--base-tint--dark);
  --base-shade: var(--base-shade--dark);
  --base-opp: var(--base-opp--dark);
  --base-opp-tint: var(--base-opp-tint--dark);
  --accent: var(--accent--dark);
  --accent-rgb: var(--accent-rgb--dark);
  --additional: var(--additional--dark);
  --additional-rgb: var(--additional-rgb--dark);
  --neutral-transparent: var(--neutral-transparent--dark);
  --st-bright: var(--st-bright--dark);
  --st-medium: var(--st-medium--dark);
  --st-muted: var(--st-muted--dark);
  --st-opp-bright: var(--st-opp-bright--dark);
  --fw-regular: var(--fw-regular--dark);
  --fw-medium: var(--fw-medium--dark);
  --fw-semibold: var(--fw-semibold--dark);
  --fw-bold: var(--fw-bold--dark);
  --fw-regular-opp: var(--fw-regular-opp--dark);
  --fw-medium-opp: var(--fw-medium-opp--dark);
  --t-bright: var(--t-bright--dark);
  --t-medium: var(--t-medium--dark);
  --t-muted: var(--t-muted--dark);
  --t-muted-extra: var(--t-muted-extra--dark);
  --t-opp-bright: var(--t-opp-bright--dark);
  --t-opp-medium: var(--t-opp-medium--dark);
  --t-opp-muted: var(--t-opp-muted--dark);
  --bg-demo-screen-01: var(--bg-demo-screen-01--dark);
  --bg-demo-screen-02: var(--bg-demo-screen-02--dark);
  --bg-demo-screen-03: var(--bg-demo-screen-03--dark);
  --bg-demo-screen-04: var(--bg-demo-screen-04--dark);
  --bg-demo-screen-05: var(--bg-demo-screen-05--dark);
  --bg-demo-screen-06: var(--bg-demo-screen-06--dark);
  --bg-demo-screen-07: var(--bg-demo-screen-07--dark);
  --bg-demo-screen-08: var(--bg-demo-screen-08--dark);
  --bg-demo-screen-09: var(--bg-demo-screen-09--dark);
}

/* ------------------------------------------------*/
/* Loader Styles Start */
/* ------------------------------------------------*/
/* While the loader is up, freeze the page so the visitor can't scroll past the
   hero (Lenis is paused in JS; this also blocks native scrollbar/keyboard). */
html.loader-active,
html.loader-active body {
  overflow: hidden !important;
  height: 100%;
}

.loader-container {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1000;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.5s ease, visibility 0.5s ease;
  pointer-events: all;
}

.loader-container.loaded {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-curtain {
  position: absolute;
  top: 0;
  width: 50%;
  height: 100%;
  background-color: var(--base);
  z-index: -1;
  will-change: transform;
}

.loader-curtain-left {
  left: 0;
  transform-origin: left center;
}

.loader-curtain-right {
  right: 0;
  transform-origin: right center;
}

.main {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loaders,
.loadersB {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

.loader-item {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: var(--base-shade);
  /* Adapted for theme */
}

.loader-item:after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 1.15em;
  height: 5em;
  background: var(--base-shade);
  border-radius: 50px;
  border: 1px solid var(--st-muted);
  box-shadow:
    inset 5px 5px 15px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.05);
  mask-image: linear-gradient(to bottom,
      black calc(100% - 48px),
      transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom,
      black calc(100% - 48px),
      transparent 100%);
}

.loader-item::before {
  content: "";
  position: absolute;
  bottom: 0;
  right: 0;
  width: 1.15em;
  height: 4.5em;
  background: var(--base-shade);
  border-radius: 50px;
  border: 1px solid var(--st-muted);
  box-shadow:
    inset 5px 5px 15px rgba(0, 0, 0, 0.2),
    inset -5px -5px 15px rgba(255, 255, 255, 0.05);
  mask-image: linear-gradient(to top,
      black calc(100% - 48px),
      transparent 100%);
  -webkit-mask-image: linear-gradient(to top,
      black calc(100% - 48px),
      transparent 100%);
}

.loaderA {
  position: absolute;
  width: 1.15em;
  height: 13em;
  border-radius: 50px;
  background: transparent;
}

.ball0,
.ball1,
.ball2,
.ball3,
.ball4,
.ball5,
.ball6,
.ball7,
.ball8,
.ball9 {
  width: 1.15em;
  height: 1.15em;
  box-shadow:
    rgba(0, 0, 0, 0.17) 0px -10px 10px 0px inset,
    rgba(0, 0, 0, 0.15) 0px -15px 15px 0px inset,
    rgba(0, 0, 0, 0.1) 0px -40px 20px 0px inset,
    rgba(0, 0, 0, 0.06) 0px 2px 1px,
    rgba(0, 0, 0, 0.09) 0px 4px 2px,
    rgba(0, 0, 0, 0.09) 0px 8px 4px,
    rgba(0, 0, 0, 0.09) 0px 16px 8px,
    rgba(0, 0, 0, 0.09) 0px 32px 16px,
    0px -1px 15px -8px rgba(0, 0, 0, 0.09);
  border-radius: 50%;
  transition: transform 800ms cubic-bezier(1, -0.4, 0, 1.4);
  background-color: var(--accent);
  /* Using theme accent color */
  animation: 3.63s loaderMove ease-in-out infinite;
}

.loader-item:nth-child(2) {
  transform: rotate(20deg);
}

.loader-item:nth-child(3) {
  transform: rotate(40deg);
}

.loader-item:nth-child(4) {
  transform: rotate(60deg);
}

.loader-item:nth-child(5) {
  transform: rotate(80deg);
}

.loader-item:nth-child(6) {
  transform: rotate(100deg);
}

.loader-item:nth-child(7) {
  transform: rotate(120deg);
}

.loader-item:nth-child(8) {
  transform: rotate(140deg);
}

.loader-item:nth-child(9) {
  transform: rotate(160deg);
}

.loaderA:nth-child(2) {
  transform: rotate(20deg);
}

.loaderA:nth-child(3) {
  transform: rotate(40deg);
}

.loaderA:nth-child(4) {
  transform: rotate(60deg);
}

.loaderA:nth-child(5) {
  transform: rotate(80deg);
}

.loaderA:nth-child(6) {
  transform: rotate(100deg);
}

.loaderA:nth-child(7) {
  transform: rotate(120deg);
}

.loaderA:nth-child(8) {
  transform: rotate(140deg);
}

.loaderA:nth-child(9) {
  transform: rotate(160deg);
}

.ball1 {
  animation-delay: 0.2s;
}

.ball2 {
  animation-delay: 0.4s;
}

.ball3 {
  animation-delay: 0.6s;
}

.ball4 {
  animation-delay: 0.8s;
}

.ball5 {
  animation-delay: 1s;
}

.ball6 {
  animation-delay: 1.2s;
}

.ball7 {
  animation-delay: 1.4s;
}

.ball8 {
  animation-delay: 1.6s;
}

.ball9 {
  animation-delay: 1.8s;
}

@keyframes loaderMove {
  0% {
    transform: translateY(0em);
  }

  50% {
    transform: translateY(12em);
  }

  100% {
    transform: translateY(0em);
  }
}

/* ------------------------------------------------*/
/* Loader Styles End */
/* ------------------------------------------------*/