/* ==========================================================
   LR SCROLL MASK REVEAL SYSTEM
   Version: 2.2.0
   Namespace: lr-smr-*-v1

   ARCHITECTURE

   .lr-smr-stage-v1
       └── .lr-smr-scene-v1
           ├── .lr-smr-visual-v1
           ├── .lr-smr-intro-v1
           └── .lr-smr-final-v1
   ========================================================== */


/* ==========================================================
   RESPONSIVE CONFIGURATION
   ========================================================== */

.lr-smr-stage-v1 {

    /* Desktop */
    --lr-smr-mask-height-ratio: 0.70;
    --lr-smr-mask-max-width-ratio: 0.80;
}

/* ==========================================================
   TABLET
   ========================================================== */

@media (max-width: 1024px) {

    .lr-smr-stage-v1 {

        --lr-smr-mask-height-ratio: 0.55;
        --lr-smr-mask-max-width-ratio: 0.50;
    }
}


/* ==========================================================
   MOBILE
   ========================================================== */

@media (max-width: 767px) {

    .lr-smr-stage-v1 {

        --lr-smr-mask-height-ratio: 0.5;
        --lr-smr-mask-max-width-ratio: 0.7;
    }
}



/* ==========================================================
   STAGE
   ========================================================== */

.lr-smr-stage-v1 {

    position: relative !important;

    width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    gap: 0 !important;

    flex-direction: column !important;

    overflow: visible !important;
}


/* ==========================================================
   SCENE
   ========================================================== */

.lr-smr-scene-v1 {

    position: sticky !important;

    top: 0 !important;

    width: 100% !important;

    height: 100svh !important;
    min-height: 100svh !important;

    flex: 0 0 100svh !important;

    margin: 0 !important;
    padding: 0 !important;

    isolation: isolate;

    overflow: hidden !important;

    box-sizing: border-box;
}


/* ==========================================================
   VISUAL
   ========================================================== */

.lr-smr-visual-v1 {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    min-height: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    z-index: 1;

    /*
     * Background configurato in Elementor:
     *
     * background-size: cover;
     * background-position: center center;
     * background-repeat: no-repeat;
     */

    will-change: clip-path;

    transition: none !important;
}


/* ==========================================================
   INTRO CONTENT
   ========================================================== */

.lr-smr-intro-v1 {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    z-index: 2;

    opacity: 1;

    will-change: opacity;

    transition: none !important;

    pointer-events: none;

    box-sizing: border-box;
}


/* ==========================================================
   FINAL CONTENT
   ========================================================== */

.lr-smr-final-v1 {

    position: absolute !important;

    inset: 0 !important;

    width: 100% !important;
    height: 100% !important;

    margin: 0 !important;

    z-index: 3;

    display: flex !important;

    flex-direction: column !important;

    align-items: center !important;
    justify-content: center !important;

    opacity: 0;

    visibility: hidden;

    pointer-events: none;

    will-change: opacity;

    transition: none !important;

    box-sizing: border-box;
}


/* ==========================================================
   DYNAMIC VIEWPORT
   ========================================================== */

/*
 * Su device normali utilizziamo dvh quando disponibile.
 *
 * Verrà sovrascritto più sotto SOLO sui telefoni
 * in landscape.
 */

@supports (height: 100dvh) {

    .lr-smr-scene-v1 {

        height: 100dvh !important;
        min-height: 100dvh !important;

        flex-basis: 100dvh !important;
    }
}


/* ==========================================================
   MOBILE LANDSCAPE SAFETY
   ========================================================== */

/*
 * Non utilizziamo solamente max-width: 767px perché,
 * in landscape, molti iPhone hanno una larghezza CSS
 * superiore a 767px.
 *
 * La combinazione:
 *
 * - orientation: landscape
 * - pointer: coarse
 * - hover: none
 * - max-height: 500px
 *
 * identifica molto meglio uno smartphone in orizzontale.
 */

@media
    (orientation: landscape)
    and (hover: none)
    and (pointer: coarse)
    and (max-height: 500px) {

    /* ------------------------------------------------------
       VIEWPORT SICURA

       In landscape preferiamo svh a dvh.

       svh = smallest viewport height.

       Evita che il contenuto venga progettato sulla
       viewport "grande" e poi coperto dalla UI di Safari.
       ------------------------------------------------------ */

    .lr-smr-scene-v1 {

        height: 100svh !important;
        min-height: 100svh !important;

        flex-basis: 100svh !important;
    }


    /* ------------------------------------------------------
       FINAL CONTENT

       Padding normale
       +
       safe-area iOS.

       env(safe-area-inset-*) restituisce 0 sui dispositivi
       che non necessitano di area protetta.
       ------------------------------------------------------ */

    .lr-smr-final-v1 {

        padding-top:
            calc(
                16px +
                env(safe-area-inset-top, 0px)
            ) !important;

        padding-right:
            calc(
                28px +
                env(safe-area-inset-right, 0px)
            ) !important;

        padding-bottom:
            calc(
                16px +
                env(safe-area-inset-bottom, 0px)
            ) !important;

        padding-left:
            calc(
                28px +
                env(safe-area-inset-left, 0px)
            ) !important;
    }


    /* ------------------------------------------------------
       INTRO

       Proteggiamo anche eventuali titoli iniziali
       dal notch laterale.
       ------------------------------------------------------ */

    .lr-smr-intro-v1 {

        padding-right:
            calc(
                20px +
                env(safe-area-inset-right, 0px)
            ) !important;

        padding-left:
            calc(
                20px +
                env(safe-area-inset-left, 0px)
            ) !important;
    }
}


/* ==========================================================
   MOBILE LANDSCAPE MOLTO BASSO
   ========================================================== */

/*
 * iPhone / smartphone con pochissima altezza disponibile.
 *
 * Riduciamo ulteriormente il padding verticale per non
 * sottrarre inutilmente spazio al contenuto.
 */

@media
    (orientation: landscape)
    and (hover: none)
    and (pointer: coarse)
    and (max-height: 390px) {

    .lr-smr-final-v1 {

        padding-top:
            calc(
                10px +
                env(safe-area-inset-top, 0px)
            ) !important;

        padding-bottom:
            calc(
                10px +
                env(safe-area-inset-bottom, 0px)
            ) !important;
    }
}


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

@media (prefers-reduced-motion: reduce) {

    .lr-smr-visual-v1,
    .lr-smr-intro-v1,
    .lr-smr-final-v1 {

        transition: none !important;
    }
}

/* ==========================================================
   REDUCED MOTION - stato statico finale
   Il controller aggiunge .lr-smr-reduced-motion e non avvia
   il runtime scroll-driven.
   ========================================================== */

.lr-smr-stage-v1.lr-smr-reduced-motion {
    height: auto !important;
    min-height: 100svh !important;
}

.lr-smr-stage-v1.lr-smr-reduced-motion .lr-smr-scene-v1 {
    position: relative !important;
    top: auto !important;
    min-height: 100svh !important;
}

.lr-smr-stage-v1.lr-smr-reduced-motion .lr-smr-visual-v1 {
    clip-path: none !important;
    -webkit-clip-path: none !important;
    will-change: auto !important;
}

.lr-smr-stage-v1.lr-smr-reduced-motion .lr-smr-intro-v1 {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
    will-change: auto !important;
}

.lr-smr-stage-v1.lr-smr-reduced-motion .lr-smr-final-v1 {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    will-change: auto !important;
}