/* One continuous 3D track; typography belongs to each photograph. */
#moments { padding-block:clamp(34px,6vw,76px) 42px; scroll-margin-top:110px; overflow:clip; }
.moments-stage { position:relative; width:min(100%,1280px); height:clamp(410px,45vw,560px); margin:0 auto; perspective:1100px; touch-action:pan-y pinch-zoom; user-select:none; cursor:grab; }
.moments-stage:focus-visible { outline:2px solid #53847b; outline-offset:6px; }
.moments-stage.is-dragging { cursor:grabbing; }
.moments-card {
  --photo-corner: 24px;
  position: absolute;
  inset: 0;
  width: 68%;
  height: 100%;
  margin: auto;
  border-radius: var(--photo-corner);
  box-shadow: 0 22px 38px -14px #123b3b55;
  transform: translate3d(0, 0, -275px);
  backface-visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.moments-card[data-slot="0"] { transform: translate3d(0, 0, 0); opacity: 1; pointer-events: auto; }

/* Clip the flat photo surface before the outer card rotates in perspective. */
.moments-surface {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  clip-path: inset(0 round var(--photo-corner));
  background: #214943;
}
.moments-card .moments-surface img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  pointer-events: none;
  -webkit-user-drag: none;
}
.moments-card .moments-surface img:is([data-photo-id="76"], [data-photo-id="22"]) { object-position: center 30%; }
.moments-card .moments-surface img[data-photo-id="30"] { object-position: center 55%; }
.moments-surface::after {
  content: '';
  position: absolute;
  inset: 0;
  background: #092e31;
  opacity: var(--shade, 0);
  pointer-events: none;
}
.moments-card .moments-titling { position:absolute; inset:0; margin:0; border-radius:inherit; padding:clamp(22px,3.5vw,46px); display:flex; flex-direction:column; justify-content:flex-end; align-items:flex-start; background:linear-gradient(0deg,#052c2ec9, transparent 100px); color:#fffaf0; pointer-events:none; opacity:var(--text-opacity,1); }
#moments .moments-photo-caption { display:block; max-width:100%; font-size:clamp(13px,1.25vw,17px); line-height:1.45; color:#f8fbf2; letter-spacing:0; }
.moments-meta { width:min(68%,870px); margin:26px auto 0; display:grid; grid-template-columns:1fr auto; gap:18px; align-items:center; }
.moments-current { min-width:0; }
#moments-position { color:#4d6864; font-size:13px; letter-spacing:.12em; font-variant-numeric:tabular-nums; white-space:nowrap; }
.moments-progress { display:flex; gap:5px; margin-top:10px; max-width:190px; }
.moments-progress span { height:3px; flex:1; border-radius:3px; background:#d7ded7; }
.moments-progress span.is-active { background:#316d67; }
.moments-arrows { display:flex; gap:9px; }
.moments-arrows[hidden] { display:none; }
.moments-arrows button { display:grid; place-items:center; width:49px; height:49px; border:1px solid #9db5a9; border-radius:50%; background:transparent; color:#173f3c; font:inherit; font-size:24px; cursor:pointer; transition:background-color 180ms,color 180ms; }
.moments-arrows button:is(:hover,:focus-visible) { background:#173f3c; color:#fffaf0; }
#moments .moments-intro { grid-column:1/-1; max-width:61ch; margin:0; font-size:clamp(.91rem,1.7vw,1rem); }
.moments-accessible { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip-path:inset(50%)!important; white-space:nowrap!important; }
@media(max-width:760px) {
 .moments-stage { height:clamp(380px,112vw,510px); perspective:850px; }
 .moments-card { --photo-corner:19px; width:78%; }
 .moments-card .moments-titling { padding:22px 20px; }
 #moments .moments-photo-caption { font-size:12px; }
 .moments-meta { width:78%; margin-top:22px; gap:19px 12px; }
 .moments-arrows button { width:44px; height:44px; }
 .moments-progress { max-width:150px; }
}
@media(prefers-reduced-motion:reduce) { .moments-arrows button { transition:none; } }