@import url('/assets/fonts/fonts.css');

.cs-loader{
    --loader-progress:0;
    position:fixed;
    inset:0;
    z-index:9999;
    display:grid;
    place-items:center;
    min-height:100vh;
    min-height:100dvh;
    overflow:hidden;
    color:#122219;
    background:
        radial-gradient(ellipse 72% 58% at 50% 115%,rgba(76,148,103,.16),transparent 68%),
        linear-gradient(145deg,#f1f6f2,#e8f0ea);
    clip-path:inset(0 0 0 0);
}

html.dark .cs-loader{
    color:#eef5f0;
    background:
        radial-gradient(ellipse 72% 58% at 50% 115%,rgba(45,116,73,.18),transparent 68%),
        linear-gradient(145deg,#0b1710,#07100b);
}

.cs-loader::before{
    content:'';
    position:absolute;
    inset:-18%;
    pointer-events:none;
    background:
        radial-gradient(ellipse 34% 20% at 18% 27%,transparent 68%,rgba(35,122,75,.055) 69%,transparent 70.2%),
        radial-gradient(ellipse 42% 24% at 84% 22%,transparent 70%,rgba(35,122,75,.045) 71%,transparent 72.1%),
        radial-gradient(ellipse 52% 30% at 73% 86%,transparent 72%,rgba(35,122,75,.045) 73%,transparent 74.1%);
    opacity:.9;
    animation:cmlBackdropBreathe 18s ease-in-out infinite alternate;
}
html.dark .cs-loader::before{
    background:
        radial-gradient(ellipse 34% 20% at 18% 27%,transparent 68%,rgba(130,198,158,.04) 69%,transparent 70.2%),
        radial-gradient(ellipse 42% 24% at 84% 22%,transparent 70%,rgba(130,198,158,.032) 71%,transparent 72.1%),
        radial-gradient(ellipse 52% 30% at 73% 86%,transparent 72%,rgba(130,198,158,.03) 73%,transparent 74.1%);
}

.cml-backdrop-detail{
    position:absolute;
    inset:0;
    z-index:1;
    overflow:hidden;
    pointer-events:none;
}
.cml-contours{
    position:absolute;
    inset:28% -12% -38%;
    opacity:.22;
    background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 54px,rgba(35,122,75,.045) 55px 56px);
    -webkit-mask-image:radial-gradient(ellipse at 50% 100%,#000,transparent 70%);
    mask-image:radial-gradient(ellipse at 50% 100%,#000,transparent 70%);
}
html.dark .cml-contours{
    opacity:.17;
    background:repeating-radial-gradient(ellipse at 50% 100%,transparent 0 54px,rgba(130,198,158,.04) 55px 56px);
}

.cml-backdrop-leaf{
    position:absolute;
    width:var(--backdrop-size);
    height:auto;
    opacity:var(--backdrop-opacity);
    filter:saturate(.55) blur(.7px);
    will-change:transform;
    user-select:none;
}
.cml-backdrop-leaf-a{
    --backdrop-size:min(34vw,430px);
    --backdrop-opacity:.028;
    left:-11%;
    top:5%;
    transform:rotate(-34deg);
    animation:cmlBackdropLeafA 24s ease-in-out infinite alternate;
}
.cml-backdrop-leaf-b{
    --backdrop-size:min(30vw,380px);
    --backdrop-opacity:.024;
    right:-8%;
    bottom:-7%;
    transform:rotate(143deg);
    animation:cmlBackdropLeafB 28s ease-in-out infinite alternate;
}
.cml-backdrop-leaf-c{
    --backdrop-size:min(20vw,250px);
    --backdrop-opacity:.017;
    right:24%;
    top:-11%;
    transform:rotate(76deg);
    animation:cmlBackdropLeafC 22s ease-in-out infinite alternate;
}
html.dark .cml-backdrop-leaf{opacity:calc(var(--backdrop-opacity) * 1.15);filter:brightness(1.08) saturate(.45) blur(.8px)}

.cml-stage{
    position:relative;
    z-index:2;
    display:flex;
    flex-direction:column;
    align-items:center;
    width:min(520px,calc(100vw - 40px));
    padding:3rem 2rem;
    text-align:center;
    transition:opacity .32s ease,transform .5s cubic-bezier(.22,1,.36,1),filter .32s ease;
}

.cml-title{
    position:relative;
    display:block;
    width:min(570px,72vw);
    aspect-ratio:1000/464;
    margin:0;
    background:linear-gradient(118deg,#122219 5%,#155c38 58%,#64a982 100%);
    -webkit-mask:url('/assets/logo-wordmark.png') center/contain no-repeat;
    mask:url('/assets/logo-wordmark.png') center/contain no-repeat;
    opacity:0;
    filter:blur(7px);
    transform:translateY(12px);
    animation:cmlTitleIn 1.05s cubic-bezier(.22,1,.36,1) .08s forwards;
}

html.dark .cml-title{background:linear-gradient(118deg,#f0f7f2 4%,#b7ddc5 52%,#64a982 100%)}

.cml-rule{
    position:relative;
    width:min(520px,72vw);
    height:6px;
    margin-top:2.25rem;
    overflow:visible;
    border:1px solid rgba(35,122,75,.14);
    border-radius:999px;
    background:rgba(255,255,255,.26);
    box-shadow:inset 0 1px 3px rgba(10,66,35,.12),0 6px 18px rgba(35,122,75,.08);
    opacity:0;
    animation:cmlFadeIn .65s ease .45s forwards;
}

.cml-rule::before,.cml-rule::after{
    content:'';
    position:absolute;
    top:50%;
    width:8px;
    height:8px;
    border-radius:50%;
    background:#8ec7a5;
    box-shadow:0 0 0 4px rgba(35,122,75,.06);
    transform:translateY(-50%);
}
.cml-rule::before{left:-4px}
.cml-rule::after{right:-4px;background:rgba(35,122,75,.22);box-shadow:none}

.cml-rule-fill{
    position:absolute;
    left:-1px;
    top:-1px;
    bottom:-1px;
    width:calc(var(--loader-progress) * 1%);
    min-width:5px;
    overflow:hidden;
    border-radius:999px;
    background:linear-gradient(90deg,#155c38 0%,#237a4b 46%,#79ba94 100%);
    box-shadow:0 0 14px rgba(79,161,116,.3),inset 0 1px 0 rgba(255,255,255,.26);
    transition:width .16s linear;
}

.cml-rule-fill::before{
    content:'';
    position:absolute;
    top:50%;
    right:0;
    width:5px;
    height:5px;
    border-radius:50%;
    background:#b8ddc6;
    box-shadow:0 0 0 3px rgba(121,186,148,.13),0 0 10px rgba(121,186,148,.55);
    transform:translateY(-50%);
}
.cml-rule-fill::after{
    content:'';
    position:absolute;
    inset:0;
    background:linear-gradient(105deg,transparent 20%,rgba(255,255,255,.48) 48%,transparent 72%);
    transform:translateX(-110%);
    animation:cmlRuleShine 1.65s ease-in-out .6s infinite;
}

html.dark .cml-rule{border-color:rgba(128,187,151,.16);background:rgba(7,24,13,.34);box-shadow:inset 0 1px 3px rgba(0,0,0,.3),0 6px 20px rgba(0,0,0,.12)}
html.dark .cml-rule::before{background:#a4d3b6;box-shadow:0 0 0 4px rgba(128,187,151,.07)}
html.dark .cml-rule::after{background:rgba(128,187,151,.2)}
html.dark .cml-rule-fill{background:linear-gradient(90deg,#3f9161,#6eb58b,#a4d3b6);box-shadow:0 0 16px rgba(110,181,139,.28),inset 0 1px 0 rgba(255,255,255,.22)}

.cml-percent{
    display:block;
    min-width:3.5ch;
    margin-top:.8rem;
    color:rgba(21,92,56,.7);
    font-family:'Manrope','Segoe UI',system-ui,sans-serif;
    font-size:.72rem;
    font-weight:700;
    line-height:1;
    letter-spacing:.12em;
    font-variant-numeric:tabular-nums;
    opacity:0;
    animation:cmlFadeIn .65s ease .55s forwards;
}
html.dark .cml-percent{color:rgba(183,221,197,.68)}

.cml-idle-leaf{
    position:absolute;
    width:var(--leaf-size);
    height:auto;
    pointer-events:none;
    user-select:none;
    opacity:0;
    filter:saturate(.82) drop-shadow(0 8px 12px rgba(9,58,31,.14));
}

.cml-idle-leaf-a{
    --leaf-size:34px;
    top:-12px;
    left:7%;
    animation:cmlLeafFloatA 6.8s ease-in-out .35s infinite;
}
.cml-idle-leaf-b{
    --leaf-size:24px;
    right:10%;
    bottom:28px;
    animation:cmlLeafFloatB 7.6s ease-in-out 1.1s infinite;
}
.cml-idle-leaf-c{
    --leaf-size:18px;
    top:24%;
    right:1%;
    animation:cmlLeafFloatC 8.4s ease-in-out 1.8s infinite;
}
.cml-idle-leaf-d{
    --leaf-size:21px;
    left:16%;
    bottom:-4px;
    animation:cmlLeafFloatB 8.9s ease-in-out .8s infinite reverse;
}
.cml-idle-leaf-e{
    --leaf-size:28px;
    top:-30px;
    right:29%;
    animation:cmlLeafFloatA 7.4s ease-in-out 1.35s infinite reverse;
}
.cml-idle-leaf-f{
    --leaf-size:16px;
    left:44%;
    bottom:-20px;
    animation:cmlLeafFloatC 9.2s ease-in-out 2.1s infinite reverse;
}

.cs-loader.exit{
    pointer-events:none;
    will-change:opacity,transform;
    animation:cmlLoaderExit .8s cubic-bezier(.65,0,.35,1) forwards;
}

@keyframes cmlTitleIn{
    to{opacity:1;filter:blur(0);transform:translateY(0)}
}

@keyframes cmlFadeIn{
    to{opacity:1}
}

@keyframes cmlBackdropBreathe{
    from{transform:translate3d(-.5%,-.3%,0) scale(1)}
    to{transform:translate3d(.5%,.4%,0) scale(1.018)}
}
@keyframes cmlBackdropLeafA{
    from{transform:translate3d(-8px,-5px,0) rotate(-34deg)}
    to{transform:translate3d(14px,12px,0) rotate(-29deg)}
}
@keyframes cmlBackdropLeafB{
    from{transform:translate3d(8px,9px,0) rotate(143deg)}
    to{transform:translate3d(-12px,-8px,0) rotate(137deg)}
}
@keyframes cmlBackdropLeafC{
    from{transform:translate3d(0,-5px,0) rotate(76deg)}
    to{transform:translate3d(9px,13px,0) rotate(82deg)}
}

@keyframes cmlRuleShine{
    0%,22%{transform:translateX(-110%);opacity:0}
    45%{opacity:.9}
    72%,100%{transform:translateX(110%);opacity:0}
}

@keyframes cmlLeafFloatA{
    0%{opacity:0;transform:translate3d(-8px,-18px,0) rotate(-38deg) scaleX(.35)}
    18%{opacity:.52}
    46%{transform:translate3d(18px,12px,0) rotate(24deg) scaleX(1)}
    72%{opacity:.42;transform:translate3d(-2px,34px,0) rotate(76deg) scaleX(.28)}
    100%{opacity:0;transform:translate3d(25px,60px,0) rotate(128deg) scaleX(-.7)}
}

@keyframes cmlLeafFloatB{
    0%{opacity:0;transform:translate3d(12px,-22px,0) rotate(28deg) scaleX(.3)}
    22%{opacity:.46}
    52%{transform:translate3d(-17px,8px,0) rotate(-34deg) scaleX(1)}
    78%{opacity:.35;transform:translate3d(8px,31px,0) rotate(-88deg) scaleX(.22)}
    100%{opacity:0;transform:translate3d(-21px,58px,0) rotate(-142deg) scaleX(-.65)}
}

@keyframes cmlLeafFloatC{
    0%{opacity:0;transform:translate3d(-3px,-16px,0) rotate(-12deg) scaleX(.25)}
    20%{opacity:.34}
    55%{transform:translate3d(14px,13px,0) rotate(52deg) scaleX(.86)}
    100%{opacity:0;transform:translate3d(-9px,54px,0) rotate(154deg) scaleX(-.45)}
}

@keyframes cmlLoaderExit{
    0%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:0;transform:translateY(-1.4%) scale(1.018);visibility:hidden}
}

@media(max-width:520px){
    .cml-stage{padding:2rem 1rem}
    .cml-title{width:min(330px,79vw)}
    .cml-idle-leaf-a{left:2%}
    .cml-idle-leaf-b{right:3%}
    .cml-idle-leaf-c,.cml-idle-leaf-e{display:none}
    .cml-rule{width:min(340px,82vw);height:6px;margin-top:2.5rem}
    .cml-backdrop-leaf-a{--backdrop-size:62vw;left:-30%}
    .cml-backdrop-leaf-b{--backdrop-size:56vw;right:-24%}
    .cml-backdrop-leaf-c{display:none}
}

@media(prefers-reduced-motion:reduce){
    .cml-idle-leaf{display:none!important}
    .cs-loader::before,.cml-backdrop-leaf{animation:none!important}
    .cml-title,.cml-rule,.cml-percent{animation:none!important;opacity:1!important;filter:none!important;transform:none!important}
    .cs-loader.exit{animation:cmlLoaderFade .25s linear forwards}
}

@keyframes cmlLoaderFade{to{opacity:0;visibility:hidden}}