/* ==========================================================================
   BYO-Me Reusable Components
   Component classes built on top of design tokens.
   ========================================================================== */

/* ======================================================================
   SPINNER — .bm-spinner
   ====================================================================== */
.bm-spinner {
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 3px solid var(--gray-200);
    border-top-color: var(--primary-color);
    border-radius: var(--radius-full);
    animation: bm-spin 0.7s linear infinite;
}

.bm-spinner--sm {
    width: 16px;
    height: 16px;
    border-width: 2px;
}

.bm-spinner--lg {
    width: 40px;
    height: 40px;
    border-width: 4px;
}

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

/* ======================================================================
   UTILITY — Fade-in animation for scroll reveals
   ====================================================================== */
.bm-fade-in {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

.bm-fade-in.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays for children */
.bm-stagger > :nth-child(1) { transition-delay: 0ms; }
.bm-stagger > :nth-child(2) { transition-delay: 75ms; }
.bm-stagger > :nth-child(3) { transition-delay: 150ms; }
.bm-stagger > :nth-child(4) { transition-delay: 225ms; }
.bm-stagger > :nth-child(5) { transition-delay: 300ms; }
.bm-stagger > :nth-child(6) { transition-delay: 375ms; }