/* =============================================================================
   Utilities — spacing, visibility, motion, reveal animations.
   ========================================================================== */

/* Spacing helpers */
.ce-mt-0 { margin-top: 0 !important; }
.ce-mb-0 { margin-bottom: 0 !important; }
.ce-mt-4 { margin-top: var(--space-4) !important; }
.ce-mt-6 { margin-top: var(--space-6) !important; }
.ce-mb-4 { margin-bottom: var(--space-4) !important; }
.ce-mb-6 { margin-bottom: var(--space-6) !important; }
.ce-py-section { padding-block: var(--section-y) !important; }

/* Visibility */
.ce-visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Text helpers */
.ce-text-center { text-align: center; }
.ce-text-muted { color: var(--color-text-muted); }

/* Reveal-on-scroll */
.ce-reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity var(--dur-slow) var(--ease), transform var(--dur-slow) var(--ease);
    will-change: opacity, transform;
}

.ce-reveal.is-visible {
    opacity: 1;
    transform: none;
}

.ce-reveal--delay-1 { transition-delay: 80ms; }
.ce-reveal--delay-2 { transition-delay: 160ms; }
.ce-reveal--delay-3 { transition-delay: 240ms; }

/* Reduced motion: disable all decorative motion */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .ce-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }

    .ce-hero__scroll {
        animation: none !important;
    }

    .ce-modern *,
    .ce-modern *::before,
    .ce-modern *::after {
        animation-duration: 0.001ms !important;
        transition-duration: 0.001ms !important;
    }
}