/* Let the snapshots peek into the thank-you screen as a cue to continue. */
.inside-intro { min-height: max(600px, calc(100svh - 60px), var(--garden-required-height, 0px)); }
.garden-base { min-height: max(600px, calc(100svh - 60px)); }

.photo-interlude { padding-top: 18px; }
.photo-shell { display: flow-root; width: 100%; margin-inline: auto; }
.photo-viewport {
  /* Extend the clipping area above the frames without moving the photo strip. */
  padding-top: 100px;
  margin-top: -100px;
  /* Keep the scroll container itself available to native touch browsing. */
  pointer-events: auto;
  touch-action: pan-x pan-y pinch-zoom;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}
.photo-viewport::-webkit-scrollbar { display: none; }
.photo-viewport:focus-visible { outline: 2px solid var(--flower-stem); outline-offset: 4px; }
.photo-track {
  pointer-events: auto;
  --photo-gap: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 26px;
  width: max-content;
  padding: 18px 10px 24px;
}
.photo-row { display: flex; align-items: center; gap: var(--photo-gap); width: max-content; }
.photo-item {
  --photo-scene-scale: .68;
  --photo-scene-fade: 180ms;
  --photo-scene-left: 50%;
  --photo-scene-ratio: 1.5;
  --photo-width: max(176px, 13.75vw);
  --photo-height: max(240px, 18.75vw);
  --photo-angle: -2deg;
  --photo-angle-size: 2deg;
  --photo-offset: 0px;
  /* Allow for the tilted frame so its visible edges keep the same gap. */
  --photo-overhang: calc((var(--photo-width) * (cos(var(--photo-angle-size)) - 1) + var(--photo-height) * sin(var(--photo-angle-size))) / 2);
  --photo-shift-x: calc(-1 * var(--photo-offset) * sin(var(--photo-angle)));
  flex: none;
  position: relative;
  z-index: 0;
  /* Keep the frame above its neighbors until the illustration has faded out. */
  transition: z-index 0s linear var(--photo-scene-fade);
  width: var(--photo-width);
  height: var(--photo-height);
  margin: 0;
  margin-left: calc(var(--photo-overhang) - var(--photo-shift-x));
  margin-right: calc(var(--photo-overhang) + var(--photo-shift-x));
  padding: 7px 7px 19px;
  background: #fff;
  box-shadow: 0 3px 10px rgb(45 37 25 / 12%);
  transform: rotate(var(--photo-angle)) translateY(var(--photo-offset));
  scroll-snap-align: center;
  cursor: default;
}
.photo-item:is([data-photo="03"], [data-photo="06"], [data-photo="10"], [data-photo="12"]) { --photo-angle: 2deg; --photo-offset: -4px; }
.photo-item:is([data-photo="05"], [data-photo="08"], [data-photo="11"], [data-photo="04"]) { --photo-angle: -1deg; --photo-angle-size: 1deg; --photo-offset: 4px; }
.photo-row:first-child > .photo-item:nth-child(even) { --photo-angle: var(--photo-angle-size); }
.photo-item[data-photo="05"], .photo-item[data-photo="07"] { --photo-width: max(296px, 23.125vw); }
.photo-item[data-photo="10"] { --photo-width: max(332px, 25.9375vw); }
.photo-item img { display: block; width: 100%; height: 100%; object-fit: cover; }
.photo-item[data-photo-scene="cycling"] {
  --photo-scene-art: url('/_immutable/9e3ba54641186e76/assets/photo-scenes/cycling.webp');
  --photo-scene-width: 200px;
  --photo-scene-contact: 7px;
}
.photo-item[data-photo-scene="sitting"] {
  --photo-scene-art: url('/_immutable/3b78fa6b4fa74a5e/assets/photo-scenes/sitting.webp');
  --photo-scene-width: 174px;
  --photo-scene-contact: 38px;
}
.photo-item[data-photo-scene="climbing"] {
  --photo-scene-art: url('/_immutable/bceaa0d9ded2e40c/assets/photo-scenes/climbing.webp');
  --photo-scene-width: 140px;
  --photo-scene-contact: 77px;
  --photo-scene-left: 100%;
  --photo-scene-ratio: 1;
}
.photo-item[data-photo-scene]::after {
  content: '';
  position: absolute;
  z-index: 1;
  left: var(--photo-scene-left);
  bottom: calc(100% - var(--photo-scene-contact) * var(--photo-scene-scale));
  width: calc(var(--photo-scene-width) * var(--photo-scene-scale));
  aspect-ratio: var(--photo-scene-ratio);
  background: var(--photo-scene-art) center / contain no-repeat;
  transform: translateX(-50%);
  translate: 0 4px;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--photo-scene-fade) ease, translate var(--photo-scene-fade) ease;
}
.photo-item:is([data-photo-hovered], [data-photo-tapped]) { z-index: 2; transition-delay: 0s; }
.photo-item:is([data-photo-hovered], [data-photo-tapped])::after { opacity: 1; translate: 0 0; }
.photo-item:focus-visible { outline: 2px solid var(--flower-stem); outline-offset: 4px; }

.photo-controls { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 2px; }
.photo-controls button {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #535d40;
  cursor: pointer;
}
.photo-controls .photo-arrow { position: relative; width: 28px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.photo-controls [data-photo-direction="previous"] .photo-arrow { transform: rotate(180deg); }
.photo-controls .photo-button-outline { position: absolute; inset: 2px; width: 44px; height: 44px; fill: #fafbf6; stroke: #ccd3bc; stroke-width: 1.15; }
.photo-controls button:active:not([aria-disabled="true"]) .photo-button-outline { fill: #edf1e3; stroke: #a6b78a; }
@media (hover: hover) and (pointer: fine) {
  .photo-controls button:hover:not([aria-disabled="true"]) .photo-button-outline { fill: #edf1e3; stroke: #a6b78a; }
}
.photo-controls button[aria-disabled="true"] { opacity: .27; cursor: default; }
.photo-controls button:focus-visible { outline: 2px solid var(--flower-stem); outline-offset: 3px; border-radius: 50%; }

/* Fit the controls into the existing space before the following section. */
.photo-interlude + .inside-section { padding-top: 94px; }

@media (max-width: 900px) {
  .photo-viewport { padding-top: 80px; margin-top: -80px; }
  .inside-intro { min-height: max(530px, calc(100svh - 56px), var(--garden-required-height, 0px)); }
  .garden-base { min-height: max(530px, calc(100svh - 56px)); }
  .photo-track { --photo-gap: 15px; gap: 20px; padding: 14px 7px 18px; }
  .photo-item { --photo-width: 144px; --photo-height: 198px; padding: 5px 5px 15px; }
  .photo-item[data-photo="05"], .photo-item[data-photo="07"] { --photo-width: 248px; }
  .photo-item[data-photo="10"] { --photo-width: 277px; }
  .photo-item[data-photo-scene="cycling"] { --photo-scene-width: 150px; --photo-scene-contact: 5px; }
  .photo-item[data-photo-scene="sitting"] { --photo-scene-width: 145px; --photo-scene-contact: 32px; }
  .photo-item[data-photo-scene="climbing"] { --photo-scene-width: 115px; --photo-scene-contact: 63px; }
  .photo-interlude + .inside-section { padding-top: 62px; }
}

@media (prefers-reduced-motion: reduce) {
  .photo-viewport { scroll-behavior: auto; }
  .photo-item { transition: none; }
  .photo-item[data-photo-scene]::after { transition: none; }
}