/* ──────────────────────────────────────────────────────
   Navega Partners — motion layer (test build)
   Aaru-grammar motion in Navega's register: quiet,
   editorial, expensive. Only active when motion.js sets
   html.has-motion; everything degrades to the vanilla
   chrome.js path otherwise.
   ────────────────────────────────────────────────────── */

/* Lenis recommended host styles */
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; }

/* The GSAP layer owns .reveal — kill the CSS transition so inline
   styles from tweens don't get re-animated by the old rules. */
html.has-motion .reveal{ transition: none; }

/* Hero entrance is GSAP-choreographed; suppress the CSS keyframes. */
html.has-motion .hero-headline,
html.has-motion .hero-subheadline,
html.has-motion .scroll-hint{
  animation: none;
  opacity: 1;
}

/* Page curtain — soft shell veil between page loads. */
.np-curtain{
  position: fixed; inset: 0;
  z-index: 1000;
  background: var(--shell, #F9F6F1);
  pointer-events: none;
  opacity: 0;
}
.np-curtain.is-on{ opacity: 1; pointer-events: auto; }

/* Nav hide/show on scroll direction — quiet slide. */
html.has-motion .site-nav{
  transition: background 360ms ease, padding 360ms ease,
              border-color 360ms ease, transform 600ms cubic-bezier(.22,1,.36,1);
}
html.has-motion .site-nav.np-hidden{ transform: translateY(-101%); }

/* Split-line masks: SplitText adds the wrappers; just make sure
   descenders aren't clipped harshly and ems keep their style. */
.np-split-line{ display: block; }

/* The mask window must include the descender zone, otherwise g/y/p
   stay clipped during the rise and "pop in" only on revert. The
   negative margin cancels the padding so line spacing is unchanged;
   the rise starts at 130% to stay fully hidden below the larger
   window. (The vendored SplitText suffixes EVERY hyphen-separated
   token of linesClass with "-mask", so "np-split-line" becomes
   "np-mask-split-mask-line-mask" — match on a stable token.) */
[class*="np-mask-split-mask"]{
  padding-bottom: 0.22em;
  margin-bottom: -0.22em;
}

/* Clip-mask reveal targets start fully covered to avoid a flash
   before the tween's first tick. */
html.has-motion .vista-panel,
html.has-motion .il-feature,
html.has-motion .film .frame{
  clip-path: inset(16% 10% 16% 10%);
  will-change: clip-path;
}

/* ── Dot motif ──────────────────────────────────────── */
/* 1 · Insider moment anchor: a hairline sage rule with the single
   terracotta dot settling at its centre — the precision fix. */
.np-anchor{
  display: flex; align-items: center; justify-content: center;
  gap: 0;
  height: 8px;
  margin-bottom: 34px;
  position: relative;
}
.np-anchor-line{
  display: block;
  width: 88px; height: 1px;
  background: var(--sage, #7A9E96);
  opacity: 0.55;
  transform: scaleX(0);
}
.np-anchor-dot{
  position: absolute;
  left: 50%; top: 50%;
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--terracotta, #B5796A);
  transform: scale(0);
}

/* 2 · Pin-scroll progress dot: travels the progress strip. */
.hscroll-progress{ pointer-events: none; }
.np-progress-dot{
  position: absolute;
  top: 50%; left: 0;
  width: 5px; height: 5px;
  margin-top: -2.5px;
  border-radius: 50%;
  background: var(--terracotta, #B5796A);
  transform: translateX(-50%);
  will-change: transform;
}

/* Insider statement — scrubbed word-fill. Words start faint and
   ink to full as the scroll scrubs through; opacity-based so the
   terracotta em keeps its own colour. */
.np-fill-word{ will-change: opacity; }

/* Brand entrance curtain (home) — dune field, navy stamp.
   Present from the first HTML paint; motion.js fades the stamp in whole,
   holds, then lifts the whole curtain up and off. The element is removed
   from the DOM on completion, which also releases the scroll lock below. */
#brand-curtain{
  position: fixed; inset: 0;
  z-index: 1200;                 /* above .np-curtain (1000) */
  background: #EDE3D6;           /* dune */
  display: flex; align-items: center; justify-content: center;
  will-change: transform;
}
#brand-curtain .bc-logo{
  width: clamp(8rem, 16vw, 13rem);
  height: auto; display: block;
  opacity: 0;                    /* motion.js fades it in, in its entirety */
  will-change: opacity;
}
@media (prefers-reduced-motion: no-preference){
  /* Scroll stays locked exactly as long as the curtain exists. */
  html:has(#brand-curtain){ overflow: hidden; }
}

/* Pinned insider moment needs its own breathing room while pinned. */
html.has-motion .insider .wrap{ position: relative; }

@media (prefers-reduced-motion: reduce){
  .np-curtain{ display: none; }
  #brand-curtain{ display: none; }
  .np-anchor-line{ transform: none; }
  .np-anchor-dot{ transform: none; }
}