/* ==========================================================
   AJOUTS DESIGN (index-design.html uniquement)
   1. Écran d'entrée : trois phrases qui montent, puis le rideau
   2. Accueil : bandeau de ce que je fais, derrière la photo
   ========================================================== */

/* ---------- 1. Écran d'entrée ---------- */
html.dz-pending body { visibility: hidden; }   /* évite de voir la page une fraction de seconde avant l'écran */
html.dz-lock, html.dz-lock body { overflow: hidden; }

.dz {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px max(24px, 6vw);
    background: #1c1a19;
    color: #efece7;
    clip-path: inset(0 0 0 0);
    transition: clip-path 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}

.dz.is-out { clip-path: inset(0 0 100% 0); }

.dz-kicker {
    margin: 0 0 2rem;
    font: 600 0.75rem 'JetBrains Mono', monospace;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: #a9a29d;
    opacity: 0;
    transition: opacity 0.6s ease;
}

.dz.is-in .dz-kicker { opacity: 1; }

.dz-lines { margin: 0; padding: 0; list-style: none; }

.dz-line {
    display: block;
    overflow: hidden;
    font: 400 clamp(2.6rem, 8vw, 7.5rem)/1.02 'Anton', 'Impact', 'Arial Narrow', sans-serif;
    text-transform: uppercase;
}

.dz-line > span {
    display: block;
    transform: translateY(105%);
    transition: transform 0.9s cubic-bezier(0.22, 1, 0.36, 1), color 0.5s ease;
}

.dz-line.is-up > span { transform: none; }
.dz-line.is-past > span { color: #5f5853; }     /* la phrase précédente s'efface un peu */
.dz-line:nth-child(1) em { color: #e34f26; }
.dz-line:nth-child(2) em { color: #1f88d1; }
.dz-line:nth-child(3) em { color: #2f9e6a; }
.dz-line em { font-style: normal; }

.dz-bar { height: 3px; margin-top: 2.6rem; width: min(420px, 60vw); background: rgba(239, 236, 231, 0.12); }
.dz-bar i {
    display: block;
    height: 100%;
    background: linear-gradient(90deg, #e34f26, #e0a526, #2f9e6a, #1f88d1, #7a5cc4, #c2306f);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 3.6s linear;
}

.dz.is-in .dz-bar i { transform: scaleX(1); }

.dz-skip {
    position: absolute;
    right: max(16px, env(safe-area-inset-right, 0px));
    bottom: max(16px, env(safe-area-inset-bottom, 0px));
    padding: 8px 12px;
    border: 1px solid rgba(239, 236, 231, 0.25);
    background: transparent;
    color: #a9a29d;
    font: 0.7rem 'JetBrains Mono', monospace;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    cursor: pointer;
}

.dz-skip:hover, .dz-skip:focus-visible { color: #fff; border-color: #fff; outline: none; }

/* ---------- 2. Bandeau derrière la photo ---------- */
.hx-marquee.dz-band { top: 50%; }

.dz-band .hx-marquee-track {
    font-size: clamp(3rem, 8vw, 7.5rem);
    line-height: 1;
    animation-duration: 36s;
}

/* pas d'ondulation des lettres sur ce bandeau */
.dz-band .dd-ch { animation: none !important; transform: none !important; }

@media (max-width: 768px) {
    .hx-marquee.dz-band { top: 40%; }
    .dz-band .hx-marquee-track { font-size: 15vw; }
}

@media (prefers-reduced-motion: reduce) {
    .dz { display: none; }
}