/* ==========================================================================
   Intro loader: the Delmade "d" icon (avatar, ivory) opens into the full
   wordmark (preview), then the ivory panel lifts away.
   Colours are the logo kit's: #FAF7F0 ivory and #193B8C Delmade blue.
   ========================================================================== */
.loader { display: none; }
.loader-lock, .loader-lock body { overflow: hidden; }

.show-loader .loader {
    position: fixed;
    inset: 0;
    z-index: 1000;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 1.4rem;
    background: #FAF7F0;
    color: #193B8C;
    transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1), border-radius 0.9s cubic-bezier(0.76, 0, 0.24, 1);
}
.show-loader .cursor { display: none; }

.loader-logo { width: min(74vw, 560px); }

/* The wordmark starts cropped to its "d" and shifted so the d sits in the
   centre; then the crop opens and it slides back, revealing "elmade". */
.loader-word {
    display: block;
    width: 100%;
    height: auto;
    transform: translateX(41.6%);
    clip-path: inset(-8% 83% -8% 0);
    animation:
        loader-pop 0.7s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both,
        loader-open 0.95s cubic-bezier(0.76, 0, 0.24, 1) 0.95s forwards;
}
@keyframes loader-pop {
    from { opacity: 0; scale: 0.4; rotate: -12deg; }
    to   { opacity: 1; scale: 1; rotate: 0deg; }
}
@keyframes loader-open {
    to { transform: translateX(0); clip-path: inset(-8% -2% -8% 0); }
}

.loader-sub {
    margin: 0;
    font-family: var(--font-mono);
    font-size: 0.78rem;
    letter-spacing: 0.32em;
    text-transform: uppercase;
    color: #193B8C;
    opacity: 0;
    animation: loader-fade 0.6s ease 1.75s forwards;
}
@keyframes loader-fade { from { opacity: 0; letter-spacing: 0.6em; } to { opacity: 0.75; letter-spacing: 0.32em; } }

.loader-bar {
    position: absolute;
    left: 50%;
    bottom: clamp(2rem, 8vh, 4rem);
    width: min(40vw, 200px);
    height: 2px;
    margin-left: calc(min(40vw, 200px) / -2);
    background: rgba(25, 59, 140, 0.15);
    overflow: hidden;
    border-radius: 2px;
}
.loader-bar i {
    display: block;
    height: 100%;
    background: #193B8C;
    transform: scaleX(0);
    transform-origin: left;
    animation: loader-progress 2.1s cubic-bezier(0.65, 0, 0.35, 1) forwards;
}
@keyframes loader-progress { to { transform: scaleX(1); } }

/* exit: the panel lifts up and away */
.loader.is-out { transform: translateY(-100%); border-radius: 0 0 50% 50% / 0 0 18vh 18vh; }
.loader.is-out .loader-logo, .loader.is-out .loader-sub { transition: transform 0.9s cubic-bezier(0.76, 0, 0.24, 1), opacity 0.5s; transform: translateY(-18vh); opacity: 0; }

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