@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;700;800&display=swap');

/* ── Legal & Content Pages (Privacy, Terms, Changelog) ── */

/* Reading progress bar */
.rdg-bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 0%;
    height: 3px;
    background: linear-gradient(to right, var(--primary), var(--brand-purple-dark), var(--sky-dark));
    z-index: 9999;
    border-radius: 0 99px 99px 0;
    transition: width 0.1s linear;
    pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
    /* Page-load entrance */
    .content-title-lg {
        opacity: 0;
        transform: translateY(20px);
        animation: rdg-up 0.6s cubic-bezier(.22, 1, .36, 1) 0.1s forwards;
    }

    .content-subtitle-sm, .content-subtitle-spacious {
        opacity: 0;
        animation: rdg-up 0.5s cubic-bezier(.22, 1, .36, 1) 0.25s forwards;
    }

    .content-block {
        opacity: 0;
        animation: rdg-up 0.4s ease 0.05s forwards;
    }

    @keyframes rdg-up {
        to {
            opacity: 1;
            transform: none;
        }
    }

    /* Scroll reveals */
    .sr-fade {
        opacity: 0;
        transform: translateY(16px);
        transition: opacity 0.5s cubic-bezier(.22, 1, .36, 1),
            transform 0.5s cubic-bezier(.22, 1, .36, 1);
    }

    .sr-fade.sr-show {
        opacity: 1;
        transform: none;
    }

    /* Section heading — left border grow */
    .content-section-title-spaced {
        border-left: 3px solid transparent;
        padding-left: 0.75rem;
        transition: border-color 0.4s ease 0.15s;
    }

    .content-section-title-spaced.sr-show {
        border-color: var(--primary);
    }

    /* List items */
    .sr-left {
        opacity: 0;
        transform: translateX(-14px);
        transition: opacity 0.45s cubic-bezier(.22, 1, .36, 1),
            transform 0.45s cubic-bezier(.22, 1, .36, 1);
        transition-delay: var(--sr-d, 0ms);
    }

    .sr-left.sr-show {
        opacity: 1;
        transform: none;
    }
}

/* Fallback for prefers-reduced-motion: reduce */
@media (prefers-reduced-motion: reduce) {
    .content-title-lg,
    .content-subtitle-sm,
    .content-subtitle-spacious,
    .content-block,
    .sr-fade,
    .sr-left {
        opacity: 1;
        transform: none;
    }
    
    .content-section-title-spaced {
        border-left: 3px solid var(--primary);
        padding-left: 0.75rem;
    }
}