/* Navigation presets use the same chapters and native scroll container.
   No cloned slides, stacked videos or animation dependency. Madness Mode
   keeps its existing vertical layout while that visitor option is enabled. */
html:not(.madness-mode) .experience[data-navigation="horizontal"] .chapters {
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  touch-action: pan-x pinch-zoom;
  overscroll-behavior-x: contain;
}
html:not(.madness-mode) .experience[data-navigation="horizontal"] .chapter {
  flex: 0 0 100%;
  min-width: 0;
  touch-action: pan-x pinch-zoom;
}
html:not(.madness-mode) .experience[data-navigation="horizontal"] .chapter-body {
  touch-action: pan-x pan-y pinch-zoom;
}
html:not(.madness-mode) .experience[data-navigation="horizontal"] .chapters.watch-scrub-locked {
  overflow: hidden;
}
html:not(.madness-mode) .experience:is([data-navigation="scroll"], [data-navigation="reveal"]) .chapters {
  scroll-snap-type: none;
  scroll-behavior: auto;
}
html:not(.madness-mode) .experience:is([data-navigation="scroll"], [data-navigation="reveal"]) .chapter {
  scroll-snap-align: none;
  scroll-snap-stop: normal;
}
/* Animate only text; films remain unobstructed and never overlap each other. */
html:not(.madness-mode) .experience[data-navigation="reveal"] .chapter.is-current .chapter-body > :is(h1, h2) {
  animation: chapter-title-rise .65s cubic-bezier(.2,.8,.2,1) both;
}
@keyframes chapter-title-rise {
  from { transform: translateY(24px); opacity: .25; }
  to { transform: translateY(0); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .experience[data-navigation] .chapter-body > :is(h1, h2) { animation: none !important; }
}
/* Small visible arrows, comfortable invisible tap area, shared by every frame. */
body.experience .chapter-arrows {
  display: flex;
  left: 50%;
  right: auto;
  bottom: max(.75rem, env(safe-area-inset-bottom));
  transform: translateX(-50%);
  gap: 4px;
}
body.experience .chapter-arrow {
  width: 44px;
  height: 44px;
  min-height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #05050730;
  color: #ffffffc7;
  font-size: 17px;
  box-shadow: none;
  backdrop-filter: blur(4px);
}
body.experience .chapter-arrow:hover,
body.experience .chapter-arrow:focus-visible { background: #ffffff25; color: #fff; }
body.experience .chapter-arrow:active { transform: scale(.92); }
body.experience .chapter-arrow:disabled { opacity: .25; }
body.experience .scroll-cue { display: none; }
.experience .chapter.watch-scrubbing { touch-action: pinch-zoom; }
.experience .chapter.watch-scrubbing .chapter-body { visibility: hidden; pointer-events: none; }
.experience .chapter.watch-scrubbing .chapter-shade { background: linear-gradient(0deg, #050507d9, transparent 32%); }

/* Let the opening film lead; the copy follows in a half-second fade. */
html:not(.madness-mode) body.experience .chapters.has-copy-reveal .chapter:first-child:not(.is-copy-visible) .chapter-body {
  opacity: 0;
  pointer-events: none;
}
html:not(.madness-mode) body.experience .chapters.has-copy-reveal .chapter:first-child.is-copy-visible .chapter-body {
  animation: opening-copy .5s ease-out both;
}
@keyframes opening-copy { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  html:not(.madness-mode) body.experience .chapters.has-copy-reveal .chapter:first-child .chapter-body {
    opacity: 1;
    animation: none;
    pointer-events: auto;
  }
}

.experience #ch-08 .reel.is-auto-scrolling { scroll-snap-type: none; scroll-behavior: auto; }

/* Keep scrub titles on one line so the footage retains the space. */
body.experience .watch-scrub-controls { max-width: 38rem; }
body.experience .watch-scrub-controls .watch-scrub-title {
  font-size: clamp(1.25rem, 4.8vw, 2.75rem) !important;
  max-width: none !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: .4rem;
}
body.experience .watch-scrub-controls .watch-scrub-title em {
  display: inline;
  margin: 0;
  font-size: inherit;
  line-height: inherit;
}

/* Centre the showcase video's compact scrub overlay. */
body.experience #ch-02 .watch-scrub-controls,
body.experience #ch-02 .watch-scrub-controls :is(h2, label, p) {
  text-align: center;
}

/* Client names in personalised links may contain long unbroken words. */
body.experience #ch-01 h1 { overflow-wrap: anywhere; }

/* Only a 10% dip during section travel; video scrubbing at rest stays bright. */
@media (prefers-reduced-motion: no-preference) {
  body.experience .chapters { opacity: var(--section-fade, 1); }
}

/* One consistent text entrance on every chapter; the video stays stationary. */
@media (prefers-reduced-motion: no-preference) {
  body.experience .chapters.has-copy-reveal .chapter .chapter-body {
    opacity: 0;
    transform: translate3d(-32px, 0, 0);
    filter: none;
    animation: none !important;
    transition: opacity .5s ease-out, transform .6s cubic-bezier(.16, 1, .3, 1);
  }
  body.experience .chapters.has-copy-reveal .chapter.is-copy-visible .chapter-body {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
  body.experience .chapters.has-copy-reveal .chapter .chapter-body :is(h1, h2, .eyebrow, .chapter-intro) {
    animation: none !important;
    clip-path: none;
  }
  body.experience .chapter.is-copy-visible.watch-scrubbing .watch-scrub-controls:not([hidden]) {
    animation: copy-slide-left .6s cubic-bezier(.16, 1, .3, 1) both;
  }
}
@keyframes copy-slide-left {
  from { opacity: 0; transform: translate3d(-32px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}