/* Each storybook spread has its own entrance; scroll depth stays on decorative layers. */
.motion-line { display: block; overflow: clip; padding-block: .09em; margin-block: -.09em; }
.motion-line-ink { display: block; }
.scroll-motion [data-motion]:not(.motion-entered) { opacity: 0; }
.scroll-motion [data-motion]:focus-within { opacity: 1; }
.scroll-motion .calendar-page { transform-origin: 100% 50%; }
.scroll-motion .destination-page { transform-origin: 0 50%; }
.scroll-motion .memory-frame { transform-origin: 50% 0; }
.scroll-motion .safari-rsvp { overflow: clip; }
.safari-scroll-progress {
  display: none;
  position: fixed;
  inset: 0 0 auto;
  height: 3px;
  z-index: 40;
  pointer-events: none;
  background: #63734e12;
}
.scroll-motion .safari-scroll-progress { display: block; }
.safari-scroll-progress > span { display: block; height: 100%; background: var(--ochre); transform: scaleX(var(--journey-progress, 0)); transform-origin: left; }
.intro-pending .safari-scroll-progress { visibility: hidden; }
.scroll-motion .hero-art { translate: 0 var(--hero-depth, 0px); }
.scroll-motion .hero-canopy { translate: 0 var(--canopy-depth, 0px); }
.storybook-ribbon { overflow: hidden; }
.scroll-motion .storybook-ribbon > span:nth-of-type(odd) { translate: var(--ribbon-drift, 0px) 0; }
.scroll-motion .storybook-ribbon > span:nth-of-type(even) { translate: calc(var(--ribbon-drift, 0px) * -1) 0; }
.scroll-motion .explorer-portrait figure { translate: 0 var(--scroll-drift, 0px); }
.scroll-motion .wandering-trail { translate: calc(var(--scroll-drift, 0px) * .7) 0; }
.scroll-motion .destination-foliage { translate: 0 var(--scroll-drift, 0px); rotate: var(--scroll-tilt, 0deg); }
.scroll-motion .memory-frame { --photo-angle: -5deg; transform: rotate(calc(var(--photo-angle) + var(--scroll-tilt, 0deg))); }
.scroll-motion .memory-frame-center { --photo-angle: 2deg; }
.scroll-motion .memory-frame-right { --photo-angle: 5deg; }
.scroll-motion .photo-clothesline { translate: 0 calc(var(--scroll-drift, 0px) * .3); }
.scroll-motion .rsvp-mascot img { translate: 0 calc(var(--scroll-drift, 0px) * .5); }
.scroll-motion .gift-illustration img { translate: 0 var(--scroll-drift, 0px); rotate: var(--scroll-tilt, 0deg); }
.scroll-motion .jungle-finale-art { inset: -40px -15px; translate: 0 var(--scroll-drift, 0px); }
.scroll-motion .scene-in-view .one-year-seal > strong,
.scroll-motion .scene-in-view .postcard-heading > svg,
.scroll-motion .scene-in-view .finale-signoff > svg { animation: birthday-heartbeat 3.8s ease-in-out infinite; }
.scroll-motion.motion-suspended *, .intro-pending.scroll-motion .scene-in-view * { animation-play-state: paused; }
@keyframes birthday-heartbeat {
  0%, 72%, 100% { scale: 1; }
  80% { scale: 1.12; }
  88% { scale: 1; }
  94% { scale: 1.06; }
}
@media (max-width: 760px) {
  .scroll-motion .memory-frame { --photo-angle: -3deg; }
  .scroll-motion .memory-frame-center { --photo-angle: 2.5deg; }
  .scroll-motion .memory-frame-right { --photo-angle: -2deg; }
  .scroll-motion .calendar-page { transform-origin: 50% 100%; }
  .scroll-motion .destination-page { transform-origin: 50% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .safari-scroll-progress { display: none !important; }
  [data-motion] { opacity: 1 !important; }
  .scroll-motion .hero-art, .scroll-motion .hero-canopy,
  .scroll-motion .storybook-ribbon > span, .scroll-motion .explorer-portrait figure,
  .scroll-motion .wandering-trail, .scroll-motion .destination-foliage,
  .scroll-motion .photo-clothesline, .scroll-motion .rsvp-mascot img,
  .scroll-motion .gift-illustration img, .scroll-motion .jungle-finale-art { translate: none; rotate: none; }
  .scroll-motion .memory-frame { transform: rotate(var(--photo-angle)); }
}