/**
 * Intervalens - Scrollytelling Styles
 *
 * Styles for the scrollytelling section with pinned content,
 * word-by-word text reveal, and fixed UI overlay.
 */

/* ==========================================================================
   Main Section
   ========================================================================== */

.scrollytelling {
    position: relative;
    width: 100%;
    background: transparent;
    z-index: 2;  /* Above scrollytelling-overlay (z-index: 1) */
}

.scrollytelling__track {
    position: relative;
    width: 100%;
    /* height set inline via PHP: stepCount * scrollHeightPerStep */
}

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

/* ==========================================================================
   Viewport-Fixed Tint Overlay (rendered via wp_footer)
   Single overlay with scroll-linked opacity transitions.
   Controlled by Scrollytelling block's heroOverlayOpacity and overlayOpacity.
   ========================================================================== */

.scrollytelling-tint {
    position: fixed;
    inset: 0;
    background-color: rgb(0 0 0);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    z-index: -1;  /* Between video (-2) and content (0) - opaque backgrounds naturally cover it */
    will-change: opacity;
}

/* ==========================================================================
   Story Steps
   ========================================================================== */

.scrollytelling__step {
    position: absolute;
    /* Aligned with counter (same top), positioned from right edge */
    top: calc(var(--wp--preset--spacing--80, 4rem) + var(--safe-area-top, 0px) + 9rem);
    right: var(--content-align-right);
    left: auto;
    transform: none;
    width: calc(100% - var(--content-align-left) - var(--scrollytelling-counter-offset) - var(--content-align-right));
    max-width: 950px;
    text-align: left;
    opacity: 0;
    visibility: hidden;
}

/* First step visible by default */
.scrollytelling__step[data-step="1"] {
    opacity: 1;
    visibility: visible;
}
 
.scrollytelling__text {
    /* Typography controlled via Site Editor - these are fallback defaults only */
    font-size: var(--scrollytelling-text-size, clamp(1.5rem, 4vw, 3rem));
    line-height: var(--scrollytelling-line-height, 1.4);
    font-style: var(--scrollytelling-font-style, italic);
    color: var(--wp--preset--color--white, #ffffff);
}

.scrollytelling__text p {
    margin: 0;
}

/* Character spans from SplitText */
.scrollytelling__char {
    display: inline-block;
    /* Color controlled by JS: white-40 (dim) or white (revealed) */
    color: var(--wp--preset--color--white-40, rgba(255, 255, 255, 0.4));
}

/* ==========================================================================
   Fixed UI Overlay
   ========================================================================== */

.scrollytelling-ui {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
    /* Visible by default - pins with content */
}

/* ==========================================================================
   Fixed UI Overlay - Reference Layout
   ========================================================================== */

/* Label - top left with glass effect, aligned with logo left edge */
.scrollytelling-ui__label {
    position: absolute;
    /* Derived from spacing tokens + safe area */
    top: calc(var(--wp--preset--spacing--70, 3rem) + var(--safe-area-top, 0px) + 4rem);
    left: var(--content-align-left);
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--30, 8px);
    padding: 7px var(--wp--preset--spacing--30, 16px);
    background: var(--wp--preset--color--white-10, rgba(255, 255, 255, 0.7));
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid var(--wp--preset--color--white-20, rgba(255, 255, 255, 0.7));
    border-radius: 8px;
}

.scrollytelling-ui__indicator {
    width: 8px;
    height: 8px;
    background: var(--wp--preset--color--primary, #BC323F);
}

.scrollytelling-ui__label-text {
    color: var(--wp--preset--color--white, #ffffff);
    font-size: 0.75rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

/* Progress bar - full width, below label */
.scrollytelling-ui__progress {
    position: absolute;
    /* Derived from spacing tokens + safe area */
    top: calc(var(--wp--preset--spacing--80, 4rem) + var(--safe-area-top, 0px) + 7rem);
    left: 0;
    width: 100%;
    height: 2px;
    background: var(--wp--preset--color--white-20, rgba(255, 255, 255, 0.2));
}

.scrollytelling-ui__progress-fill {
    height: 100%;
    background: var(--wp--preset--color--primary, #BC323F);
    transform: scaleX(0);
    transform-origin: left center;
    will-change: transform;
}

/* Step counter - left side, below progress, aligned with logo left edge */
.scrollytelling-ui__counter {
    position: absolute;
    /* Derived from spacing tokens + safe area */
    top: calc(var(--wp--preset--spacing--80, 4rem) + var(--safe-area-top, 0px) + 9rem);
    left: var(--content-align-left);
    display: flex;
    align-items: center;
    gap: var(--wp--preset--spacing--20, 6px);
    padding: var(--wp--preset--spacing--30, 10px) var(--wp--preset--spacing--50, 24px);
    border: 1px solid var(--wp--preset--color--white-20, rgba(255, 255, 255, 0.2));
    border-radius: 50px;
}

.scrollytelling-ui__current,
.scrollytelling-ui__separator,
.scrollytelling-ui__total {
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--wp--preset--color--white, #ffffff);
}

.scrollytelling-ui__separator {
    color: var(--wp--preset--color--white-40, rgba(255, 255, 255, 0.4));
}

/* ==========================================================================
   Responsive
   Breakpoint tokens (from theme.json custom.breakpoint):
   sm: 480px, md: 768px, lg: 1024px
   ========================================================================== */

/* Tablets - intermediate layout */
@media (max-width: 1024px) { /* var(--wp--custom--breakpoint--lg) */
    .scrollytelling-ui__label {
        top: calc(var(--wp--preset--spacing--60, 2rem) + var(--safe-area-top, 0px) + 4rem);
        left: var(--content-align-left);
    }

    .scrollytelling-ui__progress {
        top: calc(var(--wp--preset--spacing--70, 3rem) + var(--safe-area-top, 0px) + 6.5rem);
    }

    .scrollytelling-ui__counter {
        top: calc(var(--wp--preset--spacing--70, 3rem) + var(--safe-area-top, 0px) + 8rem);
        left: var(--content-align-left);
    }

    .scrollytelling__step {
        /* Aligned with counter (same top), right-aligned with nav pill */
        top: calc(var(--wp--preset--spacing--70, 3rem) + var(--safe-area-top, 0px) + 8rem);
        right: var(--content-align-right);
        left: auto;
        width: calc(100% - var(--content-align-left) - var(--scrollytelling-counter-offset) - var(--content-align-right));
        max-width: 800px;
    }
}

/* Phones - compact layout */
@media (max-width: 768px) { /* var(--wp--custom--breakpoint--md) */
    .scrollytelling-ui__label {
        top: calc(var(--wp--preset--spacing--40, 1rem) + var(--safe-area-top, 0px) + 4rem);
        left: var(--content-align-left);
    }

    .scrollytelling-ui__progress {
        top: calc(var(--wp--preset--spacing--50, 1.5rem) + var(--safe-area-top, 0px) + 7rem);
    }

    .scrollytelling-ui__counter {
        top: calc(var(--wp--preset--spacing--50, 1.5rem) + var(--safe-area-top, 0px) + 8.5rem);
        left: var(--content-align-left);
    }

    .scrollytelling__step {
        /* Aligned with counter (same top), right-aligned with nav pill */
        top: calc(var(--wp--preset--spacing--50, 1.5rem) + var(--safe-area-top, 0px) + 8.5rem);
        right: var(--content-align-right);
        left: auto;
        width: calc(100% - var(--content-align-left) - var(--scrollytelling-counter-offset) - var(--content-align-right));
        max-width: none;
    }

    .scrollytelling__text {
        font-size: clamp(1.25rem, 5vw, 2rem);
    }
}

/* Small phones - extra compact */
@media (max-width: 480px) { /* var(--wp--custom--breakpoint--sm) */
    .scrollytelling-ui__label {
        padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--30, 0.75rem);
    }

    .scrollytelling-ui__counter {
        padding: var(--wp--preset--spacing--20, 0.5rem) var(--wp--preset--spacing--40, 1rem);
    }

    .scrollytelling__step {
        /* Small phones - right-aligned with nav pill */
        right: var(--content-align-right);
        left: auto;
        width: calc(100% - var(--content-align-left) - var(--scrollytelling-counter-offset) - var(--content-align-right));
    }

    .scrollytelling__text {
        font-size: clamp(1rem, 5vw, 1.5rem);
    }
}

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

@media (prefers-reduced-motion: reduce) {
    .scrollytelling__char {
        color: var(--wp--preset--color--white, #ffffff) !important;
    }

    .scrollytelling__step {
        opacity: 1 !important;
        visibility: visible !important;
    }

    .scrollytelling-ui__progress-fill {
        transition: none !important;
    }
}