/**
 * Intervalens - Frontpage Styles
 *
 * Styles for the mask overlay and hero section.
 */

/* ==========================================================================
   Shared Responsive Utilities
   ========================================================================== */

:root {
    /* ==========================================================================
       Header Alignment Anchors
       These variables define alignment points for content that needs to match
       header element positioning (logo left edge, nav pill right edge).
       ======================================================================== */

    /* Scrollbar width - set by JS, 0 on macOS overlay scrollbars, ~15px on Windows */
    --scrollbar-width: 0px;

    /* Header padding values (matches header.css) */
    --header-padding-inline: var(--wp--preset--spacing--50, 1.5rem);

    /*
     * Distance from viewport edge to header inner container edge.
     * Subtract scrollbar width from 100vw to match visible viewport.
     * min: header padding for narrow viewports
     * wide: (visible viewport - contentSize) / 2
     */
    --responsive-gutter: max(
        var(--header-padding-inline),
        calc((100vw - var(--scrollbar-width, 0px) - var(--wp--style--global--content-size, 1400px)) / 2)
    );

    /* Alignment anchors - used by scrollytelling to align with header elements */
    /* Aligns with logo container left edge and nav pill container right edge */
    --content-align-left: var(--responsive-gutter);
    --content-align-right: var(--responsive-gutter);

    /* Safe area for mobile notches/dynamic islands */
    --safe-area-top: env(safe-area-inset-top, 0px);
    --safe-area-bottom: env(safe-area-inset-bottom, 0px);

    /* Scrollytelling: counter width estimate + gap for side-by-side layout */
    --scrollytelling-counter-offset: 10rem; /* ~5rem counter + 5rem gap */
}

/* Mobile - header padding changes to 1rem (matches header.css) */
@media (max-width: 768px) {
    :root {
        --header-padding-inline: var(--wp--preset--spacing--40, 1rem);
        --scrollytelling-counter-offset: 6rem;
    }
}

/* Small phones - reduced counter offset */
@media (max-width: 480px) {
    :root {
        --scrollytelling-counter-offset: 5rem;
    }
}

/* ==========================================================================
   Lenis Smooth Scroll
   ========================================================================== */

html.lenis,
html.lenis body {
    height: auto;
}

.lenis.lenis-smooth {
    scroll-behavior: auto !important;
}

.lenis.lenis-smooth [data-lenis-prevent] {
    overscroll-behavior: contain;
}

.lenis.lenis-stopped {
    overflow: hidden;
}

/* ==========================================================================
   Frontpage Overlay (Mask/Iris)
   ========================================================================== */

.intervalens-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    pointer-events: none;
}

.intervalens-overlay__svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ==========================================================================
   Hero Section
   ========================================================================== */

.intervalens-hero-section {
    position: relative;
    /* Fallback for older browsers */
    min-height: 100vh;
    /* Modern browsers - accounts for mobile browser chrome */
    min-height: 100dvh;
    width: 100%;
}

.is-hero-section {
    position: relative;
    z-index: 2;  /* Above scrollytelling-overlay (1), below mask (9999) */
}

/* Original video inside Cover block - hidden when clone exists */
.is-hero-section .wp-block-cover__video-background {
    /* Video is cloned outside #smooth-wrapper for fixed positioning */
    /* Original is hidden by JS when clone is created */
}

/* Cloned video - rendered outside #smooth-wrapper to escape transform containment */
.intervalens-video-clone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    /* Fallback for older browsers */
    height: 100vh;
    /* Modern browsers - accounts for mobile browser chrome */
    height: 100dvh;
    object-fit: cover;
    object-position: center center;
    z-index: -2;  /* Below tint (-1) so tint can overlay video */
    pointer-events: none;
}

/* Make Cover block transparent so cloned video shows through */
.is-hero-section.wp-block-cover {
    background-color: transparent !important;
}

/* Ensure Cover content is above the fixed video */
.is-hero-section .wp-block-cover__inner-container {
    position: relative;
    z-index: 1;
}

/* Ensure cover block inside hero fills the space */
.intervalens-hero-section > .wp-block-cover {
    /* Fallback for older browsers */
    min-height: 100vh !important;
    /* Modern browsers - accounts for mobile browser chrome */
    min-height: 100dvh !important;
}

/* Elements with data-reveal attribute for staggered fade-in */
[data-reveal] {
    will-change: opacity, transform;
}

/* ==========================================================================
   Reduced Motion
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .intervalens-overlay,
    [data-reveal] {
        transition: none !important;
        animation: none !important;
    }
}