/*
 * GLEAM — Page Loader
 * Depends on gleam.css (tokens, g-ring-enter, g-ring-breathe, g-fadeUp keyframes)
 */

/* ═══════════════════════════════════════════════════════════════
   PAGE LOADER
═══════════════════════════════════════════════════════════════ */

@keyframes g-loader-line {
    0%   { transform: scaleY(0); opacity: 0; }
    30%  { opacity: 1; }
    100% { transform: scaleY(1); opacity: 1; }
}

@keyframes g-loader-spin {
    to { transform: rotate(360deg); }
}

.g-loader {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: var(--g-ink);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    transition: opacity 1.0s var(--g-ease-out), visibility 1.0s;
}

.g-loader--done {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* Vertical lines above/below ring */
.g-loader__line {
    width: 1px;
    flex: 1;
    max-height: 120px;
}
.g-loader__line--top {
    background: linear-gradient(to bottom, transparent, var(--g-blush-30));
    transform-origin: bottom;
    animation: g-loader-line 1.4s var(--g-ease-out) 0.2s both;
}
.g-loader__line--bottom {
    background: linear-gradient(to bottom, var(--g-blush-30), transparent);
    transform-origin: top;
    animation: g-loader-line 1.4s var(--g-ease-out) 0.2s both;
}

/* Ring */
.g-loader__ring {
    width: 110px;
    height: 110px;
    border-radius: 50%;
    border: 1px solid var(--g-blush-30);
    outline: 1px solid var(--g-blush-15);
    outline-offset: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    background: linear-gradient(135deg,
        rgba(107,  9, 28, 0.07),
        rgba(242, 207, 203, 0.11),
        rgba(107,  9, 28, 0.06)
    );
    backdrop-filter: blur(22px);
    animation: g-ring-enter 1.2s var(--g-ease-out) both, g-ring-breathe 4s ease-in-out 1.8s infinite;
    flex-shrink: 0;
}

.g-loader__logo {
    width: 100%;
    height: auto;
    display: block;
    filter: brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,0.5));
}

/* Spinning arc around the ring */
.g-loader__arc {
    position: absolute;
    width: 130px;
    height: 130px;
    border-radius: 50%;
    border: 1px solid transparent;
    border-top-color: var(--g-wine-40);
    animation: g-loader-spin 2.2s linear infinite;
    pointer-events: none;
}

.g-loader__ring-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Brand name */
.g-loader__brand {
    font-family: var(--g-font-serif);
    font-style: italic;
    font-size: clamp(0.9rem, 2vw, 1.15rem);
    font-weight: 300;
    letter-spacing: 0.55em;
    text-transform: uppercase;
    color: var(--g-cream);
    margin-top: 2.2rem;
    animation: g-fadeUp 1.0s var(--g-ease-out) 0.7s both;
}

.g-loader__sub {
    font-family: var(--g-font-ui);
    font-size: 0.42rem;
    letter-spacing: 0.4em;
    text-transform: uppercase;
    color: var(--g-blush);
    opacity: 0.55;
    margin-top: 0.8rem;
    animation: g-fadeUp 0.8s var(--g-ease-out) 1.1s both;
}