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

@layer base {
  :root {
    --background: 234, 79%, 11%; /* #0c1138 */
    --foreground: 0, 0%, 98%; /* #fafafa */

    --muted: 250.17, 34.1%, 33.92%; /* #3c3e6d */
    --muted-foreground: 0, 0%, 98%; /* #fafafa */

    --popover: 240, 10%, 3.9%; /* #0a0a0b */
    --popover-foreground: 0, 0%, 98%; /* #fafafa */

    --card: 242.18, 56.7%, 19.02%; /* #1c1f4d */
    --card-foreground: 0, 0%, 98%; /* #fafafa */

    --border: 240, 3.7%, 15.9%; /* #262626 */
    --input: 240, 3.7%, 15.9%; /* #262626 */

    --primary: 242.18, 56.7%, 19.02%; /* #1c1f4d */
    --primary-foreground: 0, 0%, 98%; /* #fafafa */

    --secondary: 0, 0%, 98%; /* #fafafa */
    --secondary-foreground: 0, 0%, 6.67%; /* #111111 */

    --accent: 319.38, 80.67%, 53.33%; /* #e91e63 */
    --accent-foreground: 0, 0%, 98%; /* #fafafa */
    --accent-500: 261, 29%, 56%; /* #7c4dff */

    --destructive: 0, 62.8%, 30.6%; /* #9d0208 */
    --destructive-foreground: 0, 85.7%, 97.3%; /* #fff5f5 */

    --success: 136.71, 78.22%, 39.61%; /* #22c55e */
    --success-foreground: 0, 85.7%, 97.3%; /* #fff5f5 */

    --ring: 260.63, 28.57%, 56.08%; /* #7c4dff */

    --gradient-background-start: #080e44;
    --gradient-background-end: #060a35;

    --first-color: 81, 34, 117; /* #512275 */
    --second-color: 64, 29, 102; /* #401d66 */
    --third-color: 47, 23, 88; /* #2f1758 */
    --fourth-color: 31, 18, 76; /* #1f124c */
    --fifth-color: 20, 14, 64; /* #140e40 */
    --pointer-color: 112, 43, 144; /* #702b90 */

    --alert: 78, 90%, 75%; /* #e6ff4d */

    --radius: 24px;
  }

  .dark {
    --background: 234, 79%, 11%; /* #0c1138 */
    --foreground: 0, 0%, 98%; /* #fafafa */

    --muted: 250.17, 34.1%, 33.92%; /* #3c3e6d */
    --muted-foreground: 0, 0%, 98%; /* #fafafa */

    --popover: 240, 10%, 3.9%; /* #0a0a0b */
    --popover-foreground: 0, 0%, 98%; /* #fafafa */

    --card: 242.18, 56.7%, 19.02%; /* #1c1f4d */
    --card-foreground: 0, 0%, 98%; /* #fafafa */

    --border: 240, 3.7%, 15.9%; /* #262626 */
    --input: 240, 3.7%, 15.9%; /* #262626 */

    --primary: 242.18, 56.7%, 19.02%; /* #1c1f4d */
    --primary-foreground: 0, 0%, 98%; /* #fafafa */

    --secondary: 0, 0%, 98%; /* #fafafa */
    --secondary-foreground: 0, 0%, 6.67%; /* #111111 */

    --accent: 319.38, 80.67%, 53.33%; /* #e91e63 */
    --accent-foreground: 0, 0%, 98%; /* #fafafa */
    --accent-500: 261, 29%, 56%; /* #7c4dff */

    --destructive: 0, 62.8%, 30.6%; /* #9d0208 */
    --destructive-foreground: 0, 85.7%, 97.3%; /* #fff5f5 */

    --success: 136.71, 78.22%, 39.61%; /* #22c55e */
    --success-foreground: 0, 85.7%, 97.3%; /* #fff5f5 */

    --ring: 260.63, 28.57%, 56.08%; /* #7c4dff */

    --gradient-background-start: #080e44;
    --gradient-background-end: #060a35;

    --first-color: 81, 34, 117; /* #512275 */
    --second-color: 64, 29, 102; /* #401d66 */
    --third-color: 47, 23, 88; /* #2f1758 */
    --fourth-color: 31, 18, 76; /* #1f124c */
    --fifth-color: 20, 14, 64; /* #140e40 */
    --pointer-color: 112, 43, 144; /* #702b90 */

    --alert: 78, 90%, 75%; /* #e6ff4d */

    --radius: 24px;
  }
}

/* #### Generated By: http://font.download #### */

* {
  @apply border-border ring-offset-ring focus-within:ring-ring focus-within:ring-offset-ring focus-visible:ring-ring focus-visible:ring-offset-ring before:focus-visible:ring-ring before:focus-visible:ring-offset-ring;
}

a:focus-visible {
  outline: 3px solid hsl(var(--ring));
  outline-offset: 2px;
  outline-radius: 2px;
}

body,
html {
  @apply bg-background text-foreground;
}

body,
p {
  @apply text-base font-normal font-futura-pt-demi;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  @apply tracking-tight font-futura-pt-bold;
}

.open-sans {
  font-family: "Open Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}

input:focus {
  outline: none;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type="number"] {
  -moz-appearance: textfield;
}

.no-visible-scrollbar {
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
}

.no-visible-scrollbar::-webkit-scrollbar {
  display: none;
}

.qr-code-container {
  height: auto;
  margin: 0 auto;
  max-width: 300px;
  width: 100%;
  background: white;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  padding: 10px;
}

.bg-zoom:hover,
.bg-zoom:focus {
  @apply transition-all;

  -ms-transform: scale(1.1);
  -moz-transform: scale(1.1);
  -webkit-transform: scale(1.1);
  -o-transform: scale(1.1);
  transform: scale(1.1);
}

.newsletter-wrapper {
  @apply box-content flex flex-col items-center px-0 mx-auto sm:rounded-3xl sm:text-center;
  background: url("/images/newsletter-bg.webp") center center no-repeat;
  background-size: cover;
}

.narrow-container {
  @apply container md:px-10 xl:px-20;
}

.content-container {
  @apply flex flex-col w-full max-w-screen-md gap-10 px-5 py-10 mx-auto md:py-24;
}

/** Scrollbar Styling */

.scrollbar {
  scrollbar-width: thin;
  scrollbar-color: #a829b9 #080e44;

  &::-webkit-scrollbar {
    width: 12px;
  }

  &::-webkit-scrollbar-track {
    background: #080e44;
  }

  &::-webkit-scrollbar-thumb {
    background-color: #a829b9;
    border-radius: 6px;
    border: 3px solid #080e44;
  }

  &::-webkit-scrollbar-thumb:hover {
    background-color: #a829b9;
  }

  &::-webkit-scrollbar-thumb:active {
    background-color: #a829b9;
  }

  &::-webkit-scrollbar-button {
    display: none;
  }

  &::-webkit-scrollbar-corner {
    background: #080e44;
  }

  &::-webkit-resizer {
    display: none;
  }
}

iframe[title="reCAPTCHA"],
.grecaptcha-badge {
  display: relative;
  z-index: 0;
  opacity: 0.333;

  &:hover {
    opacity: 1;
  }
}

/** Tooltip Styling */

*[data-title]::after {
  @apply absolute left-0 mx-auto h-auto w-max max-w-[200px] whitespace-break-spaces bg-muted px-3 py-1 text-xs font-semibold text-muted-foreground transition-all;

  transform: translateY(calc(-100% - 4px));
  content: attr(data-title);
  opacity: 0;
  top: -4px;
  z-index: 0;
  border-radius: 4px;
}

/* making the arrow */
*[data-title]::before {
  @apply pointer-events-none absolute left-0 h-0 w-0 border-r-[5px] border-t-[5px] border-transparent transition-all;

  content: "";
  top: -10px;
  left: 40%;
  transform: rotate(45deg);
  opacity: 0;
  z-index: -1;
}

*[data-title]:hover::before {
  opacity: 1;
  border-top-color: hsla(var(--muted));
  border-right-color: hsla(var(--muted));
  z-index: 100000 !important;
}

*[data-title]:hover::after {
  opacity: 1;
  z-index: 100000 !important;
}

/* TYPOGRAPHY */

.heroHeading {
  @apply text-5xl md:text-6xl font-bold leading-[76px];
}

.heading {
  @apply text-3xl font-bold leading-normal md:text-4xl;
}

.newsletterHeading {
  @apply text-center text-[40.50px] font-extrabold leading-[45px] md:text-4xl sm:text-4xl;
}

/* Heading in About - Security - Whitepaper */
.sectionsHeading {
  @apply text-[3.5rem] sm:text-[3.8rem] font-bold leading-[1.1] lg:text-[4.5rem];
}

/* Subheading in About - Security - Whitepaper */
.sectionsSubheading {
  @apply text-start text-2xl font-medium leading-[42.35px] text-accent-400 md:text-[2.188rem];
}

.heading2 {
  @apply text-2xl font-bold leading-[42px] md:text-4xl;
}

.heading3 {
  @apply text-xl font-bold md:text-xl;
}

.paragraph {
  @apply text-base text-[#9395af];
}

/* LAYOUT */

.header-link:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
  /* Adjust the offset as needed */
}

.mobile-nav {
  height: calc(100vh - 70px) !important;
  width: 100vw;
  overflow: hidden;
  @apply fixed inset-x-0 flex flex-col items-center pb-20 overflow-hidden top-16 justify-evenly bg-background;
}

/* INFOPAGES BG COVER*/
.infopages-background {
  background-size: cover;
  background-repeat: no-repeat;

  @apply relative left-0 top-0 flex h-[510px] w-full items-center justify-center rounded-[45px];
}

.infopages-background--whitepaper {
  background-image: url("/images/info-bg-whitepaper.webp");
}
.infopages-background--about {
  background-image: url("/images/info-bg-about.webp");
}
.infopages-background--security {
  background-image: url("/images/info-bg-security.webp");
}

/* BLUR DOT EFFECT TO BACKGROUND CIRCLE UPCOMING SECTION */
.blur-effect-bg {
  /* Default mobile size */
  --size: 320px; /* Smaller size for mobile */
  --speed: 50s;
  --easing: cubic-bezier(0.8, 0.2, 0.2, 0.8);

  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 3));
  background-image: linear-gradient(
    hsla(293, 64%, 44%, 1),
    hsla(293, 64%, 44%, 1)
  );
  border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
  .blur-effect-bg {
    --size: 460px; /* Intermediate size for tablets */
  }
}

/* Large devices (desktops, 1400px and up) */
@media (min-width: 1400px) {
  .blur-effect-bg {
    --size: 460px; /* Full size for desktop and beyond */
  }
}

.truncate_text {
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.truncate_text--3-lines {
  white-space: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}

.truncate_text--4-lines {
  white-space: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.truncate_text--5-lines {
  white-space: inherit;
  display: -webkit-box;
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
}

.video-wrapper {
  @apply flex min-h-[70vh] w-full relative;
}

.playlist-pointer {
  @apply absolute z-10 -top-5 right-7 w-6 h-6 bg-accent-700 rounded-full animate-bounce;

  /* arrow polygon pointing down */
  clip-path: polygon(
    50% 100%,
    0% 50%,
    25% 50%,
    25% 0%,
    75% 0%,
    75% 50%,
    100% 50%
  );
}

.grecaptcha-badge {
  display: none !important;
  z-index: -999 !important;
}

.katex-display {
  font-size: clamp(0.7rem, 2vw, 1.2rem); /* Dynamically adjust font size */
  line-height: 1.2;
  padding: 10px 0 !important;
  margin: 10px 0 !important;
  width: 100%; /* Ensure full width of the parent */
  max-width: 100%;
  overflow: auto;
}

.katex {
  font-size: inherit; /* Inherit font size from parent */
  width: 100%;
  max-width: 100%;
  word-wrap: break-word; /* Ensure breaking of long words or expressions */
}
