/* ============================================================
   Voice of Wishes — index.css
   Styles spécifiques à index.html
   ============================================================ */

/* ────────────────────────────────────────────────
   INTRO CINÉMA — overlay premier chargement
──────────────────────────────────────────────── */

#vow-intro {
    position: fixed;
    inset: 0;
    z-index: 9999;
    background: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    /* PAS de overflow:hidden — les rideaux doivent pouvoir
       démarrer hors de la vue et glisser dans le cadre */
}

/* ── Rideaux (top + bottom) ──
   Démarrent HORS ÉCRAN et glissent vers le centre pour
   « fermer » en fin de vidéo, couvrant l'image avant
   que l'overlay disparaisse.
──────────────────────────────────────────────── */
.vow-curtain {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    background: #000;
    z-index: 20;                /* au-dessus de la vidéo (10) et du logo (15) */
    transition: transform 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}

/* Position de départ : rideaux hors cadre */
.vow-curtain-top    { top: 0;    transform: translateY(-100%); }
.vow-curtain-bottom { bottom: 0; transform: translateY(100%);  }

/* Position d'arrivée : rideaux se ferment vers le centre */
#vow-intro.is-revealing .vow-curtain-top    { transform: translateY(0); }
#vow-intro.is-revealing .vow-curtain-bottom { transform: translateY(0); }

/* ── Logo intro ── */
#vow-intro-logo {
    position: absolute;
    inset: 0;
    z-index: 15;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 20px;
    opacity: 0;
    transform: scale(0.88);
    transition: opacity 0.7s ease, transform 0.7s ease;
}
#vow-intro-logo.is-visible {
    opacity: 1;
    transform: scale(1);
}
#vow-intro-logo.is-out {
    opacity: 0;
    transform: scale(1.06);
    pointer-events: none;
}
#vow-intro-logo img {
    height: 56px;
    width: auto;
}

/* Fine ligne or sous le logo */
.vow-logo-line {
    width: 0;
    height: 1px;
    background: linear-gradient(to right, transparent, #C2934A, transparent);
    transition: width 0.8s ease 0.3s;
}
#vow-intro-logo.is-visible .vow-logo-line { width: 120px; }

/* ── Ornements coins ── */
.vow-corner {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 16;
    opacity: 0;
    transition: opacity 0.6s ease 0.5s;
    pointer-events: none;
}
.vow-corner::before,
.vow-corner::after {
    content: '';
    position: absolute;
    background: #C2934A;
}
.vow-corner::before { width: 100%; height: 1px; top: 0; left: 0; }
.vow-corner::after  { width: 1px; height: 100%; top: 0; left: 0; }

.vow-corner-tl { top: 28px;    left: 28px;  }
.vow-corner-tr { top: 28px;    right: 28px; transform: scaleX(-1); }
.vow-corner-bl { bottom: 28px; left: 28px;  transform: scaleY(-1); }
.vow-corner-br { bottom: 28px; right: 28px; transform: scale(-1,-1); }

.vow-corner.is-visible { opacity: 1; }

/* ── Vidéo container ── */
#vow-video-container {
    position: absolute;
    inset: 0;
    z-index: 10;
    opacity: 0;
    transform: scale(0.94);
    transition: opacity 0.7s ease, transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
#vow-video-container.is-visible {
    opacity: 1;
    transform: scale(1);
}

#vow-intro-video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Gradient bas pour lisibilité des boutons */
#vow-video-container::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 180px;
    background: linear-gradient(to top, rgba(0,0,0,0.6), transparent);
    pointer-events: none;
    z-index: 5;
}

/* ── Bouton Unmute ── */
#vow-unmute-btn {
    position: absolute;
    bottom: 32px;
    right: 24px;
    z-index: 30;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(255,255,255,0.14);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.22);
    color: #fff;
    font-size: 0.95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.2s, transform 0.2s;
    outline: none;
}
#vow-unmute-btn:hover {
    background: rgba(255,255,255,0.26);
    transform: scale(1.1);
}

/* ── Bouton Skip ── */
#vow-skip-btn {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%) translateY(8px);
    z-index: 30;
    padding: 9px 22px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.18);
    color: rgba(255,255,255,0.75);
    font-family: 'Open Sans', sans-serif;
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 7px;
    opacity: 0;
    outline: none;
    animation: vowSkipIn 0.5s ease 3.2s forwards;
}
#vow-skip-btn:hover {
    background: rgba(255,255,255,0.2);
    color: #fff;
}

@keyframes vowSkipIn {
    from { opacity: 0; transform: translateX(-50%) translateY(8px); }
    to   { opacity: 1; transform: translateX(-50%) translateY(0);   }
}