@property --cinematic-aperture { syntax:'<length>'; inherits:false; initial-value:0px; }
#idx3-loader { position:fixed; inset:0; z-index:60; display:block!important; padding:0; margin:0; background:#09090b; color:#9C40FF; isolation:isolate; overflow:hidden; outline:none; cursor:none; transition:none; }
#idx3-loader::before,#idx3-loader::after { display:none; }
#idx3-loader .cinematic-surface { position:absolute; inset:0; background:#09090b; overflow:hidden; mask-image:none; transition:--cinematic-aperture .62s cubic-bezier(.6,0,.25,1); }
#idx3-loader .cinematic-plane { position:absolute; inset:0; background:#09090b; clip-path:polygon(0 0,0 0,0 100%,0 100%); }
#idx3-loader.is-playing .cinematic-plane { animation:cinematic-color 1.55s cubic-bezier(.65,0,.2,1) both; }
#idx3-loader .cinematic-mask-definitions { position:absolute; overflow:hidden; pointer-events:none; }
#idx3-loader .cinematic-signature { position:absolute; left:50%; top:48%; width:min(60vw,760px); aspect-ratio:1074/518; transform:translate(-50%,-50%); transform-origin:65% 39%; }
#idx3-loader .cinematic-signature__image { display:block; position:absolute; inset:0; width:100%; height:100%; max-width:none; object-fit:contain; clip-path:url(#idx3-signature-reveal); opacity:0; }
#idx3-loader.is-playing .cinematic-signature__image { animation:cinematic-image .01s .58s steps(1,end) both; }
#idx3-loader .cinematic-window { transform-box:fill-box; transform:scaleX(0); transform-origin:left center; }
#idx3-loader.is-playing .cinematic-window--body { animation:cinematic-reveal .8s .58s cubic-bezier(.2,.7,.2,1) both; }
#idx3-loader.is-playing .cinematic-window--x { transform-origin:center; animation:cinematic-reveal .78s .98s cubic-bezier(.2,.7,.2,1) both; }
#idx3-loader.is-playing .cinematic-window--cube { animation:cinematic-cube .64s 1.56s steps(1,start) both; }
#idx3-loader.is-assembled .cinematic-signature__image { clip-path:none; }
#idx3-loader .cinematic-footer { position:absolute; left:5vw; right:5vw; bottom:max(30px,calc(env(safe-area-inset-bottom) + 20px)); display:flex; align-items:center; gap:20px; font:10px/1.5 'Geist Mono',ui-monospace,monospace; letter-spacing:.12em; }
#idx3-loader .cinematic-enter {
    position:absolute; left:50%; top:64%; transform:translate(-50%,0); z-index:3;
    border:0; background:transparent; color:var(--cinematic-ink);
    font:11px/1 'Geist Mono',ui-monospace,monospace; letter-spacing:.32em;
    padding:16px 10px; min-height:44px; cursor:pointer; visibility:hidden;
    transition:letter-spacing .4s cubic-bezier(.16,1,.3,1), opacity .22s ease;
}
#idx3-loader .cinematic-enter:hover { letter-spacing:.46em; }
#idx3-loader[data-ready="true"] .cinematic-enter:not(:disabled) { visibility:visible; }
#idx3-loader .cinematic-enter:focus-visible { outline:1px solid currentColor; outline-offset:6px; }
#idx3-loader .cinematic-sound { display:none; }
#idx3-loader .cinematic-status { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
#idx3-loader.is-through { background:transparent; opacity:1; visibility:visible; transition:none; }
#idx3-loader.is-through .cinematic-surface { mask-image:radial-gradient(circle at var(--portal-x,59%) var(--portal-y,46%),transparent var(--cinematic-aperture),#000 calc(var(--cinematic-aperture) + 1px)); --cinematic-aperture:var(--portal-radius,2000px); }
#idx3-loader.is-through .cinematic-signature { opacity:0; transition:opacity .24s ease; }
#idx3-loader.is-through .cinematic-footer { opacity:0; transition:opacity .15s; }
#idx3-loader.has-logo-error .cinematic-signature { visibility:hidden; }
@keyframes cinematic-color {
    0% { clip-path:polygon(0 0,0 0,0 100%,0 100%); }
    55% { clip-path:polygon(8% 19%,82% 19%,94% 80%,20% 80%); }
    100% { clip-path:polygon(7% 18%,83% 18%,93% 81%,17% 81%); }
}
@keyframes cinematic-reveal { from { transform:scaleX(0); } to { transform:scaleX(1); } }
@keyframes cinematic-cube { from { transform:scaleX(0); } to { transform:scaleX(1); } }
#idx3-loader.is-quiet .cinematic-plane { display:none; }
#idx3-loader.is-quiet .cinematic-surface { background:#09090b; mask:none; }
#idx3-loader.is-quiet .cinematic-window { animation:none; transform:none; }
#idx3-loader.is-quiet .cinematic-signature__image { clip-path:none; }
#idx3-loader.is-quiet.is-through .cinematic-surface { opacity:0; transition:opacity .1s; }
@media(max-width:700px) { #idx3-loader .cinematic-signature { width:88vw; top:47%; } #idx3-loader .cinematic-footer { font-size:9px; } }
@media(prefers-reduced-motion:reduce) { #idx3-loader * { animation:none!important; } }
@supports not (mask-image:radial-gradient(circle,transparent,#000)) { #idx3-loader.is-through .cinematic-surface { opacity:0; transition:opacity .5s; } }

#idx3-loader .cinematic-footer { color: var(--cinematic-ink); }


#idx3-loader.is-quiet .cinematic-footer { color: #f4f1ea; }

@media(max-width:700px) {
    @keyframes cinematic-color {
        0% { clip-path:polygon(0 0,0 0,0 100%,0 100%); }
        55% { clip-path:polygon(0 29%,100% 23%,100% 66%,0 72%); }
        100% { clip-path:polygon(0 28%,100% 24%,100% 66%,0 70%); }
    }
}

@keyframes cinematic-image { from { opacity:0; } to { opacity:1; } }
#idx3-loader.is-quiet.is-playing .cinematic-signature__image { animation:none; opacity:1; }

#idx3-loader.is-quiet.is-through .cinematic-surface { mask:none; }
#idx3-loader.is-through .cinematic-enter,
#idx3-loader.is-through .cinematic-gate { opacity:0; }
#idx3-loader .cinematic-gate {
    position:absolute; left:50%; top:64%; transform:translate(-50%,0); z-index:3;
    display:grid; justify-items:center; gap:10px; color:var(--cinematic-ink);
    font:10px/1 'Geist Mono',ui-monospace,monospace; letter-spacing:.28em;
}
#idx3-loader .cinematic-gate[hidden] { display:none; }
#idx3-loader .cinematic-gate input {
    width:8.5ch; border:0; border-bottom:1px solid currentColor; background:transparent;
    color:inherit; text-align:center; font:18px/1 'Geist Mono',ui-monospace,monospace;
    letter-spacing:.42em; padding:10px 0; outline:none; cursor:text;
}
#idx3-loader .cinematic-gate input:focus-visible { outline:1px solid currentColor; outline-offset:6px; }
#idx3-loader .cinematic-gate small { min-height:1em; letter-spacing:.18em; opacity:.7; }

/* F: the only graphic is the official signature itself, initially oversized. */
#idx3-loader .cinematic-plane { inset:auto; left:50%; top:48%; width:min(60vw,760px); aspect-ratio:1074/518; background:var(--cinematic-ink); clip-path:none; mask:url('/assets/portfolio/brand/idx3-signature-transparent.png') center/contain no-repeat; transform:translate(-50%,-50%) scale(7); transform-origin:65% 39%; }
#idx3-loader.is-playing .cinematic-plane { animation:signature-gather 1.05s cubic-bezier(.16,.75,.2,1) both; }
#idx3-loader.is-playing .cinematic-signature { animation:signature-settle 2.2s cubic-bezier(.16,.75,.2,1) both; }
#idx3-loader.is-playing .cinematic-signature__image { animation:cinematic-image .01s .88s steps(1,end) both; }
#idx3-loader.is-playing .cinematic-window--body { animation:cinematic-reveal .72s .88s cubic-bezier(.16,.75,.2,1) both; }
#idx3-loader.is-playing .cinematic-window--x { animation:cinematic-reveal .8s 1.24s cubic-bezier(.16,.75,.2,1) both; }
#idx3-loader.is-playing .cinematic-window--cube { animation:cinematic-reveal .36s 1.86s cubic-bezier(.16,.75,.2,1) both; }
@keyframes signature-gather { 0% { transform:translate(-50%,-50%) scale(7); opacity:1; } 65% { opacity:.8; } 100% { transform:translate(-50%,-50%) scale(1); opacity:0; } }
@keyframes signature-settle { from { transform:translate(-50%,-50%) scale(1.24); } to { transform:translate(-50%,-50%) scale(1); } }
@media(max-width:700px) { #idx3-loader .cinematic-plane { width:88vw;top:47%; } }