.cs-loader{
    position:fixed;inset:0;z-index:9999;
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    height:100vh;height:100dvh;
    --inl-bg-1:#fbf3ec;
    --inl-bg-2:#f4e4d6;
    --inl-base:rgba(58,32,16,.18);
    --inl-eyebrow:rgba(70,40,22,.5);
    --inl-pct:rgba(70,40,22,.55);
    --inl-track:rgba(60,34,18,.1);
    --inl-veil:.08;
    --inl-line:.14;
    --inl-glow:.18;
    background:radial-gradient(120% 95% at 50% 118%,var(--inl-bg-2) 0%,var(--inl-bg-1) 64%);
}
html.dark .cs-loader{
    --inl-bg-1:#150f0b;
    --inl-bg-2:#0a0604;
    --inl-base:rgba(255,228,206,.15);
    --inl-eyebrow:rgba(255,212,182,.55);
    --inl-pct:rgba(255,214,182,.6);
    --inl-track:rgba(255,168,108,.13);
    --inl-veil:.2;
    --inl-line:.22;
    --inl-glow:.42;
}

.inl-veil{
    position:absolute;inset:0;z-index:0;pointer-events:none;
    background:radial-gradient(70% 48% at 50% 120%,rgba(255,92,22,var(--inl-veil)) 0%,transparent 62%);
    animation:inlBreath 5.2s ease-in-out infinite;
}
@keyframes inlBreath{0%,100%{opacity:.72}50%{opacity:1}}

.inl-lines{
    position:absolute;left:-4%;top:-4%;width:108%;height:108%;
    z-index:0;pointer-events:none;
    opacity:var(--inl-line);
    animation:inlDrift 20s ease-in-out infinite;
}
.inl-lines path{
    fill:none;stroke:url(#inlLineGrad);stroke-width:1.2;
    vector-effect:non-scaling-stroke;
}
@keyframes inlDrift{
    0%,100%{transform:translate3d(-1.4%,0,0)}
    50%{transform:translate3d(1.4%,-1%,0)}
}

.inl-stage{
    position:relative;z-index:1;
    display:flex;flex-direction:column;align-items:center;
    padding:1.5rem;
}

.inl-eyebrow{
    font-family:'Space Grotesk',system-ui,sans-serif;font-weight:500;
    font-size:clamp(.6rem,1.4vw,.74rem);
    letter-spacing:.62em;text-indent:.62em;text-transform:uppercase;
    color:var(--inl-eyebrow);
    margin-bottom:1.35rem;
    opacity:0;animation:inlUp .9s cubic-bezier(.22,1,.36,1) .15s forwards;
}

.inl-mark{
    position:relative;display:inline-block;
    opacity:0;animation:inlUp 1.05s cubic-bezier(.22,1,.36,1) .3s forwards;
}

.inl-title{
    position:relative;display:block;margin:0;
    font-family:'Cinzel','Times New Roman',serif;font-weight:600;
    font-size:clamp(2.6rem,10vw,7rem);line-height:1;
    letter-spacing:.12em;text-indent:.12em;white-space:nowrap;
}

.inl-base{display:block;color:var(--inl-base)}

.inl-fire{
    --rev:0%;
    position:absolute;left:0;top:0;right:0;display:block;
    -webkit-background-clip:text;background-clip:text;
    color:transparent;-webkit-text-fill-color:transparent;
    background-image:linear-gradient(180deg,#ffc466 0%,#ff7a22 52%,#e11d0b 100%);
    text-shadow:0 0 24px rgba(255,104,32,var(--inl-glow));
    -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--rev) - 4%),rgba(0,0,0,0) var(--rev));
    mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--rev) - 4%),rgba(0,0,0,0) var(--rev));
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-size:100% 100%;mask-size:100% 100%;
    will-change:mask-image;
}

.inl-rule{
    position:relative;width:100%;height:2px;margin-top:1.85rem;border-radius:2px;
    background:var(--inl-track);overflow:visible;
}
.inl-rule-fill{
    position:absolute;left:0;top:0;height:100%;width:0;border-radius:2px;
    background:linear-gradient(90deg,#e11d0b,#ff7a1f 62%,#ffc466);
}
.inl-rule-dot{
    position:absolute;top:50%;left:0;width:7px;height:7px;margin-left:-3.5px;
    transform:translateY(-50%);border-radius:50%;background:#ffd27a;
    box-shadow:0 0 10px 2px rgba(255,138,48,.55);
}

.inl-pct{
    margin-top:1.55rem;
    font-family:'Space Grotesk',system-ui,sans-serif;font-weight:300;
    font-size:clamp(.78rem,2vw,.92rem);letter-spacing:.26em;text-indent:.26em;
    color:var(--inl-pct);font-variant-numeric:tabular-nums;
    opacity:0;animation:inlUp .9s cubic-bezier(.22,1,.36,1) .5s forwards;
}
.inl-pct-sym{opacity:.5;margin-left:.12em;font-size:.82em}

@keyframes inlUp{from{opacity:0;transform:translateY(15px)}to{opacity:1;transform:translateY(0)}}

.cs-loader.ignite .inl-fire{
    -webkit-mask-image:none;mask-image:none;
    animation:inlBloom .85s cubic-bezier(.22,1,.36,1) forwards;
}
@keyframes inlBloom{
    0%{text-shadow:0 0 24px rgba(255,104,32,var(--inl-glow))}
    45%{text-shadow:0 0 46px rgba(255,150,60,.85)}
    100%{text-shadow:0 0 30px rgba(255,116,40,var(--inl-glow))}
}
.cs-loader.ignite .inl-rule-dot{
    box-shadow:0 0 18px 5px rgba(255,150,56,.7);
    transition:box-shadow .5s ease;
}

.cs-loader.exit{animation:csExit .8s cubic-bezier(.65,0,.35,1) forwards}
@keyframes csExit{
    0%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:0;transform:translateY(-1.4%) scale(1.018);visibility:hidden}
}

@media(max-width:600px){
    .inl-stage{padding:1.1rem}
    .inl-title{letter-spacing:.1em;text-indent:.1em}
    .inl-rule{margin-top:1.5rem}
    .inl-pct{margin-top:1.25rem}
}

@media(prefers-reduced-motion:reduce){
    .inl-veil,.inl-lines,.inl-eyebrow,.inl-mark,.inl-pct{animation:none!important}
    .inl-eyebrow,.inl-mark,.inl-pct{opacity:1!important;transform:none!important}
}
