/* UI screenshots share the photographed scene's crop and theme timing. */
/* Protection uses its bright purple/cyan studio photograph without grading. */
.feature-slide[data-scene=protection] .feature-visual::before {
    background:linear-gradient(180deg,transparent 0 48%,#11193288 64%,#111932eb 85%,#111932 100%);
}
@media (max-width:900px) {
    .feature-slide[data-scene=protection] .feature-visual::before {
        background:linear-gradient(180deg,transparent 0,transparent calc(var(--scene-photo-height) - 42px),#111932 calc(var(--scene-photo-height) + 5px),#111932 100%);
    }
}
@media (max-width:700px) {
    .feature-slide[data-scene=protection] .feature-photo {height:auto;aspect-ratio:4/3;}
    .feature-slide[data-scene=protection] .feature-meta {left:auto;right:14px;}
    .feature-slide[data-scene=protection] .feature-visual figcaption {
        top:calc(var(--scene-photo-height) - 24px);left:14px;right:auto;
    }
}
.feature-visual .scene-screen {
    position:absolute;
    top:0;
    left:0;
    width:3200px;
    height:1800px;
    max-width:none;
    display:block;
    transform-origin:0 0;
    pointer-events:none;
    user-select:none;
    visibility:hidden;
    z-index:0;
    backface-visibility:hidden;
}
.feature-visual .scene-screen.screen-positioned { visibility:visible; }
.feature-visual .scene-screen-dark { opacity:1; }
.feature-visual .scene-screen-light {
    opacity:0;
    transition:opacity var(--scene-duration,900ms) var(--scene-ease,ease);
}
html[data-theme=light] .feature-visual .scene-screen-light { opacity:1; }
html[data-theme=light] .feature-visual:not(.scene-ready) .scene-screen-dark { opacity:0; }
@media (prefers-reduced-motion:reduce) {
    .feature-visual .scene-screen-light { transition:none; }
}