/* intro.css — calque d'intro des vitrines narratives (dala, hubtown).
   Chargee apres base.css et avant la feuille de la variante : une variante
   redefinit ses couleurs par ses propres variables, sans ligne ici. */

/* Garde-fou pur CSS : quand l'ecran cede la main a l'intro, la sortie ne peut
   plus dependre de l'attente de 1,5 s. Douze secondes et l'ecran part meme si
   clouds.js n'a jamais ete execute. :not(.is-done) laisse la regle de
   base.css gagner des que l'ecran est ferme. */
.sc-boot[data-sc-boot]:not(.is-done) {
    animation-delay: 12s;
}

/* Le canvas est positionne, donc peint au-dessus des elements statiques du
   gabarit : la marque, la barre et le compteur passent en relatif pour rester
   lisibles au premier plan. */
.sc-intro {
    position: absolute;
    inset: 0;
}

.sc-boot > :not(.sc-intro) {
    position: relative;
    z-index: 2;
}

.sc-intro__canvas {
    position: absolute;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
}

.sc-intro__label {
    position: absolute;
    left: 50%;
    bottom: 13%;
    transform: translateX(-50%);
    z-index: 3;
    margin: 0;
    font-family: inherit;
    font-size: clamp(11px, 1.4vw, 14px);
    letter-spacing: .24em;
    text-transform: uppercase;
    color: var(--sc-intro-ink, #fff);
    opacity: .8;
}

.sc-intro__dots {
    position: absolute;
    left: 50%;
    bottom: 10%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 8px;
    color: var(--sc-intro-ink, #fff);
}

.sc-intro__dots > i {
    width: 22px;
    height: 1px;
    background: currentColor;
    opacity: .26;
    transition: opacity .3s var(--sc-ease, ease);
}

.sc-intro__dots > i.is-on {
    opacity: 1;
}

.sc-intro__skip {
    position: absolute;
    right: clamp(16px, 4vw, 44px);
    top: clamp(16px, 5vh, 48px);
    z-index: 3;
    /* .sc-boot est en pointer-events: none : sans cette ligne le passeur
       serait affiche mais insolite au clic. */
    pointer-events: auto;
    display: inline-flex;
    align-items: center;
    gap: .6em;
    padding: .5em .9em;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: none;
    color: var(--sc-intro-ink, #fff);
    font: inherit;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: .72;
    transition: opacity .25s var(--sc-ease, ease);
}

.sc-intro__skip:hover,
.sc-intro__skip:focus-visible {
    opacity: 1;
}

/* Relais : le canvas de l'intro est deplace ici a la fin de l'intro. Le canvas
   etant positionne, il peindrait sur le texte du hero ; l'hote reste donc a
   z-index 0 et pousse ses freres en relatif au premier plan. */
[data-sc-intro-relay] {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

[data-sc-intro-relay] ~ * {
    position: relative;
    z-index: 1;
}

[data-sc-intro-relay] > canvas {
    display: block;
    width: 100%;
    height: 100%;
    opacity: var(--sc-intro-relay, .55);
}

/* Le moteur de nuages rend sur un fond opaque (alpha: false, valide tache 3) :
   la fusion « screen » rend le noir transparent sans toucher au moteur. Les
   modules three.js rendent avec un fond clair et n'ont pas besoin de filet. */
[data-sc-intro-relay="screen"] > canvas {
    mix-blend-mode: screen;
}

.sc-intro-replay {
    display: inline-flex;
    align-items: center;
    gap: .55em;
    padding: .45em .9em;
    border: 1px solid currentColor;
    border-radius: 999px;
    background: none;
    color: inherit;
    font: inherit;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    cursor: pointer;
    opacity: .62;
    transition: opacity .25s var(--sc-ease, ease);
}

.sc-intro-replay:hover,
.sc-intro-replay:focus-visible {
    opacity: 1;
}

/* Mode reduit : l'intro est jouee en une frame fixe, le HUD de progression
   n'a plus de sens ; le passeur et le rejeu restent accessibles. */
@media (prefers-reduced-motion: reduce) {
    .sc-intro__dots,
    .sc-intro__label {
        display: none;
    }

    [data-sc-intro-relay] > canvas {
        opacity: calc(var(--sc-intro-relay, .55) * .7);
    }
}