/*
    Obscape page loader (aperture) for login.php — 1.35 s, plays once per tab session.
    Markup: src/partials/login-loader.php
*/

@property --obs-hole {
    syntax: "<length>";
    inherits: true;
    initial-value: 0px;
}

.obs-loader {
    --w: clamp(180px, 52vw, 560px);          /* logo width */
    --cx: calc(50% + .145 * var(--w));       /* summit position, relative to viewport centre */
    --cy: calc(50% - .085 * var(--w));
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-pop: cubic-bezier(.34, 1.45, .5, 1);
    --ease-open: cubic-bezier(.65, 0, .25, 1);

    position: fixed;
    inset: 0;
    z-index: 9999;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ff592c;
    -webkit-mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--obs-hole), #000 calc(var(--obs-hole) + .5px));
            mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--obs-hole), #000 calc(var(--obs-hole) + .5px));
    animation:
        obs-loader-open .75s var(--ease-open) .6s forwards,
        obs-loader-out .15s linear 1.2s forwards;
}

/* White rim on the edge of the opening */
.obs-loader::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(circle at var(--cx) var(--cy), transparent var(--obs-hole), #fff var(--obs-hole), #fff calc(var(--obs-hole) + min(3px, var(--obs-hole))), transparent calc(var(--obs-hole) + min(3.5px, var(--obs-hole))));
}

.obs-loader__logo {
    width: var(--w);
    height: auto;
    overflow: visible;
    opacity: 0;
    filter: blur(10px);
    transform: scale(.94);
    will-change: transform, filter, opacity;
    animation:
        obs-loader-focus .4s var(--ease-out) .05s forwards,
        obs-loader-push .75s var(--ease-open) .6s forwards;
}

.obs-loader__wordmark { fill: #fff; }

.obs-loader__tagline {
    fill: #231f20;
    opacity: 0;
    transform-box: fill-box;
    transform-origin: center;
    transform: scaleX(1.18);
    animation: obs-loader-track .4s var(--ease-out) .2s forwards;
}

.obs-loader__peak {
    fill: #231f20;
    opacity: 0;
    transform: translateY(-140px);
    animation: obs-loader-drop .35s var(--ease-pop) .2s forwards;
}

@keyframes obs-loader-focus { to { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes obs-loader-push  { from { transform: scale(1); } to { transform: scale(1.12); } }
@keyframes obs-loader-track { to { opacity: 1; transform: scaleX(1); } }
@keyframes obs-loader-drop  { 30% { opacity: 1; } to { opacity: 1; transform: translateY(0); } }
@keyframes obs-loader-open  { to { --obs-hole: 160vmax; } }
@keyframes obs-loader-out   { to { opacity: 0; visibility: hidden; } }

/* Already shown in this tab, or the user prefers reduced motion */
.has-shown-loader .obs-loader { display: none; }

@media (prefers-reduced-motion: reduce) {
    .obs-loader { display: none; }
}