/* ==========================================================================
   Nikonyx scroll-driven scenes (Anime.js v4 onScroll)
   Active only when html.nx-scroll is set. Does not hijack native scrolling.
   ========================================================================== */

html.nx-scroll{
  scroll-behavior:auto;
  --nx-nav-clear:var(--nx-nav-h,72px);
  /* Recommended marketing phone ~380–400px; use available height below nav */
  --nxp-fit-h:calc(100dvh - var(--nx-nav-clear) - 28px);
  --nxp-fit-w:min(400px, calc(var(--nxp-fit-h) * 9 / 19.5));
}

.nx-scroll-scene{
  position:relative;
  isolation:isolate;
}
.nx-scroll-scene__track{
  position:relative;
  height:var(--nx-scroll-runway,220vh);
}
.nx-scroll-scene__pin{
  position:sticky;
  /* Rest every pinned scene below the fixed nav */
  top:var(--nx-nav-clear);
  min-height:calc(100dvh - var(--nx-nav-clear));
  display:flex;
  flex-direction:column;
  justify-content:center;
  overflow-x:clip;
  overflow-y:hidden;
  width:100%;
  box-sizing:border-box;
  padding-top:12px;
  padding-bottom:16px;
}
/* Hero keeps full-bleed media under the translucent nav */
.nx-scroll-scene--hero .nx-scroll-scene__pin{
  top:0;
  min-height:100dvh;
  padding-top:0;
  padding-bottom:0;
}

/* ---------- Hero runway ---------- */
.nx-scroll-scene--hero{
  --nx-scroll-runway:240vh;
  background:var(--nx-navy-deep,#00081C);
}
.nx-scroll-scene--hero .nx-scroll-scene__pin{
  background:var(--nx-navy-deep,#00081C);
}
html.nx-scroll .nx-scroll-scene--hero .nx-hero{
  min-height:100vh;
  min-height:100dvh;
  width:100%;
  overflow:hidden;
}
html.nx-scroll .nx-scroll-scene--hero .nx-hero__media{
  overflow:hidden;
}
/* Anime owns transforms — only kill competing transitions, never lock transform */
html.nx-scroll .nx-scroll-scene--hero .nx-hero__media img,
html.nx-scroll .nx-scroll-scene--hero .nx-hero.is-ready .nx-hero__media img{
  transition:none !important;
  animation:none !important;
  will-change:transform,opacity,clip-path;
}
html.nx-scroll .nx-scroll-scene--hero .nx-hero__content,
html.nx-scroll .nx-scroll-scene--hero .nx-hero__demo,
html.nx-scroll .nx-scroll-scene--hero .nx-hero__veil,
html.nx-scroll .nx-scroll-scene--hero .nx-hero__scroll{
  transition:none !important;
  animation:none !important;
  will-change:transform,opacity;
}
html.nx-scroll .nx-scroll-scene--hero .nx-hero__demo{
  /* keep CTA hittable while visible; JS fades it with scroll */
  z-index:5;
}

/* ---------- Try-On pinned runway ---------- */
.nx-scroll-scene--tryon{
  /* Long pin so each tee holds ~1 viewport of scroll before the next swap */
  --nx-scroll-runway:420vh;
  background:var(--nx-navy-deep,#00081C);
}
.nx-scroll-scene--tryon .nx-scroll-scene__pin{
  background:var(--nx-navy-deep,#00081C);
}
html.nx-scroll .nx-scroll-scene--tryon .nx-tryon{
  padding:clamp(20px,3vh,40px) 0;
  min-height:100vh;
  box-sizing:border-box;
  position:relative;
}
html.nx-scroll .nx-scroll-scene--tryon .nx-tryon__stage{
  perspective:1400px;
}
html.nx-scroll .nx-scroll-scene--tryon .nxp,
html.nx-scroll .nx-scroll-scene--tryon .nxp--single,
html.nx-scroll .nx-scroll-scene--tryon .ar-fit-phone,
html.nx-motion body[data-page="home"] .nx-scroll-scene--tryon .nxp--single,
html.nx-motion body[data-page="home"] .nx-scroll-scene--tryon .ar-fit-phone,
body[data-page="home"] .nx-scroll-scene--tryon .nxp--single,
body[data-page="home"] .nx-scroll-scene--tryon .ar-fit-phone{
  --nxp-phone-w:var(--nxp-fit-w);
  --nx-phone-w:var(--nxp-fit-w) !important;
  --nxp-w:var(--nxp-fit-w);
  width:var(--nxp-fit-w) !important;
  max-width:var(--nxp-fit-w) !important;
  /* Gentle orbit — small angles keep UI readable */
  animation:nxTryonOrbit 11s ease-in-out infinite !important;
  transform-style:preserve-3d;
  filter:none !important;
  box-shadow:none !important;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
}
@keyframes nxTryonOrbit{
  0%{transform:translate3d(0,0,0) rotateY(-5deg) rotateX(2deg)}
  35%{transform:translate3d(10px,-8px,14px) rotateY(3deg) rotateX(-1deg)}
  70%{transform:translate3d(-6px,6px,-4px) rotateY(-7deg) rotateX(2.5deg)}
  100%{transform:translate3d(0,0,0) rotateY(-5deg) rotateX(2deg)}
}
html.nx-scroll .nx-scroll-scene--tryon .nxp__bezel,
html.nx-scroll .nx-scroll-scene--how .nxp__bezel{
  overflow:hidden;
  box-shadow:0 28px 56px rgba(2,10,32,.42);
}
html.nx-scroll .nx-scroll-scene--tryon .nxp__screen,
html.nx-scroll .nx-scroll-scene--how .nxp__screen{
  overflow:hidden;
  border-radius:38px;
  contain:none;
  /* Keep screen layer sharp while shell orbits */
  transform:translateZ(0);
  isolation:isolate;
}
html.nx-scroll .nx-scroll-scene--tryon .nxp--single.is-inspecting,
html.nx-scroll .nx-scroll-scene--tryon .nx-tryon.is-inspecting .nxp--single,
html.nx-scroll .nx-scroll-scene--tryon .nxp--single:hover,
html.nx-scroll .nx-scroll-scene--tryon .nxp--single:focus-within{
  animation:none !important;
  transform:none !important;
  filter:none !important;
  box-shadow:none !important;
}
/* Outfit switch — whole phone frame moves, then resume orbit */
html.nx-scroll .nx-scroll-scene--tryon [data-tryon-demo].is-look-swap,
html.nx-scroll .nx-scroll-scene--tryon [data-tryon-demo].is-look-flash,
body[data-page="home"] .nx-scroll-scene--tryon [data-tryon-demo].is-look-flash,
body[data-page="home"] [data-tryon-demo].is-look-flash{
  animation:nxFrameSwap .62s cubic-bezier(.22,1,.36,1) !important;
}
html.nx-scroll .nx-scroll-scene--tryon [data-tryon-demo].is-look-swap .nxp-tryon__preview,
html.nx-scroll .nx-scroll-scene--tryon [data-tryon-demo].is-look-flash .nxp-tryon__preview,
body[data-page="home"] [data-tryon-demo].is-look-flash .nxp-tryon__preview{
  animation:nxLookSwap .55s ease;
}
html.nx-scroll .nx-scroll-scene--tryon [data-tryon-demo].is-look-swap .try-photo-single,
html.nx-scroll .nx-scroll-scene--tryon [data-tryon-demo].is-look-flash .try-photo-single,
body[data-page="home"] [data-tryon-demo].is-look-flash .try-photo-single{
  animation:nxLookSwapPhoto .5s ease;
}
@keyframes nxFrameSwap{
  0%{transform:translate3d(0,0,0) rotateY(-5deg) rotateX(2deg) scale(1)}
  22%{transform:translate3d(-14px,6px,18px) rotateY(10deg) rotateX(-3deg) scale(.97)}
  48%{transform:translate3d(16px,-10px,22px) rotateY(-12deg) rotateX(4deg) scale(1.02)}
  72%{transform:translate3d(-6px,4px,8px) rotateY(4deg) rotateX(-1deg) scale(1.01)}
  100%{transform:translate3d(0,0,0) rotateY(-5deg) rotateX(2deg) scale(1)}
}
@keyframes nxLookSwap{
  0%{box-shadow:0 0 0 0 rgba(201,162,39,0)}
  35%{box-shadow:0 0 0 3px rgba(201,162,39,.55)}
  100%{box-shadow:0 0 0 0 rgba(201,162,39,0)}
}
@keyframes nxLookSwapPhoto{
  0%{opacity:.3;transform:scale(1.05)}
  100%{opacity:1;transform:none}
}
@media (prefers-reduced-motion:reduce){
  html.nx-scroll .nx-scroll-scene--tryon .nxp--single,
  html.nx-scroll .nx-scroll-scene--tryon .ar-fit-phone,
  html.nx-scroll .nx-scroll-scene--tryon [data-tryon-demo].is-look-swap,
  html.nx-scroll .nx-scroll-scene--tryon [data-tryon-demo].is-look-flash,
  body[data-page="home"] [data-tryon-demo].is-look-flash{
    animation:none !important;
    transform:none !important;
  }
}
.nx-tryon__scroll-layers{
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:0;
  overflow:hidden;
}
.nx-tryon__scroll-layer{
  position:absolute;
  width:min(140px,16vw);
  aspect-ratio:3/4;
  border-radius:2px;
  overflow:hidden;
  opacity:.14;
  box-shadow:0 18px 40px rgba(0,0,0,.35);
  will-change:transform,opacity;
}
.nx-tryon__scroll-layer img{
  width:100%;height:100%;object-fit:cover;display:block;
}
/* Keep float layers on the phone side so copy stays readable */
.nx-tryon__scroll-layer--a{left:auto;right:42%;top:10%}
.nx-tryon__scroll-layer--b{right:2%;top:8%}
.nx-tryon__scroll-layer--c{left:auto;right:48%;bottom:8%}
.nx-tryon__scroll-layer--d{right:4%;bottom:10%}
html.nx-scroll .nx-scroll-scene--tryon .nx-tryon__grid{
  position:relative;z-index:1;
}
html.nx-scroll .nx-scroll-scene--tryon .nx-tryon__copy{
  position:relative;
  z-index:2;
  isolation:isolate;
  will-change:auto;
}
html.nx-scroll .nx-scroll-scene--tryon .nx-tryon__copy::before{
  content:"";
  position:absolute;
  inset:-16px -28px -20px -12px;
  z-index:-1;
  pointer-events:none;
  background:
    radial-gradient(ellipse 90% 80% at 20% 40%, rgba(0,8,28,.92), transparent 72%),
    linear-gradient(90deg, rgba(0,8,28,.75), transparent 85%);
}

/* ---------- Inspiration ---------- */
.nx-scroll-scene--inspire{
  /* Content-sized — no forced pin crop over the masonry */
  --nx-scroll-runway:auto;
  background:var(--nx-ivory,#F6F3EE);
}
.nx-scroll-scene--inspire .nx-scroll-scene__track{
  height:auto !important;
}
.nx-scroll-scene--inspire .nx-scroll-scene__pin{
  position:relative !important;
  top:auto !important;
  background:var(--nx-ivory,#F6F3EE);
  justify-content:flex-start;
  align-items:stretch;
  padding:0 !important;
  min-height:0 !important;
  height:auto !important;
  overflow:visible !important;
}
html.nx-scroll .nx-scroll-scene--inspire .nx-inspire{
  padding:var(--nx-inspire-pad-y,clamp(16px,2.4vh,32px)) 0 clamp(28px,4vh,48px);
  width:100%;
  height:auto;
  min-height:0;
  overflow:hidden;
  position:relative;
  isolation:isolate;
}
html.nx-scroll .nx-scroll-scene--inspire .nx-inspire__ambient{
  z-index:0;
  opacity:1;
}
html.nx-scroll .nx-scroll-scene--inspire .nx-inspire__cell{
  overflow:hidden;
}
html.nx-scroll .nx-scroll-scene--inspire .nx-inspire__cell img{
  transition:none !important;
  will-change:auto;
  width:100% !important;
  height:auto !important;
  object-fit:contain !important;
  object-position:center top !important;
  transform:none !important;
}

/* ---------- Wardrobe / digital closet ---------- */
.nx-scroll-scene--wardrobe{
  /* Longer runway = slower look changes; extra bottom space before Inside the app */
  --nx-scroll-runway:560vh;
  background:#03060e;
  padding-bottom:clamp(56px,12vh,140px);
}
.nx-scroll-scene--wardrobe .nx-closet__runway.nx-scroll-scene__track{
  height:var(--nx-scroll-runway,560vh) !important;
  position:relative;
  width:100%;
  /* Keep sticky cabinet clear of the next section */
  padding-bottom:clamp(48px,10vh,120px);
  box-sizing:content-box;
}
/* Stick the cabinet itself — natural height so hangers stay fully visible */
html.nx-scroll .nx-scroll-scene--wardrobe .nx-closet__cabinet{
  position:sticky;
  top:calc(var(--nx-nav-clear,72px) + 10px);
  z-index:2;
  height:auto;
  max-height:none;
  overflow:visible;
  width:var(--nx-shell);
  margin-inline:auto;
  box-sizing:border-box;
}
html.nx-scroll .nx-scroll-scene--wardrobe .nx-wardrobe-lab{
  padding:clamp(28px,4vh,48px) 0 0;
  width:100%;
  height:auto;
  min-height:0;
  box-sizing:border-box;
}
html.nx-scroll .nx-scroll-scene--wardrobe .nx-closet__shell{
  height:auto;
  min-height:0;
  margin-bottom:18px;
}
html.nx-scroll .nx-scroll-scene--wardrobe .nx-wardrobe-lab__item,
html.nx-scroll .nx-scroll-scene--wardrobe [data-ward-preview],
html.nx-scroll .nx-scroll-scene--wardrobe .nx-wardrobe-lab__intro,
html.nx-scroll .nx-scroll-scene--wardrobe .nx-wardrobe-lab__panel{
  will-change:auto;
  transition:none !important;
}

/* ---------- App walkthrough ---------- */
.nx-scroll-scene--how{
  --nx-scroll-runway:320vh;
  background:var(--nx-paper,#FFFEFB);
  /* Push down so wardrobe cabinet isn't clipped by this section */
  margin-top:clamp(40px,8vh,110px);
}
.nx-scroll-scene--how .nx-scroll-scene__pin{
  background:var(--nx-paper,#FFFEFB);
  justify-content:flex-start;
  padding:clamp(24px,4vh,40px) clamp(32px,6vw,80px);
  box-sizing:border-box;
}
html.nx-scroll .nx-scroll-scene--how .nx-how{
  padding:0;
  width:100%;
  box-sizing:border-box;
}
/* Arrive fully readable — no delayed fade/slide into place */
html.nx-scroll .nx-scroll-scene--how .nx-reveal,
html.nx-scroll .nx-scroll-scene--how .nx-how__layout > div:first-child,
html.nx-scroll .nx-scroll-scene--how .nx-how__steps,
html.nx-scroll .nx-scroll-scene--how .nx-how__step,
html.nx-scroll .nx-scroll-scene--how .nx-how__demo,
html.nx-motion.nx-scroll .nx-scroll-scene--how [data-nx-stagger] > .nx-how__step{
  opacity:1 !important;
  transform:none !important;
  filter:none !important;
  transition:none !important;
  transition-delay:0s !important;
}
html.nx-scroll .nx-scroll-scene--how .nx-how__layout{
  width:min(1240px,100%);
  margin-inline:auto;
  padding-inline:0;
  align-items:center;
  min-height:0;
}
html.nx-scroll .nx-scroll-scene--how .nx-how__demo{
  position:relative;
  top:auto;
  align-self:center;
}
html.nx-scroll .nx-scroll-scene--how .nxp,
html.nx-scroll .nx-scroll-scene--how [data-app-tabs]{
  --nxp-phone-w:var(--nxp-fit-w);
  --nxp-w:var(--nxp-fit-w);
  position:relative;
  width:var(--nxp-fit-w) !important;
  max-width:var(--nxp-fit-w) !important;
  will-change:transform;
  filter:none !important;
  box-shadow:none !important;
  background:transparent !important;
  backface-visibility:hidden;
  -webkit-font-smoothing:antialiased;
  overflow:visible;
}
/* Caption sat under the chin as a blank slab — tuck it into the frame gap */
html.nx-scroll .nx-scroll-scene--how .nxp__caption{
  position:absolute;
  left:0;right:0;
  bottom:-1.75rem;
  margin:0;
  font-size:11px;
  letter-spacing:.08em;
  text-transform:uppercase;
  pointer-events:none;
}
html.nx-scroll .nx-scroll-scene--tryon .nx-tryon,
html.nx-scroll .nx-scroll-scene--inspire .nx-inspire,
html.nx-scroll .nx-scroll-scene--wardrobe .nx-wardrobe-lab,
html.nx-scroll .nx-scroll-scene--how .nx-how{
  /* Content always starts clear of the sticky nav */
  box-sizing:border-box;
}

/* ---------- Benefits + CTA ---------- */
.nx-scroll-link{
  position:relative;
}
html.nx-scroll .nx-trust-item,
html.nx-scroll .nx-final-cta__panel,
html.nx-scroll .nx-final-cta__media img{
  will-change:transform,opacity;
}
html.nx-scroll .nx-final-cta__media img{
  animation:none !important;
}

/* Progress cue */
.nx-scroll-progress{
  position:fixed;
  right:14px;
  top:50%;
  transform:translateY(-50%);
  z-index:40;
  display:flex;
  flex-direction:column;
  gap:8px;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}
html.nx-scroll .nx-scroll-progress.is-on{opacity:.55}
.nx-scroll-progress span{
  width:4px;height:4px;border-radius:50%;
  background:rgba(255,255,255,.55);
  box-shadow:0 0 0 1px rgba(0,17,56,.15);
}
.nx-scroll-progress span.is-active{
  background:#C9A227;
  transform:scale(1.35);
}

/* Desktop / tall pin: keep phones inside the viewport below the nav */
@media (min-width:901px){
  html.nx-scroll{
    --nxp-fit-h:calc(100dvh - var(--nx-nav-clear) - 32px);
    --nxp-fit-w:min(400px, 44vw, calc(var(--nxp-fit-h) * 9 / 19.5));
  }
  html.nx-scroll .nx-scroll-scene--tryon .nx-tryon{
    padding:clamp(12px,2vh,24px) 0;
  }
  html.nx-scroll .nx-scroll-scene--how .nx-scroll-scene__pin{
    padding-top:8px;
    padding-bottom:28px; /* room for absolute caption */
  }
}

@media (max-width:900px){
  html.nx-scroll{
    /* Mobile still height-aware, but prefer width so phones aren't tiny */
    --nxp-fit-h:calc(100dvh - var(--nx-nav-clear) - 100px);
    --nxp-fit-w:min(320px, 82vw, calc(var(--nxp-fit-h) * 9 / 19.5));
  }
  .nx-scroll-scene--hero{--nx-scroll-runway:180vh}
  .nx-scroll-scene--tryon{--nx-scroll-runway:160vh}
  .nx-scroll-scene--inspire{--nx-scroll-runway:auto}
  .nx-scroll-scene--wardrobe{--nx-scroll-runway:180vh}
  .nx-scroll-scene--how{--nx-scroll-runway:260vh}
  .nx-tryon__scroll-layer{width:min(110px,28vw);opacity:.18}
  .nx-scroll-progress{display:none}
}

@media (prefers-reduced-motion:reduce){
  .nx-scroll-scene__track{height:auto !important}
  .nx-scroll-scene__pin{
    position:relative !important;
    min-height:0 !important;
    overflow:visible !important;
  }
  .nx-tryon__scroll-layers,
  .nx-scroll-progress{display:none !important}
}