@import "tailwindcss";
@plugin "@tailwindcss/typography";

@theme inline {
  --color-background: #0b0e14;
  --color-primary: #eff1f6;
  --color-secondary: #ced5e4;
  --color-tertiary: #adb9d2;
  --color-mute: #585e6c;
  --color-background-card: #11141a;
  --color-background-card-foreground: #171a20;
  --color-border: #1a1e26;
  --color-border-active: rgba(173, 185, 210, 0.2);
  --color-background-primary: rgba(0, 153, 153, 0.08);
  --color-success: #00e66b;
  --color-error: #ff285a;
  --color-brand-primary: #00ffff;
  --color-brand-secondary: #00e6e6;
  --color-brand-tertiary: #00b3b3;
  --color-brand-anchor: #ddeae0;
  --color-brand-rust: #ffad66;
  --color-brand-typescript: #69a2f1;
  --font-sans: var(--font-funnel-display);
  --font-mono: var(--font-montech);
  --font-fira-code: var(--font-fira-code);
  --font-content: var(--font-switzer);
  --text-3xl: 32px;
  --container-app: 1500px;
  --breakpoint-xs: 472px;
}

:root {
  --swoosh-easing: cubic-bezier(0, 0.61, 0.355, 1);
}

body {
  @apply w-screen h-auto overflow-x-hidden;
  background: var(--color-background);
  font-family: var(--font-funnel-display);
  color: var(--color-primary);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  scroll-behavior: smooth;
}

h1 {
  letter-spacing: -0.025em;
}

.gradient-border {
  position: relative;
}

.wrapper {
  @apply max-w-app mx-auto w-full px-4 relative;
  @apply md:px-8;
  @apply lg:px-14;
}

.content-wrapper {
  @apply px-4 max-w-app md:px-8 lg:px-14 mx-auto w-full;
}

.gradient-border::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  mask-mode: match-source, match-source;
  mask-repeat: repeat, repeat;
  mask-clip: content-box, border-box;
  mask-origin: content-box, border-box;
  mask-position:
    0% 0%,
    0% 0%;
  mask-size: auto, auto;
  pointer-events: none;
}

article img {
  @apply rounded-2xl;
}

article a {
  @apply text-brand-secondary hover:text-brand-primary transition;
}

blockquote {
  @apply border-l-0;
}

blockquote p {
  @apply my-0 inline-block;
}

blockquote p::before {
  @apply hidden;
}

blockquote p::after {
  @apply hidden;
}

:root:has(.no-scroll) {
  overflow-y: hidden;
}

h3,
h4 {
  @apply scroll-mt-24;
}

p code,
li code,
h3 code,
h2 code {
  @apply bg-background-primary;
}

.code-block pre {
    @apply m-0;
}

.code-block code {
    background-color: initial;
}

.heading-code {
  @apply py-0 rounded-xl bg-gradient-to-b from-background-primary to-transparent before:[background:linear-gradient(180deg,rgba(0,255,255,0.13)_0%,_rgba(0,255,255,0.05)_100%)];
}

.heading-code code {
  @apply bg-transparent;
}

.custom-scrollbar {
  @apply [&::-webkit-scrollbar]:!w-[6px] [&::-webkit-scrollbar-button]:!bg-transparent [&::-webkit-scrollbar-button]:!rounded-full [&::-webkit-scrollbar]:!h-auto [&::-webkit-scrollbar-thumb]:!rounded-full [&::-webkit-scrollbar-thumb]:!bg-background-card-foreground [&::-webkit-scrollbar-track]:!rounded-full [&::-webkit-scrollbar-track]:!bg-transparent;
  scrollbar-width: thin;
  scrollbar-color: var(--color-background-card-foreground) transparent;
}


.rehype-pretty-copy {
  @apply opacity-0;
}

.animate-nft {
  animation: nft 4s ease-in-out infinite;
}

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

.animate-card-swoosh::after {
  @apply content-[''] absolute pointer-events-none opacity-0 origin-center overflow-hidden rounded-[18px];
  left: -30%;
  top: -30%;
  width: 150%;
  height: 150%;
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  background: linear-gradient(
    var(--swoosh-angle, 135deg),
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0) 40%,
    rgba(255, 255, 255, 0.025) 45%,
    rgba(255, 255, 255, 0.035) 47.5%,
    rgba(255, 255, 255, 0.05) 50%,
    rgba(255, 255, 255, 0.035) 52.5%,
    rgba(255, 255, 255, 0.025) 55%,
    rgba(255, 255, 255, 0) 60%,
    rgba(255, 255, 255, 0) 100%
  );
}

.animate-card-swoosh.swoosh-active::after {
  opacity: 1;
}

/* Directional swoosh animations */
.animate-card-swoosh.swoosh-top::after {
  transform: translateY(-100%) translateX(-50%);
  animation: swoosh-top 2.2s var(--swoosh-easing);
}

.animate-card-swoosh.swoosh-right::after {
  transform: translateX(100%) translateY(-50%);
  animation: swoosh-right 2.2s var(--swoosh-easing);
}

.animate-card-swoosh.swoosh-bottom::after {
  transform: translateY(100%) translateX(-50%);
  animation: swoosh-bottom 2.2s var(--swoosh-easing);
}

.animate-card-swoosh.swoosh-left::after {
  transform: translateX(-100%) translateY(-50%);
  animation: swoosh-left 2.2s var(--swoosh-easing);
}

.animate-card-swoosh.swoosh-top-left::after {
  transform: translate(-100%, -100%);
  animation: swoosh-top-left 2.2s var(--swoosh-easing);
}

.animate-card-swoosh.swoosh-top-right::after {
  transform: translate(100%, -100%);
  animation: swoosh-top-right 2.2s var(--swoosh-easing);
}

.animate-card-swoosh.swoosh-bottom-left::after {
  transform: translate(-100%, 100%);
  animation: swoosh-bottom-left 2.2s var(--swoosh-easing);
}

.animate-card-swoosh.swoosh-bottom-right::after {
  transform: translate(100%, 100%);
  animation: swoosh-bottom-right 2.2s var(--swoosh-easing);
}

@keyframes swoosh-top {
  0% {
    transform: translateY(-100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(100%);
    opacity: 0.5;
  }
}

@keyframes swoosh-right {
  0% {
    transform: translateX(100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(-100%);
    opacity: 0.5;
  }
}

@keyframes swoosh-bottom {
  0% {
    transform: translateY(100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0.5;
  }
}

@keyframes swoosh-left {
  0% {
    transform: translateX(-100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translateX(100%);
    opacity: 0.5;
  }
}

@keyframes swoosh-top-left {
  0% {
    transform: translate(-100%, -100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(100%, 100%);
    opacity: 0.5;
  }
}

@keyframes swoosh-top-right {
  0% {
    transform: translate(100%, -100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-100%, 100%);
    opacity: 0.5;
  }
}

@keyframes swoosh-bottom-left {
  0% {
    transform: translate(-100%, 100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(100%, -100%);
    opacity: 0.5;
  }
}

@keyframes swoosh-bottom-right {
  0% {
    transform: translate(100%, 100%);
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(-100%, -100%);
    opacity: 0.5;
  }
}
