/* ======================================================
   CLASTIE V10 — running fox loader + sticky marquee
   ====================================================== */

/* Announcement always stays visible while scrolling */
.cl-header{
    position:sticky!important;
    top:0!important;
    transform:none!important;
}
.cl-header.is-compact,
.cl-header.is-scrolling-down,
.cl-header.is-scrolling-up{
    transform:none!important;
}
.cl-header.is-compact .cl-announcement{
    max-height:48px!important;
    opacity:1!important;
    overflow:visible!important;
    border-bottom:1px solid rgba(255,180,100,.18)!important;
}
.cl-header.is-compact .cl-nav-inner{
    height:68px!important;
}
.cl-announcement{
    position:relative;
    z-index:20;
    max-height:none!important;
    opacity:1!important;
    overflow:hidden!important;
}
.cl10-announcement-left{
    flex:1;
    min-width:0;
    overflow:hidden;
}
.cl10-marquee{
    flex:1;
    min-width:0;
    overflow:hidden;
    position:relative;
    mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
    -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.cl10-marquee-track{
    display:flex;
    width:max-content;
    min-width:100%;
    animation:cl10Marquee 22s linear infinite;
    will-change:transform;
}
.cl10-marquee:hover .cl10-marquee-track{
    animation-play-state:paused;
}
.cl10-marquee-item{
    display:flex!important;
    align-items:center;
    gap:34px;
    white-space:nowrap;
    color:#ffd3a2!important;
    font-weight:700!important;
    font-size:14px!important;
    padding-right:34px;
}
.cl10-marquee-item i{
    color:#ff7f22;
    font-style:normal;
    font-size:16px;
}
@keyframes cl10Marquee{
    from{transform:translateX(12%)}
    to{transform:translateX(-48%)}
}

/* Page loader */
.cl10-loader{
    position:fixed;
    inset:0;
    z-index:999999;
    background:
      radial-gradient(circle at 50% 36%,rgba(255,127,34,.10),transparent 34%),
      linear-gradient(180deg,#09111f,#0b1527);
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    transition:opacity .38s ease,visibility .38s ease;
}
.cl10-loader.is-hidden{
    opacity:0;
    visibility:hidden;
    pointer-events:none;
}
.cl10-loader-track{
    width:min(520px,82vw);
    height:112px;
    position:relative;
    overflow:hidden;
}
.cl10-ground{
    position:absolute;
    left:0;right:0;bottom:19px;
    height:3px;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),rgba(255,127,34,.35),rgba(255,255,255,.12),transparent);
}
.cl10-ground:after{
    content:"";
    position:absolute;
    left:0;right:0;top:7px;
    height:1px;
    background:repeating-linear-gradient(90deg,rgba(255,255,255,.08) 0 20px,transparent 20px 42px);
    animation:cl10GroundMove .55s linear infinite;
}
@keyframes cl10GroundMove{
    to{background-position:-42px 0}
}

.cl10-fox-runner{
    position:absolute;
    left:-92px;
    bottom:27px;
    width:92px;
    height:64px;
    animation:cl10FoxRun 2.25s linear infinite;
}
@keyframes cl10FoxRun{
    0%{left:-92px;transform:translateY(0)}
    45%{transform:translateY(-2px)}
    100%{left:calc(100% + 10px);transform:translateY(0)}
}
.cl10-fox-body{
    position:absolute;
    left:22px;top:22px;
    width:46px;height:29px;
    background:#ef741c;
    box-shadow:inset -8px -7px 0 #d9580d;
}
.cl10-fox-head{
    position:absolute;
    left:53px;top:8px;
    width:33px;height:31px;
    background:#ff8a27;
}
.cl10-fox-head:after{
    content:"";
    position:absolute;
    left:5px;bottom:0;
    width:23px;height:12px;
    background:#fff0d7;
}
.cl10-ear{
    position:absolute;
    top:-10px;
    width:10px;height:13px;
    background:#ff8a27;
}
.cl10-ear.e1{left:2px}
.cl10-ear.e2{right:2px}
.cl10-eye{
    position:absolute;
    top:9px;
    width:4px;height:4px;
    background:#26130a;
    z-index:3;
}
.cl10-eye.eye1{left:8px}
.cl10-eye.eye2{right:8px}
.cl10-nose{
    position:absolute;
    right:-3px;bottom:7px;
    width:6px;height:6px;
    background:#241108;
    z-index:4;
}
.cl10-tail{
    position:absolute;
    left:-4px;top:22px;
    width:33px;height:15px;
    background:#ef741c;
    transform-origin:right center;
    animation:cl10Tail .28s ease-in-out infinite alternate;
}
.cl10-tail:after{
    content:"";
    position:absolute;
    left:-8px;top:0;
    width:11px;height:15px;
    background:#fff0d7;
}
@keyframes cl10Tail{
    from{transform:rotate(10deg)}
    to{transform:rotate(-14deg)}
}
.cl10-leg{
    position:absolute;
    top:47px;
    width:9px;height:16px;
    background:#dc5d10;
    transform-origin:top center;
}
.cl10-leg.l1{
    left:31px;
    animation:cl10LegA .22s linear infinite alternate;
}
.cl10-leg.l2{
    left:56px;
    animation:cl10LegB .22s linear infinite alternate;
}
@keyframes cl10LegA{
    from{transform:rotate(28deg)}
    to{transform:rotate(-28deg)}
}
@keyframes cl10LegB{
    from{transform:rotate(-28deg)}
    to{transform:rotate(28deg)}
}
.cl10-loader-copy{
    text-align:center;
    margin-top:7px;
}
.cl10-loader-copy b{
    display:block;
    color:#f7faff;
    font-family:'Oxanium','Inter',sans-serif!important;
    font-size:14px;
    letter-spacing:.10em;
}
.cl10-loader-copy span{
    display:block;
    width:180px;
    height:3px;
    margin:11px auto 0;
    border-radius:99px;
    background:#17243c;
    overflow:hidden;
    position:relative;
}
.cl10-loader-copy span:after{
    content:"";
    position:absolute;
    left:-60%;
    top:0;
    width:60%;
    height:100%;
    border-radius:inherit;
    background:linear-gradient(90deg,transparent,#ff7f22,#ffb266,transparent);
    animation:cl10LoadBar 1.1s ease-in-out infinite;
}
@keyframes cl10LoadBar{
    to{left:110%}
}

/* Keep header usable on mobile */
@media(max-width:760px){
    .cl10-marquee-item{
        font-size:12px!important;
        gap:24px;
    }
    .cl-discord-mini{
        display:none!important;
    }
    .cl10-loader-track{
        width:88vw;
    }
}
@media(prefers-reduced-motion:reduce){
    .cl10-marquee-track,
    .cl10-fox-runner,
    .cl10-tail,
    .cl10-leg,
    .cl10-ground:after,
    .cl10-loader-copy span:after{
        animation:none!important;
    }
}