/* =============================================
   D.A STUDIO — IMAGE LOADER
   Uses CSS tokens from style.css
   Spins "png Logo.png" while image loads
   ============================================= */

/* ── WRAPPER ─────────────────────────────── */
.da-img-wrap {
    position: relative;
    overflow: hidden;
    background: var(--color-surface);
}

/* ── SHIMMER ─────────────────────────────── */
.da-img-wrap::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
        110deg,
        var(--color-surface)         20%,
        var(--color-surface-muted)   40%,
        var(--color-secondary)       50%,
        var(--color-surface-muted)   60%,
        var(--color-surface)         80%
    );
    background-size: 300% 100%;
    z-index: 2;
    animation: daShimmer 2.2s ease-in-out infinite;
    transition: opacity 0.6s var(--ease-standard);
}

@keyframes daShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -100% center; }
}

.da-img-wrap.da-loaded::before {
    opacity: 0;
    pointer-events: none;
    /* Kill the animation so the GPU stops computing it.
       Without this the shimmer keeps running invisibly, and when the
       browser re-promotes the element to a compositor layer on scroll
       there are 1-2 frames before opacity:0 re-applies — causing a flash. */
    animation: none;
}

/* ── LOADER CONTAINER ────────────────────── */
.da-loader {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 3;
    pointer-events: none;
    transition:
        opacity   0.55s var(--ease-standard),
        transform 0.55s var(--ease-standard);
}

.da-img-wrap.da-loaded .da-loader {
    opacity: 0;
    transform: scale(0.88);
    pointer-events: none;
}

/* ── RINGS ───────────────────────────────── */
/* Light mode: charcoal rings — clearly visible on the white shimmer background */
.da-ring-outer {
    position: absolute;
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1.5px solid rgba(49, 45, 39, 0.18);
    border-top-color: rgba(49, 45, 39, 0.75);
    animation: daSpin 2.8s linear infinite;
}

.da-ring-inner {
    position: absolute;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    border: 1.5px solid rgba(49, 45, 39, 0.10);
    border-bottom-color: rgba(49, 45, 39, 0.45);
    animation: daSpin 1.6s linear infinite reverse;
}

/* Dark mode: gold rings */
@media (prefers-color-scheme: dark) {
    .da-ring-outer {
        border-color: rgba(var(--color-gold-rgb), 0.18);
        border-top-color: rgba(var(--color-gold-rgb), 0.85);
    }
    .da-ring-inner {
        border-color: rgba(var(--color-gold-rgb), 0.08);
        border-bottom-color: rgba(var(--color-gold-rgb), 0.50);
    }
}

[data-color-scheme="dark"] .da-ring-outer {
    border-color: rgba(var(--color-gold-rgb), 0.18);
    border-top-color: rgba(var(--color-gold-rgb), 0.85);
}
[data-color-scheme="dark"] .da-ring-inner {
    border-color: rgba(var(--color-gold-rgb), 0.08);
    border-bottom-color: rgba(var(--color-gold-rgb), 0.50);
}

@keyframes daSpin {
    to { transform: rotate(360deg); }
}

/* ── MONOGRAM / LOGO ─────────────────────── */
.da-monogram {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.da-monogram-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    display: block;
    animation: daLogoSpin 3s linear infinite;
    /* Light mode: dark logo on white shimmer — no filter needed, already dark */
}

/* Dark mode: logo is dark/black → invert to white so it shows on dark surface */
@media (prefers-color-scheme: dark) {
    .da-monogram-logo {
        filter: brightness(0) invert(1);
        opacity: 0.85;
    }
}
[data-color-scheme="dark"] .da-monogram-logo {
    filter: brightness(0) invert(1);
    opacity: 0.85;
}

@keyframes daLogoSpin {
    0%   { transform: rotate(0deg)   scale(1.35); opacity: 0.5; }
    45%  { opacity: 1; }
    50%  { transform: rotate(180deg) scale(1.35); opacity: 1; }
    95%  { opacity: 0.5; }
    100% { transform: rotate(360deg) scale(1.35); opacity: 0.5; }
}

/* ── PROGRESS BAR ────────────────────────── */
.da-progress {
    position: absolute;
    bottom: 0;
    left: 0;
    height: 1.5px;
    background: linear-gradient(
        to right,
        transparent,
        var(--color-text) 30%,
        var(--color-text) 70%,
        transparent
    );
    z-index: 4;
    pointer-events: none;
    animation: daProgress 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    transition: opacity var(--transition-fast);
}

@media (prefers-color-scheme: dark) {
    .da-progress {
        background: linear-gradient(
            to right,
            transparent,
            var(--color-gold) 30%,
            var(--color-gold) 70%,
            transparent
        );
    }
}

[data-color-scheme="dark"] .da-progress {
    background: linear-gradient(
        to right,
        transparent,
        var(--color-gold) 30%,
        var(--color-gold) 70%,
        transparent
    );
}

@keyframes daProgress {
    0%   { width: 0%;   left: 0%;   opacity: 1; }
    60%  { width: 68%;  left: 16%;  opacity: 1; }
    100% { width: 0%;   left: 100%; opacity: 0; }
}

.da-img-wrap.da-loaded .da-progress {
    animation: none;
    opacity: 0;
}

/* ── IMAGE ───────────────────────────────── */
.da-img-wrap img:not(.da-monogram-logo) {
    opacity: 0;
    transition: opacity 0.75s var(--ease-standard);
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.da-img-wrap.da-loaded img:not(.da-monogram-logo) {
    opacity: 1;
}

/* ── INSTANT (cached images) ─────────────── */
.da-img-wrap.da-instant::before,
.da-img-wrap.da-instant .da-loader,
.da-img-wrap.da-instant .da-progress {
    display: none;
}

.da-img-wrap.da-instant img:not(.da-monogram-logo) {
    opacity: 1;
    transition: none;
}