:root{
    --gr-red:#ed1c24;
    --gr-grey:#c9c9c9;
    --gr-bg:#fbfaf7;
    --gr-line:#d8d3c8;
}

body.gr-loading{
    overflow:hidden;
}

/* ============= LOADER SHELL ============= */
#gr-loader{
    position:fixed;inset:0;
    z-index:99999;
    display:flex;align-items:center;justify-content:center;
    background:var(--gr-bg);
}

/* two panels that open like an invitation card */
.gr-panel{
    position:absolute;top:0;bottom:0;width:50%;
    background:var(--gr-bg);
    z-index:3;
    transition:transform 1s cubic-bezier(.76,0,.24,1);
}
.gr-panel-l{left:0;transform-origin:left center;}
.gr-panel-r{right:0;transform-origin:right center;}
.gr-panel::after{
    content:"";
    position:absolute;top:0;bottom:0;width:1px;
    background:var(--gr-line);
}
.gr-panel-l::after{right:0;}
.gr-panel-r::after{left:0;}

#gr-loader.gr-open .gr-panel-l{transform:translateX(-100%);}
#gr-loader.gr-open .gr-panel-r{transform:translateX(100%);}
#gr-loader.gr-open{transition:opacity .6s ease .95s;}
#gr-loader.gr-open.gr-gone{opacity:0;pointer-events:none;visibility:hidden;}

.gr-loader-inner{
    position:relative;z-index:4;
    display:flex;flex-direction:column;align-items:center;
    gap:16px;
}
#gr-loader.gr-open .gr-loader-inner{
    transition:opacity .5s ease;
    opacity:0;
}

/* ============= FLOURISH SVG ============= */
.gr-flourish{
    width:260px;height:90px;
    overflow:visible;
}
.gr-flourish path{
    fill:none;
    stroke:var(--gr-grey);
    stroke-width:2;
    stroke-linecap:round;
    stroke-dasharray:520;
    stroke-dashoffset:520;
    animation:gr-draw 1.3s cubic-bezier(.65,0,.35,1) .1s forwards;
}
@keyframes gr-draw{
    to{stroke-dashoffset:0;}
}

/* logo mask reveal, timed to land as the flourish finishes */
.gr-logo-wrap{
    position:absolute;
    top:16px;left:50%;
    transform:translateX(-50%);
    width:210px;
    clip-path:inset(0 100% 0 0);
    animation:gr-wipe .55s cubic-bezier(.65,0,.35,1) 1.05s forwards;
}
.gr-logo-wrap img{display:block;width:100%;height:auto;}
@keyframes gr-wipe{
    to{clip-path:inset(0 0% 0 0);}
}

/* pen "nib" travelling with the draw */
.gr-nib{
    position:absolute;width:5px;height:5px;border-radius:50%;
    background:var(--gr-red);
    top:0;left:0;
    offset-path:path('M6,64 C 40,10 90,4 130,30 C 165,52 190,18 232,12');
    offset-rotate:0deg;
    animation:gr-move 1.3s cubic-bezier(.65,0,.35,1) .1s forwards, gr-nibfade 1.3s linear .1s forwards;
}
@keyframes gr-move{
    0%{offset-distance:0%;}
    100%{offset-distance:100%;}
}
@keyframes gr-nibfade{
    0%{opacity:1;}
    92%{opacity:1;}
    100%{opacity:0;}
}

.gr-tagline{
    margin-top:64px;
    font-size:10.5px;
    letter-spacing:4.5px;
    text-transform:uppercase;
    color:#a3a3a3;
    opacity:0;
    animation:gr-fadeup .6s ease 1.35s forwards;
}
@keyframes gr-fadeup{
    from{opacity:0; transform:translateY(4px);}
    to{opacity:1; transform:translateY(0);}
}

/* respect users who've asked for reduced motion */
@media (prefers-reduced-motion: reduce){
    #gr-loader{transition:opacity .3s ease;}
    .gr-flourish path,.gr-logo-wrap,.gr-nib,.gr-tagline{animation:none !important;opacity:1 !important;clip-path:none !important;stroke-dashoffset:0 !important;}
    #gr-loader.gr-open .gr-panel-l,#gr-loader.gr-open .gr-panel-r{transition:none;}
}