/* =========================================================================
   OTTOBIT — cornice di 1px che si disegna (card col logo in Work e nei progetti)
   Stessa animazione della sezione clienti in home: parte dal centro del lato in
   basso, corre verso i due angoli, sale lungo i lati e si chiude al centro in alto.
   Si avvia quando la card diventa visibile (classe .is-visible), dopo la tendina.
   Markup (creato da work.js / project.js):
     <div class="ob-frame"><span class="obf-b obf-l"></span><span class="obf-b obf-r"></span>
       <span class="obf-s obf-l"></span><span class="obf-s obf-r"></span>
       <span class="obf-t obf-l"></span><span class="obf-t obf-r"></span></div>
   ========================================================================= */
.ob-frame {
    position: absolute;
    inset: clamp(10px, 1.3vw, 20px);
    z-index: 1;
    pointer-events: none;
    --start: 1.1s;        /* dopo la tendina bianca che scopre la card */
    --h: .45s;            /* mezzo lato orizzontale */
    --v: .6s;             /* lati verticali */
    --ease: cubic-bezier(.45, 0, .55, 1);
}
.ob-frame span {
    position: absolute;
    background: var(--ink, #1a1a1a);
    transition: transform .3s ease;
}
.obf-b { bottom: 0; width: 50%; height: 1px; transform: scaleX(0); }
.obf-b.obf-l { right: 50%; transform-origin: right center; }
.obf-b.obf-r { left: 50%;  transform-origin: left center; }
.obf-s { top: 0; width: 1px; height: 100%; transform: scaleY(0); transform-origin: center bottom; }
.obf-s.obf-l { left: 0; }
.obf-s.obf-r { right: 0; }
.obf-t { top: 0; width: 50%; height: 1px; transform: scaleX(0); }
.obf-t.obf-l { left: 0;  transform-origin: left center; }
.obf-t.obf-r { right: 0; transform-origin: right center; }

.is-visible > .ob-frame span { transform: none; }
.is-visible > .ob-frame .obf-b { transition: transform var(--h) var(--ease) calc(var(--start) + var(--entry-delay, 0ms)); }
.is-visible > .ob-frame .obf-s { transition: transform var(--v) var(--ease) calc(var(--start) + var(--entry-delay, 0ms) + var(--h)); }
.is-visible > .ob-frame .obf-t { transition: transform var(--h) var(--ease) calc(var(--start) + var(--entry-delay, 0ms) + var(--h) + var(--v)); }

/* nelle pagine dei progetti la tendina sta sopra (z-index 4): la cornice subito sotto */
.project-logo-shot > .ob-frame { z-index: 3; }

@media (prefers-reduced-motion: reduce) {
    .ob-frame span { transform: none !important; transition: none !important; }
}