@layer reset, base, tokens, recipes, utilities;

.lucide {
    stroke-width: 3px;
}

.input,
.button--variant_outline {
    border-bottom-width: 2px;
}

/* softer card shadow + subtle accent top border on main card only */
.card__root {
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.12), 0px 0px 1px rgba(0, 0, 0, 0.12);
}

.main-card {
    border-top: 3px solid rgba(255, 230, 41, 0.6);
}

/* ── flowing audio waveform background ─────────────────────── */
.wave-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

/* lift all sibling content above the waves */
.wave-bg ~ * {
    position: relative;
    z-index: 1;
}

.wave-line {
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;   /* 2× viewport so -50% translateX = exactly 1 viewport */
    height: 100%;
}

@media (prefers-reduced-motion: no-preference) {
    .wave-line {
        animation: wave-scroll var(--wave-dur, 15s) linear infinite;
        animation-delay: var(--wave-delay, 0s);
    }
}

[data-theme="light"] .wave-line { opacity: calc(var(--wave-op, 1) * 0.30); }
[data-theme="dark"]  .wave-line { opacity: calc(var(--wave-op, 1) * 0.16); }

@keyframes wave-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}