/* --- GLOBAL STYLES & STATE MANAGEMENT --- */
body {
  /* Prevent horizontal scrollbar when content is pushed */
  overflow-x: hidden;
}

/* Lock body scroll when modal or drawer is open */
body.modal-is-open,
body.drawer-is-open {
  overflow: hidden;
}

/* --- MODAL ANIMATIONS --- */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: scale(.98);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
    transform: scale(1);
  }

  to {
    opacity: 0;
    transform: scale(.98);
  }
}

.animate-fade-in {
  animation: fadeIn 180ms ease-out forwards;
}

.animate-fade-out {
  animation: fadeOut 160ms ease-in forwards;
}

.focus-ring:focus {
  outline: 3px solid rgba(99, 102, 241, 0.18);
  outline-offset: 2px;
}

/* --- DRAWER ANIMATIONS --- */
@keyframes slideInRight {
  from {
    transform: translateX(100%);
  }

  to {
    transform: translateX(0);
  }
}

@keyframes slideOutRight {
  from {
    transform: translateX(0);
  }

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

.animate-slide-in-right {
  animation: slideInRight 300ms cubic-bezier(0, 0, 0.2, 1) forwards;
}

.animate-slide-out-right {
  animation: slideOutRight 300ms cubic-bezier(0.4, 0, 1, 1) forwards;
}


/* --- FLUID FONT SIZE FOR HEADLINE --- */
.font-fluid-headline {
  /* Min size: 1.875rem, Preferred size: scales with viewport, Max size: 3rem */
  font-size: clamp(1.875rem, 1rem + 3vw, 3rem);
}

/* [BeatCoders] Fix Test Case Layout - Vertical Stack */
.test-case-content {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
}

.test-case-content>div {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  padding-bottom: 12px;
  border-right: none !important;
  padding-right: 0 !important;
}

.test-case-content>div:last-child {
  border-bottom: none;
}

/* --- FEATURE SHOWCASE GRID --- */
.feature-card {
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  position: relative;
  overflow: hidden;
  z-index: 1;
}

.dark .feature-card {
  background: rgba(30, 41, 59, 0.4);
  border: 1px solid rgba(255, 255, 255, 0.05);
}

.feature-card:hover {
  transform: translateY(-8px) scale(1.02);
  border-color: rgba(99, 102, 241, 0.5);
  box-shadow: 0 20px 40px -15px rgba(99, 102, 241, 0.2);
  z-index: 2;
}

.feature-icon-wrapper {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.1), rgba(168, 85, 247, 0.1));
  transition: transform 0.4s ease;
}

.dark .feature-icon-wrapper {
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.2), rgba(168, 85, 247, 0.2));
}

.feature-card:hover .feature-icon-wrapper {
  transform: scale(1.1) rotate(5deg);
}

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

  50% {
    background-position: 100% 50%;
  }

  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient-x {
  background-size: 200% 200%;
  animation: gradient-x 6s ease infinite;
}
/* --- Live Beat Visualizer --- */
.bars {
    display: flex;
    align-items: flex-end;
    gap: 4px;
    height: 40px;
    width: 100%;
    margin-top: 15px;
}

.bar {
    flex: 1;
    background: var(--accent1);
    border-radius: 4px;
    transition: height 0.1s ease;
    height: 10%; /* Default idle height */
    opacity: 0.3;
}

/* Enhancing the container */
.wave-wrap {
    background: var(--bg2);
    border-radius: 8px;
    height: 80px;
    width: 100%;
    position: relative;
    overflow: hidden;
    border: 1px solid var(--glass);
}


/* Thin Lines Refinement */
.bars {
    justify-content: center; /* Center the thin lines */
    gap: 8px; /* More space between thin lines */
}

.bar {
    flex: none; /* Disable auto-grow */
    width: 4px; /* Fixed thin width */
    border-radius: 2px; /* Sharper caps */
}