/* 1. Base styles */
#download-status,
#install-steps,
#first-launch,
#download-again {
    scroll-behavior: smooth;
}

/* Pause the looping app demo on hover so it can be inspected */
.demo-window:hover .demo-sticky-bar,
.demo-window:hover .demo-pill-detect,
.demo-window:hover .demo-pill-starting,
.demo-window:hover .demo-pill-live,
.demo-window:hover .demo-timer-1,
.demo-window:hover .demo-timer-2,
.demo-window:hover .demo-timer-3,
.demo-window:hover .demo-timer-4,
.demo-window:hover .demo-cursor,
.demo-window:hover .demo-panel,
.demo-window:hover .demo-line-1,
.demo-window:hover .demo-line-2,
.demo-window:hover .demo-line-3,
.demo-window:hover .demo-line-4,
.demo-window:hover .demo-line-5,
.demo-window:hover .demo-typed {
    animation-play-state: paused;
}

/* 2. Reveal-on-load animation */
.reveal {
    opacity: 0;
    animation: dfRise 0.6s ease-out forwards;
}
.reveal.stagger-1 { animation-delay: 0.08s; }
.reveal.stagger-2 { animation-delay: 0.16s; }
.reveal.stagger-3 { animation-delay: 0.3s; }

@keyframes dfRise {
    from { opacity: 0; transform: translateY(12px); }
    to { opacity: 1; transform: none; }
}

/* 3. Component animations */
.download-bar {
    width: 6%;
    animation: dfBar 3s ease-out 0.4s forwards;
}

@keyframes dfBar {
    0% { width: 6%; }
    70% { width: 92%; }
    100% { width: 100%; }
}

.float-arrow {
    animation: dfFloat 3.4s ease-in-out infinite;
}

@keyframes dfFloat {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

.glow-icon {
    animation: dfGlow 2.6s ease-in-out infinite;
}

@keyframes dfGlow {
    0%, 100% { opacity: 0.55; }
    50% { opacity: 1; }
}

.drag-icon {
    animation: dfDrag 5s ease-in-out infinite;
}

@keyframes dfDrag {
    0%, 12% { transform: translate(0, 0); }
    55%, 72% { transform: translate(64px, 0); }
    100% { transform: translate(0, 0); }
}

/* App demo: meeting detected -> starting -> live (counting timer) -> click -> transcript.
   Single 18s loop shared across all pieces below so they stay in sync.
   The pill container is centered by a flex wrapper in the markup (not by transform),
   so these keyframes only ever need to animate opacity/scale — never translate/position. */
.demo-sticky-bar {
    animation: dfDemoBar 18s ease-in-out infinite;
}

@keyframes dfDemoBar {
    0%, 47% { opacity: 1; transform: scale(1); }
    49% { transform: scale(1.05); }
    51% { transform: scale(0.9); }
    53%, 93% { opacity: 0; transform: scale(0.9); }
    100% { opacity: 1; transform: scale(1); }
}

/* Pill content stages: detect -> starting -> live, cross-fading in place */
.demo-pill-stage { grid-row: 1; grid-column: 1; opacity: 0; }

.demo-pill-detect { animation: dfPillDetect 18s ease-in-out infinite; }
.demo-pill-starting { animation: dfPillStarting 18s ease-in-out infinite; }
.demo-pill-live { animation: dfPillLive 18s ease-in-out infinite; }

@keyframes dfPillDetect {
    0%, 12% { opacity: 1; }
    16%, 96% { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes dfPillStarting {
    0%, 14% { opacity: 0; }
    18%, 20% { opacity: 1; }
    24%, 100% { opacity: 0; }
}

@keyframes dfPillLive {
    0%, 22% { opacity: 0; }
    26%, 51% { opacity: 1; }
    53%, 100% { opacity: 0; }
}

.demo-detect-dot {
    animation: dfDemoPulse 1.6s ease-in-out infinite;
}

/* Counting timer inside the live pill: 00:00 -> 00:15 -> 00:30 -> 00:45 */
.demo-timer { opacity: 0; }

.demo-timer-1 { animation: dfTimer1 18s ease-in-out infinite; }
.demo-timer-2 { animation: dfTimer2 18s ease-in-out infinite; }
.demo-timer-3 { animation: dfTimer3 18s ease-in-out infinite; }
.demo-timer-4 { animation: dfTimer4 18s ease-in-out infinite; }

@keyframes dfTimer1 { 0%, 25% { opacity: 0; } 27%, 31% { opacity: 1; } 33%, 100% { opacity: 0; } }
@keyframes dfTimer2 { 0%, 31% { opacity: 0; } 33%, 37% { opacity: 1; } 39%, 100% { opacity: 0; } }
@keyframes dfTimer3 { 0%, 37% { opacity: 0; } 39%, 43% { opacity: 1; } 45%, 100% { opacity: 0; } }
@keyframes dfTimer4 { 0%, 43% { opacity: 0; } 45%, 52% { opacity: 1; } 54%, 100% { opacity: 0; } }

.demo-cursor {
    opacity: 0;
    animation: dfDemoCursor 18s ease-in-out infinite;
}

@keyframes dfDemoCursor {
    0%, 38% { opacity: 0; transform: translate(60px, 70px); }
    44% { opacity: 1; transform: translate(0, 10px); }
    51% { opacity: 1; transform: translate(0, 0) scale(0.85); }
    55%, 100% { opacity: 0; transform: translate(0, 0) scale(0.85); }
}

.demo-panel {
    opacity: 0;
    visibility: hidden;
    clip-path: inset(0 0 100% 0);
    transform-origin: top center;
    animation: dfDemoPanel 18s ease-in-out infinite;
}

@keyframes dfDemoPanel {
    0%, 52% { opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); }
    55% { opacity: 1; visibility: visible; }
    58%, 91% { opacity: 1; visibility: visible; clip-path: inset(0 0 0% 0); }
    95%, 100% { opacity: 0; visibility: hidden; clip-path: inset(0 0 100% 0); }
}

/* Live-typing transcript lines, staggered within the panel's visible window (58%-91%) */
.demo-line {
    opacity: 0;
    transform: translateY(6px);
}

.demo-line-1 { animation: dfDemoLine1 18s ease-out infinite; }
.demo-line-2 { animation: dfDemoLine2 18s ease-out infinite; }
.demo-line-3 { animation: dfDemoLine3 18s ease-out infinite; }
.demo-line-4 { animation: dfDemoLine4 18s ease-out infinite; }
.demo-line-5 { animation: dfDemoLine5 18s ease-out infinite; }

@keyframes dfDemoLine1 {
    0%, 59% { opacity: 0; transform: translateY(6px); }
    62%, 91% { opacity: 1; transform: none; }
    95%, 100% { opacity: 0; }
}

@keyframes dfDemoLine2 {
    0%, 66% { opacity: 0; transform: translateY(6px); }
    69%, 91% { opacity: 1; transform: none; }
    95%, 100% { opacity: 0; }
}

@keyframes dfDemoLine3 {
    0%, 73% { opacity: 0; transform: translateY(6px); }
    76%, 91% { opacity: 1; transform: none; }
    95%, 100% { opacity: 0; }
}

@keyframes dfDemoLine4 {
    0%, 80% { opacity: 0; transform: translateY(6px); }
    83%, 91% { opacity: 1; transform: none; }
    95%, 100% { opacity: 0; }
}

@keyframes dfDemoLine5 {
    0%, 86% { opacity: 0; transform: translateY(6px); }
    89%, 91% { opacity: 1; transform: none; }
    95%, 100% { opacity: 0; }
}

.demo-typed {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    width: 0;
    vertical-align: bottom;
    animation: dfDemoType 18s steps(36) infinite;
}

@keyframes dfDemoType {
    0%, 85% { width: 0; }
    90% { width: 36ch; }
    95%, 100% { width: 0; }
}

.demo-live-dot {
    animation: dfDemoPulse 1.6s ease-in-out infinite;
}

@keyframes dfDemoPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.35; }
}

.demo-wave {
    animation: dfDemoWave 1s ease-in-out infinite;
}

@keyframes dfDemoWave {
    0%, 100% { transform: scaleY(0.5); }
    50% { transform: scaleY(1); }
}

.demo-caret {
    animation: dfDemoCaret 0.9s steps(1) infinite;
}

@keyframes dfDemoCaret {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* 4. Accessibility */
@media (prefers-reduced-motion: reduce) {
    .reveal,
    .download-bar,
    .float-arrow,
    .glow-icon,
    .drag-icon,
    .demo-sticky-bar,
    .demo-panel,
    .demo-line-1,
    .demo-line-2,
    .demo-line-3,
    .demo-line-4,
    .demo-line-5,
    .demo-typed,
    .demo-pill-live,
    .demo-timer-4,
    .demo-live-dot,
    .demo-wave,
    .demo-caret {
        animation: none !important;
        opacity: 1 !important;
    }
    .download-bar { width: 100% !important; }
    .demo-cursor,
    .demo-pill-detect,
    .demo-pill-starting,
    .demo-timer-1,
    .demo-timer-2,
    .demo-timer-3 {
        animation: none !important;
        opacity: 0 !important;
        display: none;
    }
    .demo-panel { visibility: visible; clip-path: none; }
    .demo-line { transform: none; }
    .demo-typed { width: auto !important; animation: none !important; }
}