/* ───────────────────────────────────────────────────────────────
   NexLab — couche « mouvement » (septembre 2026)
   Tout ce qui fait vivre la page : showreel épinglé au scroll,
   halo curseur, grain, titres animés, filmstrip, fiole 3D,
   transitions entre pages. Aucune dépendance externe : la CSP
   du site n'autorise que des scripts hébergés ici.
   ─────────────────────────────────────────────────────────────── */

/* 5. Transitions entre pages (index ↔ fiches production) : fondu
   croisé natif, sans JavaScript. Ignoré par les navigateurs qui ne
   le gèrent pas. */
@view-transition { navigation: auto; }
::view-transition-old(root){ animation: nxVtOut .32s ease both; }
::view-transition-new(root){ animation: nxVtIn .42s ease both; }
@keyframes nxVtOut{ to{ opacity:0; transform: scale(.985); } }
@keyframes nxVtIn{ from{ opacity:0; transform: scale(1.01); } }

html{ scroll-behavior: smooth; }

/* 2a. Grain de pellicule, fixe, très léger. */
.nx-grain{
  position: fixed; inset: -50%; z-index: 9000; pointer-events: none;
  opacity: .055; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='300' height='300' filter='url(%23n)'/></svg>");
  background-size: 300px 300px;
  animation: nxGrain .5s steps(4) infinite;
}
@keyframes nxGrain{
  0%{ transform: translate(0,0); } 25%{ transform: translate(-3%,2%); }
  50%{ transform: translate(2%,-3%); } 75%{ transform: translate(-1%,-1%); } 100%{ transform: translate(3%,3%); }
}

/* 2b. Halo qui suit le curseur (souris uniquement). */
.nx-cursor{
  position: fixed; left: 0; top: 0; z-index: 2; width: 520px; height: 520px;
  margin: -260px 0 0 -260px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, oklch(70% 0.15 250 / .22), oklch(70% 0.15 250 / .06) 38%, transparent 66%);
  mix-blend-mode: screen; transition: opacity .6s ease;
  will-change: transform;
}
.nx-cursor.is-on{ opacity: 1; }
@media (hover: none), (pointer: coarse){ .nx-cursor{ display: none; } }

/* 2b'. Curseur viseur (souris uniquement) */
html.nx-curseur, html.nx-curseur a, html.nx-curseur button, html.nx-curseur [role=button], html.nx-curseur canvas{ cursor: none !important; }
html.nx-curseur input, html.nx-curseur textarea, html.nx-curseur select{ cursor: auto !important; }
.nx-viseur{
  position: fixed; left: 0; top: 0; z-index: 9500; width: 34px; height: 34px; margin: -17px 0 0 -17px;
  pointer-events: none; opacity: 0; transition: opacity .3s ease; will-change: transform;
}
.nx-viseur.is-on{ opacity: 1; }
.nx-viseur .c{ position: absolute; width: 9px; height: 9px; border: 1.5px solid var(--accent); transition: transform .35s cubic-bezier(.2,.7,.2,1), border-color .25s; }
.nx-viseur .tl{ left: 0; top: 0; border-right: 0; border-bottom: 0; }
.nx-viseur .tr{ right: 0; top: 0; border-left: 0; border-bottom: 0; }
.nx-viseur .bl{ left: 0; bottom: 0; border-right: 0; border-top: 0; }
.nx-viseur .br{ right: 0; bottom: 0; border-left: 0; border-top: 0; }
.nx-viseur b{ position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%; background: #fff; transition: transform .25s, background .25s; }
.nx-viseur s{ position: absolute; left: 50%; top: -16px; transform: translateX(-50%); text-decoration: none; font: 700 8px/1 Manrope, system-ui, sans-serif; letter-spacing: .18em; color: #ff4d4d; opacity: 0; transition: opacity .25s; }
.nx-viseur s::before{ content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #ff4d4d; margin-right: 4px; vertical-align: 1px; animation: nxRec 1s steps(1) infinite; }
@keyframes nxRec{ 50%{ opacity: 0; } }
.nx-viseur.is-lien .tl{ transform: translate(-7px,-7px); } .nx-viseur.is-lien .tr{ transform: translate(7px,-7px); }
.nx-viseur.is-lien .bl{ transform: translate(-7px,7px); } .nx-viseur.is-lien .br{ transform: translate(7px,7px); }
.nx-viseur.is-lien s{ opacity: 1; } .nx-viseur.is-lien b{ background: #ff4d4d; transform: scale(1.6); }
.nx-viseur.is-clic .c{ border-color: #fff; } .nx-viseur.is-clic b{ transform: scale(.6); }
@media (hover: none), (pointer: coarse){ .nx-viseur{ display: none; } html.nx-curseur *{ cursor: auto !important; } }

/* 2c. Titres de section : chaque mot monte depuis un masque, en cascade. */
.section-head h2 .nx-w{ display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.section-head h2 .nx-w > span{ display: inline-block; transform: translateY(110%); transition: transform .9s cubic-bezier(.16,1,.3,1); transition-delay: var(--d, 0s); }
.section-head.is-visible h2 .nx-w > span{ transform: translateY(0); }
.section-kicker{ position: relative; }
.section-head .section-kicker::after{
  content: ""; position: absolute; left: 0; bottom: -4px; height: 1px; width: 100%;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.16,1,.3,1) .1s;
}
.section-head.is-visible .section-kicker::after{ transform: scaleX(1); }

/* 2d. Boutons magnétiques : légère attraction vers la souris. */
.btn-primary, .btn-ghost{ transition: transform .35s cubic-bezier(.2,.7,.2,1), background .25s ease, color .25s ease, border-color .25s ease; will-change: transform; }

/* 1. Showreel épinglé : la vidéo démarre plein écran et se pose dans
   son cadre pendant qu'on descend. --p va de 0 (plein écran) à 1 (cadré). */
@media all{
  #showreel.nx-pin{ height: 230vh; padding: 0 !important; position: relative; }
  #showreel.nx-pin .nx-pin-stage{
    position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column;
    align-items: center; justify-content: center; overflow: hidden; --p: 0;
  }
  #showreel.nx-pin .section-head{
    position: absolute; left: 24px; bottom: 34px; right: 90px; z-index: 3; margin: 0; max-width: 620px;
    opacity: calc(1 - var(--p) * 1.6); transform: translateY(calc(var(--p) * 40px));
    pointer-events: none; text-shadow: 0 2px 30px rgba(0,0,0,.6);
  }
  #showreel.nx-pin .nx-pin-stage.is-cadre .section-head{ visibility: hidden; }
  #showreel.nx-pin .reel-wrap{
    margin: 0; max-width: none; flex: none; aspect-ratio: 16 / 9;
    /* plein écran (couvre le viewport, rogné par la scène) → cadre 1100 px max */
    --w0: max(100vw, 177.78vh); --w1: min(1100px, 100vw - 48px, (100vh - 120px) * 16 / 9);
    width: calc(var(--w0) + (var(--w1) - var(--w0)) * var(--p));
    border-radius: calc(var(--p) * 18px); border-color: oklch(34% 0.015 250 / calc(var(--p) * .55));
    box-shadow: 0 30px 80px rgba(0,0,0, calc(var(--p) * .6));
    transition: none; opacity: 1; transform: none;
  }
  #showreel.nx-pin .reel-wrap::after{
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(180deg, rgba(0,0,0,.15), transparent 30%, transparent 60%, rgba(0,0,0,.55));
    opacity: calc(1 - var(--p));
  }
  #showreel.nx-pin .reel-video{ width: 100%; height: 100%; object-fit: cover; transform: scale(calc(1.08 - var(--p) * .08)); transform-origin: center; }
  #showreel.nx-pin .reel-son{ opacity: var(--p); }
  #showreel.nx-pin .nx-scroll-hint{
    position: absolute; right: 30px; bottom: 34px; z-index: 3; display: flex; align-items: center; gap: 10px;
    font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: var(--text-muted);
    opacity: calc(1 - var(--p) * 3);
  }
  #showreel.nx-pin .nx-scroll-hint i{ display: block; width: 1px; height: 46px; background: linear-gradient(var(--accent), transparent); animation: nxHint 1.6s ease-in-out infinite; }
  @keyframes nxHint{ 0%{ transform: scaleY(0); transform-origin: top; } 50%{ transform: scaleY(1); transform-origin: top; } 51%{ transform-origin: bottom; } 100%{ transform: scaleY(0); transform-origin: bottom; } }
}
.nx-scroll-hint{ display: none; }
@media all{ .nx-scroll-hint{ display: flex; } }

/* 3. Filmstrip : les douze dernières productions défilent à
   l'horizontale pendant qu'on descend. */
#selection{ position: relative; padding: 0; }
#selection .nx-strip-stage{ padding: 80px 0 40px; }
#selection .section-head{ padding: 0 24px; max-width: 1200px; margin: 0 auto 28px; }
.nx-strip{ display: flex; gap: 22px; padding: 0 24px; will-change: transform; }
.nx-strip-card{
  position: relative; flex: 0 0 auto; width: min(460px, 78vw); aspect-ratio: 16 / 9;
  border-radius: 12px; overflow: hidden; background: #000; border: 1px solid var(--line);
  text-decoration: none; color: var(--text); isolation: isolate;
}
.nx-strip-card img{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.02); transition: transform 6s cubic-bezier(.2,.7,.2,1), filter .6s ease; filter: saturate(.85) brightness(.9); }
.nx-strip-card:hover img{ transform: scale(1.14); filter: saturate(1.05) brightness(1); }
.nx-strip-card video{ position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .45s ease; }
.nx-strip-card.is-live video{ opacity: 1; }
.nx-strip-card::after{ content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(0,0,0,.75)); }
.nx-strip-num{ position: absolute; top: 14px; left: 18px; z-index: 2; font-size: 12px; letter-spacing: .2em; color: var(--text-muted); font-variant-numeric: tabular-nums; }
.nx-strip-info{ position: absolute; left: 18px; right: 18px; bottom: 16px; z-index: 2; }
.nx-strip-info h3{ margin: 0 0 4px; font-size: clamp(18px, 1.6vw, 24px); font-weight: 700; letter-spacing: -.01em; }
.nx-strip-info p{ margin: 0; font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--text-muted); }
.nx-strip-play{
  position: absolute; right: 18px; bottom: 18px; z-index: 2; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; background: rgba(255,255,255,.08); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,.2); transform: scale(.85); opacity: 0; transition: transform .4s cubic-bezier(.2,.7,.2,1), opacity .4s ease;
}
.nx-strip-play svg{ width: 16px; height: 16px; fill: #fff; margin-left: 2px; }
.nx-strip-card:hover .nx-strip-play{ transform: scale(1); opacity: 1; }
.nx-strip-end{
  flex: 0 0 auto; width: min(420px, 70vw); aspect-ratio: 16 / 9; border-radius: 12px; display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center; gap: 14px; padding: 28px; border: 1px dashed var(--line);
  color: var(--text); text-decoration: none;
}
.nx-strip-end strong{ font-size: clamp(22px, 2vw, 30px); letter-spacing: -.02em; }
.nx-strip-end span{ font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); }
@media all{
  #selection.nx-pin{ height: 400vh; }
  #selection.nx-pin .nx-strip-stage{ position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding: 0; }
  #selection.nx-pin .section-head{ width: 100%; }
  .nx-strip{ transform: translate3d(calc(var(--x, 0px)), 0, 0); }
}
@media (max-width: 0px){
  .nx-strip{ overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; padding-bottom: 12px; scrollbar-width: none; }
  .nx-strip::-webkit-scrollbar{ display: none; }
  .nx-strip-card, .nx-strip-end{ scroll-snap-align: start; }
  .nx-strip-play{ opacity: 1; transform: none; }
}

/* 4. Hero 3D : les affiches des clips en tunnel derrière le titre. */
.nx-hero3d{ position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity 1.4s ease; }
.nx-hero3d.is-on{ opacity: 1; }
.nx-hero3d canvas{ display: block; width: 100%; height: 100%; }
/* voile sombre au centre pour garder le titre lisible */
.nx-hero3d-voile{ position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 52% 48% at 50% 48%, oklch(14% 0.008 250 / .78), oklch(14% 0.008 250 / .35) 55%, transparent 75%),
              linear-gradient(180deg, oklch(14% 0.008 250 / .6), transparent 22%, transparent 78%, var(--bg)); }
html.nx-3d .hero-video-bg{ display: none; }
html.nx-3d .hero-glow{ pointer-events: none; opacity: .6; }
html.nx-3d .hero-xmark{ opacity: .45; }
html.nx-3d .hero-rig .rig-camera, html.nx-3d .rig-particles{ display: none; }

@media (prefers-reduced-motion: reduce){
  .nx-grain, .nx-cursor{ display: none; }
  .section-head h2 .nx-w > span{ transform: none; transition: none; }
}