.vf-brackets {
    position: absolute;
    inset: -26px;
    pointer-events: none;
    opacity: 0;
}

.is-animating .vf-brackets { animation: revealScale 0.6s var(--ease-out) 0.6s forwards; }
.anim-done .vf-brackets { opacity: 0.3; animation: bracketsBreathe 4s ease-in-out infinite; }

.vf-bracket {
    position: absolute;
    width: 20px;
    height: 20px;
}

.vf-bracket--tl { top: 0; left: 0; border-top: 1.5px solid rgba(255, 255, 255, 0.45); border-left: 1.5px solid rgba(255, 255, 255, 0.45); }
.vf-bracket--tr { top: 0; right: 0; border-top: 1.5px solid rgba(255, 255, 255, 0.45); border-right: 1.5px solid rgba(255, 255, 255, 0.45); }
.vf-bracket--bl { bottom: 0; left: 0; border-bottom: 1.5px solid rgba(255, 255, 255, 0.45); border-left: 1.5px solid rgba(255, 255, 255, 0.45); }
.vf-bracket--br { bottom: 0; right: 0; border-bottom: 1.5px solid rgba(255, 255, 255, 0.45); border-right: 1.5px solid rgba(255, 255, 255, 0.45); }

.vf-crosshair {
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0;
}

.is-animating .vf-crosshair { animation: fadeIn 0.5s var(--ease-out) 0.7s forwards; opacity: 0; }
.anim-done .vf-crosshair { opacity: 0.06; }

.vf-crosshair::before,
.vf-crosshair::after {
    content: "";
    position: absolute;
    background: rgba(255, 255, 255, 0.6);
}

.vf-crosshair::before {
    width: 1px;
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
}

.vf-crosshair::after {
    height: 1px;
    width: 100%;
    top: 50%;
    transform: translateY(-50%);
}

.vf-flash {
    position: absolute;
    inset: -60%;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, transparent 70%);
    opacity: 0;
    pointer-events: none;
    z-index: var(--z-float);
}

.vf-flash.is-firing { animation: flashFire 0.5s ease-out forwards; }

.vf-scanline {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--primary-rgb), 0.4), transparent);
    pointer-events: none;
    opacity: 0;
    top: 0;
}

.anim-done .vf-scanline {
    animation: scanline 4s ease-in-out 1s infinite;
}

.vf-exposure {
    position: absolute;
    bottom: -30px;
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-mono);
    font-size: 0.58rem;
    color: var(--text-ghost);
    letter-spacing: 0.12em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
}

.anim-done .vf-exposure { animation: revealUp 0.4s var(--ease-out) 0.3s forwards; }

.vf-rec {
    position: absolute;
    top: -28px;
    right: -8px;
    display: flex;
    align-items: center;
    gap: 5px;
    font-family: var(--font-mono);
    font-size: 0.55rem;
    color: var(--accent);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    opacity: 0;
    pointer-events: none;
}

.anim-done .vf-rec { animation: revealUp 0.4s var(--ease-out) 0.5s forwards; }

.vf-rec-dot {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--accent);
    animation: liveBlink 1.5s ease-in-out infinite;
}


@media (max-width: 480px) {
    .vf-brackets { inset: -18px; }
    .vf-bracket { width: 14px; height: 14px; }
    .vf-rec { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .vf-brackets,
    .vf-crosshair,
    .vf-exposure,
    .vf-rec {
        opacity: 1 !important;
        transform: none !important;
    }
    .vf-flash,
    .vf-scanline {
        display: none !important;
    }
}