/* ==========================================================================
   Chrome — floating/global UI: scroll progress, custom cursor, back-to-top,
   ripple effect, magnetic-button smoothing, preloader
   ========================================================================== */

/* scroll progress bar */
.scroll-progress{
    position: fixed;
    top: 0; left: 0;
    width: 100%; height: 3px;
    z-index: 1000;
    background: transparent;
}
.scroll-progress-bar{
    height: 100%;
    width: 0%;
    background: var(--gradient-brand);
    box-shadow: 0 0 14px rgba(var(--accent-rgb), .8);
    transition: width .08s linear;
}

/* custom cursor */
.cursor-dot, .cursor-outline{
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 999;
    border-radius: 50%;
    transform: translate3d(-50%,-50%,0);
    will-change: transform;
}
.cursor-dot{
    width: 6px; height: 6px;
    background: var(--accent);
    box-shadow: 0 0 10px rgba(var(--accent-rgb), .9);
}
.cursor-outline{
    width: 34px; height: 34px;
    border: 1.5px solid rgba(255,255,255,.5);
    transition: width .25s var(--ease-out), height .25s var(--ease-out), border-color .25s, background .25s, opacity .25s;
}
.cursor-outline.is-active{
    width: 54px; height: 54px;
    background: rgba(var(--accent-rgb), .12);
    border-color: rgba(var(--accent-rgb), .7);
}
body.has-custom-cursor{ cursor: none; }
body.has-custom-cursor a, body.has-custom-cursor button{ cursor: none; }
@media (hover:none), (pointer:coarse){
    .cursor-dot, .cursor-outline{ display: none !important; }
}

/* back to top */
.back-to-top{
    position: fixed;
    right: clamp(16px, 3vw, 36px);
    bottom: clamp(16px, 3vw, 36px);
    width: 48px; height: 48px;
    border-radius: 50%;
    border: 1px solid var(--border-strong);
    background: rgba(10,12,18,.7);
    backdrop-filter: blur(12px);
    color: var(--text);
    font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    transition: opacity .35s var(--ease-out), transform .35s var(--ease-out), border-color .3s, box-shadow .3s;
    z-index: 500;
}
.back-to-top.visible{ opacity: 1; visibility: visible; transform: translateY(0); }
.back-to-top:hover{ border-color: rgba(var(--accent-rgb), .6); box-shadow: 0 0 24px rgba(var(--accent-rgb),.35); }

/* generic ripple */
.ripple{
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,.5);
    animation: rippleAnim .65s var(--ease-out);
    pointer-events: none;
}
@keyframes rippleAnim{ to{ transform: scale(2.6); opacity: 0; } }

/* magnetic targets get inline transform from JS; provide smoothing */
.magnetic{ transition: transform .25s var(--ease-out); }

/* ==========================================================================
   Preloader
   ========================================================================== */

.preloader{
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 22px;
    background: var(--bg);
    transition: opacity .6s var(--ease-out), visibility .6s var(--ease-out);
}
.preloader.is-hidden{ opacity: 0; visibility: hidden; pointer-events: none; }
.preloader .bolt{
    width: 54px; height: 54px;
    border-radius: 16px;
    background: var(--gradient-brand);
    box-shadow: 0 0 40px rgba(var(--accent-rgb), .6);
    animation: boltPulse 1.1s ease-in-out infinite;
}
@keyframes boltPulse{
    0%,100%{ transform: scale(1) rotate(0deg); }
    50%{ transform: scale(.82) rotate(90deg); }
}
.preloader .label{
    font-family: 'Space Grotesk', sans-serif;
    font-size: .78rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--text-faint);
}
body.is-loading{ overflow: hidden; }

/* body scroll lock while mobile menu open */
body.menu-open{ overflow: hidden; }
main.is-dimmed{ filter: blur(2px) brightness(.7); transition: filter .35s ease; pointer-events: none; }