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

:root {
  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
  line-height: 1.5;
  font-weight: 400;

  color-scheme: light dark;
  color: rgba(255, 255, 255, 0.87);
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1 {
  @apply text-4xl md:text-6xl font-extrabold tracking-tight text-white;
}

h2 {
  @apply text-3xl font-bold text-white mb-8;
}

h3 {
  @apply text-2xl font-bold text-white mb-4;
}

a {
  font-weight: 500;
  color: #646cff;
  text-decoration: inherit;
}
a:hover {
  color: #535bf2;
}

button {
  border-radius: 8px;
  border: 1px solid transparent;
  padding: 0.6em 1.2em;
  font-size: 1em;
  font-weight: 500;
  font-family: inherit;
  background-color: #1a1a1a;
  cursor: pointer;
  transition: border-color 0.25s;
}
button:hover {
  border-color: #646cff;
}
button:focus,
button:focus-visible {
  outline: 4px auto -webkit-focus-ring-color;
}

@media (prefers-color-scheme: light) {
  :root {
    color: #213547;
    background-color: #1a1a1a;
  }
  a:hover {
    color: #747bff;
  }
  button {
    background-color: #f9f9f9;
  }
}
@media (max-width: 767px) { /* Apply only on small screens */
    #pass-the-test .grid .card {
      width: calc(50% - 0.5rem); /* Adjust width to fit two cards with a gap-4 (0.5rem * 2 = 1rem total gap, distributed between two cards) */
      height: auto; /* Allow height to adjust */
    }
  }
/* NEW: Fixed gradient background wrapper */
#gradient-background {
    position: fixed;
    inset: 0;
    z-index: -10;
    background-image: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.2) 0%, transparent 60%);
}

body {
    font-family: 'Inter', sans-serif; /* Moved from <style> block */
    background-color: #0d0d0d;
    background-image: radial-gradient(ellipse at top, rgba(124, 58, 237, 0.5) 0%, transparent 60%);
    color: #e5e7eb; /* gray-200 */
    min-height: 100vh; /* Ensure body covers at least the viewport height */
    margin: 0; /* Remove default body margin */
    padding: 0; /* Remove default body padding */
}
        
.gradient-text {
    background: linear-gradient(to right, #a78bfa, #7c3aed); /* violet-400 to violet-600 */
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.glassmorphism {
    background: rgba(18, 18, 18, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glow-button {
    transition: all 0.3s ease;
}
.glow-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(167, 139, 250, 0.4);
}

.fade-in-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.7);
}

/* NEW: Hero Section */
.hero-section video {
    display: block;
}


/* --- SVG ANIMATION STYLES --- */
.draw-checkmark {
    stroke-dasharray: 50;
    stroke-dashoffset: 50;
}
.is-visible .draw-checkmark {
    animation: draw-it 0.5s ease-out forwards;
}
.draw-circle { /* Moved from inside body rule */
stroke-dasharray: 650;
stroke-dashoffset: 650;
    animation: draw-it 0.5s ease-out forwards;
}
.is-visible .draw-circle {
    animation: draw-it 2s cubic-bezier(0.65, 0, 0.35, 1) 0.5s forwards;
}

@keyframes draw-it {
    to { stroke-dashoffset: 0; }
}

.divider-line {
    stroke-dasharray: 200;
    stroke-dashoffset: 200;
}
.is-visible .divider-line {
    animation: draw-it 1.5s ease-out forwards;
}

/* NEW: Find Your Path SVG Animations */
.path-card:hover .focus-line { animation: focus-pulse 1.5s ease-in-out infinite; }
.path-card:hover .stress-wave { animation: stress-calm 2s ease-in-out infinite; }
.path-card:hover .sleep-z { animation: float-up 3s ease-in-out infinite; }
.path-card:hover .idea-spark { animation: spark-burst 1.2s ease-out infinite; }

@keyframes focus-pulse {
    0%, 100% { stroke-width: 2; opacity: 0.5; }
    50% { stroke-width: 4; opacity: 1; }
}
@keyframes stress-calm {
    0%, 100% { d: path('M 2 12 C 4 8, 8 8, 10 12 S 14 16, 16 12'); }
    50% { d: path('M 2 12 C 4 14, 8 14, 10 12 S 14 10, 16 12'); }
}
@keyframes float-up {
    from { transform: translateY(0); opacity: 1; } 
    to { transform: translateY(-15px); opacity: 0; }
}
 @keyframes spark-burst {
 0% { transform: scale(0); opacity: 0; }
 50% { opacity: 1; }
 100% { transform: scale(1.5); opacity: 0; }
}
#sleep-z-2 { animation-delay: 0.5s; }
#sleep-z-3 { animation-delay: 1s; }
.idea-spark:nth-of-type(2) { animation-delay: 0.2s; }
.idea-spark:nth-of-type(3) { animation-delay: 0.4s; }
.idea-spark:nth-of-type(4) { animation-delay: 0.6s; }

   /* Custom styles for the card background and glow effect on hover */
   .card {
    background-color: #111113;
    border: 1px solid #2d2d30;
    transition: all 0.3s ease;
}
.card:hover {
    border-color: #A78BFA;
    box-shadow: 0 0 20px rgba(167, 139, 250, 0.25);
    transform: translateY(-4px);
}


/* --- SVG Hand-Drawn Animation Setup --- */

/* Static (default) state of the icon */
.static-path {
  stroke: #404040; /* A dark, muted gray */
  transition: opacity 0.3s ease;
}

/* Animated path (on hover) */
.drawable-path {
  stroke: #A78BFA; /* The vibrant purple color */
  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  transition: stroke-dashoffset 1.5s ease-in-out;
}

/* On hover, hide the static path and draw the animated one */
.group:hover .static-path {
  opacity: 0;
}
.group:hover .drawable-path {
  stroke-dashoffset: 0;
}

/* Keyframes for subtle, continuous motion */
@keyframes wiggle {
  0%, 100% { transform: rotate(-1deg); }
  50% { transform: rotate(1deg); }
}
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
@keyframes flicker {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.6; }
}

/* Applying continuous animations after the initial draw */
.group:hover .focus-brain { animation: wiggle 3s infinite ease-in-out 1.5s; transform-origin: center; }
.group:hover .stress-leaf { animation: wiggle 4s infinite ease-in-out 1.5s; transform-origin: bottom center; }
.group:hover .sleep-z { animation: float 2s infinite ease-in-out 1.5s; }
.group:hover .sleep-z:nth-of-type(2) { animation-delay: 1.7s; }
.group:hover .sleep-z:nth-of-type(3) { animation-delay: 1.9s; }
.group:hover .creativity-bulb { animation: flicker 2s infinite ease-in-out 1.5s; }

/* Staggering the draw-in effect */
.group:hover .drawable-path--2 { transition-delay: 0.2s; }
.group:hover .drawable-path--3 { transition-delay: 0.4s; }


/* --- Mobile Carousel for Research Logos --- */
/* Hide the carousel on medium and larger screens */
.mobile-carousel-container {
    display: none;
}

@media (max-width: 767px) { /* Apply only on small screens */
    .mobile-carousel-container {
        display: block;
        overflow-x: auto; /* Allow horizontal scrolling */
        scrollbar-width: none; /* Hide scrollbar for Firefox */
        -ms-overflow-style: none;  /* Hide scrollbar for IE and Edge */
        width: 100%;
 padding: 0 1rem;
    }

    .carousel-track {
        display: flex;
 flex-wrap: nowrap; /* Prevent wrapping */
        gap: 2rem;
    }

    .carousel-item {
        flex-shrink: 0; /* Prevent items from shrinking */
        width: 120px; /* Fixed width for each logo item */
        height: 80px; /* Fixed height for each logo item */
        display: flex;
        justify-content: center;
        align-items: center;
        opacity: 0.6; /* Keep the dimmed look */
    }

    .carousel-item img {
        max-width: 100%;
        max-height: 100%;
        object-fit: contain; /* Ensure images fit within the item */
    }
}

/* Responsive card sizing for Pass the Test section on small screens */
@media (max-width: 767px) {
    #pass-the-test .grid .card {
        width: 50%; /* Set width to 50% of the grid column */
        box-sizing: border-box; /* Include padding and border in the element's total width */
    }
}

.gradient-text {
    background: linear-gradient(to right, #a78bfa, #7c3aed);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-fill-color: transparent;
}

.glassmorphism {
    background: rgba(18, 18, 18, 0.7);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.glow-button {
    transition: all 0.3s ease;
}
.glow-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 25px rgba(167, 139, 250, 0.4);
}

.fade-in {
    animation: fadeIn 0.8s ease-in-out;
}

@keyframes fadeIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Styles for single post view */
.prose-dark {
    color: #d1d5db;
}
.prose-dark h1, .prose-dark h2, .prose-dark h3 {
    color: #fff;
}
.prose-dark p {
    line-height: 1.7;
}
.prose-dark a {
    color: #a78bfa;
}
.prose-dark blockquote {
    border-left-color: #7c3aed;
    color: #9ca3af;
}