@import "tailwindcss";
@reference "tailwindcss";

@plugin "@tailwindcss/typography";
@plugin "tailwindcss-animate";

/* Use class-based dark mode to integrate with next-themes */
@variant dark (&:where(.dark &));

@theme {
  /* Fonts */
  --font-sans: var(--font-sans);
  --font-serif: var(--font-serif);
  --font-ovo: var(--font-ovo);
  --font-instrument-serif: var(--font-instrument-serif);

  --color-white: hsl(var(--white));
  --color-black: hsl(var(--black));
  --color-transparent: hsl(var(--transparent));

  --color-border: hsl(var(--border));
  --color-input: hsl(var(--input));
  --color-ring: hsl(var(--ring));
  --color-background: hsl(var(--background));
  --color-foreground: hsl(var(--foreground));

  --color-primary: hsl(var(--primary));
  --color-primary-foreground: hsl(var(--primary-foreground));

  --color-secondary: hsl(var(--secondary));
  --color-secondary-foreground: hsl(var(--secondary-foreground));

  --color-destructive: hsl(var(--destructive));
  --color-destructive-foreground: hsl(var(--destructive-foreground));

  --color-muted: hsl(var(--muted));
  --color-muted-foreground: hsl(var(--muted-foreground));

  --color-accent: hsl(var(--accent));
  --color-accent-foreground: hsl(var(--accent-foreground));

  --color-popover: hsl(var(--popover));
  --color-popover-foreground: hsl(var(--popover-foreground));

  --color-card: hsl(var(--card));
  --color-card-foreground: hsl(var(--card-foreground));

  /* Radii */
  --radius-lg: var(--radius);
  --radius-md: calc(var(--radius) - 2px);
  --radius-sm: calc(var(--radius) - 4px);
}

:root {
  --background: 0 0% 98%;
  --foreground: 0 0% 10%;
  --white: 0 0% 100%;
  --black: 0 0% 0%;
  --transparent: 0 0% 0% / 0%;
  --card: 0 0% 95%;
  --card-foreground: 0 0% 3.9%;
  --popover: 0 0% 98%;
  --popover-foreground: 0 0% 3.9%;
  --primary: 0 0% 9%;
  --primary-foreground: 0 0% 98%;
  --secondary: 0 0% 96.1%;
  --secondary-foreground: 0 0% 9%;
  --muted: 0 0% 96.1%;
  --muted-foreground: 0 0% 45.1%;
  --accent: 0 0% 96.1%;
  --accent-foreground: 0 0% 9%;
  --destructive: 0 84.2% 60.2%;
  --destructive-foreground: 0 0% 98%;
  --border: 0 0% 89.8%;
  --input: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
  --radius: 0.5rem;
  --chart-1: 12 76% 61%;
  --chart-2: 173 58% 39%;
  --chart-3: 197 37% 24%;
  --chart-4: 43 74% 66%;
  --chart-5: 27 87% 67%;
}

.dark {
  --background: 0 0% 9%;
  --foreground: 0 0% 95%;
  --white: 0 0% 0%;
  --black: 0 0% 100%;
  --transparent: 0 0% 100% / 0%;
  --card: 0 0% 9%;
  --card-foreground: 0 0% 95%;
  --popover: 0 0% 9%;
  --popover-foreground: 0 0% 95%;
  --primary: 0 0% 98%;
  --primary-foreground: 0 0% 9%;
  --secondary: 0 0% 14.9%;
  --secondary-foreground: 0 0% 95%;
  --muted: 0 0% 14.9%;
  --muted-foreground: 0 0% 63.9%;
  --accent: 0 0% 14.9%;
  --accent-foreground: 0 0% 95%;
  --destructive: 0 62.8% 30.6%;
  --destructive-foreground: 0 0% 95%;
  --border: 0 0% 14.9%;
  --input: 0 0% 14.9%;
  --ring: 0 0% 83.1%;
  --chart-1: 220 70% 50%;
  --chart-2: 160 60% 45%;
  --chart-3: 30 80% 55%;
  --chart-4: 280 65% 60%;
  --chart-5: 340 75% 55%;
}

@utility animation-delay-1 {
  animation-delay: 300ms;
}
@utility animation-delay-2 {
  animation-delay: 450ms;
}
@utility animation-delay-3 {
  animation-delay: 600ms;
}
@utility animation-delay-4 {
  animation-delay: 750ms;
}
@utility animation-delay-5 {
  animation-delay: 900ms;
}
@utility animation-delay-6 {
  animation-delay: 1050ms;
}
@utility animation-delay-7 {
  animation-delay: 1200ms;
}
@utility animation-delay-8 {
  animation-delay: 1350ms;
}
@utility animation-delay-9 {
  animation-delay: 1500ms;
}
@utility animation-delay-10 {
  animation-delay: 1650ms;
}

@utility animate-accordion-down {
  animation: accordion-down 0.2s ease-out;
}
@utility animate-accordion-up {
  animation: accordion-up 0.2s ease-out;
}
@utility animate-intro {
  animation: intro 0.3s forwards ease-out;
}
@utility animate-aurora {
  animation: aurora 60s linear infinite;
}
@utility animate-flip {
  animation: flip 8s infinite steps(2, end);
}
@utility animate-rotate {
  animation: rotate 4s linear infinite both;
}

@utility container {
  width: 100%;
  max-width: 640px; /* DEFAULT: '640px' */
  margin-inline: auto; /* center: true */
  padding-inline: 0; /* padding: '0' */
}

@layer base {
  * {
    @apply border-border;

    &::selection {
      @apply bg-rose-600/10 text-red-900 dark:bg-red-900/50 dark:text-rose-300 contrast-more:bg-muted-foreground contrast-more:text-muted;
    }

    &:focus-visible {
      @apply outline outline-foreground outline-offset-[3px] ring ring-background;
    }
  }

  a:hover,
  button:hover,
  *[role="button"] {
    @apply cursor-pointer;
  }

  body {
    background-color: hsl(var(--background));
    color: hsl(var(--foreground));
    @apply overflow-y-scroll;
  }

  em {
    @apply font-serif italic text-[17px];
  }

  main a,
  footer a {
    @apply underline underline-offset-[3px] decoration-foreground/30 contrast-more:decoration-foreground motion-safe:transition-colors hover:decoration-foreground;

    &[target="_blank"]::after {
      content: "";
      -webkit-mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='currentColor' stroke-width='1.5' viewBox='0 0 24 24' aria-hidden='true' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25'%3E%3C/path%3E%3C/svg%3E");
      mask-image: url("data:image/svg+xml,%3Csvg fill='none' stroke='currentColor' stroke-width='1.5' viewBox='0 0 24 24' aria-hidden='true' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 19.5 15-15m0 0H8.25m11.25 0v11.25'%3E%3C/path%3E%3C/svg%3E");
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      -webkit-mask-position: center;
      mask-position: center;
      background-color: currentColor;

      @apply ml-1 inline-block h-[0.9rem] w-[0.9rem] align-middle opacity-50 contrast-more:opacity-100 print:hidden;
    }
  }

  .blur {
    mask-image: linear-gradient(to bottom, black 25%, transparent);

    @apply h-8 md:h-16 fixed top-0 left-0 right-0 w-full z-50 select-none pointer-events-none backdrop-blur-[5px] opacity-100;
  }

  .animate-intro {
    @apply opacity-0;
  }

  .scale-blur-fix {
    transform: perspective(1px) translateZ(0);
    backface-visibility: hidden;
  }
}

.yarl__root {
  --yarl__color_backdrop: rgba(0, 0, 0, 0.75);
  --yarl__carousel_padding_px: 30;
}

.yarl__toolbar {
  @apply md:mr-4;
}

@keyframes accordion-down {
  from {
    height: 0;
  }
  to {
    height: var(--radix-accordion-content-height);
  }
}

@keyframes accordion-up {
  from {
    height: var(--radix-accordion-content-height);
  }
  to {
    height: 0;
  }
}

@keyframes aurora {
  from {
    background-position:
      50% 50%,
      50% 50%;
  }
  to {
    background-position:
      350% 50%,
      350% 50%;
  }
}

@keyframes intro {
  0% {
    transform: translateY(10px);
    opacity: 0;
    filter: blur(3px);
  }
  100% {
    transform: translateY(0px);
    opacity: 1;
    filter: blur(0px);
  }
}

@keyframes flip {
  to {
    transform: rotate(360deg);
  }
}

@keyframes rotate {
  to {
    transform: rotate(90deg);
  }
}
