/* =========================================================
   WEB DESIGN MASTER
   WATCH EXPERIENCE
   ========================================================= */


/* =========================================================
   SECTION PRINCIPALE
   ========================================================= */

.wdm-watch-section {
    position: relative;

    width: 100%;

    height: 280vh;

    background: #F5F5F7;

    overflow: visible;
}


/* =========================================================
   ZONE STICKY
   ========================================================= */

.wdm-watch-sticky {
    position: sticky;

    top: 0;

    width: 100%;
    height: 100vh;

    overflow: hidden;

    background:#f5f5f7;
}


/* =========================================================
   SCENE THREE.JS
   ========================================================= */

#wdm-watch-scene {
    position: absolute;

    inset: 0;

    width: 100%;
    height: 100%;

    cursor: grab;

    touch-action: none;

    z-index: 5;
}


#wdm-watch-scene:active {
    cursor: grabbing;
}


#wdm-watch-scene canvas {
    display: block;

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

    outline: none;
}


/* =========================================================
   LOADER
   ========================================================= */

.wdm-watch-loader {
    position: absolute;

    top: 50%;
    left: 50%;

    transform: translate(
        -50%,
        -50%
    );

    z-index: 30;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 13px;

    font-weight: 500;

    letter-spacing: 0.12em;

    text-transform: uppercase;

    color: #111;

    pointer-events: none;

    transition:
        opacity 0.6s ease,
        visibility 0.6s ease;
}


.wdm-watch-loader.is-hidden {
    opacity: 0;

    visibility: hidden;
}


/* =========================================================
   CITATION
   ========================================================= */

.wdm-watch-quote-wrap {
    position: absolute;

    /*
     * Position de la citation :
     * en haut à gauche de la montre.
     */

    top: 15%;

    left: 7%;

    /*
     * Largeur limitée pour créer
     * un retour sur deux lignes.
     */

    width: min(
        520px,
        36vw
    );

    z-index: 20;

    pointer-events: none;
}


/* =========================================================
   TEXTE DE LA CITATION
   ========================================================= */

.wdm-watch-quote {
    position: relative;

    display: inline;

    margin: 0;

    padding: 0;

    font-family:
        "Times New Roman",
        Times,
        serif;

    /*
     * Taille importante,
     * mais pas gigantesque.
     */

    font-size: clamp(
        38px,
        3.1vw,
        62px
    );

    font-weight: 700;

    font-style: italic;

    line-height: 1.08;

    letter-spacing: -0.025em;

    color: #171717;

    white-space: normal;

    overflow-wrap: normal;

    word-break: normal;
}


/* =========================================================
   CURSEUR MACHINE À ÉCRIRE
   ========================================================= */

.wdm-watch-quote::after {
    content: "";

    display: inline-block;

    width: 2px;

    height: 0.82em;

    margin-left: 4px;

    vertical-align: -0.06em;

    background: #171717;

    opacity: 0;
}


/*
 * Curseur visible pendant l'écriture.
 */

.wdm-watch-quote.is-typing::after {
    opacity: 1;

    animation:
        wdm-watch-typewriter-cursor
        0.72s
        steps(1)
        infinite;
}


/*
 * Une fois la phrase terminée,
 * le curseur disparaît.
 */

.wdm-watch-quote.is-finished::after {
    opacity: 0;

    animation: none;
}


/* =========================================================
   ANIMATION DU CURSEUR
   ========================================================= */

@keyframes wdm-watch-typewriter-cursor {

    0%,
    45% {
        opacity: 1;
    }

    46%,
    100% {
        opacity: 0;
    }

}


/* =========================================================
   SIGNATURE BAS DE PAGE
   ========================================================= */

.wdm-watch-signature {
    position: absolute;

    left: 50%;
    bottom: 28px;

    transform: translateX(-50%);

    z-index: 20;

    font-family:
        Arial,
        Helvetica,
        sans-serif;

    font-size: 11px;

    font-weight: 500;

    letter-spacing: 0.17em;

    text-transform: uppercase;

    color:
        rgba(
            20,
            20,
            20,
            0.55
        );

    pointer-events: none;

    white-space: nowrap;
}


/* =========================================================
   ANCIEN HINT
   ========================================================= */

.wdm-watch-hint {
    display: none !important;
}


/* =========================================================
   TABLETTE
   ========================================================= */

@media (max-width: 1024px) {

    .wdm-watch-section {
        height: 260vh;
    }


    .wdm-watch-quote-wrap {
        top: 11%;

        left: 5%;

        width: 42vw;
    }


    .wdm-watch-quote {
        font-size: clamp(
            32px,
            4.2vw,
            48px
        );

        line-height: 1.06;
    }

}


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

@media (max-width: 767px) {

    .wdm-watch-section {
        height: 240vh;
    }


    .wdm-watch-quote-wrap {
        top: 6%;

        left: 7%;

        width: 86%;
    }


    .wdm-watch-quote {
        font-size: clamp(
            30px,
            8vw,
            42px
        );

        line-height: 1.04;
    }


    .wdm-watch-signature {
        bottom: 18px;

        width: 92%;

        text-align: center;

        white-space: normal;

        font-size: 9px;

        letter-spacing: 0.11em;
    }

}