/* ==========================================
   ROOT
========================================== */

:root {

  --background: #050505;

  --white: #ffffff;

  --muted: #777777;

  --orange: #ff7200;
  --cyan: #90f1ef;
  --pink: #ffd6e0;
  --yellow: #ffef9f;
  --green: #c1fba4;
  --cream: #f5ffc6;
  --purple: #ab87ff;
  --purple2: #D6FF40;

}


/* ==========================================
   RESET
========================================== */

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


html {
  scroll-behavior: smooth;
}


body {

  min-height: 100vh;

  background: var(--background);

  color: var(--white);

  font-family: "Inter", sans-serif;

  overflow-x: hidden;

}


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


/* ==========================================
   LOADER SCREEN
========================================== */

.loader-screen {

  position: fixed;

  inset: 0;

  z-index: 99999;

  display: flex;

  flex-direction: column;

  align-items: center;

  justify-content: center;

  background: #050505;

  transition:
    opacity 0.8s ease,
    visibility 0.8s ease;

}


.loader-screen.hide {

  opacity: 0;

  visibility: hidden;

}


/* ==========================================
   7SP LOADER
========================================== */

.sp-loader {

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 2px;

}


/* ==========================================
   SVG LETTER
========================================== */

.loader-letter {

  width: clamp(65px, 10vw, 100px);

  height: clamp(65px, 10vw, 100px);

  overflow: visible;

}


.svg-letter {

  font-family: "Inter", sans-serif;

  font-size: 58px;

  font-weight: 900;

  fill: transparent;

  stroke-width: 2.5;

  stroke-linejoin: round;

  stroke-linecap: round;

  paint-order: stroke;

  stroke-dasharray: 360;

  stroke-dashoffset: 360;

}


/* ==========================================
   7 ANIMATION
========================================== */

.letter-seven .svg-letter {

  animation:
    drawLetter7 2s ease-in-out infinite,
    glow7 2s ease-in-out infinite;

}


@keyframes drawLetter7 {

  0% {

    stroke-dasharray: 0 1 359 0;

    stroke-dashoffset: 365;

  }

  50% {

    stroke-dasharray: 0 359 1 0;

    stroke-dashoffset: 180;

  }

  100% {

    stroke-dasharray: 359 1 0 0;

    stroke-dashoffset: 5;

  }

}


@keyframes glow7 {

  0%,
  100% {

    filter:
      drop-shadow(
        0 0 3px
        rgba(151, 59, 237, 0.3)
      );

  }

  50% {

    filter:
      drop-shadow(
        0 0 12px
        rgba(0, 124, 255, 0.7)
      );

  }

}


/* ==========================================
   S ANIMATION
========================================== */

.letter-s .svg-letter {

  animation:
    drawLetterS 2.2s ease-in-out infinite;

  animation-delay: 0.15s;

}


@keyframes drawLetterS {

  0% {

    stroke-dasharray: 0 1 359 0;

    stroke-dashoffset: 365;

    transform: rotate(0deg);

  }

  50% {

    stroke-dasharray: 0 359 1 0;

    stroke-dashoffset: 180;

    transform: rotate(4deg);

  }

  100% {

    stroke-dasharray: 359 1 0 0;

    stroke-dashoffset: 5;

    transform: rotate(0deg);

  }

}


/* ==========================================
   P ANIMATION
========================================== */

.letter-p .svg-letter {

  animation:
    drawLetterP 2s ease-in-out infinite;

  animation-delay: 0.3s;

}


@keyframes drawLetterP {

  0% {

    stroke-dasharray: 0 1 359 0;

    stroke-dashoffset: 365;

  }

  50% {

    stroke-dasharray: 0 359 1 0;

    stroke-dashoffset: 180;

  }

  100% {

    stroke-dasharray: 359 1 0 0;

    stroke-dashoffset: 5;

  }

}


/* ==========================================
   LOADER BRAND
========================================== */

.loader-name {

  margin-top: 30px;

  font-size: 14px;

  font-weight: 600;

  letter-spacing: 4px;

  color: #666666;

  text-transform: uppercase;

  opacity: 0;

  animation:
    loaderName 1s ease 0.8s forwards;

}


.loader-name span {

  color: var(--orange);

}


@keyframes loaderName {

  from {

    opacity: 0;

    transform: translateY(10px);

  }

  to {

    opacity: 1;

    transform: translateY(0);

  }

}


/* ==========================================
   LOADING TEXT
========================================== */

.loader-loading {

  display: flex;

  align-items: center;

  gap: 8px;

  margin-top: 18px;

  color: #444444;

  font-size: 9px;

  letter-spacing: 3px;

  text-transform: uppercase;

  opacity: 0;

  animation:
    loaderName 1s ease 1s forwards;

}


.loading-dot {

  width: 5px;

  height: 5px;

  border-radius: 50%;

  background: var(--orange);

  box-shadow:
    0 0 10px var(--orange);

  animation:
    loadingPulse 1s ease-in-out infinite;

}


@keyframes loadingPulse {

  0%,
  100% {

    opacity: 0.3;

    transform: scale(0.7);

  }

  50% {

    opacity: 1;

    transform: scale(1.2);

  }

}

/* ==========================================
   STOP LOADER ANIMATION
========================================== */

.loader-screen.complete .svg-letter {
  animation: none !important;
  transform: none !important;
}

.loader-screen.complete .loading-dot {
  animation: none !important;
  opacity: 1;
  transform: scale(1);
}


/* ==========================================
   NAVBAR
========================================== */

.navbar {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  z-index: 1000;

  padding: 20px 0;

}


.nav-container {

  width: min(1200px, 92%);

  margin: auto;

  display: flex;

  justify-content: flex-end;

}


/* ==========================================
   SOCIAL LINKS - RIGHT VERTICAL
========================================== */

.desktop-social {

  position: fixed;

  right: 110px;

  top: 50%;

  transform: translateY(-50%);

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 12px;

  z-index: 1000;

}


/* Individual icons */

.desktop-social a {

  width: 45px;

  height: 45px;

  display: flex;

  align-items: center;

  justify-content: center;

  border-radius: 50%;

  font-size: 20px;

  background: rgba(255, 255, 255, 0.04);

  backdrop-filter: blur(10px);

  border: 1px solid transparent;

  transition:
    color 0.3s ease,
    background 0.3s ease,
    border-color 0.3s ease,
    transform 0.3s ease,
    box-shadow 0.3s ease;

  animation: socialFloat 4s ease-in-out infinite;

}


/* Different timing for each icon */

.desktop-social a:nth-child(1) {
  animation-delay: 0s;
}

.desktop-social a:nth-child(2) {
  animation-delay: 0.15s;
}

.desktop-social a:nth-child(3) {
  animation-delay: 0.3s;
}

.desktop-social a:nth-child(4) {
  animation-delay: 0.45s;
}

.desktop-social a:nth-child(5) {
  animation-delay: 0.6s;
}


/* ==========================================
   FLOATING ANIMATION
========================================== */

@keyframes socialFloat {

  0%,
  100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-7px);

  }

}


/* ==========================================
   INSTAGRAM
========================================== */

.desktop-social a:nth-child(1) {

  color: #E4405F;

  background: rgba(228, 64, 95, 0.08);

  border-color: rgba(228, 64, 95, 0.18);

}

.desktop-social a:nth-child(1):hover {

  color: #fff;

  background: #E4405F;

  border-color: #E4405F;

  box-shadow:
    0 8px 25px rgba(228, 64, 95, 0.35);

  transform: translateY(-4px) scale(1.08);

}


/* ==========================================
   FACEBOOK
========================================== */

.desktop-social a:nth-child(2) {

  color: #1877F2;

  background: rgba(24, 119, 242, 0.08);

  border-color: rgba(24, 119, 242, 0.18);

}

.desktop-social a:nth-child(2):hover {

  color: #fff;

  background: #1877F2;

  border-color: #1877F2;

  box-shadow:
    0 8px 25px rgba(24, 119, 242, 0.35);

  transform: translateY(-4px) scale(1.08);

}


/* ==========================================
   X
========================================== */

.desktop-social a:nth-child(3) {

  color: #fff;

  background: rgba(255, 255, 255, 0.06);

  border-color: rgba(255, 255, 255, 0.12);

}

.desktop-social a:nth-child(3):hover {

  color:#000;

  background: #fff;

  border-color: #333;

  box-shadow:
    0 8px 25px rgba(255, 255, 255, 0.15);

  transform: translateY(-4px) scale(1.08);

}


/* ==========================================
   YOUTUBE
========================================== */

.desktop-social a:nth-child(4) {

  color: #FF0000;

  background: rgba(255, 0, 0, 0.08);

  border-color: rgba(255, 0, 0, 0.18);

}

.desktop-social a:nth-child(4):hover {

  color: #fff;

  background: #FF0000;

  border-color: #FF0000;

  box-shadow:
    0 8px 25px rgba(255, 0, 0, 0.35);

  transform: translateY(-4px) scale(1.08);

}


/* ==========================================
   LINKEDIN
========================================== */

.desktop-social a:nth-child(5) {

  color: #0A66C2;

  background: rgba(10, 102, 194, 0.08);

  border-color: rgba(10, 102, 194, 0.18);

}

.desktop-social a:nth-child(5):hover {

  color: #fff;

  background: #0A66C2;

  border-color: #0A66C2;

  box-shadow:
    0 8px 25px rgba(10, 102, 194, 0.35);

  transform: translateY(-4px) scale(1.08);

}


/* ==========================================
   MOBILE SOCIAL LINKS
========================================== */

@media (max-width: 600px) {

  .desktop-social {

    position: fixed;

    top: 70px;

    right: 50%;

    transform: translateX(50%);

    display: flex;

    flex-direction: row;

    align-items: center;

    justify-content: center;

    gap: 9px;

    width: 100%;

    z-index: 1000;

  }


  .desktop-social a {

    width: 45px;

    height: 45px;

    font-size: 19px;

  }

}
/* ==========================================
   HERO
========================================== */

.hero {

  min-height: 100vh;

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 80px 20px;

  text-align: center;

  position: relative;

  overflow: hidden;

}



/* ==========================================
   HERO CONTENT
========================================== */

.hero-content {

  position: relative;

  z-index: 2;

}


/* ==========================================
   BRAND
========================================== */

.brand {

  font-size:
    clamp(42px, 8vw, 45px);

  font-weight: 800;

  line-height: 1;

}


.orange {
  color: var(--orange);
  text-shadow:
    0 0 25px
    rgba(255, 114, 0, 0.3);
}
.cyan {
  color: var(--cyan);
  text-shadow:
    0 0 25px
    rgba(144, 241, 239, 0.3);
}
.pink {
  color: var(--pink);
  text-shadow:
    0 0 25px
    rgba(255, 214, 224, 0.3);
}
.yellow {
  color: var(--yellow);
  text-shadow:
    0 0 25px
    rgba(255, 239, 159, 0.3);
}
.green {
  color: var(--green);
  text-shadow:
    0 0 25px
    rgba(193, 251, 164, 0.3);
}
.cream {
  color: var(--cream);
  text-shadow:
    0 0 25px
    rgba(245, 255, 198, 0.3);
}
.purple {
  color: var(--purple);
  text-shadow:
    0 0 25px
    rgba(171, 135, 255, 0.3);
}
.purple2 {
  color: var(--purple2);
  text-shadow:
    0 0 25px
    rgba(99, 24, 236, 0.3);
}

/* ==========================================
   TYPING
========================================== */

.typing {

  min-height: 30px;

  margin-top: 25px;

  color: #F1F3F4;

  font-size:
    clamp(14px, 2vw, 19px);

}


.typed-cursor {

  color: var(--orange);

}


/* ==========================================
   TABLET
========================================== */

@media (max-width: 768px) {

  .loader-letter {

    width: 70px;

    height: 70px;

  }


  .svg-letter {

    font-size: 52px;

  }



}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 600px) {

  .nav-container {

    width: 90%;

  }


  .sp-loader {

    gap: 0;

  }


  .loader-letter {

    width: 65px;

    height: 65px;

  }


  .svg-letter {

    font-size: 50px;

  }


  .loader-name {

    margin-top: 24px;

    font-size: 11px;

    letter-spacing: 3px;

  }


  .brand {

    font-size: 42px;

  }


  .typing {

    font-size: 14px;

    margin-top: 20px;

  }

}


/* ==========================================
   SMALL MOBILE
========================================== */

@media (max-width: 380px) {

  .loader-letter {

    width: 58px;

    height: 58px;

  }


  .svg-letter {

    font-size: 45px;

  }


  .loader-name {

    font-size: 9px;

  }


  .brand {

    font-size: 36px;

  }


.desktop-social {

    gap: 6px;

  }


  .desktop-social a {

    width: 45px;

    height: 45px;

    font-size: 20px;

  }

}