@use 'variables' as *;

// Accessibility mixin for respecting reduced motion preference
@mixin respect-reduced-motion {
    @media (prefers-reduced-motion: reduce) {
        animation: none !important;
        transition: none !important;
    }
}

// Usage example:
// .parallax-element {
//     transition: transform 0.3s ease;
//     @include respect-reduced-motion;
// }

// Media query for viewport wider than wrapper + gutters on both sides
@mixin above-wrapper-breakpoint {
    @media (min-width: calc(#{$breakpoint-wrapper} + (#{$spacing-lg} * 2))) {
        @content;
    }
}

// Fixed, mountain-silhouette-masked background layer used behind a page's hero/intro
// zone (color interpolated by a scroll-driven GSAP tween on the element, e.g.
// `[data-actualite-bg]` / `[data-expertise-bg]` — see assets/actualite.ts / assets/expertise.ts).
// Shared by `.actualite-page__bg` and `.expertise-page__bg` (see _actualite.scss / _expertise.scss)
// to avoid duplicating the two-layer mask-composite value block verbatim.
@mixin fixed-mountain-bg($mask-url, $bg-color: $color-primary-lighter, $top: 35vh) {
    position: fixed;
    top: $top;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 0;
    pointer-events: none;
    background-color: $bg-color;
    // Color driven frame-by-frame by GSAP scrub — the global theme-change
    // fade in base/_reset.scss would fight it and lag the scrub.
    transition: none;
    mask-image: url($mask-url), 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($mask-url), 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;
}

// Mountain-silhouette top edge "growing out of" a solid-color section (e.g. the dark
// Patrimoine band on the Expertise page, or the Actualité related-posts footer).
// Meant to be applied on a `::before` pseudo-element positioned just above the section
// (`bottom: 100%`). Shared by `.actualite-related` and `.expertise-patrimoine` (see
// _actualite.scss / _expertise.scss) to avoid duplicating the mask value block verbatim.
@mixin mountain-mask-top-edge($mask-url, $bg-color: $color-primary, $height: $footer-mask-height) {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    height: $height;
    background-color: $bg-color;
    mask-image: url($mask-url);
    mask-size: auto 100%;
    mask-position: center top;
    mask-repeat: repeat-x;
    -webkit-mask-image: url($mask-url);
    -webkit-mask-size: auto 100%;
    -webkit-mask-position: center top;
    -webkit-mask-repeat: repeat-x;
    transform: translateY(1px);
    bottom: 100%;
    left: 0;
}

// Usage example:
// &::before {
//     width: calc(100% - (#{$spacing-lg} * 2));
//     @include above-wrapper-breakpoint {
//         width: $breakpoint-wrapper;
//     }
// }