/* Subtle depth for selected scenes. The source layout and reading flow stay intact. */
.scene-photo-window {
  display: block;
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.scene-photo-window > img { display: block; }
/* The training decoration belongs behind the new isolated photo frame. */
#anfm-training .anfm-training__image { isolation: isolate; }
#anfm-training .anfm-training__image > .scene-photo-window { z-index: 1; }
#anfm-cases .anfm-case__image > .scene-photo-window { height: 100%; }
@media (max-width: 900px) {
  #anfm-cases .anfm-case__image > .scene-photo-window { height: auto; }
}
html.scroll-scenes .scene-photo-window > img {
  transform: translate3d(0, clamp(calc(-1 * var(--scene-photo-limit, 100px)), var(--scene-photo-y, 0px), var(--scene-photo-limit, 100px)), 0) scale(var(--scene-photo-scale, 1.1));
  transform-origin: center;
}
html.scroll-scenes .scene-photo-window.scene-is-visible > img { will-change: transform; }

/* The homepage picture fills its existing stage on desktop and has its own
   clipped frame above the copy on phones. This also works on mobile browsers. */
#anfh-hero .scene-home-picture { --scene-photo-scale: 1.045; --scene-photo-limit: 12px; }
@media (min-width: 700px) {
  #anfh-hero .scene-home-picture { position: absolute; inset: 0; z-index: 0; }
}
@media (max-width: 699px) {
  #anfh-hero .scene-home-picture { position: relative; width: 100%; --scene-photo-limit: 4px; }
}

html.scroll-scenes .scene-section { position: relative; isolation: isolate; overflow: hidden; }
.scene-ambient {
  position: absolute;
  inset: -64px -24px;
  z-index: -1;
  pointer-events: none;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 700' fill='none' stroke='%2355bfb7' stroke-width='1.3'%3E%3Cpath d='M-80 580C220 550 180 150 550 200S950 660 1480 260M-100 330C180 410 360 40 710 90S1050 480 1500 120'/%3E%3Ccircle cx='550' cy='200' r='6'/%3E%3Ccircle cx='710' cy='90' r='5'/%3E%3Ccircle cx='1060' cy='462' r='6'/%3E%3C/svg%3E") center / cover no-repeat,
    radial-gradient(ellipse at 80% 45%, #55bfb718, transparent 60%);
  opacity: .16;
  transform: translate3d(0, var(--scene-ambient-y, 0px), 0) scale(1.04);
}
#anfm-hero .scene-ambient, #anfm-cta .scene-ambient { opacity: .25; }
html.scroll-scenes .scene-section.scene-is-visible > .scene-ambient { will-change: transform; }
html:not(.scroll-scenes) .scene-ambient { display: none; }

@media (prefers-reduced-motion: reduce) {
  html.scroll-scenes .scene-photo-window > img { transform: none; will-change: auto; }
  .scene-ambient { display: none !important; }
}
@media print {
  html.scroll-scenes .scene-photo-window > img { transform: none; }
  .scene-ambient { display: none; }
}