/**
 * KloudSync Pty Ltd — Common stylesheet
 *
 * Imported by every page via a single <link> tag.
 * Page-specific stylesheets are still loaded separately after this one.
 */

/* Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@700;800&display=swap');

/* Shared base stylesheets — order is intentional */
@import '/Src/Css/variables.css';
@import '/Src/Css/reset.css';
@import '/Src/Css/nav.css';
@import '/Src/Css/footer.css';
@import '/Src/Css/sections.css';

/* ── Grain texture ── */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9999;
    opacity: 0.025;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
    background-repeat: repeat;
}

/* ── Plus Jakarta Sans for all headings ── */
h1, h2, h3, h4, .section-title {
    font-family: 'Plus Jakarta Sans', 'Inter', sans-serif;
}

/* ── Scroll-reveal animation engine ── */
[data-animate] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-animate][data-delay="100"] { transition-delay: 0.1s; }
[data-animate][data-delay="200"] { transition-delay: 0.2s; }
[data-animate][data-delay="300"] { transition-delay: 0.3s; }
[data-animate][data-delay="400"] { transition-delay: 0.4s; }
[data-animate][data-delay="500"] { transition-delay: 0.5s; }
[data-animate][data-delay="600"] { transition-delay: 0.6s; }
[data-animate][data-delay="700"] { transition-delay: 0.7s; }
[data-animate][data-delay="800"] { transition-delay: 0.8s; }

@media (prefers-reduced-motion: reduce) {
    [data-animate] {
        transition: opacity 0.3s ease;
        transform: none;
    }
}