/* ==========================================================================
    GLOBAL MODULE - SYSTEM BASE & LAYOUT STRUCTURE
   ========================================================================== */

/* --------------------------------------------------------------------------
    1. MODULE ROOT & DESIGN TOKENS
   -------------------------------------------------------------------------- */
:root {
    /* Layout Dimensions */
    --header-height: 90px;

    /* Animation & Transitions */
    --transition-theme-default: var(--transition-theme, 0.3s ease);
    --transition-reveal: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

/* --------------------------------------------------------------------------
    2. BOX MODEL RESET & BASE ELEMENTS
   -------------------------------------------------------------------------- */
*,
*::before,
*::after {
    box-sizing: border-box;
}

body {
    /* Typography & Visuals */
    font-family: var(--font-main, 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif);
    background-color: var(--bg-main, #f8fafc);
    color: var(--text-primary, #0f172a);

    /* Layout & Viewport Sizing (Sticky Footer Pattern) */
    margin: 0;
    padding: 0;
    padding-block-start: var(--header-height);

    display: flex;
    flex-direction: column;
    min-block-size: 100vh;
    min-block-size: 100dvh;
    /* Dynamic Viewport Height for Modern Mobile Browsers */

    /* Theme Transitions */
    transition:
        background-color var(--transition-theme-default),
        color var(--transition-theme-default);
}

/* Flexbox main container to push the footer down */
main {
    flex: 1 0 auto;
    width: 100%;
}

/* --------------------------------------------------------------------------
    3. MEDIA & RESPONSIVE ASSETS
   -------------------------------------------------------------------------- */
img,
picture,
video {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 100%;
    object-fit: cover;
}

/* --------------------------------------------------------------------------
    4. DARK MODE THEME OVERRIDES
   -------------------------------------------------------------------------- */
[data-theme="dark"] body {
    background-color: var(--bg-main, #0d1117);
    color: var(--text-primary, #f0f6fc);
}

/* --------------------------------------------------------------------------
    5. SCROLL REVEAL & STAGGERING ANIMATION FRAMEWORK
   -------------------------------------------------------------------------- */
.scroll-reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: var(--transition-reveal);
    transition-delay: var(--stagger-delay, 0s);
    will-change: opacity, transform;
}

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

/* Dynamic Staggering System - Cards */
.card-item:nth-child(1) {
    --stagger-delay: 0s;
}

.card-item:nth-child(2) {
    --stagger-delay: 0.2s;
}

/* Dynamic Staggering System - Steps */
.step-item:nth-child(1) {
    --stagger-delay: 0s;
}

.step-item:nth-child(2) {
    --stagger-delay: 0.15s;
}

.step-item:nth-child(3) {
    --stagger-delay: 0.3s;
}

.step-item:nth-child(4) {
    --stagger-delay: 0.45s;
}

/* --------------------------------------------------------------------------
    6. ACCESSIBILITY (a11y) - REDUCED MOTION OVERRIDE
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .scroll-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }
}