/* Smoother scroll motion.
   The big moving images used to be recoloured and blurred by CSS filters on every frame, which the browser
   had to repaint while you scrolled. The same looks are now baked into the image files, so only transforms move. */
.art-ghost { filter: none; background-image: url('public/assets/tempo-hero-ghost.jpg'); }
.story-visual .crosswalk-image img { filter: none; }
.story-visual .crosswalk-image::before { filter: none; background-image: url('public/assets/tempo-crosswalk-pano-gray.jpg'); }

/* Desktop: the orange focus strip over the crosswalk is baked into the sharp layer, so no blend mode has to be
   recomputed each frame. The strip and the sharp window already move together. */
@media (min-width: 721px) {
  .story-visual .crosswalk-image::before { background-image: url('public/assets/tempo-crosswalk-pano-orange.jpg'); }
  .story-visual .crosswalk-image span { visibility: hidden; }
}
.hero-art { isolation: isolate; }

/* Crosswalk sharp window: moved with transforms (see script.js). The old clip-path layer is switched off once the window exists. */
.crosswalk-image.has-cw-win::before { display: none; }
.crosswalk-image { overflow: hidden; }
.cw-win { position: absolute; z-index: 1; top: 0; bottom: 0; left: 0; width: var(--focus-width); overflow: hidden; pointer-events: none; will-change: transform; }
.cw-win__img { position: absolute; top: 0; left: 0; height: 100%; background: url('public/assets/tempo-crosswalk.jpg') center/cover no-repeat; will-change: transform; }
.story-visual .cw-win__img { background-image: url('public/assets/tempo-crosswalk-pano-gray.jpg'); }
@media (min-width: 721px) { .story-visual .cw-win__img { background-image: url('public/assets/tempo-crosswalk-pano-orange.jpg'); } }
@media (prefers-reduced-motion: reduce) { .cw-win { display: none; } }
/* Permanent layers off: fading text no longer keeps its own graphics layer all the time */
[data-focus] { will-change: auto !important; }
.crosswalk-image::before { will-change: auto; }
.story-visual .cw-win__img { background-position: center 65%; background-size: cover; background-repeat: no-repeat; }

/* Phone team row: about two and a half people show, and it swipes freely (no forced snapping to a "perfect" spot) */
@media (max-width: 720px) {
  .team-track { scroll-snap-type: x proximity; touch-action: pan-x pan-y; scroll-padding-inline: 4vw; }
  .team-track .person { flex: 0 0 calc((100vw - 4vw - 2rem) / 2.5); width: calc((100vw - 4vw - 2rem) / 2.5); }
  .team-track .person h3 { font-size: .95rem; }
  .team-track .person p { font-size: .8rem; }
}