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

:root {
  font-family: 'Inter', system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;
  color-scheme: dark; /* Force dark scheme to match your brand */
  color: rgba(255, 255, 255, 0.87);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  
  /* FIX: Prevents header from covering section titles */
  scroll-padding-top: 5rem; 
}

/* --- Performance & CLS Fixes --- */
img, video, .card, svg {
  /* Tells the browser to optimize these for animations */
  will-change: transform, opacity;
}

/* Reserves space for cards before they load to fix CLS */
.card {
  aspect-ratio: 1 / 1.1; 
  display: flex;
  flex-direction: column;
}

@media (max-width: 767px) {
    #pass-the-test .grid .card {
      width: calc(50% - 0.5rem);
      height: auto;
      aspect-ratio: auto; /* Allow flexibility on small mobile */
    }
}

/* --- Re-organized Body & Background --- */
body {
    background-color: #0d0d0d;
    /* Improved gradient for performance: use a fixed background instead of a massive radial one */
    background-attachment: fixed;
    background-image: radial-gradient(circle at top, rgba(124, 58, 237, 0.15) 0%, transparent 70%);
    margin: 0;
    padding: 0;
}

/* --- Branding & Elements --- */
.gradient-text {
    @apply bg-clip-text text-transparent bg-gradient-to-r from-violet-400 to-violet-600;
}

.glassmorphism {
    background: rgba(13, 13, 13, 0.75);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.glow-button {
    @apply transition-all duration-300;
    box-shadow: 0 4px 15px rgba(124, 58, 237, 0.2);
}

.glow-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(124, 58, 237, 0.4);
}

/* --- SVG Drawing Animations --- */
.draw-checkmark, .draw-circle, .divider-line, .drawable-path {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.5s cubic-bezier(0.4, 0, 0.2, 1);
}

.is-visible .draw-checkmark, 
.is-visible .draw-circle, 
.is-visible .divider-line,
.group:hover .drawable-path {
    stroke-dashoffset: 0;
}

/* --- Optimized Mobile Carousel --- */
@media (max-width: 767px) {
    .mobile-carousel-container {
        display: block;
        overflow: hidden; /* Changed from auto to hidden for the CSS animation */
        width: 100%;
        mask-image: linear-gradient(to right, transparent, black 15%, black 85%, transparent);
    }

    /* Fixed: The CSS animation for the carousel track */
    .carousel-track {
        display: flex;
        width: max-content;
        animation: scrollLogos 20s linear infinite;
    }

    .carousel-item {
        flex-shrink: 0;
        width: 140px;
        padding: 0 20px;
        opacity: 0.5;
    }
}

@keyframes scrollLogos {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* --- FAQ Logic --- */
.faq-answer {
    transition: max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    max-height: 0;
    opacity: 0;
}

.faq-item.active .faq-answer {
    opacity: 1;
}