/* Home dashboard reel — HTML/CSS “video” motion (runs when .reel-vid--active) */

@keyframes home-reel-session-glow {
    0%,
    100% {
        box-shadow: 0 0 16px rgba(61, 214, 140, 0.25);
        border-color: rgba(61, 214, 140, 0.45);
    }
    50% {
        box-shadow: 0 0 28px rgba(61, 214, 140, 0.45);
        border-color: rgba(61, 214, 140, 0.75);
    }
}

@keyframes home-reel-ai-scan-move {
    0% {
        transform: translateY(-100%);
        opacity: 0;
    }
    12% {
        opacity: 0.85;
    }
    88% {
        opacity: 0.85;
    }
    100% {
        transform: translateY(280%);
        opacity: 0;
    }
}

@keyframes home-reel-vicon-nudge {
    0%,
    100% {
        transform: translateX(-50%) translateY(0);
    }
    50% {
        transform: translateX(-50%) translateY(-3px);
    }
}

@keyframes home-reel-heat-pop {
    0%,
    100% {
        transform: scaleY(0.45);
        opacity: 0.65;
    }
    50% {
        transform: scaleY(1);
        opacity: 1;
    }
}

@keyframes home-reel-card-drift-a {
    0%,
    100% {
        transform: rotate(-6deg) translateY(0);
    }
    50% {
        transform: rotate(-4deg) translateY(-6px);
    }
}

@keyframes home-reel-card-drift-b {
    0%,
    100% {
        transform: rotate(8deg) translateY(0);
    }
    50% {
        transform: rotate(6deg) translateY(-8px);
    }
}

@keyframes home-reel-sheet-breathe {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        border-color: rgba(251, 191, 36, 0.45);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.03);
        border-color: rgba(251, 191, 36, 0.75);
    }
}

@keyframes home-reel-cursor-tap {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 0.9;
    }
    40% {
        transform: translate(-50%, -50%) scale(0.85);
        opacity: 1;
    }
}

@keyframes home-reel-timer-pulse {
    0%,
    100% {
        transform: translate(-50%, -50%) scale(1);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.04);
    }
}

@keyframes home-reel-xp-fill {
    0% {
        transform: scaleX(0);
        transform-origin: left center;
    }
    100% {
        transform: scaleX(1);
        transform-origin: left center;
    }
}

/* Active clip: play loops */
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-session-frame {
    animation: home-reel-session-glow 2.4s ease-in-out infinite;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-ai-scan {
    animation: home-reel-ai-scan-move 2.8s ease-in-out infinite;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-visual--session .home-reel-vicon {
    animation: home-reel-vicon-nudge 2s ease-in-out infinite;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span {
    animation: home-reel-heat-pop 1.35s ease-in-out infinite;
    transform-origin: bottom center;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span:nth-child(1) {
    animation-delay: 0s;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span:nth-child(2) {
    animation-delay: 0.08s;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span:nth-child(3) {
    animation-delay: 0.16s;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span:nth-child(4) {
    animation-delay: 0.24s;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span:nth-child(5) {
    animation-delay: 0.32s;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span:nth-child(6) {
    animation-delay: 0.4s;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span:nth-child(7) {
    animation-delay: 0.48s;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-flip-card--a {
    animation: home-reel-card-drift-a 3s ease-in-out infinite;
}
body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-flip-card--b {
    animation: home-reel-card-drift-b 3s ease-in-out infinite 0.15s;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-visual--tests .home-reel-sheet {
    animation: home-reel-sheet-breathe 2.2s ease-in-out infinite;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-cursor {
    animation: home-reel-cursor-tap 1.8s ease-in-out infinite;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-timer {
    animation: home-reel-timer-pulse 2s ease-in-out infinite;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-xpbar-fill {
    animation: home-reel-xp-fill 2.4s ease-out infinite;
}

@keyframes home-reel-neon-pulse {
    0%,
    100% {
        opacity: 0.88;
        filter: brightness(1);
    }
    50% {
        opacity: 1;
        filter: brightness(1.08);
    }
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active::before {
    animation: home-reel-neon-pulse 3s ease-in-out infinite;
}

@keyframes home-reel-text-in {
    0% {
        opacity: 0;
        transform: translateY(14px);
        filter: blur(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

@keyframes home-reel-text-glow {
    0%,
    100% {
        text-shadow:
            0 0 20px rgba(61, 214, 140, 0.15),
            0 2px 16px rgba(0, 0, 0, 0.5);
    }
    50% {
        text-shadow:
            0 0 28px rgba(61, 214, 140, 0.35),
            0 2px 20px rgba(0, 0, 0, 0.55);
    }
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-title {
    animation:
        home-reel-text-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) both,
        home-reel-text-glow 2.8s ease-in-out 0.52s infinite;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-desc {
    animation: home-reel-text-in 0.52s cubic-bezier(0.22, 1, 0.36, 1) 0.1s both;
}

body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .reel-cta-btn {
    animation: home-reel-text-in 0.48s cubic-bezier(0.22, 1, 0.36, 1) 0.2s both;
}

@media (prefers-reduced-motion: reduce) {
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-session-frame,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-ai-scan,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-visual--session .home-reel-vicon,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-heat-mini span,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-flip-card--a,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-flip-card--b,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-visual--tests .home-reel-sheet,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-cursor,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-timer,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-xpbar-fill {
        animation: none !important;
    }
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active::before {
        animation: none !important;
    }
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-title,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .home-reel-desc,
    body.app-dashboard-home .marketing-reel--dashboard .reel-vid--active .reel-cta-btn {
        animation: none !important;
    }
}