@import "tailwindcss";

@plugin "@tailwindcss/typography";

@custom-variant dark (&:where([data-theme=dark], [data-theme=dark] *));

@layer base {
  button:not(:disabled),
  [role="button"]:not(:disabled) {
    cursor: pointer;
  }

  input[type="search"]::-webkit-search-cancel-button {
    display: none;
  }
}

@theme inline {
  --color-primary-50: #f4f3ff;
  --color-primary-100: #ebe9fe;
  --color-primary-200: #d9d6fe;
  --color-primary-300: #bdb4fe;
  --color-primary-400: #9b8afb;
  --color-primary-500: #7a5af8;
  --color-primary-600: #6938ef;
  --color-primary-700: #5925dc;
  --color-primary-800: #4a1fb8;

  --color-success-50: #ecfdf3;
  --color-success-500: #ecfdf3;
  --color-success-600: #12b76a;

  --color-error-50: #fef3f2;
  --color-error-100: #fee4e2;
  --color-error-500: #f04438;
  --color-error-600: #d92d20;

  --color-dark-primary: #171f2e;
  --color-dark-secondary: #1a2231;

  --text-title-lg: 44px;
  --text-title-lg--line-height: 52px;

  --shadow-theme-xs: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
  --shadow-theme-sm: 0px 8px 20px 0px rgba(0, 0, 0, 0.08);
  --shadow-theme-lg:
    0px 12px 16px -4px rgba(16, 24, 40, 0.08),
    0px 4px 6px -2px rgba(16, 24, 40, 0.03);
  --shadow-ring: 0px 0px 0px 4px rgba(70, 95, 255, 0.12);
  --shadow-theme-md: 0px 8px 30px 0px rgba(12, 11, 25, 0.04);

  --background-image-gradient-1: linear-gradient(
    180deg,
    #f8fcff 0%,
    #f1efff 50%,
    #f8dcff 100%
  );
  --background-image-gradient-2: linear-gradient(
    97deg,
    #725cff 0%,
    #b5b1ff 140.21%
  );
}

.button-bg {
  background-image: linear-gradient(97deg, #725cff 0%, #b5b1ff 140.21%);
}

.tab-img-bg {
  background: linear-gradient(
    90deg,
    rgba(255, 88, 213, 0.2) 0%,
    rgba(78, 110, 255, 0.2) 100%
  );
  position: relative;
  z-index: 20;
}

[data-theme="light"] .tab-img-bg::after {
  border-radius: 32px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #fff 93.51%);
  content: "";
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  position: absolute;
  z-index: 10;
}

[data-theme="dark"] .tab-img-bg::after {
  background: linear-gradient(180deg, rgba(23, 31, 46, 0) 0%, #171f2e 93.51%);
}

.tab-img-overlay {
  border-radius: 26px;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.3) 67.58%,
    rgba(255, 255, 255, 0) 100%
  );
  backdrop-filter: blur(18.81816291809082px);
  position: relative;
  z-index: 20;
}

@utility wrapper {
  @apply container px-5 mx-auto sm:px-7;
}

.shadow-one {
  box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
}

.benefits-bg {
  border-radius: 20px;
  background: linear-gradient(216deg, #a2e4e4 0%, #1c9ef6 100%);
}

.gradient-bg-two {
  background-image: var(
    --Gradient-2,
    linear-gradient(97deg, #725cff 0%, #b5b1ff 140.21%)
  );
}

@utility hero-glow-bg {
  background-image: linear-gradient(
    180deg,
    rgba(122, 90, 248, 0) 0%,
    #7a5af8 100%
  );
}

.core-feature-wrapper {
  border-radius: 20px;
  box-shadow: 0px 30px 50px -32px rgba(107, 110, 148, 0.04);
}

.core-feature-icon {
  background-image: linear-gradient(
    180deg,
    #7a5af8 0%,
    rgba(122, 90, 248, 0) 100%
  );
  filter: drop-shadow(0px 23px 33px rgba(87, 80, 241, 0.59));
  width: 76px;
  height: 76px;
  align-items: center;

  display: flex;
  justify-content: center;
  border-radius: 50px;
}

/* .dark .core-feature-icon {
  border: 5px solid #9b8afb;
} */

.contact-wrapper {
  border-radius: 24px;
  box-shadow: 0px 32px 100px -12px rgba(16, 24, 40, 0.05);
}

.dashboard-gradient {
  background-image: linear-gradient(
    92deg,
    var(--Colors-Brand-500, #7a5af8) 0%,
    var(--Colors-Brand-200, #d9d6fe) 100%
  );
}

[data-theme="light"] .widget-bg {
  background-image: linear-gradient(
    180deg,
    #f8fcff 0%,
    #f1efff 50%,
    #f8dcff 100%
  );
}

[data-theme="dark"] .widget-bg {
  background: rgba(255, 255, 255, 0.1);
}

@utility custom-scrollbar {
  &::-webkit-scrollbar {
    @apply w-4.5;
  }

  &::-webkit-scrollbar-track {
    @apply rounded-full;
  }

  &::-webkit-scrollbar-thumb {
    @apply bg-gray-200 border-[0.35rem] border-transparent bg-clip-padding rounded-full;
  }

  [data-theme="dark"] &::-webkit-scrollbar-thumb {
    @apply bg-gray-700;
  }
}

/* Desktop hover behavior */
@media (min-width: 1024px) {
  .nav-item:hover .dropdown-menu {
    display: block;
  }

  /* Rotate arrow on hover for desktop */
  .nav-item:hover .dropdown-arrow {
    transform: rotate(180deg);
  }
}

/* Gradient border styles */
.gradient-border {
  position: relative;
  background-clip: padding-box;
  border: 1.5px solid transparent;
}

.gradient-border::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: -1.4px;
  border-radius: inherit;
  background: linear-gradient(
    to right,
    rgba(255, 87, 213, 0.5),
    rgba(78, 110, 255, 0.5)
  );
  z-index: -1;
}

.dark .gradient-border::before {
  z-index: 5;
}

/* This hides elements with x-cloak until Alpine.js is ready */
[x-cloak] {
  display: none !important;
}

[data-theme="light"] .white-gradient {
  background-image: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0) 0%,
    #fff 44.75%
  );
}

[data-theme="dark"] .white-gradient {
  background-image: linear-gradient(
    180deg,
    rgba(23, 31, 46, 0) 0%,
    #171f2e 44.75%
  );
}

.gradient-btn {
  background-image: linear-gradient(97deg, #725cff 0%, #b5b1ff 140.21%);
  color: white;
  background-size: 200% auto;
  background-position: 0% center;
  transition:
    background-position 0.6s ease-in-out,
    transform 0.3s ease;
  will-change: background-position, transform;
}

.gradient-btn:hover {
  background-image: linear-gradient(97deg, #b5b1ff 0%, #725cff 140.21%);
  background-position: 100% center;
}

.floating {
  animation: float 3s ease-in-out infinite;
}

.history-item {
  position: relative;
  height: 40px;
  mask-image: linear-gradient(
    90deg,
    #000,
    #000 84%,
    transparent 89%,
    transparent
  );
}

.history-item:hover {
  mask-image: none;
}

/* .history-item::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  background-image: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 16.49%,
    #fff 90.64%
  );
} */

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-10px);
  }
  100% {
    transform: translateY(0px);
  }
}

/* Float vertically */
@keyframes float-y {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

/* Float horizontally */
@keyframes float-x {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(10px);
  }
}

/* Float diagonally */
@keyframes float-xy {
  0%,
  100% {
    transform: translate(0, 0);
  }
  50% {
    transform: translate(10px, -10px);
  }
}

/* Subtle slow float in reverse */
@keyframes float-rev {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* Animation classes */
.floating-1 {
  animation: float-y 3s ease-in-out infinite;
}

.floating-2 {
  animation: float-x 4s ease-in-out infinite;
}

.floating-3 {
  animation: float-xy 5s ease-in-out infinite;
}

.floating-4 {
  animation: float-rev 6s ease-in-out infinite;
}
