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

:root {
  --background: #ffffff;
  --foreground: #171717;
}

@theme inline {
  --card: hsl(0 0% 100%);

  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --color-card: var(--card);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);

  --gradient-fa-blue: 135deg, hsl(217 91% 60%) 0%, hsl(200 90% 70%) 100%;
  --gradient-fa-green: 135deg, hsl(155 70% 55%) 0%, hsl(170 80% 65%) 100%;
  --gradient-fa-card: 180deg, hsl(var(--card)) 0%, hsl(var(--card)) 90%,
    hsl(var(--card)) 100%;
  --gradient-fa-gloss: 135deg, rgba(255, 255, 255, 0.2) 0%,
    rgba(255, 255, 255, 0) 100%;

  --shadow-fa-sm: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  --shadow-fa-md: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06);
  --shadow-fa-lg: 0 10px 15px rgba(0, 0, 0, 0.1), 0 4px 6px rgba(0, 0, 0, 0.05);
  --fa-inner: inset 0 1px 2px rgba(0, 0, 0, 0.1);

  --text-shadow-default: 0 1px 1px rgba(0, 0, 0, 0.2);
  --text-shadow-sm: 0 1px 0px rgba(255, 255, 255, 0.4);
  --text-shadow-md: 0 2px 2px rgba(0, 0, 0, 0.2);
  --text-shadow-lg: 0 4px 4px rgba(0, 0, 0, 0.2);
}

@media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
}

body {
  background-image: url("/images/background.avif");
  background-size: cover;
  background-attachment: fixed;
  background-position: center;
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

@layer base {
  glossy-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.4) 0%,
      rgba(255, 255, 255, 0.1) 100%
    );
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
  }

  .glossy-effect.bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    border-radius: inherit;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }

  .fa-gradient-blue {
    background: linear-gradient(var(--gradient-fa-blue));
  }
  .fa-gradient-green {
    background: linear-gradient(var(--gradient-fa-green));
  }
  .fa-gradient-card {
    background: linear-gradient(var(--gradient-fa-card));
  }
  .fa-gloss {
    position: relative;
  }
  .fa-gloss::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 50%;
    border-radius: inherit;
    background: linear-gradient(var(--gradient-fa-gloss));
    opacity: 0.8;
    pointer-events: none;
    z-index: 1;
  }
  .fa-gloss.bottom::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 30%;
    border-radius: inherit;
    background: linear-gradient(
      0deg,
      rgba(0, 0, 0, 0.1) 0%,
      rgba(0, 0, 0, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
}

@layer components {
  .shadow-fa-sm {
    box-shadow: var(--shadow-fa-sm), var(--fa-inner);
  }
  .shadow-fa-md {
    box-shadow: var(--shadow-fa-md), var(--fa-inner);
  }
  .shadow-fa-lg {
    box-shadow: var(--shadow-fa-lg), var(--fa-inner);
  }
  .text-shadow-default {
    text-shadow: var(--text-shadow-default);
  }
  .text-shadow-sm {
    text-shadow: var(--text-shadow-sm);
  }
  .text-shadow-md {
    text-shadow: var(--text-shadow-md);
  }
  .text-shadow-lg {
    text-shadow: var(--text-shadow-lg);
  }

  .glass-effect {
    @apply backdrop-blur-lg border border-white/20 shadow-fa-lg;
  }

  .gloss-highlight::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 60%;
    border-radius: inherit;
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.5) 0%,
      rgba(255, 255, 255, 0) 100%
    );
    pointer-events: none;
    z-index: 1;
  }
}

@layer utilities {
  .my-animate {
    opacity: 1 !important;
    transform: translateY(0) !important;
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  .hidden-for-animation {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }
}