/* ============================================================
   THE NIGHT ATELIER — scroll-driven cinematic experience.
   A fixed stage of layered "shots"; scroll scrubs a damped
   progress value that crossfades, pans and reveals each act.
   ============================================================ */

html, body { background: #060505; }
body.night { overflow-x: clip; }

/* The scrollable track sets the page length; the stage is the fixed viewport. */
.na-track { position: relative; z-index: 1; pointer-events: none; }
.na-stage { position: fixed; inset: 0; overflow: hidden; background: #060505; }

/* ---------- Shots ---------- */
.shot { position: absolute; inset: 0; opacity: 0; visibility: hidden; }
.shot__plate { position: absolute; inset: -6%; will-change: transform; }
.shot__plate img {
  width: 100%; height: 100%; object-fit: cover;
  filter: brightness(.8) saturate(.92);
}
/* cinematic scrims: darker edges, readable left column */
.shot__plate::after {
  content: ""; position: absolute; inset: 0;
  background:
    linear-gradient(90deg, rgba(6,5,5,.9) 0%, rgba(6,5,5,.45) 42%, rgba(6,5,5,.18) 75%),
    linear-gradient(0deg, rgba(6,5,5,.88) 0%, rgba(6,5,5,0) 45%),
    linear-gradient(180deg, rgba(6,5,5,.6) 0%, rgba(6,5,5,0) 22%);
}

/* optional foreground strip pinned to the bottom, moving at its own rate */
.shot__fg {
  position: absolute; left: -4%; right: -4%; bottom: -6%; height: 44%;
  will-change: transform; opacity: .8;
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
  mask-image: linear-gradient(180deg, transparent 0%, #000 55%);
}
.shot__fg img { width: 100%; height: 100%; object-fit: cover; filter: brightness(.55) saturate(.85); }

/* ---------- Copy ---------- */
.shot__copy {
  position: absolute; z-index: 3;
  left: clamp(1.4rem, 6vw, 7rem); bottom: clamp(4.5rem, 16vh, 9.5rem);
  max-width: 30ch;
}
.na-eyebrow {
  font-family: var(--ff-sans); font-weight: 400; font-size: .68rem;
  text-transform: uppercase; letter-spacing: .42em; color: var(--gold);
  display: inline-flex; align-items: center; gap: .9rem; margin-bottom: 1.3rem;
}
.na-eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7; }
.shot__title {
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(2.6rem, 6.4vw, 5.6rem); line-height: 1.02; color: var(--bone);
  margin: 0 0 1.2rem;
}
.shot__title .w { display: inline-block; opacity: 0; transform: translateY(.55em); filter: blur(5px); }
.shot__title .italic { color: var(--gold-2); font-style: italic; }
.shot__body {
  font-family: var(--ff-sans); font-weight: 300; font-size: clamp(.92rem, 1.1vw, 1.05rem);
  line-height: 1.7; color: var(--bone-2); max-width: 36ch;
  opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease), transform .9s var(--ease);
}
.shot.is-read .shot__body { opacity: 1; transform: none; }

/* big ghost numeral behind the copy */
.shot__no {
  position: absolute; z-index: 2; right: clamp(1rem, 5vw, 6rem); bottom: clamp(2rem, 8vh, 5rem);
  font-family: var(--ff-display); font-weight: 300;
  font-size: clamp(7rem, 22vw, 19rem); line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(201, 169, 106, .16);
  user-select: none; pointer-events: none;
}

/* hero + finale variants */
.shot--hero .shot__copy { bottom: auto; top: 50%; transform: translateY(-50%); }
.na-cue {
  position: absolute; left: 50%; bottom: 2.2rem; transform: translateX(-50%); z-index: 4;
  font-size: .62rem; letter-spacing: .4em; text-transform: uppercase; color: var(--bone-dim);
  display: flex; flex-direction: column; align-items: center; gap: .9rem;
}
.na-cue::after {
  content: ""; width: 1px; height: 52px;
  background: linear-gradient(var(--gold), transparent);
  animation: na-cue 2.4s var(--ease) infinite;
}
@keyframes na-cue {
  0% { transform: scaleY(0); transform-origin: top }
  45% { transform: scaleY(1); transform-origin: top }
  55% { transform: scaleY(1); transform-origin: bottom }
  100% { transform: scaleY(0); transform-origin: bottom }
}

.shot--finale { text-align: center; }
.shot--finale .shot__copy {
  left: 50%; right: auto; bottom: auto; top: 50%;
  transform: translate(-50%, -50%); max-width: 44ch;
}
.shot--finale .na-eyebrow { justify-content: center; }
.shot--finale .na-eyebrow::after { content: ""; width: 26px; height: 1px; background: var(--gold); opacity: .7; }
.shot--finale .shot__title { font-size: clamp(2.4rem, 5.6vw, 4.6rem); }
.shot--finale .shot__actions { margin-top: 2.2rem; display: flex; flex-direction: column; align-items: center; gap: 1.4rem;
  opacity: 0; transform: translateY(14px); transition: opacity .9s var(--ease) .15s, transform .9s var(--ease) .15s; }
.shot--finale.is-read .shot__actions { opacity: 1; transform: none; }

/* ---------- Chrome: top bar + chapter rail ---------- */
.na-bar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 60;
  display: flex; justify-content: space-between; align-items: center;
  padding: 1.4rem clamp(1.4rem, 4vw, 3rem);
}
.na-bar__brand { font-family: var(--ff-display); font-size: 1.3rem; letter-spacing: .32em; color: var(--bone); padding-left: .32em; }
.na-bar__brand b { font-weight: 500; }
.na-bar__exit {
  font-family: var(--ff-sans); font-size: .66rem; letter-spacing: .26em; text-transform: uppercase;
  color: var(--bone-2); transition: color .4s var(--ease);
}
.na-bar__exit:hover { color: var(--bone); }

.na-rail {
  position: fixed; right: clamp(1rem, 3vw, 2.4rem); top: 50%; transform: translateY(-50%);
  z-index: 60; display: flex; flex-direction: column; gap: 1.1rem;
}
.na-rail button {
  background: none; border: 0; cursor: pointer; padding: .15rem;
  font-family: var(--ff-display); font-size: .82rem; letter-spacing: .14em;
  color: var(--bone-dim); transition: color .4s var(--ease), transform .4s var(--ease);
}
.na-rail button.on { color: var(--gold); transform: scale(1.25); }
.na-rail button:focus-visible { outline: 1px solid var(--gold-2); outline-offset: 3px; }

/* dust atmosphere canvas */
.na-dust { position: absolute; inset: 0; z-index: 2; pointer-events: none; mix-blend-mode: screen; }

/* ---------- Mobile ---------- */
@media (max-width: 720px) {
  .na-bar__exit { letter-spacing: .14em; font-size: .6rem; }
  .shot__copy { left: 1.4rem; right: 1.4rem; bottom: 5.5rem; max-width: none; }
  .shot__no { right: .6rem; bottom: 6.5rem; font-size: 8rem; opacity: .8; }
  .shot__fg { display: none; }
  .na-rail { right: .7rem; gap: .85rem; }
  .na-rail button { font-size: .7rem; }
}

/* ---------- Reduced motion: everything readable, nothing springy ---------- */
@media (prefers-reduced-motion: reduce) {
  .shot__title .w { opacity: 1; transform: none; filter: none; }
  .shot__body, .shot--finale .shot__actions { opacity: 1; transform: none; transition: none; }
  .na-cue::after { animation: none; }
}