/* =========================================================
   REVEAL ANIMATIONS (scroll-triggered)
   ========================================================= */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.9s var(--ease-out), transform 0.9s var(--ease-out);
}

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

.reveal-stagger > * {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out);
}

.reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

.reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.05s; }
.reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.15s; }
.reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.25s; }
.reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.35s; }
.reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.45s; }
.reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.55s; }

/* =========================================================
   NEW WOW EFFECTS (Custom Cursor, Canvas, Floating Images)
   ========================================================= */

.cursor {
    display: none;
}

@media (pointer: fine) {
    body { cursor: none; }
    a, button, .btn { cursor: none; }

    .cursor {
        display: block;
        position: fixed;
        top: 0; left: 0;
        width: 20px; height: 20px;
        border: 2px solid var(--text-0);
        border-radius: 50%;
        pointer-events: none;
        z-index: 9999;
        transform: translate(-50%, -50%);
        transition: width 0.3s var(--ease-out), height 0.3s var(--ease-out), background-color 0.3s var(--ease-out), border-color 0.3s var(--ease-out);
        mix-blend-mode: difference;
    }

    .cursor.hovering {
        width: 60px; height: 60px;
        background-color: var(--text-0);
        border-color: transparent;
    }
}

#canvas-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    opacity: 0.7;
}



.char {
    display: inline-block;
    opacity: 0;
    transform: translateY(20px);
}