@import "tailwindcss";

@theme {
  --font-kumbh-sans: Kumbh Sans, sans-serif;

  --background-image-image-radial: radial-gradient(
    circle,
    #e3d3be 0%,
    #e3d6c5 74%,
    #ddccb8 100%
  );
  --background-image-icon-radial: radial-gradient(
    circle,
    rgba(217, 217, 217, 0.07) 0%,
    rgba(217, 217, 217, 0.19) 100%
  );
  --background-image-translucent-gradient: linear-gradient(
    to-right,
    #d9d9d91f 0%,
    #7373731f 100%
  );
  --background-image-gradient-conic: conic-gradient(
    from 180deg at 50% 50%,
    var(--tw-gradient-stops)
  );

  --breakpoint-smm: 435px;

  --color-base-100: oklch(100% 0 0);
  --color-base-200: oklch(97% 0 0);
  --color-base-300: oklch(92% 0 0);
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
  *,
  ::after,
  ::before,
  ::backdrop,
  ::file-selector-button {
    border-color: var(--color-gray-200, currentColor);
  }
}

* {
  scroll-behavior: smooth;
}

body {
  background: #08233b;
  color: white;
  overscroll-behavior: none;

  &::-webkit-scrollbar {
    width: 10px;
    /* background-color: #d9d9d91f; /* Matches the theme */
    background-color: #333;
  }

  &::-webkit-scrollbar-thumb {
    /* background-color: #3c84c7; /* Matches the theme */
    background-color: #666;
    border-radius: 5px;
  }
}

.h-image {
  -webkit-mask-image: url("../public/black.png");
  -webkit-mask-position: center;
  -webkit-mask-size: 390px 390px;
  -webkit-mask-repeat: no-repeat;
  z-index: -10;
  /* transform: rotate(-15deg); */
  /* Since I cannot achieve the particular effect I wanted to create, I can make it scroll */
}

@media (max-width: 1023px) {
  .h-image {
    transform: none !important;
  }
}

@media (max-width: 1280px) {
  .h-image {
    -webkit-mask-size: 300px 300px;
  }
}

@media (max-width: 1024px) {
  .h-image {
    -webkit-mask-size: 300px 300px;
  }
}

@media (max-width: 415px) {
  .h-image {
    -webkit-mask-size: 270px 270px;
  }
}

/* CARD ANIMATIONS */
.card {
  transition: transform 1s;
  transform-style: preserve-3d;
}

/* .card.flipped,
.card .back {
  transform: perspective(300px) rotateY(180deg);
} */

/* .card .back {
  transition: opacity 0.3s ease 1s;
} */

.custom-toast {
  background-color: #081e32 !important;

  .Toastify__progress-bar {
    background-color: #548fba;
  }
}

.std-backdrop-blur {
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  -moz-backdrop-filter: blur(12px);
  -ms-backdrop-filter: blur(12px);
}

/* DAISY UI TYPE SKELETON */
.skeleton {
  @apply bg-transparent opacity-50 rounded-lg motion-reduce:[transition-duration:15s];
  will-change: background-position;
  animation: skeleton 2.6s ease-in-out infinite;
  background-image: linear-gradient(
    105deg,
    #0000 0% 40%,
    var(--color-base-100) 50%,
    #0000 60% 100%
  );
  background-size: 200% auto;
  background-repeat: no-repeat;
  background-position-x: -50%;
}
@keyframes skeleton {
  0% {
    background-position: 150%;
  }

  100% {
    background-position: -50%;
  }
}
