/* Custom styles if needed to supplement Tailwind */
body {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    color: #0B1220;
    /* Background managed by utility classes for gradient */
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Poppins', system-ui, -apple-system, sans-serif;
}

/* Smooth scrolling for the whole page */
html {
    scroll-behavior: smooth;
}

/* Audio Level Meter Animation */
@keyframes equalizer {
    0% {
        height: 10%;
    }

    50% {
        height: 100%;
    }

    100% {
        height: 10%;
    }
}

/* Phase 11: LED Visualizer Styles */
.hero-dark {
    /* Richer gradient with a subtle orange/blue top glow fading to dark */
    /* background: radial-gradient(circle at 50% -20%, #1e293b 0%, #0f172a 50%, #020617 100%); */
    background: radial-gradient(ellipse at top, #1e293b 0%, #020617 100%);
    /* Fallback/Simple */
    /* background: radial-gradient(70% 80% at 50% 0%, #2d3748 0%, #0f172a 50%, #000000 100%); */
    /* Final Choice: Balanced Dark */
    /* Let's try a bit of color */
    /* background: radial-gradient(circle at 50% 0%, #2a324b 0%, #111827 60%, #000000 100%); */
    color: #f8fafc;
    position: relative;
    overflow: hidden;
}

.footer-dark {
    background: #020617;
    /* Solid dark or simple gradient matching bottom of hero */
    color: #f8fafc;
    position: relative;
    overflow: hidden;
}

.mobile-menu-bg {
    background: radial-gradient(circle at 50% 0%, #2a324b 0%, #111827 60%, #000000 100%);
    color: #f8fafc;
}

.visualizer {
    position: relative;
    margin-top: 40px;
    /* Spacing between button and bars */
    width: 100%;
    height: 160px;
    /* Taller for better meter resolution */
    display: flex;
    align-items: flex-end;
    justify-content: center;
    gap: 4px;
    /* Increased gap for cleaner separation */
    padding: 0 5%;
    z-index: 0;
    opacity: 0.9;
    /* Higher opacity for vivid LEDs */
    pointer-events: none;
}

.v-bar {
    width: 20px;
    height: 100%;
    /* Fixed full height */
    background: #1e293b;
    /* Unlit LED color (Slate-800) */
    position: relative;
    border-radius: 2px 2px 0 0;
    overflow: hidden;

    /* Segmented Look: Larger segments for fewer LEDs */
    -webkit-mask-image: repeating-linear-gradient(to bottom,
            black 0px,
            black 8px,
            /* Segment height (doubled) */
            transparent 8px,
            transparent 10px
            /* Gap height (2px) */
        );
    mask-image: repeating-linear-gradient(to bottom,
            black 0px,
            black 8px,
            transparent 8px,
            transparent 10px);
}

.v-bar-inner {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    /* Initial height 0, animated via JS/CSS */
    height: 50%;

    /* Fixed Gradient: Background size matches container height so colors don't move */
    background: linear-gradient(to top,
            #22c55e 0%, #22c55e 50%,
            /* Green */
            #eab308 50%, #eab308 80%,
            /* Yellow */
            #ef4444 80%, #ef4444 100%
            /* Red */
        );
    background-size: 100% 160px;
    /* Matches .visualizer height */
    background-position: bottom;
    background-repeat: no-repeat;

    animation: equalizer 1s ease-in-out infinite;

    /* Glow */
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.4);
}

/* Hero Text Shadows for depth */
.text-shadow-lg {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.5), 0 2px 6px rgba(0, 0, 0, 0.3);
}

.text-shadow-md {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}

.text-shadow-glow {
    text-shadow: 0 0 20px rgba(251, 146, 60, 0.3), 0 0 40px rgba(251, 146, 60, 0.2);
}