/* =========================================================
   Nir'Makeup — effets visuels (actifs uniquement avec .js-fx)
   ========================================================= */

/* ---------- États initiaux (évite le flash avant l'animation) ---------- */
.js-fx [data-reveal],
.js-fx [data-split],
.js-fx [data-stagger] > *,
.js-fx [data-hero-eyebrow],
.js-fx [data-hero-title],
.js-fx [data-hero-lead],
.js-fx [data-hero-actions],
.js-fx [data-hero-visual],
.js-fx [data-hero-badge],
.js-fx [data-hero-pill],
.js-fx .header-inner { opacity: 0; }
.js-fx.fx-ready .header-inner { opacity: 1; transition: opacity 0.8s var(--ease); }

/* Lignes masquées pour les titres découpés */
.split-line-mask { padding: 0.14em 0.04em 0.08em; margin: -0.14em -0.04em -0.08em; }
.split-char, .split-word { display: inline-block; will-change: transform; }

/* ---------- Lenis (défilement fluide) ---------- */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

/* ---------- Grain filmique ---------- */
.js-fx body::after {
  content: ''; position: fixed; inset: -100%; z-index: 9000; pointer-events: none; opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain 0.9s steps(5) infinite;
}
@keyframes grain {
  0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -3%); }
  60% { transform: translate(-2%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); }
}

/* ---------- Barre de progression ---------- */
.scroll-progress { position: fixed; top: 0; left: 0; z-index: 70; width: 100%; height: 2px; background: var(--gold-gradient); transform: scaleX(0); transform-origin: left; pointer-events: none; }

/* ---------- Curseur ---------- */
.has-cursor, .has-cursor a, .has-cursor button, .has-cursor summary, .has-cursor label { cursor: none; }
.has-cursor input, .has-cursor textarea, .has-cursor select { cursor: auto; }
.cursor { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; }
.cursor__dot, .cursor__ring { position: fixed; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: var(--gold); }
.cursor__ring {
  display: grid; place-items: center; width: 44px; height: 44px; margin: -22px 0 0 -22px; border: 1px solid rgba(176, 141, 87, 0.7);
  transition: width 0.45s var(--ease-out), height 0.45s var(--ease-out), margin 0.45s var(--ease-out), background 0.45s, border-color 0.45s;
}
.cursor__label { font: 500 0.6rem/1 var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); opacity: 0; transition: opacity 0.3s; }
.cursor.is-hover .cursor__ring { width: 72px; height: 72px; margin: -36px 0 0 -36px; border-color: var(--gold); background: rgba(176, 141, 87, 0.12); }
.cursor.is-label .cursor__ring { width: 96px; height: 96px; margin: -48px 0 0 -48px; border-color: transparent; background: var(--gold-light); }
.cursor.is-label .cursor__label { opacity: 1; }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-down .cursor__ring { width: 34px; height: 34px; margin: -17px 0 0 -17px; }
.cursor.is-hidden { opacity: 0; }

/* ---------- Écran d'introduction ---------- */
.preloader { display: none; }
.fx-intro .preloader {
  position: fixed; inset: 0; z-index: 9900; display: grid; place-items: center; background: var(--ink); color: var(--ivory);
}
.preloader__inner { display: grid; justify-items: center; gap: 30px; width: min(80vw, 640px); }
.preloader__logo { overflow: hidden; padding: 0.1em 0.2em; }
.preloader__logo .logo__b { background: var(--gold-text); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: shimmer 4s linear infinite; }
.preloader__bar { width: 100%; height: 1px; background: rgba(251, 248, 244, 0.14); }
.preloader__bar span { display: block; height: 100%; background: var(--gold-gradient); transform: scaleX(0); transform-origin: left; }
.preloader__meta { display: flex; justify-content: space-between; width: 100%; font: 500 0.62rem/1 var(--sans); letter-spacing: 0.32em; text-transform: uppercase; color: var(--muted-light); }
.preloader__meta [data-preloader-count]::after { content: '%'; }

/* ---------- Rideau de transition ---------- */
.curtain { display: none; }
.js-fx .curtain {
  position: fixed; inset: 0; z-index: 9800; display: grid; place-items: center; background: var(--ink); color: var(--gold-light); pointer-events: none;
  animation: curtain-up 0.95s 0.1s cubic-bezier(0.76, 0, 0.24, 1) forwards;
}
.js-fx .curtain__mark { animation: curtain-mark 0.5s cubic-bezier(0.76, 0, 0.24, 1) forwards; }
.fx-intro .curtain { display: none; }
.curtain__mark .icon { width: 34px; height: 34px; }
@keyframes curtain-up { to { clip-path: inset(0 0 100% 0); visibility: hidden; } }
@keyframes curtain-mark { to { transform: scale(0) rotate(90deg); } }

/* ---------- Portfolio horizontal (bureau) ---------- */
@media (min-width: 1024px) {
  .js-fx .portfolio { padding: 0; }
  .js-fx .portfolio-pin { height: 100vh; display: flex; flex-direction: column; justify-content: center; overflow: hidden; padding-top: 70px; }
  .js-fx .portfolio-track { overflow: visible; scroll-snap-type: none; width: max-content; padding-left: max(var(--gutter), calc((100vw - var(--container)) / 2)); padding-right: 12vw; will-change: transform; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  .js-fx body::after { display: none; }
}