:root{
    --danuts-loader-cream:#f8f0d2;
    --danuts-loader-ink:#172b20;
    --danuts-loader-orange:#ee5a3d;
    --danuts-loader-yellow:#f5bd3b;
    --danuts-loader-green:#123126;
}

html.danuts-is-loading,
html.danuts-is-loading body{overflow:hidden!important}

.danuts-page-loader{
    position:fixed;
    z-index:2147483000;
    inset:0;
    display:grid;
    place-items:center;
    overflow:hidden;
    padding:clamp(24px,5vw,64px);
    background:var(--danuts-loader-green);
    color:var(--danuts-loader-cream);
    font-family:"Be Vietnam Pro","Segoe UI",Arial,Tahoma,sans-serif;
    animation:danutsLoaderFailsafe 8s steps(1,end) forwards;
}

.danuts-loader-skip .danuts-page-loader,
html.danuts-has-loaded .danuts-page-loader{display:none!important}

.danuts-page-loader__minimal{
    position:relative;
    top:0;
    width:min(760px,86vw);
    display:grid;
    grid-template-columns:minmax(0,1fr);
    justify-items:stretch;
}

.danuts-page-loader__headline{
    width:111.111%;
    margin:0;
    color:var(--danuts-loader-cream);
    font-size:clamp(118px,11vw,158px);
    font-weight:900;
    line-height:.88;
    letter-spacing:-.055em;
    word-spacing:.12em;
    text-align:left;
    text-transform:uppercase;
    transform:scaleX(.9) scaleY(1.08);
    transform-origin:left center;
}

.danuts-page-loader__headline span{
    display:block;
    white-space:nowrap;
    opacity:0;
    transform:translateY(42px);
}

.danuts-page-loader__headline span+span{color:#f2ba3a}

.danuts-page-loader__track{
    --nut-size:50px;
    position:relative;
    width:100%;
    height:58px;
    margin-top:28px;
}

.danuts-page-loader__rail,
.danuts-page-loader__trail{
    position:absolute;
    top:22px;
    right:0;
    left:0;
    height:6px;
    border-radius:999px;
}

.danuts-page-loader__rail{background:rgba(248,240,210,.24)}

.danuts-page-loader__trail{
    background:var(--danuts-loader-yellow);
    transform:scaleX(.025);
    transform-origin:left center;
}

.danuts-page-loader__nut{
    position:absolute;
    z-index:2;
    top:0;
    left:0;
    display:block;
    width:var(--nut-size);
    height:var(--nut-size);
    object-fit:contain;
    filter:drop-shadow(4px 5px 0 rgba(0,0,0,.18));
    transform:rotate(-20deg);
}

.danuts-page-loader__finish{
    position:absolute;
    z-index:3;
    top:18px;
    right:-2px;
    width:13px;
    height:13px;
    border-radius:50%;
    background:var(--danuts-loader-orange);
    opacity:0;
    transform:scale(.2);
}

.danuts-page-loader.is-active .danuts-page-loader__headline span{
    animation:danutsHeadlineEnter .58s cubic-bezier(.18,.82,.2,1) both;
}

.danuts-page-loader.is-active .danuts-page-loader__headline span+span{animation-delay:.09s}
.danuts-page-loader.is-active .danuts-page-loader__trail{animation:danutsTrailGrow 1.62s linear .18s both}
.danuts-page-loader.is-active .danuts-page-loader__nut{animation:danutsNutRoll 1.62s cubic-bezier(.36,.02,.22,1) .18s both}
.danuts-page-loader.is-active .danuts-page-loader__finish{animation:danutsFinishPop .3s cubic-bezier(.18,.82,.2,1) 1.7s both}
.danuts-page-loader.is-active .danuts-page-loader__minimal{animation:danutsFinalSnap .28s cubic-bezier(.18,.82,.2,1) 1.78s both}
.danuts-page-loader.is-exiting{animation:danutsLoaderExit .42s cubic-bezier(.65,0,.2,1) forwards}

@keyframes danutsHeadlineEnter{
    from{opacity:0;transform:translateY(42px)}
    to{opacity:1;transform:none}
}

@keyframes danutsTrailGrow{
    from{transform:scaleX(.025)}
    to{transform:scaleX(1)}
}

@keyframes danutsNutRoll{
    0%{left:0;transform:translateY(0) rotate(-20deg)}
    12%{transform:translateY(-5px) rotate(48deg)}
    24%{transform:translateY(0) rotate(116deg)}
    36%{transform:translateY(-4px) rotate(184deg)}
    48%{transform:translateY(0) rotate(252deg)}
    60%{transform:translateY(-4px) rotate(320deg)}
    72%{transform:translateY(0) rotate(388deg)}
    84%{transform:translateY(-3px) rotate(456deg)}
    100%{left:calc(100% - var(--nut-size));transform:translateY(0) rotate(530deg)}
}

@keyframes danutsFinishPop{
    0%{opacity:0;transform:scale(.2)}
    58%{opacity:1;transform:scale(1.45)}
    100%{opacity:1;transform:scale(1)}
}

@keyframes danutsFinalSnap{
    0%,100%{transform:none}
    50%{transform:translateY(-3px)}
}

@keyframes danutsLoaderExit{
    0%{opacity:1;transform:none}
    100%{visibility:hidden;opacity:0;transform:scale(1.015)}
}

@keyframes danutsLoaderFailsafe{to{visibility:hidden;pointer-events:none}}

@media(max-width:680px){
    .danuts-page-loader{padding:28px 24px}
    .danuts-page-loader__minimal{top:0;width:min(326px,84vw)}
    .danuts-page-loader__headline{width:105.263%;font-size:clamp(46px,14vw,56px);line-height:.92;letter-spacing:-.045em;word-spacing:.14em;transform:scaleX(.95) scaleY(1.04)}
    .danuts-page-loader__track{--nut-size:36px;height:42px;margin-top:24px}
    .danuts-page-loader__rail,.danuts-page-loader__trail{top:16px;height:5px}
    .danuts-page-loader__finish{top:12px;width:12px;height:12px}
}

@media(max-height:620px) and (min-width:681px){
    .danuts-page-loader__minimal{width:min(640px,82vw)}
    .danuts-page-loader__headline{font-size:clamp(76px,15vh,108px)}
    .danuts-page-loader__track{margin-top:18px}
}

@media(prefers-reduced-motion:reduce){
    .danuts-page-loader,.danuts-page-loader *{animation:none!important;transition:none!important}
    .danuts-page-loader__headline span{opacity:1;transform:none}
    .danuts-page-loader__trail{transform:scaleX(1)}
    .danuts-page-loader__nut{left:calc(100% - var(--nut-size));transform:rotate(530deg)}
    .danuts-page-loader__finish{opacity:1;transform:none}
}
