/* Studying + self-recording scene for /demo — pure CSS/SVG animation */
@media (prefers-reduced-motion: reduce) {
    .demo-anim-person,
    .demo-anim-hands,
    .demo-anim-arm,
    .demo-anim-screen,
    .demo-anim-rec-dot,
    .demo-anim-rig {
        animation: none !important;
    }
}

.demo-record-scene {
    width: 100%;
    max-width: 340px;
    margin: 0 auto 24px;
    border-radius: 16px;
    background: linear-gradient(180deg, #e8f0ec 0%, #dce8e2 45%, #cfdad4 100%);
    border: 1px solid rgba(127, 168, 154, 0.35);
    box-shadow: 0 8px 28px rgba(15, 40, 30, 0.08);
    overflow: hidden;
}

.demo-record-scene svg {
    display: block;
    width: 100%;
    height: auto;
    vertical-align: middle;
}

/* Person + hands: same subtle reading motion (synced) */
.demo-anim-person,
.demo-anim-hands {
    animation: demoStudyBob 2.8s ease-in-out infinite;
    transform-origin: 118px 92px;
    transform-box: fill-box;
}

.demo-anim-hands {
    transform-origin: 119px 118px;
}

@keyframes demoStudyBob {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }
    35% {
        transform: translateY(-2px) rotate(-0.8deg);
    }
    65% {
        transform: translateY(1px) rotate(0.6deg);
    }
}

/* Hands on keyboard — slight move */
.demo-anim-arm {
    animation: demoArmNudge 2.8s ease-in-out infinite;
    transform-origin: 106px 119px;
    transform-box: fill-box;
}

@keyframes demoArmNudge {
    0%,
    100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(-3deg);
    }
}

/* Laptop screen shimmer = “working” */
.demo-anim-screen {
    animation: demoScreenGlow 2s ease-in-out infinite;
}

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

/* Recording dot */
.demo-anim-rec-dot {
    animation: demoRecPulse 1.1s ease-in-out infinite;
}

@keyframes demoRecPulse {
    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.45;
        transform: scale(0.92);
    }
}

/* Phone / camera body subtle float */
.demo-anim-rig {
    animation: demoRigFloat 3.2s ease-in-out infinite;
    transform-origin: 249px 88px;
    transform-box: fill-box;
}

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

[data-theme="dark"] .demo-record-scene {
    background: linear-gradient(180deg, #1a2220 0%, #141a18 100%);
    border-color: rgba(127, 168, 154, 0.25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

[data-theme="dark"] .demo-record-scene .demo-surface {
    fill: #2a3430;
}

[data-theme="dark"] .demo-record-scene .demo-desk {
    fill: #3d4a44;
}