@import "tailwindcss";
@custom-variant aria-invalid (&[aria-invalid="true"]);

@font-face {
  font-family: "DigitalSansEF";
  src: url("/fonts/DigitalSansEFMedium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@theme {
  --font-montserrat: "Montserrat Variable", "sans-serif";
  --font-noto-sans: "Noto Sans Variable", "sans-serif";
  --font-digital-sans: "DigitalSansEF", sans-serif;
  --animate-loader-anim: loader-anim 2s infinite steps(6);
  --animate-glow-pulse-anim: glow-pulse 3s ease-in-out infinite alternate;
  --animate-border-dance-anim: border-dance 4s linear infinite;
  --color-yoyo-black: #171c26;
  --color-yoyo-light-blue: #2ca6ff;
  --color-yoyo-light-grey: #eaeaea;
  @keyframes loader-anim {
    to {
      background-size: 120%;
    }
  }
  @keyframes glow-pulse {
    0% {
      filter: brightness() saturate();
    }

    100% {
      filter: brightness(1.1) saturate(1.2);
    }
  }
  @keyframes border-dance {
    0% {
      background-position: 0%;
    }
    50% {
      background-position: 100%;
    }

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

:root {
  --vh: 100%;
}

@media (min-height: 1200px) {
  :root {
    --vh: 150%;
  }
}

@media (min-height: 2000px) {
  :root {
    --vh: 225%;
  }
}

@layer base {
  ::-webkit-scrollbar {
    @apply size-0;
  }

  ::-webkit-scrollbar-thumb,
  ::-webkit-scrollbar-track {
    @apply bg-transparent;
  }

  html,
  body {
    @apply h-full overflow-x-hidden;
  }
  html {
    @apply [scrollbar-width:none];
  }

  @media (min-width: 568px), (orientation: landscape) {
    html {
      @apply text-[clamp(0.6875rem,2vh,var(--vh))];
    }
  }

  * {
    @apply antialiased font-montserrat;
  }
  button {
    @apply cursor-pointer;
  }
}
@utility loader {
  @apply w-20 h-10 text-inherit relative box-border p-[0.1875rem] border-2 border-current border-r-transparent;

  background: repeating-linear-gradient(90deg, currentColor 0 0.625rem, transparent 0 0.9375rem) 0 / 0% no-repeat
    content-box content-box;

  animation: loader-anim 2s infinite steps(6);

  &::before {
    content: "";
    @apply absolute -top-[0.0625rem] -bottom-[0.0625rem] left-full w-[0.625rem];

    background: linear-gradient(
          transparent calc(50% - 0.4375rem),
          currentColor 0 calc(50% - 0.3125rem),
          transparent 0 calc(50% + 0.3125rem),
          currentColor 0 calc(50% + 0.4375rem),
          transparent 0
        )
        left / 100% 100% no-repeat,
      linear-gradient(currentColor calc(50% - 0.3125rem), transparent 0 calc(50% + 0.3125rem), currentColor 0) left /
        0.125rem 100% no-repeat,
      linear-gradient(transparent calc(50% - 0.3125rem), currentColor 0 calc(50% + 0.3125rem), transparent 0) right /
        0.125rem 100% no-repeat;
  }
}
@utility yoyo-container {
  @apply mx-auto w-[min(90%,79rem)];
}
@utility yoyo-section {
  @apply py-5 md:py-12;
}
@utility yoyo-section-title {
  @apply text-2xl md:text-[min(4vw,2.625rem)] leading-[1.1] font-bold;
}
@utility yoyo-section-title--chapters {
  @apply text-yoyo-light-blue text-center mt-5 md:mt-10 md:text-[min(5vw,3.5rem)]!;
}
@utility yoyo-btn {
  @apply hover:before:translate-x-full hover:scale-[1.08] hover:[animation-duration:1.5s] [transition:all_0.4s_cubic-bezier(0.175,_0.885,_0.32,_1.275)] font-semibold relative text-white bg-yoyo-light-blue px-6 py-4 rounded-[3rem] w-full overflow-hidden animate-glow-pulse-anim disabled:opacity-30 disabled:pointer-events-none;

  &:hover {
    box-shadow: 0 0 3.75rem rgba(44, 166, 255, 0.3), 0 0.75rem 2.5rem rgba(0, 0, 0, 0.1), inset 0 0.125rem #fff6,
      inset 0 -0.125rem rgba(0, 0, 0, 0.2);
  }
  &::before,
  &::after {
    @apply content-[''] absolute;
  }
  &::before {
    @apply z-1 w-full h-[200%] top-1/2 -translate-y-1/2 -translate-x-full transition-transform duration-[0.6s] left-0 blur-lg;
    background: linear-gradient(-45deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  }
  &::after {
    @apply -z-1 rounded-[inherit] opacity-0 transition-opacity duration-[0.3s] -top-[0.125rem] -right-[0.125rem] -bottom-[0.125rem] -left-[0.125rem] animate-border-dance-anim;
    background: linear-gradient(45deg, #0000, #ffffff1a, #0000, #ffffff1a, #0000) 0 0 / 200% 200%;
  }
}
@utility yoyo-input {
  @apply py-2.5 px-6 text-[#757779] border border-[#D9D9D9] w-full rounded-3xl focus-visible:outline-yoyo-light-blue aria-invalid:text-red-600 aria-invalid:focus-visible:outline-red-600 aria-invalid:border-red-600;
  &:-webkit-autofill {
    -webkit-box-shadow: 0 0 0px 62.5rem white inset !important;
    -webkit-text-fill-color: var(--color-tercios-dark-gray) !important;
    transition: background-color 5000s ease-in-out 0s;
  }
}