@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%;
    }
  }
  @keyframes ripple {
    0% {
      transform: scale(1);
      box-shadow: rgba(0, 0, 0, 0.3) 0rem 0.625rem 0.625rem -0px;
    }
    50% {
      transform: scale(1.3);
      box-shadow: rgba(0, 0, 0, 0.3) 0rem 1.875rem 1.25rem -0rem;
    }
    100% {
      transform: scale(1);
      box-shadow: rgba(0, 0, 0, 0.3) 0rem 10px 0.625rem -0rem;
    }
  }

  @keyframes color-change {
    0% {
      fill: var(--color-yoyo-light-blue);
    }
    50% {
      fill: white;
    }
    100% {
      fill: var(--color-yoyo-light-blue);
    }
  }

  @keyframes flash {
    0% {
      background-color: #fff2;
      box-shadow:
        1.25rem 0 #fff2,
        -1.25rem 0 #fff;
    }
    50% {
      background-color: #fff;
      box-shadow:
        1.25rem 0 #fff2,
        -1.25rem 0 #fff2;
    }
    100% {
      background-color: #fff2;
      box-shadow:
        1.25rem 0 #fff,
        -1.25rem 0 #fff2;
    }
  }
}

: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;
  }
}
@utility xev-loader {
  --size: min(60vw, 25rem);
  --duration: 2s;
  --background: linear-gradient(0deg, rgba(50, 50, 50, 0.05) 0%, rgba(0, 0, 50, 0.05) 100%);
  @apply h-[var(--size)] aspect-[1] absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;

  .box {
    @apply absolute rounded-full;
    background: rgba(100, 100, 100, 0.15);
    background: var(--background);
    border-top: 0.0625rem solid rgba(100, 100, 100, 1);
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0.625rem 0.625rem -0px;
    backdrop-filter: blur(0.3125rem);
    animation: ripple var(--duration) infinite ease-in-out;
    &:nth-child(1) {
      @apply inset-[40%] z-99;
    }
    &:nth-child(2) {
      @apply inset-[30%] z-98 [animation-delay:0.2s];
      border-color: rgba(100, 100, 100, 0.8);
    }
    &:nth-child(3) {
      @apply inset-[20%] z-97 [animation-delay:0.4s];
      border-color: rgba(100, 100, 100, 0.6);
    }
    &:nth-child(4) {
      inset: 10%;
      z-index: 96;
      border-color: rgba(100, 100, 100, 0.4);
      animation-delay: 0.6s;
    }
    &:nth-child(5) {
      inset: 0%;
      z-index: 95;
      border-color: rgba(100, 100, 100, 0.2);
      animation-delay: 0.8s;
    }
  }
  .logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-55%, -45%);
    svg {
      fill: var(--logo-color);
      width: 120%;
      animation: color-change var(--duration) infinite ease-in-out;
    }
  }
}