/*==========================================================
    First-visit loader: "SACHIN. T" slides up letter by letter, an orange line fills,
    then the panel lifts away. Shown once per browser session (see the script in _Layout).
==========================================================*/
#loader {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: grid;
    place-items: center;
    background: #fff;
    transition: transform .7s cubic-bezier(.77, 0, .18, 1);
}
html.loader-skip #loader { display: none; }

#loader .loader-inner { text-align: center; padding: 0 16px; }
#loader .loader-name {
    display: flex;
    justify-content: center;
    overflow: hidden;
    font-family: var(--font-sans);
    font-weight: 700;  /* the heaviest Poppins weight the layout loads */
    font-size: clamp(2.2rem, 7vw, 4.5rem);
    line-height: 1.2;
    letter-spacing: .02em;
    color: #18181b;
}
#loader .loader-name span {
    display: inline-block;
    transform: translateY(110%);
    animation: loader-up .55s cubic-bezier(.2, .7, .2, 1) forwards;
}
#loader .loader-name .loader-dot { color: var(--brand); }
#loader .loader-role {
    margin-top: 10px;
    font-family: var(--font-sans);
    font-size: clamp(.65rem, 1.4vw, .85rem);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: #71717a;
    opacity: 0;
    animation: loader-fade .5s .6s ease forwards;
}
#loader .loader-bar {
    width: min(260px, 60vw);
    height: 3px;
    margin: 24px auto 0;
    border-radius: 3px;
    background: #f4f4f5;
    overflow: hidden;
}
#loader .loader-bar i {
    display: block;
    width: 0;
    height: 100%;
    border-radius: 3px;
    background: var(--brand);
    /* runs to 85% on its own; the last part fills when the page is ready */
    animation: loader-bar 1s .3s cubic-bezier(.6, 0, .3, 1) forwards;
}
#loader.is-ready .loader-bar i { width: 100% !important; animation: none; transition: width .25s ease; }
#loader.is-done { transform: translateY(-102%); }

@keyframes loader-up { to { transform: none; } }
@keyframes loader-fade { to { opacity: 1; } }
@keyframes loader-bar { to { width: 85%; } }

@media (prefers-reduced-motion: reduce) {
    #loader { transition: opacity .3s ease; }
    #loader .loader-name span, #loader .loader-role { animation: none; transform: none; opacity: 1; }
    #loader .loader-bar { display: none; }
    #loader.is-done { transform: none; opacity: 0; }
}