/* Les Nuits Bleues : lent, nocturne, la brume se lève. Le flou seulement sur le titre du héros, une fois. */
:root{--ease:cubic-bezier(.16,1,.3,1);--rv-d:1.2s;--rv-st:110ms}
html,body{overflow-x:clip}

/* Brume : 2 calques de dégradé radial qui dérivent (transform seulement, 40 s) */
.nb-brume{position:absolute;inset:0;overflow:clip;pointer-events:none;z-index:0}
.nb-brume::before,.nb-brume::after{content:"";position:absolute;width:90vmax;height:90vmax;border-radius:50%;
  background:radial-gradient(closest-side,rgb(27 42 107 / .55),transparent);will-change:transform}
.nb-brume::before{left:-30vmax;top:-20vmax;animation:nbDerive 40s ease-in-out infinite alternate}
.nb-brume::after{right:-35vmax;bottom:-30vmax;animation:nbDerive 40s ease-in-out -20s infinite alternate-reverse}
@keyframes nbDerive{to{transform:translate(18vmax,10vmax) scale(1.15)}}
.nb-brume.ex-off::before,.nb-brume.ex-off::after{animation-play-state:paused}
/* Halo qui suit le pointeur avec retard (souris seulement) */
.nb-halo{position:fixed;left:0;top:0;width:520px;height:520px;margin:-260px 0 0 -260px;border-radius:50%;pointer-events:none;z-index:1;
  background:radial-gradient(closest-side,rgb(124 149 255 / .10),transparent);opacity:0;transition:opacity .8s}
.nb-halo.on{opacity:1}
@media not all and (hover:hover) and (pointer:fine){.nb-halo{display:none}}

@media (prefers-reduced-motion:reduce){.nb-brume::before,.nb-brume::after{animation:none!important}.nb-halo{display:none}}

@media (prefers-reduced-motion:no-preference){
  /* Héros : NUITS sort du flou (12 px vers 0, 1,4 s, une fois). Ordinateur seulement */
  @media (min-width:761px){
    .ex-anim .nb-nuits{animation:nbFlou 1.4s var(--ease) .15s both}
    @keyframes nbFlou{from{filter:blur(12px);opacity:0;transform:scale(1.04)}to{filter:blur(0);opacity:1;transform:none}}
  }
  /* BLU : les 3 lettres s'écartent doucement (transform, pas de letter-spacing animé) */
  .ex-anim .nb-blu span{display:inline-block;animation:nbEcarte 1.6s var(--ease) .5s both}
  .nb-blu span:nth-child(1){--x:-.35em}.nb-blu span:nth-child(3){--x:.35em}
  @keyframes nbEcarte{from{transform:translateX(calc(var(--x,0) * -1));opacity:.4}}

  /* Manifeste : scène collante. La phrase reste au centre, les mots passent de gris-bleu à chrome */
  @supports (animation-timeline:view()){
    .nb-manif-scene{height:220svh;view-timeline:--nbManif block}
    .nb-manif-scene .nb-manif-cadre{position:sticky;top:0;height:100svh;display:grid;place-items:center}
    .ex-anim .nb-manif .ex-w{color:#8C97B5;animation:nbMot linear both;animation-timeline:--nbManif;
      animation-range:contain calc(var(--i) * var(--pas,4%)) contain calc(var(--i) * var(--pas,4%) + 12%)}
    @keyframes nbMot{to{color:#D9DEE8}}
  }
  @supports not (animation-timeline:view()){
    .ex-anim .nb-manif .ex-w{color:#8C97B5;transition:color 1s var(--ease);transition-delay:calc(var(--i) * 90ms)}
    .ex-anim .nb-manif.is-in .ex-w{color:#D9DEE8}
    .ex-anim .nb-manif[data-rv]{opacity:1}
  }
  /* Dates : chaque ligne glisse de 24 px et prend de l'opacité, l'une après l'autre */
  .ex-anim [data-rv="glisse"]{transform:translateX(-24px)}
  .ex-anim [data-rv="leve"]{transform:translateY(16px)}
  /* Le duo : chaque écran sort de la brume (opacité et léger recul de la photo) */
  @supports (animation-timeline:view()){
    .ex-anim .nb-ecran img{animation:nbEcran linear both;animation-timeline:view();animation-range:entry 0% cover 45%}
    @keyframes nbEcran{from{opacity:.15;transform:scale(1.06)}}
  }
  .nb-dialog[open]{animation:nbOuvre .6s var(--ease)}
  @keyframes nbOuvre{from{opacity:0;transform:scale(.97)}}
}