/* Smooth-scroll foundation (Lenis) + continuous city-art scrubbing. */

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: clip; }
.lenis.lenis-smooth iframe { pointer-events: none; }

/* Keep the horizontal city shortcut strip native. */
.city-nav[data-lenis-prevent] { overscroll-behavior: contain; }

@media (prefers-reduced-motion: no-preference) {
  .city-cinematic .story-chapter-primary img {
    transform: translate3d(0, var(--art-y, 0px), 0) scale(1.045);
    transition: transform .16s linear;
    will-change: transform;
  }
  .city-cinematic .story-chapter-primary:hover img {
    transform: translate3d(0, var(--art-y, 0px), 0) scale(1.075);
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .city-cinematic .story-chapter-secondary img {
    transform: translate3d(0, var(--art-y, 0px), 0) scale(1.035);
    transition: transform .16s linear;
    will-change: transform;
  }
  .city-cinematic .story-chapter-secondary button:hover img {
    transform: translate3d(0, var(--art-y, 0px), 0) scale(1.065);
    transition: transform .6s cubic-bezier(.2,.7,.2,1);
  }
  .city-cinematic .story-gallery-art .story-frame img {
    transform: translate3d(0, var(--art-y, 0px), 0) scale(1.045);
    transition: transform .18s linear;
    will-change: transform;
  }
  .city-cinematic .story-gallery-art .story-frame button:hover img {
    transform: translate3d(0, var(--art-y, 0px), 0) scale(1.075);
    transition: transform .75s cubic-bezier(.2,.7,.2,1);
  }
}

/* Masked display type: the line reveals as the section enters, not once at load. */
.city-cinematic .story-chapter h2,
.city-cinematic .story-gallery-art .story-gallery-heading h2 {
  clip-path: inset(0 0 110% 0);
  transform: translate3d(0, 30px, 0);
  opacity: .28;
  transition:
    clip-path .8s cubic-bezier(.16, .84, .28, 1),
    transform .8s cubic-bezier(.16, .84, .28, 1),
    opacity .55s ease;
}
.city-cinematic .story-chapter.is-art-visible h2,
.city-cinematic .story-gallery-art.is-art-visible .story-gallery-heading h2 {
  clip-path: inset(0);
  transform: none;
  opacity: 1;
}

/* Stronger city hero scrub: image depth and copy fall away together. */
@media (min-width: 701px) and (prefers-reduced-motion: no-preference) {
  .city-story .story-hero .city-front-copy {
    transform: translateY(calc(-50% + var(--story-copy-y, 0px)));
    opacity: var(--story-copy-opacity, 1);
    will-change: transform, opacity;
  }
}

@media (prefers-reduced-motion: reduce) {
  .city-cinematic .story-chapter h2,
  .city-cinematic .story-gallery-art .story-gallery-heading h2 {
    clip-path: none;
    transform: none;
    opacity: 1;
  }
  .city-cinematic .story-chapter-primary img,
  .city-cinematic .story-chapter-secondary img,
  .city-cinematic .story-gallery-art .story-frame img {
    transform: none !important;
    transition: none !important;
  }
}

/* Follow the wheel immediately; keep a little smoothing only for hover states. */
@media (prefers-reduced-motion: no-preference) {
  .home-cinematic .story img {
    transition: transform .08s linear, filter .35s ease;
  }
  .home-cinematic .story:hover img {
    transition: transform .32s cubic-bezier(.2,.7,.2,1), filter .35s ease;
  }
  .city-story .story-hero-image > img {
    transition: opacity .45s ease, transform .1s linear;
  }
  .city-cinematic .story-chapter-primary img,
  .city-cinematic .story-chapter-secondary img,
  .city-cinematic .story-gallery-art .story-frame img {
    transition: transform .05s linear;
  }
  .city-cinematic .story-chapter-primary:hover img,
  .city-cinematic .story-chapter-secondary button:hover img,
  .city-cinematic .story-gallery-art .story-frame button:hover img {
    transition: transform .38s cubic-bezier(.2,.7,.2,1);
  }
}

/* Higher-specificity overrides: the city art file gives the main photo a
   1s hover transition, which makes scroll scrub feel delayed. */
@media (prefers-reduced-motion: no-preference) {
  html body.city-cinematic .city-story .story-chapter-primary.city-edit-photo img {
    transition: transform .05s linear;
  }
  html body.city-cinematic .city-story .story-chapter-primary.city-edit-photo:hover img {
    transition: transform .38s cubic-bezier(.2, .7, .2, 1);
  }
  html body.city-cinematic .city-story .story-chapter-secondary img {
    transition: transform .05s linear;
  }
  html body.city-cinematic .city-story .story-chapter-secondary button:hover img {
    transition: transform .38s cubic-bezier(.2, .7, .2, 1);
  }
  html body.city-cinematic .city-story .story-gallery-art .story-frame img {
    transition: transform .05s linear;
  }
  html body.city-cinematic .city-story .story-gallery-art .story-frame button:hover img {
    transition: transform .38s cubic-bezier(.2, .7, .2, 1);
  }
}

/* Scrub must be frame-locked. A transition on a scroll-linked transform
   adds a trailing animation that feels sticky when the wheel reverses. */
@media (prefers-reduced-motion: no-preference) {
  html body.home-cinematic .story img {
    transition: filter .3s ease;
  }
  html body.home-cinematic .story:hover img {
    transition: transform .28s cubic-bezier(.2, .7, .2, 1), filter .3s ease;
  }
  html body.city-cinematic .city-story .story-hero-image > img {
    transition: opacity .45s ease;
  }
  html body.city-cinematic .city-story .story-chapter-primary.city-edit-photo img,
  html body.city-cinematic .city-story .story-chapter-secondary img,
  html body.city-cinematic .city-story .story-gallery-art .story-frame img {
    transition: none;
  }
  html body.city-cinematic .city-story .story-chapter-primary.city-edit-photo:hover img {
    transition: transform .34s cubic-bezier(.2, .7, .2, 1);
  }
  html body.city-cinematic .city-story .story-chapter-secondary button:hover img {
    transition: transform .34s cubic-bezier(.2, .7, .2, 1);
  }
  html body.city-cinematic .city-story .story-gallery-art .story-frame button:hover img {
    transition: transform .34s cubic-bezier(.2, .7, .2, 1);
  }
}