/* ═══════════════════════════════════════════
   components.css — Shared interactive states
   ═══════════════════════════════════════════ */

/* ── Cursor expansion on interactive elements ──
   Driven by cursor.js; default state lives here. */
.cursor-outline.expanded {
    transform: translate(-50%, -50%) scale(1.5);
    opacity: 0.5;
}

/* ── Scroll-reveal base state ──
   Applied by scroll.js on page load; elements animate
   into view when .visible is added. */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.reveal.visible {
    opacity: 1;
    transform: translateY(0);
}