/**
 * Custom Avatars Landing Page
 * Animation styles for avatar upload and voice cloning demo sequences.
 * Reuses .video-avatar-* and .voice-* classes from the app; this file
 * only adds the demo container chrome, step transitions, and keyframes.
 */

/* ---- Demo containers ---- */

.js-landing-demo {
    pointer-events: none;
    user-select: none;
    max-width: 460px;
    margin: 0 auto;
}

/* ---- Avatar demo: camera overlay ---- */

.js-avatar-demo {
    overflow: hidden;
    min-height: 380px;
}

.js-demo-camera-overlay {
    position: absolute;
    inset: 0;
    z-index: 10;
    border-radius: inherit;
}

.js-avatar-demo .js-demo-take-photo-card {
    transition: border-color 0.3s ease;
}

.js-avatar-demo.js-demo-step-highlight .js-demo-take-photo-card {
    border-color: #6F67FF;
}

.js-avatar-demo.js-demo-step-camera .js-demo-camera-overlay {
    display: flex !important;
    animation: demoFadeIn 0.3s ease forwards;
}

.js-avatar-demo.js-demo-step-generating .js-demo-camera-overlay {
    display: none !important;
}

.js-avatar-demo.js-demo-step-generating .js-demo-take-photo-card .video-avatar-none:not(.js-demo-generating-state) {
    display: none !important;
}

.js-avatar-demo.js-demo-step-generating .js-demo-generating-state {
    display: flex !important;
}

.js-avatar-demo.js-demo-step-generating .js-demo-take-photo-card {
    border-color: #6F67FF;
}

.js-avatar-demo.js-demo-step-done .js-demo-camera-overlay {
    display: none !important;
}

.js-avatar-demo.js-demo-step-done .js-demo-new-avatar {
    opacity: 1 !important;
    visibility: visible !important;
    animation: demoFadeIn 0.4s ease forwards;
}

.js-avatar-demo.js-demo-step-done .js-demo-new-avatar .video-avatar-option {
    border-color: #6F67FF;
}

/* ---- Voice demo transitions ---- */

.js-voice-demo.js-demo-step-highlight .js-demo-record-card {
    border-color: #6F67FF;
}

.js-voice-demo.js-demo-step-recording .js-demo-record-idle {
    display: none !important;
}

.js-voice-demo.js-demo-step-recording .js-demo-record-active {
    display: block !important;
}

.js-voice-demo.js-demo-step-recording .js-demo-record-card {
    border-color: #6F67FF;
}

.js-voice-demo.js-demo-step-cloning .js-demo-record-idle {
    display: none !important;
}

.js-voice-demo.js-demo-step-cloning .js-demo-record-active {
    display: none !important;
}

.js-voice-demo.js-demo-step-cloning .js-demo-clone-loading {
    display: block !important;
}

.js-voice-demo.js-demo-step-cloning .js-demo-record-card {
    border-color: #6F67FF;
}

.js-voice-demo.js-demo-step-done .js-demo-record-idle {
    display: block !important;
}

.js-voice-demo.js-demo-step-done .js-demo-record-active {
    display: none !important;
}

.js-voice-demo.js-demo-step-done .js-demo-clone-loading {
    display: none !important;
}

.js-voice-demo.js-demo-step-done .js-demo-record-card {
    border-color: #e5e7eb;
}

.js-voice-demo.js-demo-step-done .js-demo-new-voice {
    opacity: 1 !important;
    animation: demoFadeIn 0.4s ease forwards;
}

/* ---- Shutter flash ---- */

.js-demo-shutter-flash {
    position: absolute;
    inset: 0;
    background: #fff;
    opacity: 0;
    z-index: 20;
    border-radius: inherit;
    pointer-events: none;
}

.js-demo-shutter-flash.js-flash-active {
    animation: shutterFlash 0.35s ease-out forwards;
}

@keyframes shutterFlash {
    0% { opacity: 0.85; }
    100% { opacity: 0; }
}

/* ---- Keyframes ---- */

@keyframes demoFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}