/**
 * effectvideoscroll.css
 * Styles pour la section scrub vidéo pilotée par le scroll.
 *
 * Utilisation sur n'importe quelle page :
 *   <link href="/1assets/effectvideoscroll.css" rel="stylesheet">
 *
 *   <section class="scroll-video-section" id="scroll-video-section">
 *     <div class="scroll-video-sticky">
 *       <div class="scroll-video-wrapper">
 *         <video id="scroll-video" src="ma-video.mp4" muted playsinline preload="auto"></video>
 *       </div>
 *       <div class="text-section"><!-- overlay texte optionnel --></div>
 *     </div>
 *   </section>
 */

/* ── Neutralise le padding-top de html et body sur les pages avec scroll-video.
   Les autres pages (sans ce CSS) gardent leur espacement intact.
   :has() supporté : Chrome 105+, Firefox 121+, Safari 15.4+              ── */
html:has(#scroll-video-section),
body:has(#scroll-video-section) {
    padding-top: 0 !important;
}

/* ── Conteneur principal ── */
.scroll-video-section {
    height: 200vh;
    position: relative;
    z-index: 5;
    margin-top: 0;
}

/* ── Partie sticky (reste collée en haut pendant le scroll) ── */
.scroll-video-sticky {
    position: sticky;
    top: 0;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    box-shadow: 0 0 30px rgb(171, 160, 255);
}

[data-theme="dark"] .scroll-video-sticky {
    box-shadow: 0 0 30px #70649c;
}

/* ── Wrapper vidéo avec vignette sur les bords ── */
.scroll-video-wrapper {
    position: absolute;
    inset: 0;
    -webkit-mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 55%, transparent 100%);
    mask-image: radial-gradient(ellipse 100% 100% at 50% 50%, black 55%, transparent 100%);
}

/* ── Vidéo plein écran ── */
#scroll-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ── Voile coloré avec dégradé par-dessus la vidéo ── */
.scroll-video-sticky::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    /* Dark theme (défaut) : violet profond bas → haut */
    background:
        linear-gradient(
            to top,
            rgba(16, 0, 63, 0.75) 0%,
            rgba(16, 0, 63, 0.2) 40%,
            transparent 70%
        ),
        rgba(24, 10, 80, 0.15);
}

/* Light theme : blanc froid bas → haut, teinte neutre subtile */
[data-theme="light"] .scroll-video-sticky::after {
    background:
        linear-gradient(
            to top,
            rgba(114, 97, 247, 0.276) 0%,
            rgba(220, 215, 255, 0.2) 40%,
            transparent 70%
        ),
        rgba(200, 195, 240, 0.10);
}

/* ── Overlay texte centré sur la vidéo ── */
.scroll-video-sticky .text-section {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    pointer-events: none;
    width: 100%;
    max-width: 100%;
    margin: 0;
}

.scroll-video-sticky .text-section h1 {
    color: var(--text-color);
    border-radius: 40px;
    padding: 0.9rem 1.5rem;
    margin: 0;
    width: auto;
    text-shadow: 0 0px 11px #7268af;
    max-width: calc(100vw - 3rem);
    text-align: center;
    white-space: nowrap;
    line-height: 1.05;
    letter-spacing: -0.03em;
    font-size: clamp(1.8rem, 3.2vw, 3.2rem);
}
.scroll-video-sticky .text-section h1 .gradient-text-2 {
    color: #5038ca;
    filter: none;
    text-shadow: 0 0px 12px #ffffff;
}

@media (max-width: 1280px) {
    .scroll-video-sticky .text-section h1 {
        max-width: min(92vw, 960px);
        white-space: normal;
        letter-spacing: -0.02em;
        font-size: clamp(1.8rem, 4.8vw, 3rem);
    }
}