/* ══════════════════════════════════════════════════════════════
   KSM × TECH — MARIGOLD MARKER
   A 2px reading-progress bar + closing marigold bloom.
   Light enough to sit over any product palette
   (plum, primary-red, peacock).
   ══════════════════════════════════════════════════════════════ */

/* ─── 1 · READING PROGRESS BAR ─────────────────────────── */
.marigold-progress {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 2px;
    background: transparent;
    z-index: 9999;
    pointer-events: none;
}

.marigold-progress::after {
    content: '';
    display: block;
    height: 100%;
    background: var(--marigold, #E8A33D);
    width: 0%;
    animation: marigold-fill linear both;
}

@supports (animation-timeline: scroll()) {
    .marigold-progress::after {
        animation-timeline: scroll(root);
    }
}

@keyframes marigold-fill {
    from { width: 0%; }
    to   { width: 100%; }
}

/* Fallback for no scroll-timeline */
@supports not (animation-timeline: scroll()) {
    .marigold-progress::after {
        width: 100%;
        transform-origin: left;
        transform: scaleX(0);
        /* JS-free fallback: bar stays hidden — acceptable degradation */
    }
}


/* ─── 2 · CLOSING MARIGOLD BLOOM ───────────────────────── */
.marigold-bloom {
    display: flex;
    justify-content: center;
    padding: 40px 0 0;
}

.marigold-bloom svg {
    width: 32px;
    height: 32px;
    color: var(--marigold, #E8A33D);
}

@supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
        .marigold-bloom svg {
            transform: scale(0);
            animation: bloom-in linear both;
            animation-timeline: view();
            animation-range: entry 20% cover 60%;
        }
        @keyframes bloom-in {
            from { transform: scale(0) rotate(-90deg); }
            to   { transform: scale(1) rotate(0deg); }
        }
    }
}


/* ─── REDUCED MOTION ───────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .marigold-progress::after { width: 100%; }
    .marigold-bloom svg { transform: scale(1); }
}