:root{
    --sky: #dff9ef;
    --sky-strong: #1ec173;
    --sky-dark: #147f53;
    --bg: #eefdF3;
    --text: #0b3f2a;
    --muted: #5b8f72;
    --panel: rgba(239, 255, 250, 0.76);
    --border: rgba(20, 127, 83, 0.18);
    --radius: 22px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
    margin:0;
    font-family:Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
    color:var(--text);
    background:radial-gradient(circle at top, #f4fff9 0%, var(--bg) 52%, #e3f7ee 100%);
    -webkit-font-smoothing:antialiased;
    overflow:hidden;
}

.loader-shell{
    position:relative;
    width:100%;
    height:100vh;
    height:100svh;
    min-height:100vh;
    min-height:100svh;
    overflow:hidden;
    isolation:isolate;
}

.loader-shell::before{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at center, rgba(244,255,249,0.72) 0%, rgba(244,255,249,0.46) 38%, rgba(244,255,249,0.18) 68%, rgba(244,255,249,0.08) 100%);
    z-index:1;
    pointer-events:none;
}

.loader-video{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
    opacity:0.84;
    filter:saturate(0.92) brightness(1.05) contrast(0.95);
    transform:scale(1.02);
    background:linear-gradient(135deg, #eafff4, #d5f4e6);
}

.loader-overlay{
    position:relative;
    z-index:2;
    height:100%;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1rem;
    padding:clamp(1rem, 4vw, 2.5rem);
    text-align:center;
}

.loader-credits{
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:0.65rem;
    padding:0.9rem 1rem clamp(1rem, 2.5vw, 1.35rem);
    font-size:clamp(0.72rem, 1.7vw, 0.9rem);
    letter-spacing:0.06em;
    text-transform:lowercase;
    color:rgba(11,63,42,0.78);
    text-shadow:0 1px 0 rgba(255,255,255,0.45);
}

.loader-credits a{
    color:inherit;
    text-decoration:none;
    border-bottom:1px solid rgba(11,63,42,0.35);
    padding-bottom:1px;
}

.loader-credits a:hover,
.loader-credits a:focus-visible{
    color:var(--sky-dark);
    border-bottom-color:var(--sky-dark);
}

.loader-kicker{
    letter-spacing:0.22em;
    text-transform:uppercase;
    font-size:clamp(0.7rem, 1.6vw, 0.9rem);
    font-weight:700;
    color:rgba(11,63,42,0.72);
}

.loader-title{
    margin:0;
    font-size:clamp(2rem, 5vw, 4.6rem);
    line-height:0.92;
    font-weight:800;
    color:var(--text);
    text-shadow:0 1px 0 rgba(255,255,255,0.55);
}

.loader-copy{
    margin:0;
    max-width:34rem;
    font-size:clamp(0.95rem, 2.2vw, 1.15rem);
    line-height:1.5;
    color:var(--muted);
}

.loader-bar{
    width:min(14rem, 68vw);
    height:0.45rem;
    border-radius:999px;
    background:rgba(11,63,42,0.12);
    overflow:hidden;
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28);
}

.loader-bar span{
    display:block;
    width:42%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg, var(--sky-strong), #52df97, var(--sky-dark));
    animation:loader-progress 1.5s ease-in-out infinite;
}

@keyframes loader-progress{
    0%{transform:translateX(-110%)}
    50%{transform:translateX(20%)}
    100%{transform:translateX(220%)}
}

@media (max-width: 640px){
    .loader-overlay{
        gap:0.75rem;
        padding:1rem;
    }

    .loader-copy{
        max-width:20rem;
    }

    .loader-credits{
        gap:0.5rem;
        padding:0.75rem 0.8rem 1rem;
        flex-wrap:wrap;
    }
}

@media (prefers-reduced-motion: reduce){
    .loader-bar span{
        animation:none;
        transform:none;
        width:68%;
    }

    .loader-video{
        filter:brightness(1.02) saturate(1);
    }
}