/* ==========================================================================
   Nayelios — page d'introduction
   La scène (.cadre) est un carré dont la taille --s suit l'écran ; l'œuvre y est
   dessinée en WebGL par intro.js. Sans WebGL : deux <img> et un masque CSS.
   ========================================================================== */

@font-face {
    font-family: 'Cinzel';
    src: url('fonts/cinzel-latin.woff2') format('woff2');
    font-weight: 400 700;
    font-display: swap;
}
@font-face {
    font-family: 'Jost';
    src: url('fonts/jost-latin.woff2') format('woff2');
    font-weight: 300 500;
    font-display: swap;
}

:root {
    --nuit: #070605;
    --or: #d9b15c;
    --or-clair: #f3dc9f;
    --or-pale: #fbefd0;
    --texte: #e9dfc8;
    --texte-doux: rgba(233, 223, 200, .56);

    /* Côté du carré : limité par la hauteur utile ; sur mobile en portrait, il
       déborde légèrement la largeur (marges vides des images) pour agrandir l'œuvre. */
    --s: min(calc(100vh - 64px), 128vw, 1000px);
}
@supports (height: 100svh) {
    :root { --s: min(calc(100svh - 64px), 128vw, 1000px); }
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
    margin: 0;
    min-height: 100%;
    overflow-x: hidden;
}
@supports (overflow: clip) {
    html, body { overflow-x: clip; }
}

body {
    min-height: 100vh;
    min-height: 100svh;
    /* lueur chaude ; en WebGL, c'est la toile qui la dessine (même formule, voir LUEUR dans intro.js) */
    background:
        radial-gradient(60% 48% at 50% 40%, rgba(128, 94, 38, .16), transparent 72%),
        var(--nuit);
    color: var(--texte);
    font-family: 'Jost', 'Segoe UI', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    -webkit-tap-highlight-color: transparent;
}

html.gl body { background: var(--nuit); }

.masque-visuel {
    position: absolute !important;
    width: 1px; height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
}

/* --- Toile WebGL : tout l'écran, derrière le contenu ------------------------ */
.toile {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    z-index: 0;
}
.secours .toile, html:not(.js) .toile { display: none; }

/* --- Mise en page ---------------------------------------------------------- */
.intro {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    min-height: 100svh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px 0 48px;
}

.cadre {
    position: relative;
    flex: none;
    width: var(--s);
    height: var(--s);
}

.scene {
    position: absolute;
    inset: 0;
    cursor: pointer;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    outline: none;
    border-radius: 3%;
}
.scene:focus-visible {
    box-shadow: inset 0 0 0 1px rgba(243, 220, 159, .5);
}

.scene__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
    -webkit-user-drag: none;
}
.scene__img--b { opacity: 0; }

/* Sans WebGL (ou sans JavaScript) : bords fondus par masque CSS */
html:not(.gl) .scene {
    -webkit-mask-image:
        linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
        linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
        linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
    mask-composite: intersect;
}

/* Avec JavaScript, les images servent de textures : elles restent invisibles.
   Filet de sécurité : si rien n'a démarré au bout de 6 s, la fractale s'affiche. */
.js .scene__img { opacity: 0; }
.js:not(.charge) .scene__img--a { animation: filet-securite .6s 6s forwards; }
@keyframes filet-securite { to { opacity: 1; } }

/* Mode de secours : halo circulaire en CSS qui suit le pointeur */
.secours .scene__img { opacity: 1; transition: opacity .5s; }
.secours .scene__img--dessus {
    z-index: 1;
    -webkit-mask-image: radial-gradient(circle at var(--mx, 50.3%) var(--my, 38.7%),
        #000 calc(var(--s) * .12), transparent calc(var(--s) * .135));
    mask-image: radial-gradient(circle at var(--mx, 50.3%) var(--my, 38.7%),
        #000 calc(var(--s) * .12), transparent calc(var(--s) * .135));
}

/* Attente du chargement des œuvres */
.scene__attente {
    position: absolute;
    left: 50.3%;
    top: 38.7%;
    width: 34px;
    height: 34px;
    margin: -17px 0 0 -17px;
    border-radius: 50%;
    border: 1px solid rgba(243, 220, 159, .18);
    border-top-color: var(--or-clair);
    opacity: 0;
    transition: opacity .4s;
    animation: attente 1.1s linear infinite;
    pointer-events: none;
}
.js:not(.charge) .scene__attente { opacity: 1; transition-delay: .3s; }
@keyframes attente { to { transform: rotate(1turn); } }

/* --- Bouton d'entrée et indication ---------------------------------------- */
.actions {
    position: absolute;
    left: 50%;
    top: 83%;
    transform: translateX(-50%);
    width: max-content;
    max-width: calc(100vw - 32px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(10px, calc(var(--s) * .016), 16px);
    text-align: center;
}

.entree {
    position: relative;
    isolation: isolate;
    display: inline-flex;
    align-items: center;
    gap: .9em;
    padding: 1.05em 1.8em 1.05em 2.1em;
    border-radius: 999px;
    overflow: hidden;
    font: 600 clamp(.72rem, calc(var(--s) * .0175), 1rem) / 1.2 'Cinzel', 'Trajan Pro', Georgia, serif;
    letter-spacing: .26em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    color: var(--or-pale);
    background: rgba(12, 10, 7, .58);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    box-shadow:
        0 12px 40px -12px rgba(0, 0, 0, .9),
        0 0 34px -8px rgba(217, 177, 92, .38);
    transition: color .35s ease, box-shadow .35s ease, transform .2s ease;
}
/* liseré dégradé or */
.entree__bord {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    padding: 1px;
    background: linear-gradient(120deg, #7d5a1f, #f3dc9f 28%, #b98a35 52%, #fff0c4 74%, #7d5a1f);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
}
/* remplissage or au survol */
.entree::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    background: linear-gradient(135deg, #ffe7a8 0%, #e3b555 38%, #b8862b 70%, #ffefc2 100%);
    opacity: 0;
    transition: opacity .35s ease;
}
/* reflet qui balaie le bouton de temps en temps */
.entree::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(105deg, transparent 38%, rgba(255, 246, 220, .38) 50%, transparent 62%);
    transform: translateX(-120%);
    animation: reflet 6s ease-in-out 3.5s infinite;
    pointer-events: none;
}
@keyframes reflet {
    0%, 72% { transform: translateX(-120%); }
    100% { transform: translateX(120%); }
}
.entree__texte, .entree__fleche { position: relative; }
.entree__fleche {
    width: 1.5em;
    height: .75em;
    flex: none;
    transition: transform .35s ease;
}

@media (hover: hover) {
    .entree:hover {
        color: #1b1307;
        box-shadow:
            0 12px 40px -12px rgba(0, 0, 0, .9),
            0 0 48px -4px rgba(240, 200, 110, .6);
    }
    .entree:hover::before { opacity: 1; }
    .entree:hover .entree__fleche { transform: translateX(.35em); }
}
.entree:focus-visible {
    outline: 1px solid var(--or-clair);
    outline-offset: 5px;
}
.entree:active { transform: scale(.98); }

.indice {
    margin: 0;
    font-weight: 300;
    font-size: clamp(.62rem, calc(var(--s) * .0125), .78rem);
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--texte-doux);
}
.indice:empty { display: none; }
.indice span { white-space: nowrap; }
@media (max-width: 520px) {
    .indice span { display: block; }
    .indice .indice__sep { display: none; }
}

.pied {
    position: fixed;
    left: 0;
    right: 0;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 1;
    margin: 0;
    text-align: center;
    font-weight: 300;
    font-size: .64rem;
    letter-spacing: .24em;
    text-transform: uppercase;
    color: rgba(233, 223, 200, .34);
    pointer-events: none;
}

/* --- Chorégraphie : apparition puis sortie -------------------------------- */
.js .actions > *, .js .pied {
    opacity: 0;
    translate: 0 10px;
    transition: opacity 1s ease, translate 1s cubic-bezier(.2, .7, .2, 1);
}
.js .actions > .indice { transition-delay: .35s; }
.js .pied { transition-delay: .7s; }
.js.pret .actions > *, .js.pret .pied { opacity: 1; translate: none; }
.js.sortie .actions > *, .js.sortie .pied {
    opacity: 0;
    translate: 0 6px;
    transition-duration: .45s;
    transition-delay: 0s;
}

/* --- Écrans bas en paysage (téléphones couchés) : actions à droite --------- */
@media (orientation: landscape) and (max-height: 540px) {
    :root { --s: min(calc(100vh - 24px), 58vw); }
    @supports (height: 100svh) {
        :root { --s: min(calc(100svh - 24px), 58vw); }
    }
    .intro { padding: 12px 0; }
    .cadre { margin-right: min(36vw, 270px); }
    .actions {
        left: calc(100% - 2%);
        top: 50%;
        transform: translateY(-50%);
        width: min(36vw, 270px);
        align-items: flex-start;
        text-align: left;
    }
    .entree { font-size: .7rem; }
    .indice span { display: block; }
    .indice .indice__sep { display: none; }
    .pied { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .entree::after, .scene__attente { animation: none; }
    .js .actions > *, .js .pied { translate: none; }
}