/* ============================================================
   SANO BLD — Galerie Monolithique
   Beige Lin #F5F2ED · Bleu Nuit #0A1628
   Fond : transition 1.5s · Texte : instantané
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300&family=Jost:wght@200;300;400&display=swap');

/* ──────────────────────────────────────────────────────────
   TOKENS
────────────────────────────────────────────────────────── */
:root {
    --linen: #F5F2ED;
    --night: #0A1628;

    --bg:         var(--linen);
    --text:       var(--night);
    --text-dim:   rgba(10, 22, 40, 0.44);
    --text-faint: rgba(10, 22, 40, 0.18);
    --rule:       rgba(10, 22, 40, 0.08);

    --ease: cubic-bezier(0.23, 1, 0.32, 1);
    --font-display: 'Cormorant Garamond', Georgia, serif;
    --font-body:    'Jost', sans-serif;
}

body.dark {
    --bg:         var(--night);
    --text:       var(--linen);
    --text-dim:   rgba(245, 242, 237, 0.40);
    --text-faint: rgba(245, 242, 237, 0.16);
    --rule:       rgba(245, 242, 237, 0.08);
}

/* ──────────────────────────────────────────────────────────
   RESET
────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-weight: 200;

    /* Fond graduel — texte instantané : seul background transite */
    transition: background 1.5s var(--ease);

    overflow: hidden;
    height: 100dvh;
    width: 100vw;
    cursor: none;
}

@media (hover: none) {
    body { cursor: auto; }
}

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

::selection {
    background: var(--night);
    color: var(--linen);
}
body.dark ::selection {
    background: var(--linen);
    color: var(--night);
}

/* ──────────────────────────────────────────────────────────
   CURSEUR GHOST
   Cercle minimaliste · mix-blend-mode:difference
   Expand au survol du titre actif → révèle le texte
────────────────────────────────────────────────────────── */
#cursor-ghost {
    position: fixed;
    top: 0; left: 0;
    pointer-events: none;
    z-index: 9999;
    mix-blend-mode: difference;
    will-change: transform;

    width: 10px;
    height: 10px;
    border: 1px solid white;
    border-radius: 50%;

    display: flex;
    align-items: center;
    justify-content: center;

    transition: width 0.55s var(--ease), height 0.55s var(--ease);
    /* transform géré par JS — pas de transition */
}

#cursor-ghost.expand {
    width: 136px;
    height: 136px;
}

.cursor-text {
    font-family: var(--font-body);
    font-size: 0.40rem;
    font-weight: 300;
    letter-spacing: 0.34em;
    color: white;
    white-space: nowrap;
    text-transform: uppercase;
    opacity: 0;
    transition: opacity 0.22s ease 0.18s;
    user-select: none;
}

#cursor-ghost.expand .cursor-text { opacity: 1; }

@media (hover: none) {
    #cursor-ghost { display: none; }
}

/* ──────────────────────────────────────────────────────────
   HUD — 4 coins
   opacity 0.2 au repos · 1 au survol
   Révélation post-preloader via classe .ready
────────────────────────────────────────────────────────── */
.hud {
    position: fixed;
    z-index: 500;
    pointer-events: auto;
    opacity: 0;
    transition: opacity 0.45s ease;
}

.hud.ready        { opacity: 0.20; }
.hud.ready:hover  { opacity: 1; }

/* Sur touch : opacité fixe légèrement plus visible */
@media (hover: none) {
    .hud.ready { opacity: 0.50; }
}

.hud-tl { top: 30px; left:  30px; }
.hud-tr { top: 30px; right: 30px; display: flex; align-items: center; gap: 12px; }
.hud-bl { bottom: 30px; left:  30px; }
.hud-br { bottom: 30px; right: 30px; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }

.hud-logo {
    font-family: var(--font-display);
    font-size: 0.9rem;
    font-weight: 300;
    letter-spacing: 0.26em;
    text-transform: uppercase;
    color: var(--text);
    cursor: none;
}

.hud-btn {
    background: none;
    border: none;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.52rem;
    font-weight: 300;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    cursor: none;
    padding: 0;
    min-width: 28px;
    min-height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hud-index {
    font-family: var(--font-body);
    font-size: 0.48rem;
    font-weight: 300;
    letter-spacing: 0.28em;
    color: var(--text);
    text-transform: uppercase;
    white-space: nowrap;
}

.hud-cat {
    color: var(--text-dim);
    letter-spacing: 0.22em;
}

.hud-meta {
    font-family: var(--font-body);
    font-size: 0.44rem;
    font-weight: 300;
    letter-spacing: 0.22em;
    color: var(--text);
    text-transform: uppercase;
    font-variant-numeric: tabular-nums;
}

/* ──────────────────────────────────────────────────────────
   PRELOADER — Split-Text pixel-perfect (inchangé)
────────────────────────────────────────────────────────── */
#preloader {
    position: fixed;
    inset: 0;
    z-index: 99999;
    pointer-events: none;
}

.pre-curtain {
    position: absolute;
    left: 0; right: 0;
    height: 50%;
    transition: transform 0.92s var(--ease);
    will-change: transform;
}
.pre-curtain-top { top: 0;    background: #F5F2ED; }
.pre-curtain-bot { bottom: 0; background: #0A1628; }

#pre-text-wrap {
    position: absolute;
    inset: 0;
    display: grid;
    place-items: center;
    pointer-events: none;
}

.pre-text {
    grid-area: 1 / 1;
    font-family: var(--font-display);
    font-size: clamp(2.6rem, 7.5vw, 8rem);
    font-weight: 300;
    letter-spacing: 0.36em;
    white-space: nowrap;
    line-height: 1;
    user-select: none;
    will-change: transform;
    transition: transform 0.92s var(--ease);
}

.pre-text-top {
    color: #0A1628;
    clip-path: inset(0 -0.3em 50% -0.3em);
}

.pre-text-bot {
    color: #F5F2ED;
    clip-path: inset(50% -0.3em 0 -0.3em);
}

.pre-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(4px);
    animation: charIn 0.46s var(--ease) forwards;
}

@keyframes charIn {
    to { opacity: 1; transform: translateY(0); }
}

#preloader.open .pre-curtain-top { transform: translateY(-100%); }
#preloader.open .pre-curtain-bot { transform: translateY(100%); }
#preloader.open .pre-text-top    { transform: translateY(-110vh); }
#preloader.open .pre-text-bot    { transform: translateY(110vh); }
#preloader.gone { display: none; }

/* ──────────────────────────────────────────────────────────
   SCENE — Galerie verrouillée
   scroll-snap mandatory · pas de scrollbar visible
────────────────────────────────────────────────────────── */
#scene {
    position: fixed;
    inset: 0;
    overflow-y: scroll;
    scroll-snap-type: y mandatory;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#scene::-webkit-scrollbar { display: none; }

/* ──────────────────────────────────────────────────────────
   SLIDE — Unité élémentaire de la galerie
   Chaque slide = 1 projet · occupe 100dvh
────────────────────────────────────────────────────────── */
.slide {
    height: 100dvh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    scroll-snap-align: center;
    position: relative;
    cursor: none;
}

/*
   .slide-content reçoit les transforms de scroll (translateY + scale),
   l'opacité et le flou. Ces valeurs sont intégralement gérées par JS.
   Aucune transition CSS ici pour éviter les conflits.
*/
.slide-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    will-change: transform, filter, opacity;
    /* pas de transition — JS pilote en rAF */
}

/*
   .slide-tilt fournit la perspective pour le tilt 3D du titre.
   Le rotateX/Y est appliqué au .slide-title enfant par JS.
*/
.slide-tilt {
    perspective: 1000px;
    perspective-origin: 50% 50%;
}

.slide-link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    cursor: none;
    -webkit-tap-highlight-color: transparent;
}

/*
   .slide-title : titre massif
   Seule la couleur peut transitionner (changement de thème).
   Le transform (tilt) et le filter (blur scroll) sont gérés par JS.
   NB : transform-style preserve-3d nécessaire pour rotateX/Y enfant.
*/
.slide-title {
    font-family: var(--font-display);
    font-size: clamp(3rem, 15vw, 18rem);
    font-weight: 300;
    letter-spacing: 0.06em;
    text-transform: lowercase;
    color: var(--text);
    line-height: 0.88;
    will-change: transform;
    user-select: none;
    display: block;
    text-align: center;
    /* NB: pas de transition transform/filter — JS en a la responsabilité */
}

.slide-tag {
    font-family: var(--font-body);
    font-size: 0.50rem;
    font-weight: 300;
    letter-spacing: 0.5em;
    text-transform: uppercase;
    color: var(--text-dim);
    will-change: opacity;
    /* opacité pilotée par JS */
}

/* Trait séparateur en bas de chaque slide — très discret */
.slide-rule {
    position: absolute;
    bottom: 0;
    left: 10vw; right: 10vw;
    height: 1px;
    background: var(--rule);
    pointer-events: none;
}

/* ──────────────────────────────────────────────────────────
   RESPONSIVE
────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    .hud-tl { top: 22px; left:  22px; }
    .hud-tr { top: 22px; right: 22px; gap: 10px; }
    .hud-bl { bottom: 22px; left:  22px; }
    .hud-br { bottom: 22px; right: 22px; gap: 4px; }

    .hud-logo  { font-size: 0.78rem; }
    .hud-index { font-size: 0.42rem; }
    .hud-meta  { font-size: 0.40rem; }
    .hud-btn   { font-size: 0.48rem; }

    .slide-title { font-size: clamp(2.4rem, 13vw, 18rem); letter-spacing: 0.03em; }
    .slide-tag   { font-size: 0.46rem; letter-spacing: 0.42em; }
}

@media (max-width: 380px) {
    .slide-title { font-size: clamp(2rem, 14vw, 18rem); }
}