/* Intro de démarrage (3 s, une fois par jour) — mécanique reprise de l'écran de boot
   d'eDEX-UI (GitSquared, GPLv3) : fond quadrillé de points, titre qui se remplit puis
   s'encadre, glitch « derezzer » par moitiés décalées, fondu final.
   Couleurs du logo Jurassic Isle RP : vert-jaune #a8c012, vert profond, crème #f0f0d0.
   Opaque dès la première image : l'appli n'est jamais visible dessous. */

@font-face {
    font-family: 'United Sans';
    src: url('/intro/united_sans_medium.woff2?v=4') format('woff2');
    font-weight: normal; font-style: normal; font-display: block;
}

#intro {
    --c-rgb: 168, 192, 18;
    --c: rgb(var(--c-rgb));
    --c-fill: #040e05;   /* cases du quadrillage → fond quasi noir vert */
    --c-base: #6f8010;   /* couleur de base → points vert-jaune */
    position: fixed; inset: 0; z-index: 99999;
    overflow: hidden; cursor: pointer;
    user-select: none; -webkit-user-select: none;
    background:
        linear-gradient(90deg, var(--c-fill) 1.85vh, transparent 1%) center,
        linear-gradient(var(--c-fill) 1.85vh, transparent 1%) center,
        var(--c-base);
    background-size: 2.04vh 2.04vh;
    opacity: 1;
    transition: opacity 600ms ease-in;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    font-family: 'United Sans', 'Chakra Petch', system-ui, sans-serif;
}
#intro * { box-sizing: border-box; }
#intro.fadeout { opacity: 0; pointer-events: none; }
#intro.is-leaving { opacity: 0; transition-duration: 220ms; pointer-events: none; }

/* Logo rond au-dessus du titre */
#intro .i-logo {
    width: min(30vh, 52vw); aspect-ratio: 1; margin-bottom: 4vh;
    border-radius: 50%;
    background: url('/intro/logo.png?v=4') center / 104% no-repeat;
    box-shadow: 0 0 0 2px rgba(var(--c-rgb), .7), 0 0 4vh rgba(var(--c-rgb), .3);
    opacity: 0;
}
#intro.on .i-logo { opacity: 1; animation: i-fade 300ms linear; }

/* Titre : copie de section#boot_screen h1 */
#intro h1 {
    position: relative; margin: 0;
    font-weight: normal; text-align: center; white-space: nowrap;
    font-size: min(8.5vh, 7.4vw);
    letter-spacing: .06em;
    border: 0.46vh solid transparent; border-bottom-color: var(--c);   /* bordure toujours présente : la hauteur ne change jamais */
    padding: 2vh 2vh 1vh 2.4vh;
    background-color: transparent;
    color: var(--c);
    opacity: 0;
}
#intro.on h1 { opacity: 1; animation: i-fade 300ms linear; }
#intro.s2 h1 { background-color: var(--c); }                       /* se remplit */
#intro.s3 h1 { background-color: transparent; border-color: var(--c); } /* puis s'encadre */
#intro.s4 h1 { border-color: transparent; color: transparent; }                  /* glitch */
#intro.s5 h1 { border-color: var(--c); }                     /* retour au cadre */

#intro h1::before, #intro h1::after {
    /* hors flux (absolute) : les copies déchirées ne doivent jamais agrandir le titre, sinon le logo bouge */
    content: attr(data-text); display: block;
    position: absolute; top: 2vh; left: 2.4vh; right: 1vh;
    white-space: nowrap; opacity: 0;
    animation: 50ms linear infinite alternate-reverse paused;
}
#intro h1::before {
    transform: translateX(-2%);
    clip-path: polygon(100% 0%, 100% 40%, 0% 40%, 0% 0%);
    color: rgba(var(--c-rgb), .8);
    animation-name: i-derez-top;
}
#intro h1::after {
    transform: translateX(2%);
    clip-path: polygon(100% 40%, 100% 100%, 0% 100%, 0% 40%);
    color: rgba(var(--c-rgb), .9);
    animation-name: i-derez-bottom;
}
#intro.s4 h1::before, #intro.s4 h1::after { opacity: 1; animation-play-state: running; }
@keyframes i-derez-top    { from { transform: translateX(-1%); }  to { transform: translateX(-5%); } }
@keyframes i-derez-bottom { from { transform: translateX(1%); }  to { transform: translateX(3%); } }

#intro .i-sub {
    margin-top: 3vh; padding-left: .5em;
    font-size: min(2.4vh, 4vw); letter-spacing: .5em; text-transform: uppercase;
    color: #f0f0d0; opacity: 0;
}
#intro.s5 .i-sub { opacity: 1; animation: i-fade 200ms linear; }
#intro .i-hint {
    position: absolute; left: 0; right: 0; bottom: 2vh; text-align: center;
    font-size: min(1.6vh, 3vw); letter-spacing: .25em; text-transform: uppercase;
    color: rgba(240, 240, 208, .55);
}
@keyframes i-fade { from { opacity: 0; } to { opacity: 1; } }

/* Écran d'attente (son bloqué par le navigateur) : quadrillage seul + invite qui clignote */
#intro .i-wait {
    display: none; position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%);
    text-align: center; color: var(--c); font-size: min(3.2vh, 5vw); letter-spacing: .3em;
    text-transform: uppercase; padding-left: .3em;
}
#intro.waiting .i-wait { display: block; animation: i-blink 1.1s steps(2, jump-none) infinite; }
#intro.waiting .i-logo, #intro.waiting h1, #intro.waiting .i-sub { display: none; }
@keyframes i-blink { 0% { opacity: 1; } 100% { opacity: .25; } }