/* Aqar360 preloader — HTML/CSS only (square + text + line).
   One continuous flash across full "Aqar360" text only (not the square). */

.aq360-preloader {
    position: fixed;
    inset: 0;
    z-index: 100500;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
}

.aq360-preloader[hidden] {
    display: none !important;
}

html.aq360-preloader-active,
html.aq360-preloader-active body {
    overflow: hidden;
}

/* Keep loader visible across full-page navigations until the next page is ready */
html.aq360-preloader-boot #aq360-preloader,
html.aq360-preloader-boot #aq360-preloader[hidden] {
    display: flex !important;
}

.aq360-preloader__backdrop {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.28);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

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

/* ═══════════════════════════════════════════
   Logo mark — square / text / line
   ═══════════════════════════════════════════ */
.aq360-preloader__logo {
    --aq360-purple: #686088;
    --aq360-mark-h: clamp(3.35rem, 11.5vw, 4rem);
    --aq360-mark-w: calc(var(--aq360-mark-h) * 0.97);
    --aq360-fs: clamp(0.88rem, 2.9vw, 1.05rem);
    --aq360-radius: calc(var(--aq360-mark-h) * 0.18);
    --aq360-line-h: 1.5px;
    --aq360-line-y: 66%;
    --aq360-font: Arial, "Helvetica Neue", Helvetica, "Segoe UI", system-ui, sans-serif;
    --aq360-tracking: -0.045em;
}

.aq360-preloader__mark {
    position: relative;
    display: inline-flex;
    align-items: stretch;
    height: var(--aq360-mark-h);
    overflow: visible;
}

.aq360-preloader__col {
    position: relative;
    display: flex;
    align-items: center;
}

.aq360-preloader__col--aqar {
    z-index: 2;
    flex-shrink: 0;
}

.aq360-preloader__text {
    font-family: var(--aq360-font);
    font-size: var(--aq360-fs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--aq360-tracking);
    white-space: nowrap;
    user-select: none;
}

.aq360-preloader__text--aqar {
    color: var(--aq360-purple);
    transform: translateX(-0.02em);
}

.aq360-preloader__col--box {
    justify-content: flex-start;
    align-items: center;
    align-self: stretch;
    flex-shrink: 0;
    width: var(--aq360-mark-w);
    padding-inline: 0.06em 0.38em;
    margin-inline-start: 0;
    box-sizing: border-box;
}

.aq360-preloader__square {
    position: absolute;
    inset: 0;
    background: var(--aq360-purple);
    border-radius: var(--aq360-radius);
}

.aq360-preloader__text--in {
    position: relative;
    z-index: 1;
    color: #fff;
}

/* One flash: full word, clipped to glyphs only — sweeps Aq → ar360 as one band */
.aq360-preloader__flash {
    position: absolute;
    left: 0;
    top: 50%;
    z-index: 4;
    transform: translateY(-50%) translateX(-0.02em);
    margin: 0;
    padding: 0;
    font-family: var(--aq360-font);
    font-size: var(--aq360-fs);
    font-weight: 700;
    line-height: 1;
    letter-spacing: var(--aq360-tracking);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    background-image: linear-gradient(
        90deg,
        transparent 0%,
        transparent 40%,
        rgba(255, 255, 255, 0.95) 50%,
        transparent 60%,
        transparent 100%
    );
    background-size: 220% 100%;
    background-repeat: no-repeat;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
    animation: aq360-text-shimmer 1.45s linear infinite;
}

/* One underline unit: fixed purple→white bar, revealed with clip-path (not scaleX).
   scaleX was stretching the gradient so purple/white looked like two timed pieces. */
.aq360-preloader__line {
    position: absolute;
    left: 0;
    right: calc(var(--aq360-mark-w) * 0.22);
    top: var(--aq360-line-y);
    height: var(--aq360-line-h);
    border-radius: 999px;
    z-index: 3;
    pointer-events: none;
    overflow: hidden;
    clip-path: inset(0 0 0 100%);
    animation: aq360-line-rtl 1.55s linear infinite;
}

.aq360-preloader__line-bar {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: inherit;
    background: linear-gradient(
        90deg,
        var(--aq360-purple) 0%,
        var(--aq360-purple) calc(100% - var(--aq360-mark-w) * 0.78),
        #fff calc(100% - var(--aq360-mark-w) * 0.78),
        #fff 100%
    );
}

.aq360-preloader__sr {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

@keyframes aq360-text-shimmer {
    0% { background-position: 120% 0; }
    100% { background-position: -120% 0; }
}

/* Reveal from right → full → hide back to right. Colors stay locked in place. */
@keyframes aq360-line-rtl {
    0% { clip-path: inset(0 0 0 100%); }
    50% { clip-path: inset(0 0 0 0); }
    100% { clip-path: inset(0 0 0 100%); }
}

@media (prefers-reduced-motion: reduce) {
    .aq360-preloader__flash,
    .aq360-preloader__line {
        animation: none !important;
    }

    .aq360-preloader__flash {
        visibility: hidden;
    }

    .aq360-preloader__line {
        clip-path: inset(0 0 0 0);
    }
}

@media (max-width: 420px) {
    .aq360-preloader__logo {
        --aq360-mark-h: 3.1rem;
        --aq360-fs: 0.82rem;
    }
}