/* ===================================================
   ITOUKEI Scrollsequence — Frontend CSS v2.5
   =================================================== */

/* --- MODE NORMAL (défaut) --- */

.itoukei-scrollsequence-wrapper {
    position: relative;
    width: 100%;
}

.itoukei-scrollsequence-sticky {
    position: sticky;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    /* Fond transparent par défaut — la couleur de fond est définie via
       inline style et reste visible le temps que frame 0 se charge,
       puis le JS la supprime progressivement via transition. */
}

/* Canvas : invisible jusqu'à ce que la frame 0 soit peinte
   Le JS ajoute .itks-ready dès le premier drawFrame() réussi. */
.itoukei-scrollsequence-canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.itoukei-scrollsequence-canvas.itks-ready {
    opacity: 1;
}

/* --- MODE FULLBG : canvas plein écran en fond ---
 *
 * Le canvas s'échappe du container WordPress (margin-left trick)
 * pour couvrir tout l'écran (100vw × 100vh).
 *
 * ⚠ Prérequis : aucun ancêtre ne doit avoir overflow:hidden.
 * Ajoute dans ton CSS personnalisé si nécessaire :
 *   .entry-content, .site-main { overflow: visible !important; }
 */

.itoukei-scrollsequence-wrapper.itks-mode-fullbg {
    position: relative;
}

.itoukei-scrollsequence-wrapper.itks-mode-fullbg .itoukei-scrollsequence-sticky {
    position: sticky;
    top: 0;
    width: 100vw;
    height: 100vh;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    z-index: var(--itks-z, 0);
    pointer-events: none;
    /* Fond transparent après chargement (JS gère la transition) */
    background-color: transparent;
}

.itoukei-scrollsequence-wrapper.itks-mode-fullbg .itoukei-scrollsequence-canvas {
    display: block;
    width: 100%;
    height: 100%;
}

/* --- MODE FULLBG + CONTENU OVERLAY (shortcode fermant) ---
 *
 * [itoukei_scrollsequence id="X" mode="fullbg"]
 *   <section>...</section>
 * [/itoukei_scrollsequence]
 *
 * Le canvas sticky avec margin-bottom: -100vh ne pousse pas le contenu.
 * Le contenu HTML occupe sa hauteur naturelle par-dessus le canvas.
 */

.itoukei-scrollsequence-wrapper.itks-mode-fullbg.itks-has-content {
    height: auto !important;
}

.itoukei-scrollsequence-wrapper.itks-mode-fullbg.itks-has-content .itoukei-scrollsequence-sticky {
    margin-bottom: -100vh;
}

/* Slot de contenu overlay */
.itoukei-scrollsequence-content {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* --- UTILITAIRE : itks-over
 * Force un élément au-dessus du canvas.
 * Gutenberg : ajouter la classe CSS personnalisée "itks-over"
 */
.itks-over {
    position: relative;
    z-index: 2;
}