@tailwind base;
@tailwind components;
@tailwind utilities;

/* Definition of the design system. All colors, gradients, fonts, etc should be defined here. 
All colors MUST be HSL.
*/

@layer base {
  :root {
    --background: 0 0% 93%;
    --foreground: 225 18% 9%;

    --card: 0 0% 100%;
    --card-foreground: 225 18% 9%;

    --popover: 0 0% 100%;
    --popover-foreground: 225 18% 9%;

    --primary: 45 100% 50%;
    --primary-foreground: 225 18% 9%;

    --secondary: 0 0% 100%;
    --secondary-foreground: 225 18% 9%;

    --muted: 0 0% 88%;
    --muted-foreground: 225 18% 40%;

    --accent: 45 100% 50%;
    --accent-foreground: 225 18% 9%;

    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 0 0% 100%;

    --border: 0 0% 85%;
    --input: 0 0% 85%;
    --ring: 45 100% 50%;

    --radius: 0.75rem;

    --sidebar-background: 0 0% 98%;
    --sidebar-foreground: 240 5.3% 26.1%;
    --sidebar-primary: 240 5.9% 10%;
    --sidebar-primary-foreground: 0 0% 98%;
    --sidebar-accent: 240 4.8% 95.9%;
    --sidebar-accent-foreground: 240 5.9% 10%;
    --sidebar-border: 220 13% 91%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }

  .dark {
    --background: 225 18% 9%;
    --foreground: 0 0% 93%;

    --card: 225 18% 12%;
    --card-foreground: 0 0% 93%;

    --popover: 225 18% 12%;
    --popover-foreground: 0 0% 93%;

    --primary: 45 100% 50%;
    --primary-foreground: 225 18% 9%;

    --secondary: 225 18% 15%;
    --secondary-foreground: 0 0% 93%;

    --muted: 225 18% 15%;
    --muted-foreground: 0 0% 70%;

    --accent: 45 100% 50%;
    --accent-foreground: 225 18% 9%;

    --destructive: 0 62.8% 30.6%;
    --destructive-foreground: 0 0% 93%;

    --border: 225 18% 20%;
    --input: 225 18% 20%;
    --ring: 45 100% 50%;
    --sidebar-background: 240 5.9% 10%;
    --sidebar-foreground: 240 4.8% 95.9%;
    --sidebar-primary: 224.3 76.3% 48%;
    --sidebar-primary-foreground: 0 0% 100%;
    --sidebar-accent: 240 3.7% 15.9%;
    --sidebar-accent-foreground: 240 4.8% 95.9%;
    --sidebar-border: 240 3.7% 15.9%;
    --sidebar-ring: 217.2 91.2% 59.8%;
  }
}

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

  body {
    @apply bg-background text-foreground font-poppins;
  }

  html {
    scroll-behavior: smooth;
  }
}

@layer utilities {
  .certificate-texture {
    position: relative;
    background-image:
      linear-gradient(135deg, hsl(45 35% 97%), hsl(45 25% 92%)),
      radial-gradient(circle at top left, hsl(45 45% 98%) 0%, transparent 55%),
      radial-gradient(circle at bottom right, hsl(45 30% 88%) 0%, transparent 60%);
    background-blend-mode: multiply;
  }

  .certificate-texture::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160' viewBox='0 0 160 160'%3E%3Cg fill='none' fill-opacity='0.12'%3E%3Cpath d='M0 160V0h160v160H0Zm156-4V4H4v152h152Z' fill='%23b58c3c'/%3E%3Cpath d='M32 0v160M64 0v160M96 0v160M128 0v160M0 32h160M0 64h160M0 96h160M0 128h160' stroke='%23b58c3c' stroke-width='.75' stroke-dasharray='2 8'/%3E%3C/g%3E%3C/svg%3E");
    mix-blend-mode: multiply;
    opacity: 0.35;
  }

  .certificate-stripes {
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image:
      repeating-linear-gradient(
        -45deg,
        rgba(18, 20, 23, 0.12) 0px,
        rgba(18, 20, 23, 0.12) 18px,
        transparent 18px,
        transparent 34px
      );
    mix-blend-mode: multiply;
    opacity: 0.22;
  }

  .certificate-stripes::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at top right, rgba(255, 220, 120, 0.3), transparent 55%);
    mix-blend-mode: screen;
    opacity: 0.6;
  }

  .signature-font {
    font-family: "Great Vibes", "Dancing Script", "Pacifico", cursive;
    letter-spacing: 0.05em;
  }

  .animate-fade-in-up {
    animation: fade-in-up 0.8s ease-out forwards;
  }

  @keyframes fade-in-up {
    from {
      opacity: 0;
      transform: translateY(20px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .animate-fade-in-from-left {
    animation: fade-in-from-left 0.75s ease-out forwards;
  }

  @keyframes fade-in-from-left {
    from {
      opacity: 0;
      transform: translateX(-28px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-fade-in-from-right {
    animation: fade-in-from-right 0.75s ease-out forwards;
  }

  @keyframes fade-in-from-right {
    from {
      opacity: 0;
      transform: translateX(28px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .animate-live-pulse {
    animation: live-pulse 1.5s ease-in-out infinite;
  }

  .countdown-pulse {
    animation: countdown-pulse 1s ease-in-out;
    display: inline-block;
    transform-origin: center;
  }

  @keyframes countdown-pulse {
    0% {
      transform: scale(0.6);
      opacity: 0;
    }
    45% {
      transform: scale(1);
      opacity: 1;
    }
    100% {
      transform: scale(1.2);
      opacity: 0;
    }
  }

  @keyframes live-pulse {
    0%,
    100% {
      opacity: 1;
      transform: scale(1);
    }
    50% {
      opacity: 0.7;
      transform: scale(1.2);
    }
  }

  @keyframes marquee {
    0% {
      transform: translateX(0);
    }

    100% {
      transform: translateX(-100%);
    }
  }

  @keyframes marquee2 {
    0% {
      transform: translateX(100%);
    }

    100% {
      transform: translateX(0);
    }
  }

  .marquee-track {
    animation: marquee 18s linear infinite;
  }

  .marquee-track-duplicate {
    animation: marquee2 18s linear infinite;
  }

  .animate-cta-pulse {
    animation: cta-pulse 3s ease-in-out infinite;
  }

  @keyframes cta-pulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 hsl(45 100% 50% / 0.4);
    }
    50% {
      transform: scale(1.02);
      box-shadow: 0 0 20px 8px hsl(45 100% 50% / 0);
    }
  }

  .animate-cta-glow {
    animation: cta-glow 2s ease-in-out infinite;
  }

  @keyframes cta-glow {
    0%,
    100% {
      filter: brightness(1);
    }
    50% {
      filter: brightness(1.1);
    }
  }

  .animate-whatsapp-pulse {
    animation: whatsapp-pulse 2.6s ease-in-out infinite;
  }

  @keyframes whatsapp-pulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 0 0 0 hsl(142 70% 49% / 0.35);
    }
    50% {
      transform: scale(1.03);
      box-shadow: 0 0 36px 10px hsl(142 70% 49% / 0);
    }
  }

  .bg-animated-gradient {
    background-image: linear-gradient(
      120deg,
      hsl(45 100% 50%),
      hsl(45 100% 65%),
      hsl(45 100% 75%),
      hsl(45 100% 65%),
      hsl(45 100% 50%)
    );
    background-size: 200% 200%;
    animation: gradient-shift 3s ease infinite;
  }

  @keyframes gradient-shift {
    0% {
      background-position: 0% 50%;
    }
    50% {
      background-position: 100% 50%;
    }
    100% {
      background-position: 0% 50%;
    }
  }

  .animate-certificate-pulse {
    animation: certificate-pulse 2.4s ease-in-out infinite;
  }

  @keyframes certificate-pulse {
    0%,
    100% {
      transform: scale(1);
      box-shadow: 0 40px 120px -45px rgba(0, 0, 0, 0.55);
    }
    50% {
      transform: scale(1.018);
      box-shadow: 0 54px 148px -42px rgba(255, 191, 0, 0.36);
    }
  }

  .scrollbar-hide::-webkit-scrollbar {
    display: none;
  }

  .scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
}