/* Fonts */
@font-face {
    font-family: 'Alte Haas Grotesk';
    src: url('../resources/alte_haas_grotesk/AlteHaasGroteskRegular.ttf') format('truetype');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Alte Haas Grotesk';
    src: url('../resources/alte_haas_grotesk/AlteHaasGroteskBold.ttf') format('truetype');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    /* ========================================
       MODULAR GRID SYSTEM
       Reference: 1728×1117px, 6×7 grid
       ======================================== */

    /* Frame dimensions (scale proportionally) */
    --frame-width: max(320px, 100vw);
    --frame-height: max(568px, 100vh);

    /* Grid units */
    --cell-width: clamp(120px, 14.18vw, 245px);    /* 245/1728 = 14.18% */
    --cell-height: clamp(80px, 11.73vh, 131px);     /* 131/1117 = 11.73% */
    --gutter: clamp(12px, 1.45vw, 25px);            /* 25/1728 = 1.45% */
    --desktop-cell-height: calc((100vh - 8 * var(--gutter)) / 7); /* Derived from viewport so rows fill exactly 100vh */

    /* Column bands (derived from cells + gutters) */
    --col-band-1: calc(var(--gutter) + var(--cell-width) + var(--gutter) + var(--cell-width) + var(--gutter));
    --col-band-2: calc(var(--cell-width) + var(--gutter) + var(--cell-width) + var(--gutter));
    --col-band-3-fg: calc(var(--cell-width) + var(--gutter) + var(--cell-width) + var(--gutter));
    --nav-strip: clamp(25px, 3.18vw, 55px);         /* 55/1728 = 3.18% */
    --col-band-3-media: calc(var(--col-band-3-fg) + var(--nav-strip));

    /* Inner widths */
    --inner-width-2col: calc(var(--cell-width) + var(--gutter) + var(--cell-width));

    /* ========================================
       TYPOGRAPHY (proportional scaling)
       ======================================== */
    --font-family-primary: 'Alte Haas Grotesk', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;

    /* Base typography (generic fallbacks) */
    --font-size-body: clamp(15px, 1.68vw, 29px);                /* Default body text */
    --line-height-body: 1.5;
    --font-size-h1: clamp(60px, 6.83vw, 118px);                 /* Large headlines */
    --font-size-h2: clamp(16px, 1.79vw, 31px);                  /* Medium headlines */

    /* Section-specific typography */
    --font-splash-tagline: clamp(16px, 1.79vw, 31px);           /* 31/1728 = 1.79% */
    --font-believe-body: clamp(15px, 1.68vw, 29px);             /* 29/1728 = 1.68% */
    --font-believe-line-height: clamp(28px, 3.13vh, 35px);      /* 35/1117 = 3.13vh - line spacing, vertical */
    --font-what-we-do: clamp(60px, 6.83vw, 118px);              /* 118/1728 = 6.83% */
    --font-what-we-do-line-height: 0.87;                        /* 87% as specified */
    --font-what-we-do-letter-spacing: -2px;
    --font-work-with-us-headline: clamp(60px, 6.83vw, 118px);
    --font-work-with-us-body: clamp(15px, 1.68vw, 29px);
    --font-button: clamp(16px, 1.79vw, 31px);
    --font-menu: clamp(10px, 1.04vw, 18px);                     /* 18/1728 = 1.04% */
    --font-menu-spacing: clamp(3px, 0.29vw, 5px);               /* 5/1728 = 0.29% */

    /* ========================================
       BUTTONS
       ======================================== */
    --button-width: var(--inner-width-2col);                    /* 515px reference */
    --button-height: clamp(52px, 6.18vh, 69px);                 /* 69/1117 = 6.18vh - vertical */
    --button-radius: clamp(14px, 1.56vw, 27px);                 /* 27/1728 = 1.56% */

    /* ========================================
       COLORS
       ======================================== */
    --color-bg: #000000;
    --color-text: #ffffff;
    --color-text-inverted: #ffffff;
    --color-cta: #667eea;
    --color-cta-hover: #5568d3;

    /* Gradients for video placeholders */
    --gradient-1: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-2: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
    --gradient-3: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
    --gradient-4: linear-gradient(135deg, #43e97b 0%, #38f9d7 100%);
    --gradient-5: linear-gradient(135deg, #fa709a 0%, #fee140 100%);

    /* ========================================
       ANIMATION & Z-INDEX
       ======================================== */
    /* Animation timings */
    --duration-text-reveal: 1s;
    --duration-section-transition: 1.2s;
    --ease-custom: cubic-bezier(0.65, 0, 0.35, 1);

    /* Z-index layers */
    --z-video: 1;
    --z-content: 10;
    --z-menu: 100;

    /* Typing effect */
    --typing-speed: 30; /* Characters per second */
    --typing-box-height: 60vh;
}

/* Mobile-specific variables */
@media (max-width: 768px) {
    :root {
        /* Safe area insets for edge-pinned elements (notch, home indicator) */
        --safe-top: env(safe-area-inset-top, 0px);
        --safe-bottom: env(safe-area-inset-bottom, 0px);
        --safe-left: env(safe-area-inset-left, 0px);
        --safe-right: env(safe-area-inset-right, 0px);

        /* Tier 1: CSS baseline using dvh (dynamic viewport height — follows visible area) */
        --app-h: 100dvh;
        --app-w: 100dvw;
        /* Gutter ratio: 25px / 1117px reference height = 2.238% */
        --gutter: calc(var(--app-h) * 0.02238);
        --mobile-cell-height: calc((var(--app-h) - (8 * var(--gutter))) / 7);

        /* Tier 2: JS precision vars — set by viewport.js via visualViewport API */
        /* Falls back to CSS baseline if JS hasn't run yet */
        --precision-h: var(--app-h-js, var(--app-h));
        --precision-gutter: calc(var(--precision-h) * 0.02238);
        --precision-cell-height: calc((var(--precision-h) - (8 * var(--precision-gutter))) / 7);

        /* Mobile typography */
        --font-mobile-menu: 37px;
        --font-mobile-menu-line-height: 87px;
        --font-mobile-menu-letter-spacing: -0.05em; /* -5% */

        --font-mobile-typing: 58px;
        --font-mobile-typing-line-height: 0.87; /* 87% */
        --font-mobile-typing-letter-spacing: -0.02em; /* -2% */

        --font-mobile-headline: clamp(44px, 13vw, 58px);
        --font-mobile-headline-line-height: 0.87; /* 87% */
        --font-mobile-headline-letter-spacing: -0.02em; /* -2% */

        /* Mobile scroll indicator */
        --scroll-indicator-mobile-width: 4px;
        --scroll-indicator-mobile-height: 82px;

        /* Mobile arrow */
        --arrow-size-mobile: 13px;
    }
}

/* dvh fallback for older browsers without dvh support */
@supports not (height: 100dvh) {
    @media (max-width: 768px) {
        :root {
            --app-h: 100vh;
            --app-w: 100vw;
        }
    }
}