/* Scroll-driven motion; original colours and normal document scrolling. */
.motion-gallery { background: var(--soft); padding: 70px 0; }
.motion-gallery-pin { width: min(1120px, calc(100% - 112px)); margin-inline: auto; }
.motion-gallery-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 24px; margin-bottom: 24px; }
.motion-gallery-heading p { margin: 0; color: var(--green); font-size: 1rem; }
.motion-gallery-heading > span { font: 400 .75rem/1.6 var(--display); letter-spacing: .1em; color: var(--muted); }
.motion-gallery-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.gallery-scene { margin: 0; min-width: 0; background: var(--paper); }
.gallery-scene img { width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; }
.gallery-scene:nth-child(1) img { object-position: 50% 45%; }
.gallery-scene:nth-child(2) img { object-position: 50% 50%; }
.gallery-scene:nth-child(3) img { object-position: 50% 48%; }
.gallery-scene figcaption { background: var(--paper); padding: 20px; }
.gallery-scene figcaption > span { display: block; font: 400 .8125rem/1.6 var(--display); letter-spacing: .09em; color: var(--muted); margin-bottom: 6px; }
.gallery-scene figcaption > strong { font: 500 1rem/1.8 var(--serif); color: var(--green); }
.motion-gallery-progress { display: none; }
.motion-photo { overflow: hidden; }

@media (prefers-reduced-motion: no-preference) {
  .motion-ready body { overflow-x: clip; }
  .motion-ready .motion-gallery { height: 240svh; padding: 0; position: relative; }
  .motion-ready .motion-gallery-pin { position: sticky; top: 84px; height: calc(100svh - 84px); display: flex; flex-direction: column; justify-content: center; padding-block: 24px; }
  .motion-ready .motion-gallery-heading { flex: 0 0 auto; }
  .motion-ready .motion-gallery-stage { position: relative; display: block; height: min(66svh, 650px); min-height: 240px; isolation: isolate; background: var(--paper); overflow: hidden; box-shadow: 0 26px 65px #103b3420; transform: perspective(1100px) translateY(var(--frame-y, 46px)) rotateX(var(--frame-tilt, 4deg)) scale(var(--frame-scale, .78)); border-radius: var(--frame-radius, 36px); }
  .motion-ready .gallery-scene { position: absolute; inset: 0; background: transparent; }
  .motion-ready .gallery-scene img { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 86px); aspect-ratio: auto; opacity: var(--scene-alpha, 0); transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 0) scale(var(--scene-scale, 1.08)); }
  .motion-ready .gallery-scene:first-child img { --scene-alpha: 1; }
  .motion-ready .gallery-scene figcaption { position: absolute; inset: auto 0 0; height: 86px; padding: 16px 30px; z-index: 5; opacity: 0; visibility: hidden; }
  .motion-ready .gallery-scene[data-active="true"] figcaption { opacity: 1; visibility: visible; animation: caption-in .45s ease-out both; }
  .motion-ready .gallery-scene figcaption > span { font-size: .75rem; margin-bottom: 2px; }
  .motion-ready .gallery-scene figcaption > strong { font-size: 1.25rem; }
  .motion-ready .motion-gallery-progress { display: block; height: 2px; width: 140px; margin: 28px auto 0; background: var(--line); flex: 0 0 auto; }
  .motion-ready .motion-gallery-progress span { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(var(--gallery-progress, 0)); }

  .motion-ready .hero-masthead { overflow: hidden; }
  .motion-ready .hero-wordmark { transform: translate3d(var(--word-x, 0px), 0, 0); opacity: var(--word-alpha, 1); }
  .motion-ready .hero-visual { animation: none; }
  .motion-ready .hero-photo { animation: window-in 1.4s cubic-bezier(.22,1,.36,1) both; }
  .motion-ready .hero-copy { animation: none; }
  .motion-ready .hero h1 { animation: hero-from-left 1.2s cubic-bezier(.16,1,.3,1) both; }
  .motion-ready .hero-message { animation: hero-from-left 1.15s .15s cubic-bezier(.16,1,.3,1) both; }
  .motion-ready .hero-actions { animation: hero-rise 1.1s .28s cubic-bezier(.16,1,.3,1) both; }
  .motion-ready .hero-features { animation: hero-rise 1.1s .4s cubic-bezier(.16,1,.3,1) both; }
  .motion-ready .anniversary { animation: badge-in 1.2s .2s both; }
  .motion-ready .motion-photo > img { transform: translate3d(var(--photo-x, 0px), var(--photo-y, 0px), 0) scale(1.12); }
  .motion-ready .motion-reveal {
    --entrance-x: 0px; --entrance-y: 55px; --entrance-scale: 1;
    --entrance-angle: 0deg; --rebound-x: 0px;
    opacity: 0;
    transform: translate3d(var(--entrance-x), var(--entrance-y), 0) scale(var(--entrance-scale));
    transition: opacity .8s ease, transform 1.15s cubic-bezier(.16,1,.3,1), box-shadow 1.15s ease;
    transition-delay: 0s;
  }
  .motion-ready .motion-reveal[data-motion="left"] { --entrance-x: -120px; --entrance-y: 36px; --entrance-angle: -2deg; --rebound-x: 12px; }
  .motion-ready .motion-reveal[data-motion="right"] { --entrance-x: 120px; --entrance-y: 36px; --entrance-angle: 2deg; --rebound-x: -12px; }
  .motion-ready .motion-reveal[data-motion="rise"] {
    --entrance-y: 100px; --entrance-scale: .9;
    box-shadow: 0 34px 48px #103b3426;
    transition-timing-function: ease, cubic-bezier(.16,1.1,.3,1), ease;
  }
  .motion-ready .motion-reveal.is-shown { opacity: 1; transform: translate3d(0,0,0) scale(1); box-shadow: 0 0 0 #103b3400; transition-delay: var(--entrance-delay, 0s); }
  .motion-ready .motion-beat.is-shown { animation: beat-in 1.4s var(--entrance-delay, 0s) both; }
  .motion-ready .motion-reveal[data-motion="rise"].is-shown { animation: lift-in 1.3s var(--entrance-delay, 0s) both; }
  .motion-ready .motion-reveal.is-leaving { opacity: .12; transform: translate3d(0,-38px,0) scale(.98); box-shadow: none; transition-duration: .5s; transition-delay: 0s; }
  .motion-ready .motion-reveal:focus-within,
  .motion-ready .motion-reveal:target { opacity: 1 !important; transform: none !important; }
  .motion-ready .chapter-heading { position: relative; border-top-color: transparent; }
  .motion-ready .chapter-heading:before { content: ""; position: absolute; inset: 0 0 auto; height: 1px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 1.35s .1s cubic-bezier(.16,1,.3,1); }
  .motion-ready .chapter-heading.is-shown:before { transform: scaleX(1); }
  .motion-ready .motion-photo:not(.hero-photo) { opacity: 0; transition: opacity .65s ease; }
  .motion-ready .motion-photo:not(.hero-photo).photo-seen { opacity: 1; animation: photo-open-left 1.6s cubic-bezier(.22,.8,.3,1) both; }
  .motion-ready .motion-photo[data-photo-side="right"]:not(.hero-photo).photo-seen { animation-name: photo-open-right; }
  .motion-ready .motion-photo.photo-seen > img { animation: picture-glide-left 1.5s cubic-bezier(.16,1,.3,1) backwards; }
  .motion-ready .motion-photo[data-photo-side="right"].photo-seen > img { animation-name: picture-glide-right; }
  .motion-ready .contact-section { position: relative; overflow: hidden; }
  .motion-ready .contact-section:before { content: ""; position: absolute; inset: 0; border: 1px solid #ffffff30; pointer-events: none; transform: scale(var(--contact-frame, .94)); }
  .motion-ready .button { position: relative; overflow: hidden; }
  .motion-ready .button:after { content: ""; position: absolute; top: 0; bottom: 0; width: 35%; left: -60%; background: #ffffff18; transform: skewX(-18deg); transition: left .5s ease; pointer-events: none; }
  .motion-ready .button:hover:after, .motion-ready .button:focus-visible:after { left: 125%; }
  .motion-ready .hydrogen-steps li.is-shown:before,
  .motion-ready .oxygen-steps li.is-shown .oxygen-num { animation: number-hop 1.45s var(--entrance-delay, 0s) both; transform-origin: top center; }
  .motion-ready details[open] > :not(summary) { animation: answer-in .5s cubic-bezier(.16,1,.3,1) both; }
  .motion-ready summary > span { display: inline-block; transition: transform .45s cubic-bezier(.2,1.4,.4,1); }
  .motion-ready details[open] > summary > span { transform: rotate(135deg); }
}
@keyframes window-in { from { clip-path: inset(12% 15% round 90px); opacity: .15; } to { clip-path: inset(0 round 0); opacity: 1; } }
@keyframes badge-in { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes caption-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes hero-from-left { from { opacity: 0; transform: translate3d(-110px,18px,0); } to { opacity: 1; transform: none; } }
@keyframes hero-rise { from { opacity: 0; transform: translate3d(0,65px,0) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes photo-open-left {
  0% { clip-path: inset(0 100% 0 0); transform: translate3d(0,70px,0) rotate(-2deg) scale(.94); }
  68% { clip-path: inset(0); transform: translate3d(0,-9px,0) rotate(.4deg) scale(1.01); }
  100% { clip-path: inset(0); transform: translate3d(0,0,0) rotate(0) scale(1); }
}
@keyframes photo-open-right {
  0% { clip-path: inset(0 0 0 100%); transform: translate3d(0,70px,0) rotate(2deg) scale(.94); }
  68% { clip-path: inset(0); transform: translate3d(0,-9px,0) rotate(-.4deg) scale(1.01); }
  100% { clip-path: inset(0); transform: translate3d(0,0,0) rotate(0) scale(1); }
}
@keyframes picture-glide-left { from { transform: translate3d(-9%,25px,0) scale(1.38); } to { transform: translate3d(var(--photo-x,0px),var(--photo-y,0px),0) scale(1.12); } }
@keyframes picture-glide-right { from { transform: translate3d(9%,25px,0) scale(1.38); } to { transform: translate3d(var(--photo-x,0px),var(--photo-y,0px),0) scale(1.12); } }
@keyframes beat-in {
  0% { opacity: 0; transform: translate3d(var(--entrance-x),var(--entrance-y),0) rotate(var(--entrance-angle)) scale(.94); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  58% { opacity: 1; transform: translate3d(var(--rebound-x),-12px,0) rotate(0) scale(1.015); animation-timing-function: ease-in-out; }
  78% { transform: translate3d(0,4px,0) rotate(0) scale(.998); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0) scale(1); }
}
@keyframes lift-in {
  0% { opacity: 0; transform: translate3d(0,var(--entrance-y),0) scale(var(--entrance-scale)); animation-timing-function: cubic-bezier(.16,1,.3,1); }
  60% { opacity: 1; transform: translate3d(0,-14px,0) scale(1.015); animation-timing-function: ease-in-out; }
  80% { transform: translate3d(0,4px,0) scale(.998); animation-timing-function: ease-out; }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes number-hop {
  0%, 22% { opacity: 0; transform: translateY(18px) scale(.65); }
  48% { opacity: 1; transform: translateY(-9px) scale(1.18); }
  70% { transform: translateY(3px) scale(.97); }
  86% { transform: translateY(-3px) scale(1.04); }
  100% { opacity: 1; transform: none; }
}
@keyframes answer-in { from { opacity: 0; transform: translate3d(18px,12px,0); } to { opacity: 1; transform: none; } }

@media (min-width: 981px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .story-image { position: sticky; top: 114px; }
}
@media (max-width: 720px) {
  .motion-gallery { padding-block: 44px; }
  .motion-gallery-pin { width: calc(100% - 40px); }
  .motion-gallery-stage { grid-template-columns: 1fr; gap: 22px; }
  .motion-gallery-heading { display: block; }
  .motion-gallery-heading p { font-size: .9375rem; margin-bottom: 5px; }
  .motion-gallery-heading > span { font-size: .75rem; }
}
@media (max-width: 720px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .motion-reveal[data-motion="left"] { --entrance-x: -72px; }
  .motion-ready .motion-reveal[data-motion="right"] { --entrance-x: 72px; }
  .motion-ready .motion-reveal[data-motion="rise"] { --entrance-y: 85px; --entrance-scale: .88; }
  .motion-ready .motion-gallery { height: 220svh; }
  .motion-ready .motion-gallery-pin { top: 76px; height: calc(100svh - 156px); padding-block: 14px; }
  .motion-ready .motion-gallery-stage { height: 56svh; min-height: 180px; border-radius: min(var(--frame-radius, 24px), 18px); }
  .motion-ready .motion-gallery-heading { margin-bottom: 16px; }
  .motion-ready .gallery-scene img { height: calc(100% - 88px); }
  .motion-ready .gallery-scene figcaption { height: 88px; padding: 14px 16px; }
  .motion-ready .gallery-scene figcaption > strong { font-size: 1rem; line-height: 1.65; }
  .motion-ready .motion-gallery-progress { margin-top: 18px; width: 100px; }
}
@media (max-height: 540px) and (prefers-reduced-motion: no-preference) {
  .motion-ready .motion-gallery-pin { height: calc(100svh - 84px); padding-block: 12px; }
  .motion-ready .motion-gallery-stage { min-height: 0; flex: 1 1 auto; height: auto; }
  .motion-ready .motion-gallery-heading, .motion-ready .motion-gallery-progress { display: none; }
  .motion-ready .gallery-scene figcaption { height: 66px; padding-block: 9px; }
  .motion-ready .gallery-scene img { height: calc(100% - 66px); }
  .motion-ready .gallery-scene figcaption > strong { font-size: 1rem; }
}
@media print {
  .motion-gallery { display: none !important; }
  .motion-reveal, .motion-photo > img, .hero-wordmark, .chapter-heading > p { opacity: 1 !important; transform: none !important; animation: none !important; }
  .hero-photo, .motion-photo { animation: none !important; clip-path: none !important; opacity: 1 !important; }
}