/* ==========================================================================
   EAL — WORLD
   Style Y2K / Aero / Cyber
   Aligné sur le style graphique du reste du site
   ========================================================================== */


/* ==========================================================================
   TYPOGRAPHIE
   ========================================================================== */

@font-face {
    font-family: 'Switzer';
    src: url('src/typeface/Switzer-Regular.woff');
}

@font-face {
    font-family: 'Switzer_Bold';
    src: url('src/typeface/Switzer-Bold.woff');
}


/* ==========================================================================
   VARIABLES
   ========================================================================== */

:root {
    --u: 160px;

    /* Couleurs */
    --white: #ffffff;
    --black: #000000;
    --grey: darkgrey;
    --grey-soft: rgba(211, 211, 211, .65);
    --blue: #0066ff;
    --pink: rgba(255, 181, 179);

    /* Verre / transparence */
    --glass: rgba(255, 255, 255, .35);
    --glass-strong: rgba(255, 255, 255, .7);

    /* Mouvement */
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --hover-scale: 1.06;
    --hover-time: .7s;

    --font: 'Switzer', sans-serif;
    --font-bold: 'Switzer_Bold', sans-serif;
}


/* ==========================================================================
   RESET
   ========================================================================== */

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

html,
body {
    height: 100%;
    margin: 0;
    overflow: hidden;
    overscroll-behavior: none;
    background: #ffffff;
}

body {
    font-family: var(--font);
    background: #ffffff;
}

ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

a {
    color: inherit;
    text-decoration: none;
}

img {
    display: block;
    -webkit-user-drag: none;
    user-select: none;
}


/* ==========================================================================
   HEADER
   ========================================================================== */

.header--world {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1000;
    width: 100%;
    padding: 1rem 4rem;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;

    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    mask-image: none;
    -webkit-mask-image: none;
}

/* Couche de fond floutée avec fondu vers le bas */
.header--world::before {
    content: "";
    position: absolute;
    inset: 0;
    height: 8rem;

    background: rgba(255, 255, 255, 0.1);
    -webkit-backdrop-filter: blur(15px);
    backdrop-filter: blur(15px);

    -webkit-mask-image: linear-gradient(
        to bottom,
        black 0%,
        rgba(0, 0, 0, 0.8) 65%,
        transparent 100%
    );
    mask-image: linear-gradient(
        to bottom,
        black 0%,
        rgba(0, 0, 0, 0.8) 65%,
        transparent 100%
    );

    pointer-events: none;
    z-index: 0;
}

/* Picto net, au-dessus du fond */
.header--world .header-nav {
    position: absolute;
    top: 1rem;
    right: 4rem;
    z-index: 1;
    display: flex;
    align-items: center;
}

.header--world .header-icon img {
    display: block;
    width: 5rem;
    height: 5rem;
    object-fit: contain;
    transition: transform 250ms ease, filter 250ms ease;
}

.header--world .header-icon:hover img {
    filter: drop-shadow(0 0 0.4em #0066ff);
    transform: scale(1.08);
}


/* ==========================================================================
   GLOBE / BOUTON LANGUE
   (non utilisé dans le header actuel : peut être supprimé)
   ========================================================================== */

.globe {
    display: grid;
    place-items: center;

    width: 42px;
    height: 42px;

    border-radius: 50%;

    background: rgba(255, 255, 255, .4);
    border: 2px solid var(--grey);

    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);

    box-shadow: none;

    transition:
        background .5s var(--ease-out),
        transform .8s var(--ease-out),
        border-color .5s var(--ease-out),
        box-shadow .6s var(--ease-out);
}

.globe img {
    width: 19px;
    height: 19px;

    transition:
        transform 1.2s var(--ease-out),
        filter .5s var(--ease-out);
}

.globe:hover,
.globe:focus-visible {
    background: rgba(255, 255, 255, .65);

    transform: scale(1.08);

    border-color: var(--blue);

    box-shadow:
        0 0 1em rgba(0, 102, 255, .65),
        0 0 2.5em rgba(0, 102, 255, .2);
}

.globe:hover img,
.globe:focus-visible img {
    transform: rotate(120deg);
    filter: drop-shadow(0 0 .4em var(--blue));
}

.globe:focus-visible,
.header__brand:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 4px;
}


/* ==========================================================================
   SCÈNE
   ========================================================================== */

.stage {
    position: fixed;
    inset: 0;

    isolation: isolate;
    overflow: hidden;

    touch-action: none;

    -webkit-user-select: none;
    user-select: none;

    background: white;
}


/* ==========================================================================
   LOGO CENTRAL
   ========================================================================== */

.logo {
    position: absolute;

    left: 50%;
    top: 50%;

    z-index: 3;

    width: min(calc(var(--u) * 10), 60vw);
    height: auto;

    translate: -50% -50%;

    pointer-events: none;

    filter:
        drop-shadow(0 6px 18px rgba(255, 255, 255, .8));

    animation:
        logo-in 1.4s var(--ease-out) .1s backwards;
}


/* ==========================================================================
   PROJETS
   ========================================================================== */

.node {
    position: absolute;

    left: 50%;
    top: 50%;

    width: 0;
    height: 0;

    will-change: transform;
}

.node:hover,
.node:focus-within {
    z-index: 6 !important;
}


.node__in {
    position: absolute;

    left: 0;
    top: 0;

    width: calc(var(--u) * var(--size));

    translate: -50% -50%;

    scale: var(--depth-scale, 1);

    opacity: var(--o, 1);

    filter: blur(var(--blur, 0px));

    transition:
        filter .8s var(--ease-out),
        opacity .8s var(--ease-out);

    animation:
        emerge 1.5s var(--ease-out)
        calc(.35s + var(--i) * .09s)
        backwards;
}


/* ==========================================================================
   CARTES
   ========================================================================== */

.card {
    position: relative;
    display: block;

    border-radius: 0;

    box-shadow: none;

    transition:
        transform var(--hover-time) var(--ease-out),
        filter var(--hover-time) var(--ease-out),
        box-shadow var(--hover-time) var(--ease-out);
}


.card img {
    width: 100%;

    aspect-ratio: var(--ratio, 4 / 5);

    object-fit: cover;

    filter:
        saturate(.9)
        contrast(.97);

    transition:
        filter var(--hover-time) var(--ease-out);
}


/* ==========================================================================
   REFLET / EFFET Y2K
   ========================================================================== */

.card::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            115deg,
            rgba(255, 255, 255, 0) 30%,
            rgba(255, 255, 255, .4) 48%,
            rgba(255, 255, 255, 0) 66%
        );

    background-size: 260% 100%;
    background-position: 120% 0;

    opacity: 0;

    transition:
        background-position 1.1s var(--ease-out),
        opacity .6s var(--ease-out);
}


/* ==========================================================================
   HOVER
   ========================================================================== */

.node:hover .node__in,
.node:focus-within .node__in {
    --blur: 0px;
    --o: 1;
}


.card:hover,
.card:focus-visible {

    transform: scale(var(--hover-scale));

    box-shadow:
        0 0 0.8em rgba(0, 102, 255, .7),
        0 0 2.5em rgba(0, 102, 255, .35),
        0 0 5em rgba(0, 102, 255, .15);
}


.card:hover img,
.card:focus-visible img {
    filter:
        saturate(1.06)
        contrast(1.04)
        brightness(1.06);
}


.card:hover::after,
.card:focus-visible::after {
    opacity: 1;
    background-position: -20% 0;
}


.card:focus-visible {
    outline: 2px solid var(--blue);
    outline-offset: 5px;
}


/* ==========================================================================
   AUTRES IMAGES PENDANT LE HOVER
   ========================================================================== */

.stage:has(.node:hover)
.node:not(:hover)
.node__in {
    opacity: calc(var(--o, 1) * .45);
}


/* ==========================================================================
   NOM DU PROJET
   ========================================================================== */

.label {
    position: absolute;

    left: 50%;
    top: calc(100% + 14px);

    translate: -50% 6px;

    rotate: calc(var(--rot, 0) * -1deg);

    padding: .6rem 1rem;

    font-family: var(--font-bold);

    font-size: 1rem;

    letter-spacing: .01em;

    white-space: nowrap;

    color: var(--grey);

    opacity: 0;

    pointer-events: none;

    transition:
        opacity .5s var(--ease-out),
        translate .7s var(--ease-out),
        color .4s var(--ease-out),
        border-color .4s var(--ease-out),
        text-shadow .5s var(--ease-out);
}

.node:hover .label,
.node:focus-within .label {
    opacity: 1;
    translate: -50% 0;

    color: var(--grey);

    border-color: var(--grey);
}


/* ==========================================================================
   INDICATION
   ========================================================================== */

.hint {
    position: absolute;

    left: 50%;
    bottom: max(28px, env(safe-area-inset-bottom));

    z-index: 10;

    margin: 0;

    translate: -50% 0;

    font-family: var(--font);

    font-size: 12px;

    letter-spacing: .02em;

    color: var(--grey);

    pointer-events: none;

    transition:
        opacity 1s var(--ease-out);

    animation:
        fade-in 1.4s var(--ease-out) 1.6s backwards;
}

.hint__touch {
    display: none;
}

body.has-interacted .hint {
    opacity: 0;
}


/* ==========================================================================
   TACTILE
   ========================================================================== */

@media (hover: none), (pointer: coarse) {

    .hint__mouse {
        display: none;
    }

    .hint__touch {
        display: inline;
    }

    /* Sur tactile : les noms restent visibles. */
    .label {
        opacity: .9;

        translate: -50% 0;

        font-size: 11.5px;

        padding: .5rem .8rem;
    }

    .node[data-depth="background"] .label {
        display: none;
    }
}


/* ==========================================================================
   MOBILE : WORLD
   (placé APRÈS le bloc tactile pour que ses valeurs l'emportent)
   ========================================================================== */

@media (max-width: 760px) {

    /* --- Header : picto plus grand et bien placé --- */
    .header--world {
        padding: 0.75rem 1rem;
    }

    .header--world::before {
        height: 6.5rem;
    }

    .header--world .header-nav {
        top: calc(0.5rem + env(safe-area-inset-top, 0px));
        right: max(1rem, env(safe-area-inset-right));
    }

    .header--world .header-icon img {
        width: 4rem;
        height: 4rem;
    }

    /* --- Noms des projets : plus grands, retours à la ligne entre les mots --- */
    .label {
        font-size: 1rem;
        line-height: 1.2;
        padding: 0.55rem 0.9rem;

        white-space: normal;       /* retours à la ligne autorisés */
        hyphens: none;             /* pas de trait d'union */
        overflow-wrap: normal;     /* on ne coupe jamais un mot */
        word-break: normal;
        text-wrap: balance;        /* lignes équilibrées */

        width: max-content;
        max-width: 12ch;           /* baisse à 10ch pour couper encore plus tôt */
        text-align: center;
    }

    /* --- Indication en bas --- */
    .hint {
        font-size: 0.95rem;
        bottom: max(1.5rem, env(safe-area-inset-bottom));
    }

    /* --- Logo central plus présent --- */
    .logo {
        width: min(calc(var(--u) * 10), 75vw);
    }

    /* --- Cartes --- */
    /* --- Cartes : sans arrondi ni contour --- */
    .card {
        padding: 0;
        border-radius: 0;
    }

    .card img {
        border-radius: 0;
    }
}

/* Très petits écrans */
@media (max-width: 400px) {

    .header--world .header-icon img {
        width: 3.5rem;
        height: 3.5rem;
    }

    .label {
        font-size: 0.95rem;
        max-width: 11ch;
    }
}


/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes emerge {

    from {
        opacity: 0;
        scale: .72;
    }
}


@keyframes logo-in {

    from {
        opacity: 0;

        filter:
            blur(14px)
            drop-shadow(0 6px 18px rgba(255, 255, 255, .8));
    }
}


@keyframes fade-in {

    from {
        opacity: 0;
    }
}


/* ==========================================================================
   ACCESSIBILITÉ
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    .node__in,
    .logo,
    .core,
    .hint {
        animation: none;
    }

    .card,
    .card img,
    .card::after,
    .label,
    .globe,
    .globe img {
        transition-duration: .01ms;
    }
}