/**
 * Intro Narrative Styles
 *
 * Two-part scroll-driven narrative that appears in the same position
 * as the hero .row.row--pad content.
 *
 * ============================================================================
 * CUSTOMIZATION GUIDE
 * ============================================================================
 *
 * CHANGE TEXT SIZE (line ~40):
 *   font-size: clamp(2rem, 4vw, 4rem);
 *   - First value: minimum size (mobile)
 *   - Middle value: responsive scaling
 *   - Last value: maximum size (desktop)
 *
 * CHANGE TEXT COLOR (line ~42):
 *   color: #eaf0ff;  → Use any color
 *
 * ============================================================================
 */

/* ============================================================================
   NARRATIVE CONTAINER
   ============================================================================ */

.intro-narrative {
    /* Position absolutely to overlay the intro-top section */
    position: relative;
    top: 33%;
    left: 0;
    right: 0;
    min-height:50vh; /* Tall enough for both slides stacked */

    /* Flexbox to stack slides vertically */
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;

    /* Initial state: visible */
    opacity: 1;
    pointer-events: auto; /* Enable mouse events */

    /* Transition for fade in/out */
    transition: opacity 0.6s ease-out, visibility 0.6s ease-out;

    /* Ensure it's above intro-top when visible */
    z-index: 100;

    /* Background with transparency */
    background-color: rgba(33, 99, 147, 0.7); /* #216393 with 70% opacity */
}

/* Hide narrative when mouse is out and below */
.intro-narrative.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* When narrative is active */
.intro-narrative.is-active {
    opacity: 1 !important;
    pointer-events: auto !important;
    display: flex !important;
    visibility: visible !important;
}

/* Mouseover trigger - show slides one after the other (no typewriter) */
.intro-narrative:hover .intro-narrative__slide[data-step="1"] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition-delay: 0s;
}

.intro-narrative:hover .intro-narrative__slide[data-step="2"] {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
    transition-delay: 0.8s; /* Appears 0.8s after mouseover */
}

/* ============================================================================
   NARRATIVE SLIDES
   ============================================================================ */

.intro-narrative__slide {
    /* Static positioning - slides stack naturally */
    position: relative;
    width: 100%;
    min-height: 20vh;

    /* Center content like the original row */
    display: flex !important;
    align-items: center;
    justify-content: flex-start;

    /* Padding left and right 20px */
    padding-left: 20px;
    padding-right: 20px;
    padding-top: 0;
    padding-bottom: 0;

    /* Max width 80% of content */
    max-width: 100%;

    /* Typography - MATCH H1 EXACTLY */
    font-family: PP Neue Montreal, Helvetica Neue, Helvetica, Arial, sans-serif;
    font-weight: 300; /* h1 uses 300 */
    font-size: var(--xxxxl, calc(var(--scale-text-rem) * 9)) var( --n-xxxxl, var(--xxl, calc(var(--scale-text-rem) * 5.6)) var( --n-xxl, var(--md, calc(var(--scale-text-rem) * 4.8)) var(--n-md, calc(var(--scale-text-rem) * 3.6)) ) );
    --lh: var(--xxxxl, 1.04651em) var( --n-xxxxl, var(--xxl, 1.07143em) var(--n-xxl, var(--md, 1.08333em) var(--n-md, 1.11111em)) );
    line-height: var(--lh);
    letter-spacing: -0.01em;
    line-height: var(--lh);
    letter-spacing: -0.01em;
    color: var(--t-heading) !important; /* Use same color as h1 text--color-text */

    /* Initial state: hidden (controlled by JS) */
    opacity: 0;
    transform: translateY(40px);

    /* Smooth transitions */
    transition: opacity 1.2s ease-out, transform 1.2s ease-out;

    /* Performance optimization */
    will-change: opacity, transform;

    /* Prevent text selection during scroll */
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;

    /* Ensure text is visible */
    z-index: 10;
    pointer-events: none;

    /* Allow text wrapping - no typewriter effect */
    overflow: visible;
    white-space: normal;
}

/* Make first slide bold */
.intro-narrative__slide[data-step="1"] {
    font-weight: 700 !important; /* Bold */
}

/* When slide is visible - simple fade in (no typewriter) */
.intro-narrative__slide.is-visible {
    opacity: 1 !important;
    transform: translateY(0) !important;
}

/* Stagger animation - slides appear one after the other */
.intro-narrative__slide[data-step="1"].is-visible {
    transition-delay: 0s;
}

.intro-narrative__slide[data-step="2"].is-visible {
    transition-delay: 0.6s; /* Appears 0.6s after slide 1 */
}

/* Fade out when scrolling past */
.intro-narrative.is-fading-out {
    opacity: 0 !important;
    transition: opacity 0.6s ease-out;
}

/* ============================================================================
   HERO CONTENT ROW FADE
   ============================================================================ */

.intro-top__content .row.row--pad.is-hidden {
    opacity: 0 !important;
    pointer-events: none;
    transition: opacity 600ms ease-out;
}

/* ============================================================================
   RESPONSIVE TYPOGRAPHY
   ============================================================================ */

/* Tablet */
@media (max-width: 1024px) {
    .intro-narrative__slide {
        font-size: clamp(1.5rem, 3.5vw, 3rem);
        padding-left: calc((100% - 900px) / 2 + (100% / 12 * 2));
    }
}

/* Mobile */
@media (max-width: 768px) {
    .intro-narrative__slide {
        font-size: clamp(1.25rem, 5vw, 2rem);
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }
}

/* Small mobile */
@media (max-width: 480px) {
    .intro-narrative__slide {
        font-size: clamp(1rem, 6vw, 1.5rem);
        padding-left: 1rem;
        padding-right: 1rem;
    }
}

/* ============================================================================
   REDUCED MOTION
   ============================================================================ */

@media (prefers-reduced-motion: reduce) {
    .intro-narrative__slide {
        transition: opacity 0.3s ease, transform 0.3s ease;
    }
}

/* ============================================================================
   ACCESSIBILITY
   ============================================================================ */

/* High contrast mode support */
@media (prefers-contrast: high) {
    .intro-narrative__slide {
        color: #ffffff;
        font-weight: 600;
    }
}