@tailwind base;
@tailwind components;
@tailwind utilities;

@font-face {
  font-family: Switzer;
  src: url("../../assets/fonts/Switzer-Variable.ttf");
}

h1,
h2,
h3,
h4 a {
  font-family:
    "Switzer", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif !important;
}

p,
a {
  font-family: "Mona Sans", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
html,
body {
  scroll-behavior: smooth;
  overflow-x: clip;
}

.hero {
  background-image: url("../assets/bg-gradient.webp");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

.white-custom-bg {
  background-image: url("../assets/background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-attachment: fixed;
  backdrop-filter: blur(100%);
}
.liquid-edge {
  /* background: rgba(255, 255, 255, 0.02); */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  /* the actual "refraction border" */
  box-shadow:
    /* sharp inner highlight (light hitting glass edge) */
    inset 0 0.5px 0 rgba(203, 203, 203, 0.25),
    inset 1px 0 0 rgba(255, 255, 255, 0.15),
    /* compressed light band (refraction feel) */ inset 0 6px 10px -4px
      rgba(255, 255, 255, 0.1),
    /* bottom thickness shadow */ inset 0 -8px 14px rgba(0, 0, 0, 0.2),
    /* side depth */ inset -6px 0 10px rgba(0, 0, 0, 0.025),
    /* subtle crisp border edge */ inset 0 0 0 1px rgba(255, 255, 255, 0.05),
    /* outer elevation */ 0 10px 30px rgba(0, 0, 0, 0.15);
}

@media (max-width: 1024px) {
  .liquid-edge-2 {
    /* background: rgba(255, 255, 255, 0.02); */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* the actual "refraction border" */
    box-shadow:
    /* sharp inner highlight (light hitting glass edge) */
      inset 0 0.5px 0 rgba(203, 203, 203, 0.25),
      inset 1px 0 0 rgba(255, 255, 255, 0.15),
      /* compressed light band (refraction feel) */ inset 0 6px 10px -4px
        rgba(255, 255, 255, 0.1),
      /* bottom thickness shadow */ inset 0 -8px 14px rgba(0, 0, 0, 0.2),
      /* side depth */ inset -6px 0 10px rgba(0, 0, 0, 0.025),
      /* subtle crisp border edge */ inset 0 0 0 1px rgba(255, 255, 255, 0.05),
      /* outer elevation */ 0 10px 30px rgba(0, 0, 0, 0.15);
  }
}
@media (min-width: 1024px) {
  .animate-pulse-glow {
    animation: pulseGlow 5s ease-in-out infinite;
  }
}

.backface-hidden {
  backface-visibility: hidden;
}

.rotate-y-180 {
  transform: rotateY(180deg);
}

.no-select {
  -webkit-user-select: none;
  user-select: none;
  -webkit-user-drag: none;
}

@keyframes pulseGlow {
  0%,
  100% {
    opacity: 0.9;
    transform: scale(0.8);
  }
  50% {
    opacity: 1.5;
    transform: scale(0.9);
  }
}

.blue-gradient {
  background: linear-gradient(90deg, #386ad9 0%, #122ddb 100%);
}

.mobile-nav-link {
  display: block;
  padding: 12px 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  font-size: 15px;
  color: rgba(255, 255, 255, 0.85);
  transition: color 0.2s ease;
}

.mobile-nav-link:hover {
  color: white;
}

.header-scrolled {
  background: rgba(5, 8, 18, 0.8);
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.35);
}

.perspective {
  perspective: 1200px;
}

.flip-container {
  position: relative;
  height: 50px;
  transform-style: preserve-3d;
  transition: transform 0.7s ease;
}

.flip-container.is-flipped {
  transform: rotateX(180deg);
}

.flip-face {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  transform-style: preserve-3d;
  position: absolute;
  inset: 0;

  display: flex;
  align-items: center;
  gap: 8px;

  padding: 12px 20px;
  max-width: 420px;
  width: 100%;

  border-radius: 999px;
  border: 2px solid rgba(53, 87, 214, 0.3);

  background: rgba(255, 255, 255, 0.04);
  backdrop-filter: blur(12px);

  color: rgba(255, 255, 255, 0.8);
  font-size: 15px;

  backface-visibility: hidden;
}

.flip-back {
  transform: rotateX(180deg);
}

.items-baseline-last {
  align-items: last baseline;
}