/* ! THIS IS JUST USED FOR `Tailwind CSS IntelliSense` VS CODE EXTENSION ! */
/* ! TAILWIND CSS v4 IS IMPORTED FROM assets/js/browser@4.js ! */
@import "tailwindcss";

/*-----------------------------------*\
  #main.css
\*-----------------------------------*/

/*-----------------------------------*\
  #CUSTOM PROPERTY
\*-----------------------------------*/

/*-----------------------------------*\
  #FONT FAMILIES
\*-----------------------------------*/

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

html {
  scroll-behavior: smooth;
}

.font-clash-extralight {
  font-family: "ClashGrotesk-Extralight";
}

.font-clash-light {
  font-family: "ClashGrotesk-Light";
}

.font-clash-regular {
  font-family: "ClashGrotesk-Regular";
}

.font-clash-medium {
  font-family: "ClashGrotesk-Medium";
}

.font-clash-semibold {
  font-family: "ClashGrotesk-Semibold";
}

.font-clash-bold {
  font-family: "ClashGrotesk-Bold";
}

.font-clash-variable {
  font-family: "ClashGrotesk-Variable";
}

@media screen and (max-width: 886px) {
  .hidden-mobile {
    display: none;
  }
}

@media screen and (min-width: 886px) {
  .hidden-desktop {
    display: none;
  }
}

.clienSectionBorder {
  border: 1px solid transparent;
}

.borderLeftToRight {
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(to left, #ffffff, #cccccc) border-box;
}

.borderRightToLeft {
  background:
    linear-gradient(#000, #000) padding-box,
    linear-gradient(to right, #ffffff, #cccccc) border-box;
}

/* Animations */

/* ===== HERO TEXT REVEAL ===== */
.reveal-text {
  opacity: 0;
  transform: translateY(24px);
  animation: revealUp 0.8s ease-out forwards;
}

.reveal-text.delay-200 {
  animation-delay: 0.2s;
}

@keyframes revealUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.text-part {
  /* display: inline-block; */
  position: relative;
  transform: translateX(0);
  animation-duration: 2s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
}

.text-part.left {
  transform: translateX(-15%);
  animation-name: slide-in-left;
}

.text-part.right {
  transform: translateX(15%);
  animation-name: slide-in-right;
}

@keyframes slide-in-left {
  0% {
    transform: translateX(-15%);
  }

  100% {
    transform: translateX(0);
  }
}

@keyframes slide-in-right {
  0% {
    transform: translateX(15%);
  }

  100% {
    transform: translateX(0);
  }
}


/* ===== Hero description ===== */
.hero-desc {
  opacity: 0;
  transform: translateY(20px);
  animation: revealUp 0.7s ease-out forwards;
  animation-delay: 0.4s;
}

/* ===== Stats ===== */
.stat-number {
  transition: transform 0.3s ease;
}

.stat-number.in-view {
  transform: translateY(0);
}

/* ===== Floating SVG ===== */
.hero-bg {
  animation: float 8s ease-in-out infinite;
}

@keyframes float {

  0%,
  100% {
    transform: translate(-50%, 0);
  }

  50% {
    transform: translate(-50%, 12px);
  }
}


/* ----------------------------------
   Desktop & Tablet (default)
---------------------------------- */
#clients {
  display: flex;
  flex-direction: column;
  /* gap: 1.5rem; */
}

.logo-track {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.logo-set {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
  justify-content: center;
}

.logo-set img {
  max-width: 9rem;
  user-select: none;
}

/* Hide duplicate logos on desktop & tablet */
.logo-set.duplicate {
  display: none;
}

/* ----------------------------------
   Mobile continuous marquee
---------------------------------- */
@media (max-width: 768px) {
  #clients {
    overflow: hidden;
  }

  .logo-track {
    flex-wrap: nowrap;
    width: max-content;
  }

  .logo-set {
    flex-wrap: nowrap;
  }

  /* Show duplicate ONLY on mobile */
  .logo-set.duplicate {
    display: flex;
  }

  @keyframes marquee-left {
    from {
      transform: translateX(0);
    }

    to {
      transform: translateX(-50%);
    }
  }

  @keyframes marquee-right {
    from {
      transform: translateX(-50%);
    }

    to {
      transform: translateX(0);
    }
  }

  .marquee-left {
    animation: marquee-left 22s linear infinite;
  }

  .marquee-right {
    animation: marquee-right 22s linear infinite;
  }
}

/* ------------------ */

/* ===== Animation ===== */
.success-card {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.5s ease-out;
}

.success-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Team header */
.team-header {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.7s ease-out;
}

.team-header.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* Team cards */
.team-card {
  opacity: 0;
  transform: translateY(24px);
  transition: all 0.5s ease-out;
}

.team-card.in-view {
  opacity: 1;
  transform: translateY(0);
}

/* ------------------ */

.overflow-hidden {
  overflow: hidden;
}

/* Burger container */
.burger {
  border-radius: 999px;
  background: transparent;
  cursor: pointer;
  padding: 5px;
  transition: all 0.3s ease;
  border: 1px solid #2D5DEC;
  border-radius: 100%;
  padding: 0.5rem;
  /* position: relative;
  display: flex; */
  align-items: center;
  justify-content: center;
}

/* Clickable overlay */
.burger-checkbox {
  position: absolute;
  inset: 0;
  z-index: 10;
  cursor: pointer;
}

/* Icons */
.burger-icon {
  width: 28px;
  height: 28px;
  transition: all 0.8s ease;
}

/* Default state */
.burger-close {
  display: none;
}

/* Toggle icons */
input[id="burger-checkbox"]:checked+.burger .burger-open {
  display: none;
}

input[id="burger-checkbox"]:checked+.burger .burger-close {
  display: block;
}

/* Optional rotation animation */
input[id="burger-checkbox"]:checked+.burger .burger-close {
  transform: rotate(90deg);
}

/* Mobile menu */
.links {
  width: 100%;
  height: 0;
  position: absolute;
  top: 100%;
  right: 0;
  z-index: 99;
  transition: height 0.25s ease-in-out;
  overflow: hidden;
}

body:has(#burger-checkbox:checked) {
  overflow: hidden;
  height: 100vh;
  touch-action: none;
  /* mobile */
}

#navbar:has(#burger-checkbox:checked) {
  background-color: #ffffff;
  /* backdrop-filter: blur(10px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); */
}

input[id="burger-checkbox"]:checked~.links {
  height: 100vh;
  touch-action: none;
}