/* Keep native sticky text out of clipped ancestor layers in WebKit. Cropping
   belongs to the photographic artwork, which contains no sticky descendants. */
:where(html.archive-webkit-motion) .archive-page,
:where(html.archive-webkit-motion) .has-scene-motion .developing-section,
:where(html.archive-webkit-motion) .has-scene-motion .boats-section { overflow:visible; }
:where(html.archive-webkit-motion) .has-scene-motion .developing-art { overflow:clip; }
:where(html.archive-webkit-motion) .has-scene-motion .boats-water { width:min(1200px,100%); margin-inline:auto; }
:where(html.archive-webkit-motion) .has-scene-motion .developing-captions p,
:where(html.archive-webkit-motion) .has-scene-motion .memory-whispers p,
:where(html.archive-webkit-motion) .has-scene-motion .boat-thought,
:where(html.archive-webkit-motion) .has-scene-motion .developing-section.is-developing .developing-captions p,
:where(html.archive-webkit-motion) .has-scene-motion .developing-section.is-developing .memory-whispers p {
  transform:none; transition-property:opacity,visibility;
}
:where(html.archive-webkit-motion) .has-motion .reveal,
:where(html.archive-webkit-motion) .has-motion .reveal:not(.in-view) { translate:none; transition-property:opacity; }
:where(html.archive-webkit-motion.archive-scroll-active) .is-writing>.ink-pen::before,
:where(html.archive-webkit-motion.archive-scroll-active) .is-writing>.ink-pen::after,
:where(html.archive-webkit-motion.archive-scroll-active) .is-writing>.ink-pen i { animation-play-state:paused; }
/* WebKit can flatten the masked/filtered print and expose its mirrored back.
   The shared object animation manager swaps these faces at the turn's midpoint
   and pauses that swap together with the turn when the scene is not visible. */
:where(html.archive-webkit-motion) .has-scene-motion .developing-section:not(.has-long-copy) .print-face { visibility:hidden; transition:none; }
:where(html.archive-webkit-motion) .has-scene-motion .developing-section:not(.has-long-copy) .develop-print.is-current:not(.is-turned-over) .print-front,
:where(html.archive-webkit-motion) .has-scene-motion .developing-section:not(.has-long-copy) .develop-print.is-current.is-turned-over .print-back { visibility:visible; }
@media(max-width:600px) {
  :where(html.archive-webkit-motion) .has-scene-motion .boat-wrap { width:34.22%; }
}

/* iOS Safari also gets the same correction before/without browser detection. */
@supports (-webkit-touch-callout:none) {
  .archive-page,
  .has-scene-motion .developing-section,
  .has-scene-motion .boats-section { overflow:visible; }
  .has-scene-motion .developing-art { overflow:clip; }
  .has-scene-motion .boats-water { width:min(1200px,100%); margin-inline:auto; }
  .has-scene-motion .developing-captions p,
  .has-scene-motion .memory-whispers p,
  .has-scene-motion .boat-thought,
  .has-scene-motion .developing-section.is-developing .developing-captions p,
  .has-scene-motion .developing-section.is-developing .memory-whispers p {
    transform:none; transition-property:opacity,visibility;
  }
  .has-motion .reveal,
  .has-motion .reveal:not(.in-view) { translate:none; transition-property:opacity; }
  html.archive-scroll-active .is-writing>.ink-pen::before,
  html.archive-scroll-active .is-writing>.ink-pen::after,
  html.archive-scroll-active .is-writing>.ink-pen i { animation-play-state:paused; }
  .has-scene-motion .developing-section:not(.has-long-copy) .print-face { visibility:hidden; transition:none; }
  .has-scene-motion .developing-section:not(.has-long-copy) .develop-print.is-current:not(.is-turned-over) .print-front,
  .has-scene-motion .developing-section:not(.has-long-copy) .develop-print.is-current.is-turned-over .print-back { visibility:visible; }
  @media(max-width:600px) {
    .has-scene-motion .boat-wrap { width:34.22%; }
  }
}