/* =============================================
   IDENTITY - Shared "Director's Cut" primitives
   REC dot · viewfinder corners · autofocus cursor
   · shutter "cut" page transitions
   ============================================= */

/* ---------- REC dot ---------- */
.rec-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--rec);
    box-shadow: 0 0 10px rgba(255, 59, 59, 0.75);
    animation: recBlink 1.1s steps(1) infinite;
    flex-shrink: 0;
}

/* ---------- Viewfinder corner brackets ---------- */
.vf-corner {
    position: absolute;
    width: 26px;
    height: 26px;
    border: 0 solid rgba(241, 236, 227, 0.55);
    pointer-events: none;
}

.vf-corner.tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.vf-corner.tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.vf-corner.bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.vf-corner.br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }

/* ---------- Autofocus cursor (desktop, fine pointer only) ---------- */
.af {
    position: fixed;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    pointer-events: none;
    z-index: 9995;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.af.is-visible {
    opacity: 1;
}

.af-c {
    position: absolute;
    top: 0;
    left: 0;
    width: 10px;
    height: 10px;
    border: 0 solid rgba(241, 236, 227, 0.8);
    transition: border-color 0.25s ease;
    will-change: transform;
}

.af-tl { border-top-width: 1.5px; border-left-width: 1.5px; }
.af-tr { border-top-width: 1.5px; border-right-width: 1.5px; }
.af-bl { border-bottom-width: 1.5px; border-left-width: 1.5px; }
.af-br { border-bottom-width: 1.5px; border-right-width: 1.5px; }

.af-label {
    position: absolute;
    top: 0;
    left: 0;
    font-family: var(--font-mono);
    font-size: 9px;
    letter-spacing: 0.14em;
    color: var(--primary-color);
    white-space: nowrap;
    opacity: 0;
    transition: opacity 0.2s ease;
    will-change: transform;
}

.af.is-locked .af-c {
    border-color: var(--primary-color);
}

.af.is-locked .af-label {
    opacity: 1;
}

.af.is-down .af-c {
    border-color: var(--rec);
}

/* ---------- Shutter "cut" between pages ----------
   Uses html pseudo-elements so it exists at first paint (no flash). */
html.cut-enter::before,
html.cut-enter::after,
html.cut-leave::before,
html.cut-leave::after {
    content: '';
    position: fixed;
    left: 0;
    width: 100%;
    height: 50.5%;
    background: var(--bg-deep);
    z-index: 10001;
    pointer-events: none;
}

html.cut-enter::before,
html.cut-leave::before {
    top: 0;
    box-shadow: inset 0 -2px 0 var(--primary-color);
}

html.cut-enter::after,
html.cut-leave::after {
    bottom: 0;
    box-shadow: inset 0 2px 0 var(--primary-color);
    content: 'CUT';
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 14px;
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: 0.4em;
    color: var(--primary-color);
}

html.cut-leave::before { animation: shutterCloseTop 0.42s var(--ease-in-out) forwards; }
html.cut-leave::after { animation: shutterCloseBottom 0.42s var(--ease-in-out) forwards; }
html.cut-enter::before { animation: shutterOpenTop 0.75s 0.08s var(--ease-in-out) forwards; }
html.cut-enter::after { animation: shutterOpenBottom 0.75s 0.08s var(--ease-in-out) forwards; }

@keyframes shutterCloseTop { from { transform: translateY(-100%); } to { transform: translateY(0); } }
@keyframes shutterCloseBottom { from { transform: translateY(100%); } to { transform: translateY(0); } }
@keyframes shutterOpenTop { from { transform: translateY(0); } to { transform: translateY(-101%); } }
@keyframes shutterOpenBottom { from { transform: translateY(0); } to { transform: translateY(101%); } }

@media (prefers-reduced-motion: reduce) {
    html.cut-enter::before, html.cut-enter::after,
    html.cut-leave::before, html.cut-leave::after { display: none; }
    .af { display: none; }
}