// ==========================================================================
// Home Page Styles
//
// Sections: hero (home-intro), 3x "mountain" bands (Haute altitude / Station
// / Village — shared .home-mountain block), closing quote band, and the
// fixed altitude sidebar. BEM Methodology throughout.
// ==========================================================================

@use '../base/variables' as *;
@use '../base/mixins' as *;

// Rendered height of the scene illustration that bridges into each
// following "mountain" section (see .home-mountain__scene(-wrap) below).
// Scales with viewport HEIGHT only (vh, clamped) — NOT viewport width, so
// the image's own aspect ratio drives its rendered width instead of being
// stretched/squashed to fit 100vw: wide screens reveal more of the scene's
// width, narrow screens crop more of it, always centered (overflow hidden
// on .home-mountain__scene-wrap). Été/hiver variants of a given scene share
// (near enough) the same aspect ratio, so one height value covers both.
//
// CSS custom properties (not plain SCSS vars) because each height feeds 3
// consumers below (padding-bottom, scene-wrap height, negative-margin
// jointure) — mobile/tablet just need one override point here instead of
// touching every consumer. Mobile-first: smaller scenes on short/narrow
// viewports so the illustration doesn't dominate the page.
:root {
    --scene-height-haute-altitude: clamp(60px, 19vh, 340px); // 01-ete.svg / 01-hiver.svg
    --scene-height-station: clamp(35px, 12vh, 200px); // 02-ete.svg / 02-hiver.svg
    --scene-height-village: clamp(40px, 14vh, 250px); // 03-ete.svg / 03-hiver.svg
    // Height of .home-mountain__cards-viewport (project cards horizontal
    // scroller). Override per breakpoint below as needed.
    --cards-viewport-height: clamp(calc(33vh - var(--header-height-css)), 60vh, calc(80vh - var(--header-height-css)));

    @media (min-width: $breakpoint-md) {
        --scene-height-haute-altitude: clamp(75px, 28vh, 440px);
        --scene-height-station: clamp(42px, 20vh, 260px);
        --scene-height-village: clamp(48px, 20vh, 320px);
    }

    @media (min-width: $breakpoint-lg) {
        --scene-height-haute-altitude: clamp(90px, 45vh, 574px);
        --scene-height-station: clamp(50px, 30vh, 342px);
        --scene-height-village: clamp(60px, 30vh, 422px);
    }

}

$scene-height-haute-altitude: var(--scene-height-haute-altitude);
$scene-height-station: var(--scene-height-station);
$scene-height-village: var(--scene-height-village);
$cards-viewport-height: var(--cards-viewport-height);

// Fixed mountain-mask backdrop behind the hero/Haute-altitude jointure, color
// interpolated $color-primary-lighter -> $color-primary-dark on scroll by assets/home.ts
// (GSAP ScrollTrigger) -- same technique as .about-page__bg in _about.scss.
.home-page__bg {
    position: fixed;
    top: 30vh;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background-color: $color-primary-lighter;
    // Color driven frame-by-frame by GSAP scrub (assets/home.ts) — the global
    // theme-change fade in base/_reset.scss would fight it and lag the scrub.
    transition: none;
    mask-image: url('../../images/actualite-mountain-mask-v2.svg'), linear-gradient(#000, #000);
    mask-repeat: no-repeat, no-repeat;
    mask-position: top, top;
    mask-size: 100% auto, 100% 100%;
    mask-composite: exclude;
    -webkit-mask-image: url('../../images/actualite-mountain-mask-v2.svg'), linear-gradient(#000, #000);
    -webkit-mask-repeat: no-repeat, no-repeat;
    -webkit-mask-position: top, top;
    -webkit-mask-size: 100% auto, 100% 100%;
    -webkit-mask-composite: destination-out;
}

// --------------------------------------------------------------------------
// Block: .home-prehome — full-viewport intro screen shown before .home-intro
// --------------------------------------------------------------------------
// A plain sibling spacer reserves the document scroll room the préhome sequence
// scrubs against (see assets/home.ts). No GSAP `pin` — pin's spacer/layout
// juggling fought with the Lenis smooth-scroll instance (SmoothScroll.ts) and
// broke scrolling on the rest of the page.
//
// 2.5 viewports: the character's descent of the piste needs the room for its
// turns to read, and the préhome only ever plays once per session (see the
// `galta:prehome-seen` flag in assets/home.ts). Shorter below $breakpoint-md,
// where the piste has fewer turns and Lenis is not active anyway.
.home-prehome-spacer {
    height: 150vh;

    @media (min-width: $breakpoint-md) {
        height: 250vh;
    }
}

// Fixed overlay stacked above home-intro AND the header (see _header.scss),
// covering the viewport from the very top regardless of scroll position or
// body's fixed-header padding-top. Fades itself out automatically once the
// mountain line finishes drawing, revealing home-intro/header underneath —
// no extra "dead" scroll zone.
.home-prehome {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background-color: $color-neutral;
    z-index: 1000;

    &__trail-container {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;

        .trail-image {
            border-radius: $radius-sm;
            box-shadow: $shadow;
        }
    }

    // Lottie scene (cycliste / skieur riding a ridge), mounted by LottieDescent.ts.
    // Sits above the image trail but below the wordmark and the scroll hint.
    &__piste {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;

        [data-lottie-slot] {
            position: absolute;
            inset: 0;

            svg {
                display: block;
                width: 100%;
                height: 100%;
            }
        }

        // Cycliste en Été (par défaut), skieur en Hiver. Both scenes are mounted and
        // swapped here in pure CSS: a theme change mid-descent then costs no re-fetch
        // and keeps the scroll progress.
        [data-lottie-slot='dark'] {
            display: none;
        }

        [data-theme='dark'] & {
            [data-lottie-slot='light'] {
                display: none;
            }

            [data-lottie-slot='dark'] {
                display: block;
            }
        }
    }

    &__content {
        position: relative;
        z-index: 2;
        text-align: center;
        pointer-events: none;
    }

    &__title {
        font-family: $font-family-serif;
        font-weight: 400;
        line-height: 1;
        color: $color-primary-dark;
        margin: 0;
    }

    &__title-line {
        display: block;
        font-size: clamp(48px, 12vw, 140px);

        &:first-child {
            font-size: clamp(56px, 14vw, 160px);
        }
    }

    &__footer {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 2;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    // Visuals (border/ticks/colors) come from the shared .link-btn--lined
    // component (see components/_button.scss) — only positioning here.
    &__scroll-hint {
        margin: $spacing-md 0 $spacing-lg;
    }
}

// --------------------------------------------------------------------------
// Block: .home-intro (hero)
// --------------------------------------------------------------------------
.home-intro {
    position: relative;
    width: 100%;
    min-height: 360px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow: hidden;
    padding-top: $spacing-xl;
    padding-bottom: $scene-height-haute-altitude;
    
    @media (min-width: $breakpoint-md) {
        min-height: 672px;
    }
    
    @media (min-width: $breakpoint-xl) {
        min-height: 934px;
    }

    &__content {
        position: relative;
        z-index: 2;
        max-width: $breakpoint-wrapper;
        margin: 0 auto;
        width: 100%;
        padding: 0 $spacing-lg;

        @include above-wrapper-breakpoint {
            padding: 0;
        }
    }

    &__title {
        font-family: $font-family-serif;
        font-weight: 400;
        font-size: $font-size-h1;
        line-height: 1.3;
        color: $color-primary-dark;
        margin: 0;
        max-width: 14ch;

        @media (min-width: $breakpoint-md) {
            margin: 0 0 $spacing-sm 0;
        }
    }

    &__subtitle {
        font-family: $font-family-sans;
        font-size: $font-size-h2;
        color: $color-primary-dark;
        margin: 0;
        max-width: 40ch;
        font-weight: 300;
        line-height: 160%;
        letter-spacing: 0%;
    }

    &__trail-container {
        position: absolute;
        inset: 0;
        z-index: 1;
        pointer-events: none;

        .trail-image {
            border-radius: $radius-sm;
            box-shadow: $shadow;
        }
    }

    &__mountain {
        position: absolute;
        left: 50%;
        bottom: -1px;
        transform: translateX(-50%);
        width: 160%;
        max-width: none;
        height: auto;
        z-index: 0;
        pointer-events: none;

        @media (min-width: $breakpoint-lg) {
            width: 110%;
        }
    }
}

@keyframes home-scroll-bounce {
    0%, 20%, 50%, 80%, 100% { transform: translateY(0); }
    40% { transform: translateY(-6px); }
    60% { transform: translateY(-3px); }
}

// --------------------------------------------------------------------------
// Block: .altitude-sidebar (fixed, scroll-linked readout)
// --------------------------------------------------------------------------
.altitude-sidebar {
    position: fixed;
    top: calc(#{$header-height} + #{$spacing-lg});
    right: $spacing-lg;
    z-index: 19;
    display: none;
    flex-direction: column;
    align-items: center;
    gap: $spacing-sm;
    color: $color-dark;
    font-family: $font-family-sans;

    @media (min-width: $breakpoint-lg) {
        display: flex;
    }

    @include above-wrapper-breakpoint {
        top: calc(#{$header-height-lg} + #{$spacing-lg});
    }

    &__value {
        font-size: $font-size-sm;
        font-weight: 700;
        text-align: center;
        line-height: 1.2;
        white-space: nowrap;
    }

    &__unit {
        display: block;
        font-weight: 400;
        opacity: 0.7;
    }

    &__track {
        position: relative;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    // Liquid marker sliding/morphing between the current level's star and
    // the next one — positioned and animated via GSAP (top/scale), see
    // assets/animations/gsap/AltitudeSidebar.ts. xPercent/yPercent centering
    // is applied by GSAP itself so it can own the full transform.
    &__blob {
        position: absolute;
        left: 50%;
        top: 0;
        width: 22px;
        height: 36px;
        border-radius: 999px;
        background: $color-light;
        opacity: 0;
        pointer-events: none;
        z-index: 0;
    }

    &__line {
        position: relative;
        z-index: 1;
        width: 1px;
        height: 32px;
        background: $color-secondary-dark;
    }

    &__level {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 22px;
        height: 36px;
    }

    &__star {
        width: 12px;
        height: 12px;
        fill: $color-dark;
    }
}

// --------------------------------------------------------------------------
// Block: .home-mountain — shared "Haute altitude" / "Station" / "Village" band
// --------------------------------------------------------------------------
.home-mountain {
    position: relative;
    background-color: $color-primary-dark;
    padding: $spacing-xl 0;
    padding-top: 1px;

    // Reserves room for the NEXT section's scene image to float into (see
    // .home-mountain__scene-wrap below) — each value matches that next
    // scene's own rendered height.
    &--haute-altitude {
        padding-bottom: calc(#{$spacing-xl} + #{$scene-height-station});
    }

    &--station {
        background-color: $color-primary;
        padding-bottom: calc(#{$spacing-xl} + #{$scene-height-village});
    }

    &--village {
        background-color: $color-primary-light;
        // Last band before the cream .home-quote transition — nothing bridges
        // into it, so no need to reserve extra bottom space.
        padding-bottom: $spacing-xl;

        // Same mask technique as the site footer: the cream .home-quote color
        // grows up out of this section's bottom edge, full viewport width.
        &::after {
            @include mountain-mask-top-edge('../../images/home/mountain-mask.svg', $color-primary-light, 52px);
            bottom: auto;
            top: calc(100% - 1px); // 1px overlap to avoid a hairline gap
            z-index: 1;
        }
    }

    // Full-bleed crop window bridging the seam with the PREVIOUS section:
    // that section reserves matching bottom padding (above), and this wrap
    // sits at the top of the current one with a negative margin-top equal
    // to its own fixed height, so it floats over the boundary between the
    // two backgrounds edge-to-edge. The scene image inside is sized by
    // height only (see &__scene) so its width never stretches/squashes to
    // fit the viewport — this wrap just centers it and clips whatever
    // over/underflows on either side.
    &__scene-wrap {
        display: flex;
        justify-content: center;
        width: 100vw;
        margin: 0 calc(50% - 50vw) $spacing-lg;
        overflow: hidden;
        position: relative;
        z-index: 1;
    }

    &--haute-altitude &__scene-wrap {
        height: $scene-height-haute-altitude;
        margin-top: calc(#{$scene-height-haute-altitude} * -1);
    }

    &--station &__scene-wrap {
        height: $scene-height-station;
        margin-top: calc(#{$scene-height-station} * -1);
    }

    &--village &__scene-wrap {
        height: $scene-height-village;
        margin-top: calc(#{$scene-height-village} * -1);
    }

    // Sized by height only — width is derived from the SVG's own intrinsic
    // aspect ratio, not from the viewport, per &__scene-wrap above.
    &__scene {
        display: block;
        width: auto;
        height: 100%;
        max-width: none;
        flex-shrink: 0;

        // Été/hiver variants are both rendered; only the one matching the
        // current site theme (see ThemeToggle.ts, sets [data-theme] on
        // <html>) is shown. Kept as two <img> elements rather than a single
        // background-image so the SVGs stay decorative-but-real <img> tags.
        &--hiver {
            display: none;
        }

        [data-theme='dark'] &--ete {
            display: none;
        }

        [data-theme='dark'] &--hiver {
            display: block;
        }
    }

    // Pin target for the horizontal card slide — title + cards-viewport are
    // pinned together (position: fixed applied here by GSAP) so the title
    // stays put in the viewport for the whole horizontal scrub instead of
    // scrolling off as soon as the page keeps advancing past its own
    // position. It's also the horizontal-scroll's ScrollTrigger `trigger`
    // element (see HorizontalPinScroll.ts), which computes its own header
    // clearance off --header-height-css — CSS scroll-margin-top has no
    // effect on ScrollTrigger's start math.
    &__pin {
        position: relative;
        z-index: 1;
    }

    &__title {
        font-family: $font-family-serif;
        font-weight: 400;
        font-size: $font-size-h1;
        line-height: 1;
        max-width: $breakpoint-wrapper;
        text-align: left;
        color: color-mix(in srgb, $color-primary-lighter 20%, transparent);
        margin: 0 auto;
        user-select: none;
        padding: 0 $spacing-lg;
        
        @include above-wrapper-breakpoint {
            margin: $spacing-lg auto;
            padding: 0;
        }
    }

    &__cards-viewport {
        position: relative;
        z-index: 1;
        display: flex;
        align-items: center;
        height: $cards-viewport-height;
        overflow: hidden;
    }

    &__cards {
        position: relative;
        z-index: 1;
        display: flex;
        flex-wrap: nowrap;
        align-items: center;
        height: 100%;
        gap: calc(#{$spacing-xl} * 2);
        width: max-content;
        will-change: transform; // Firefox needs this compositing hint more than Chrome for smooth pinned transforms
        // Leading/trailing gutter so the first/last card starts partway off
        // the edge of the screen — signals there's more to scroll to.
        padding: 0 clamp(#{$spacing-lg}, 10vw, 120px);
    }
}

// .project-card block moved to assets/styles/components/_project-card.scss
// (now global via app.scss so it can be reused outside the homepage, e.g.
// templates/projects/list.html.twig).

// --------------------------------------------------------------------------
// Block: .home-quote (closing section)
// --------------------------------------------------------------------------
.home-quote {
    position: relative;
    background: $color-neutral;
    padding: $spacing-xl $spacing-lg;
    margin: 0 auto;
    margin-top: 52px; // matches the height of the mountain-mask.svg applied to .home-mountain--village::after
    padding-bottom: calc(#{$footer-mask-height} + #{$spacing-xl});

    .container {
        display: grid;
        grid-template-columns: 1fr;
        align-items: center;
        gap: $spacing-lg;
        background-image: url('../../images/icologo-full.svg');
        background-repeat: no-repeat;
        background-position: center;
        background-size: contain;
        padding-top: $footer-mask-height;
        margin-top: $spacing-xl;

        @media (min-width: $breakpoint-md) {
            grid-template-columns: 1fr 2fr 1fr;
            gap: $spacing-xl;
        }
    }

    &__scroll-btn {
        position: relative;
        z-index: 2;
        grid-column: 1 / -1;
        display: inline-flex;
        align-items: center;
        gap: $spacing-xs;
        justify-self: center;
        margin: 0 0 $spacing-md 0;
        padding: 0;
        background: none;
        border: none;
        color: $color-primary-dark;
        font-family: $font-family-sans;
        font-size: $font-size-sm;
        font-weight: 600;
        cursor: pointer;

        span {
            text-decoration: underline;
        }
    }

    &__scroll-icon {
        animation: home-scroll-bounce 2s infinite;
    }

    &__image {
        position: relative;
        z-index: 1;
        aspect-ratio: 3 / 4;
        overflow: hidden;
        background-color: color-mix(in srgb, $color-dark 5%, transparent);

        &--1 {
            @media (min-width: $breakpoint-md) {
                align-self: end;
            }
        }

        &--2 {
            @media (min-width: $breakpoint-md) {
                align-self: start;
            }
        }
    }

    &__img {
        position: absolute;
        top: -15%;
        left: 0;
        width: 100%;
        height: 130%;
        object-fit: cover;
        display: block;
        will-change: transform;
    }

    &__content {
        position: relative;
        z-index: 1;
        text-align: center;
    }

    &__text {
        font-family: $font-family-serif;
        font-weight: 400;
        font-size: clamp(#{$font-size-h4}, 3vw, #{$font-size-h2});
        line-height: 1.4;
        color: $color-primary-dark;
        margin: 0 0 $spacing-md 0;
    }

    &__cta {
        display: inline-flex;
    }
}

// --------------------------------------------------------------------------
// Edit mode — dashed outline affordance (same convention as .expertise-page--edit-mode)
// --------------------------------------------------------------------------
[data-editable="true"] {
    position: relative;

    .home-intro &,
    .home-mountain &,
    .home-quote & {
        outline: 1px dashed color-mix(in srgb, $color-primary 30%, transparent);
        outline-offset: 4px;
        cursor: pointer;
        transition: outline-color 0.2s ease;

        &:hover {
            outline-color: $color-primary;
        }
    }
}