/* ═══════════════════════════════════════════════════════════
   OpenWhisper — Animations & Keyframes
   Minimal — no scroll-triggered animations
   ═══════════════════════════════════════════════════════════ */

/* ── Animation style previews (showcase balls) ───────────── */
@keyframes mellow-move {
    0%, 100% { left: 10%; }
    50% { left: 70%; }
}

@keyframes smooth-move {
    0%, 100% { left: 10%; }
    50% { left: 70%; }
}

@keyframes snappy-move {
    0%, 100% { left: 10%; }
    50% { left: 70%; }
}

@keyframes bouncy-move {
    0%, 100% { left: 10%; }
    50% { left: 70%; }
}

/* ── Typewriter cursor blink ───────────────────────────── */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

.terminal-body {
    position: relative;
}

.terminal-body::after {
    content: '\2588';
    animation: blink 1s step-end infinite;
    color: var(--muted-foreground);
}

/* ── Card hover ──────────────────────────────────────────── */
.feature-card:hover,
.export-card:hover {
    box-shadow: 0 8px 32px var(--card-shadow);
}

/* ── Button base ─────────────────────────────────────────── */
.btn {
    position: relative;
    overflow: hidden;
}

/* ── Footer link underline slide ─────────────────────────── */
.footer-col a {
    position: relative;
}

.footer-col a::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--foreground);
    transition: width 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

.footer-col a:hover::after {
    width: 100%;
}

/* ── Shell header scroll state ───────────────────────────── */
.shell-header.scrolled {
    background: var(--outer-bg);
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .style-preview::after,
    .terminal-body::after {
        animation: none;
    }

    * {
        transition-duration: 0s !important;
        animation-duration: 0s !important;
    }
}