/* ============================================
   Utilities — Animations, Print, a11y
   ============================================ */

/* ============ Spacing Utilities ============ */
.mt-sm { margin-top: var(--space-sm); }
.mt-md { margin-top: var(--space-md); }
.mt-lg { margin-top: var(--space-lg); }

/* ============ Reveal Animation ============ */
.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity var(--duration-slow) var(--ease-out),
                transform var(--duration-slow) var(--ease-out);
}

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

/* Staggered children */
.reveal--stagger > * {
    opacity: 0;
    transform: translateY(12px);
    transition: opacity var(--duration-normal) var(--ease-out),
                transform var(--duration-normal) var(--ease-out);
}

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

.reveal--stagger.reveal--visible > *:nth-child(1) { transition-delay: 0ms; }
.reveal--stagger.reveal--visible > *:nth-child(2) { transition-delay: 60ms; }
.reveal--stagger.reveal--visible > *:nth-child(3) { transition-delay: 120ms; }
.reveal--stagger.reveal--visible > *:nth-child(4) { transition-delay: 180ms; }
.reveal--stagger.reveal--visible > *:nth-child(5) { transition-delay: 240ms; }
.reveal--stagger.reveal--visible > *:nth-child(6) { transition-delay: 300ms; }

/* ============ Reduced Motion ============ */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .reveal {
        opacity: 1;
        transform: none;
    }

    .reveal--stagger > * {
        opacity: 1;
        transform: none;
        transition-delay: 0ms !important;
    }

    .progress-bar {
        animation: none;
    }
}

/* ============ Toast Notifications ============ */
.toast-container {
    position: fixed;
    bottom: var(--space-lg);
    right: var(--space-lg);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    pointer-events: none;
}

.toast {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-card-solid);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    font-size: var(--text-sm);
    color: var(--text-primary);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    opacity: 0;
    transform: translateY(10px) scale(0.95);
    transition: all var(--duration-normal) var(--ease-spring);

    &--visible {
        opacity: 1;
        transform: translateY(0) scale(1);
    }

    &--success {
        border-color: var(--green);
    }
}

/* ============ Print Styles ============ */
@media print {
    .sidebar,
    .mobile-header,
    .theme-toggle,
    .progress-bar,
    .copy-btn,
    .hero__bg,
    .sidebar-overlay,
    .toast-container {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
    }

    .card {
        break-inside: avoid;
        border: 1px solid #ccc;
        box-shadow: none;
    }

    .section {
        padding: 20px 0;
    }

    body {
        background: white;
        color: black;
    }

    .code-block {
        border: 1px solid #ccc;
    }

    a::after {
        content: " (" attr(href) ")";
        font-size: 0.8em;
        color: #666;
    }
}

/* ============ High Contrast ============ */
@media (forced-colors: active) {
    .card,
    .accordion__item,
    .question {
        border: 2px solid LinkText;
    }

    .badge {
        border: 1px solid currentColor;
    }

    .nav-link[aria-current="true"] {
        border-left-color: LinkText;
    }
}