/* ==========================================================================
   Nikonyx cinematic scroll story — one pinned runway, six chapters
   Active when html.nx-story is set. Native scroll never hijacked.
   ========================================================================== */

html.nx-story{
  --nx-story-nav:var(--nx-nav-h,72px);
  --nx-story-ink:#001138;
  --nx-story-paper:#FFFEFB;
  --nx-story-mist:#F3F0EA;
  --nx-story-gold:#C9A227;
}

.nx-story{
  position:relative;
  background:var(--nx-story-paper);
  color:var(--nx-story-ink);
  isolation:isolate;
}
.nx-story__track{
  position:relative;
  /* Longer runway = slower chapter transitions (easier to follow) */
  height:var(--nx-story-runway,980vh);
}
.nx-story__pin{
  position:sticky;
  top:var(--nx-story-nav);
  min-height:calc(100dvh - var(--nx-story-nav));
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  box-sizing:border-box;
  padding:clamp(12px,2.5vh,28px) clamp(16px,4vw,48px) clamp(20px,3vh,36px);
}
.nx-story__stage{
  position:relative;
  width:min(1180px,100%);
  height:min(780px, calc(100dvh - var(--nx-story-nav) - 48px));
  max-height:calc(100dvh - var(--nx-story-nav) - 40px);
}

/* ---- Minimal chapter copy ---- */
.nx-story__copy{
  position:absolute;
  z-index:30;
  left:0;
  top:0;
  max-width:min(28ch,42%);
  pointer-events:none;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:12px;
  transition:opacity .3s ease;
}
.nx-story__kicker{
  position:static;
  margin:0;
  font-size:11px;
  font-weight:600;
  letter-spacing:.22em;
  text-transform:uppercase;
  color:rgba(0,17,56,.45);
  line-height:1.2;
  flex:0 0 auto;
}
.nx-story__headlines{
  position:relative;
  width:100%;
  min-height:clamp(3.4em, 8vw, 4.6em);
}
.nx-story__headline{
  margin:0;
  font-family:var(--nx-serif, "Cormorant Garamond", Georgia, serif);
  font-size:clamp(28px,4.2vw,48px);
  font-weight:500;
  line-height:1.08;
  letter-spacing:-.02em;
  color:var(--nx-story-ink);
}
.nx-story__line{
  position:absolute;
  left:0;
  right:0;
  top:0;
  opacity:0;
  transform:translateY(14px);
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.nx-story__line.is-on{
  opacity:1;
  transform:none;
}
/* Wear: hide top copy entirely — CTA lives in wear-panel only */
.nx-story__stage.is-wear .nx-story__copy{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}
.nx-story__stage.is-wear .nx-story__progress span{
  background:rgba(255,254,251,.4);
}
.nx-story__stage.is-wear .nx-story__progress span.is-active{
  background:var(--nx-story-gold);
}
/* Save: phone exits — cards are the hero */
.nx-story__stage.is-save .nx-story__phone{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* ---- Quiet progress ---- */
.nx-story__progress{
  position:absolute;
  z-index:32;
  right:0;
  top:50%;
  transform:translateY(-50%);
  display:flex;
  flex-direction:column;
  gap:10px;
  pointer-events:none;
}
.nx-story__progress span{
  width:4px;
  height:4px;
  border-radius:50%;
  background:rgba(0,17,56,.22);
  transition:background .25s ease, transform .25s ease;
}
.nx-story__progress span.is-active{
  background:var(--nx-story-gold);
  transform:scale(1.35);
}

/* ---- Shared layers ---- */
.nx-story__layer{
  position:absolute;
  inset:0;
  pointer-events:none;
}
.nx-story__layer img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  user-select:none;
  -webkit-user-drag:none;
}

/* ========== CH 01 Wardrobe ========== */
.nx-story__wardrobe{
  z-index:5;
}
.nx-story__garment{
  position:absolute;
  width:min(160px,18vw);
  aspect-ratio:3/4;
  border-radius:2px;
  overflow:hidden;
  background:var(--nx-story-mist);
  box-shadow:0 18px 40px rgba(0,17,56,.12);
  will-change:transform,opacity;
}
.nx-story__garment--a{ left:8%; top:18%; width:min(180px,20vw); }
.nx-story__garment--b{ left:28%; top:8%; width:min(150px,17vw); }
.nx-story__garment--c{ left:46%; top:22%; width:min(170px,19vw); }
.nx-story__garment--d{ left:66%; top:12%; width:min(155px,17vw); }
.nx-story__garment--e{ left:78%; top:38%; width:min(145px,16vw); }
.nx-story__garment--hero{
  left:38%;
  top:28%;
  width:min(220px,24vw);
  z-index:2;
  box-shadow:0 28px 60px rgba(0,17,56,.2);
}

/* ========== CH 02 Ask NX ========== */
.nx-story__ask{
  z-index:8;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  will-change:transform,opacity;
}
.nx-story__chat{
  width:min(380px,78%);
  background:rgba(255,254,251,.96);
  border:1px solid rgba(0,17,56,.08);
  border-radius:18px;
  padding:18px 18px 14px;
  box-shadow:0 24px 64px rgba(0,17,56,.14);
  will-change:transform,opacity;
}
.nx-story__chat-label{
  margin:0 0 12px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:rgba(0,17,56,.4);
}
.nx-story__bubble{
  margin:0 0 10px;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
  line-height:1.45;
  opacity:0;
  transform:translateY(10px);
  will-change:transform,opacity;
}
.nx-story__bubble--user{
  background:var(--nx-story-ink);
  color:#fff;
  margin-left:18%;
  border-bottom-right-radius:4px;
}
.nx-story__bubble--nx{
  background:var(--nx-story-mist);
  color:var(--nx-story-ink);
  margin-right:12%;
  border-bottom-left-radius:4px;
}
.nx-story__ask-thumbs{
  display:flex;
  gap:8px;
  margin-top:12px;
}
.nx-story__ask-thumbs span{
  flex:1;
  aspect-ratio:1;
  border-radius:8px;
  overflow:hidden;
  background:#e8e4dc;
  opacity:0;
  transform:scale(.85);
  will-change:transform,opacity;
}
.nx-story__ask-thumbs img{ width:100%; height:100%; object-fit:cover; }

/* ========== CH 03 Review outfit ========== */
.nx-story__outfit{
  z-index:10;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  will-change:transform,opacity;
}
.nx-story__look{
  position:relative;
  width:min(340px,70%);
  aspect-ratio:3/4.2;
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:0 30px 70px rgba(0,17,56,.18);
  will-change:transform,opacity;
}
.nx-story__look-piece{
  position:absolute;
  border-radius:4px;
  overflow:hidden;
  background:var(--nx-story-mist);
  will-change:transform,opacity;
}
.nx-story__look-piece--top{
  left:18%; top:10%; width:64%; height:42%;
}
.nx-story__look-piece--bottom{
  left:22%; top:48%; width:56%; height:38%;
}
.nx-story__look-full{
  position:absolute;
  inset:0;
  overflow:hidden;
  background:var(--nx-story-mist);
  will-change:transform,opacity;
}
.nx-story__look-full img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.nx-story__look-meta{
  position:absolute;
  left:14px; right:14px; bottom:14px;
  padding:10px 12px;
  border-radius:10px;
  background:rgba(255,254,251,.92);
  font-size:12px;
  font-weight:600;
  letter-spacing:.04em;
  opacity:0;
  transform:translateY(8px);
  will-change:transform,opacity;
}

/* ========== CH 04 Try-On phone ========== */
.nx-story__tryon{
  z-index:14;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  will-change:transform,opacity;
}
.nx-story__phone{
  position:relative;
  width:min(280px,58vw);
  aspect-ratio:9/19.5;
  border-radius:42px;
  padding:9px;
  background:
    linear-gradient(152deg,#1e3f72 0%,#0c1f42 20%,#050e22 45%,#12284f 70%,#0a1834 100%);
  box-shadow:0 28px 64px rgba(2,10,32,.4);
  will-change:transform;
  overflow:hidden;
}
.nx-story__phone-screen{
  position:relative;
  height:100%;
  border-radius:34px;
  overflow:hidden;
  background:#001138;
}
.nx-story__phone-screen img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center top;
  opacity:0;
  will-change:opacity;
}
.nx-story__phone-screen img.is-show{ opacity:1; }
.nx-story__phone-island{
  position:absolute;
  z-index:5;
  top:11px; left:50%;
  transform:translateX(-50%);
  width:78px; height:22px;
  border-radius:999px;
  background:#000;
  pointer-events:none;
}
.nx-story__tryon-bg{
  position:absolute;
  inset:8% 4%;
  border-radius:4px;
  overflow:hidden;
  opacity:.18;
  filter:saturate(.85);
  will-change:transform,opacity;
  z-index:0;
}

/* ========== CH 05 Save ========== */
.nx-story__save{
  z-index:16;
  display:flex;
  align-items:center;
  justify-content:center;
  opacity:0;
  will-change:transform,opacity;
}
.nx-story__saves{
  display:flex;
  gap:14px;
  align-items:flex-end;
}
.nx-story__save-card{
  position:relative;
  width:min(150px,22vw);
  aspect-ratio:3/4;
  border-radius:12px;
  overflow:hidden;
  background:var(--nx-story-mist);
  box-shadow:0 16px 36px rgba(0,17,56,.14);
  will-change:transform,opacity;
}
.nx-story__save-card--main{
  width:min(200px,28vw);
  box-shadow:0 28px 56px rgba(0,17,56,.22);
}
.nx-story__bookmark{
  position:absolute;
  top:10px; right:10px;
  width:28px; height:28px;
  border-radius:50%;
  background:rgba(255,254,251,.92);
  display:grid;
  place-items:center;
  font-size:14px;
  color:rgba(0,17,56,.35);
  will-change:transform,color,background;
}
.nx-story__bookmark.is-saved{
  color:var(--nx-story-gold);
}
.nx-story__save-note{
  position:absolute;
  left:50%;
  bottom:8%;
  transform:translateX(-50%);
  margin:0;
  font-size:10px;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:rgba(0,17,56,.4);
  white-space:nowrap;
  opacity:0;
}

/* ========== CH 06 Wear ========== */
.nx-story__wear{
  z-index:18;
  opacity:0;
  will-change:transform,opacity;
}
.nx-story__wear-media{
  position:absolute;
  inset:0;
  border-radius:2px;
  overflow:hidden;
  background:#0a1028;
  will-change:transform,clip-path;
}
.nx-story__wear-media img,
.nx-story__wear-media video{
  width:100%;
  height:100%;
  object-fit:cover;
  /* Prefer face + outfit on desktop; avoid mid-torso crop */
  object-position:center 18%;
  transform:scale(1.02);
  will-change:transform;
}
@media (min-width:901px){
  .nx-story__wear-media img,
  .nx-story__wear-media video{
    object-position:center 12%;
    /* Slightly wider framing on large screens */
    object-fit:cover;
    width:100%;
    height:100%;
  }
}
.nx-story__wear-copy{
  position:absolute;
  z-index:4;
  left:clamp(12px,3vw,32px);
  bottom:clamp(20px,5vh,48px);
  max-width:min(28ch,78%);
  opacity:0;
  transform:translateY(16px);
  will-change:transform,opacity;
}
.nx-story__wear-panel{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:14px;
  padding:18px 20px 16px;
  border-radius:16px;
  background:rgba(0,8,28,.78);
  border:1px solid rgba(255,254,251,.18);
  box-shadow:0 18px 48px rgba(0,0,0,.4);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.nx-story__wear-copy h3,
.nx-story__wear-panel h3{
  margin:0;
  font-family:var(--nx-serif, "Cormorant Garamond", Georgia, serif);
  font-size:clamp(30px,4.2vw,48px);
  font-weight:500;
  line-height:1.08;
  color:#FFFEFB !important;
  text-shadow:none;
}
.nx-story__wear-copy .nx-btn,
.nx-story__wear-panel .nx-btn{
  pointer-events:auto;
  box-shadow:0 10px 28px rgba(0,0,0,.35);
}

/* Readable scrim over wear video (left + bottom) */
.nx-story__wear::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,8,28,.82) 0%, rgba(0,8,28,.5) 36%, rgba(0,8,28,.12) 58%, transparent 74%),
    linear-gradient(0deg, rgba(0,8,28,.78) 0%, rgba(0,8,28,.35) 32%, transparent 58%);
}

/* Veil for dark chapters over light stage */
.nx-story__veil{
  position:absolute;
  inset:0;
  z-index:17;
  background:rgba(0,8,28,.0);
  pointer-events:none;
  will-change:opacity,background;
}

@media (max-width:900px){
  .nx-story__track{ --nx-story-runway:820vh; }
  .nx-story__copy{
    max-width:min(34ch,88%);
    left:0; top:0;
  }
  .nx-story__headline{ font-size:clamp(26px,7vw,36px); }
  .nx-story__garment{ width:min(110px,28vw); }
  .nx-story__garment--hero{ width:min(150px,36vw); }
  .nx-story__progress{ display:none; }
  .nx-story__phone{ width:min(240px,62vw); }
  .nx-story__saves{ gap:8px; }
  .nx-story__save-card{ width:min(96px,24vw); }
  .nx-story__save-card--main{ width:min(128px,32vw); }
  .nx-story__wear-copy{ max-width:18ch; }
  .nx-story__wear-media img,
  .nx-story__wear-media video{
    object-position:center 22%;
  }
}

@media (prefers-reduced-motion:reduce){
  .nx-story__track{ height:auto !important; }
  .nx-story__pin{
    position:relative !important;
    top:auto !important;
    min-height:0 !important;
    overflow:visible !important;
    padding:48px 20px;
  }
  .nx-story__stage{
    height:auto;
    max-height:none;
    display:grid;
    gap:48px;
  }
  .nx-story__layer,
  .nx-story__line,
  .nx-story__bubble,
  .nx-story__ask,
  .nx-story__outfit,
  .nx-story__tryon,
  .nx-story__save,
  .nx-story__wear{
    position:relative !important;
    inset:auto !important;
    opacity:1 !important;
    transform:none !important;
    clip-path:none !important;
  }
  .nx-story__garment{
    position:relative !important;
    display:inline-block;
    margin:6px;
    transform:none !important;
  }
  .nx-story__progress{ display:none !important; }
}