/* «Unsere Momente» – gallery design of the INMORA personal pages (docs/29). */
.scp-moments { --film: #17120f; --index-w: 11.5rem; }
.scp-moments main { padding-left: var(--index-w); }
.scp-moments .sc-footer { padding-left: calc(var(--index-w) + var(--sc-gutter)); }

/* Index: fixed, vertically centred on the left. */
.mo-index { position: fixed; left: var(--sc-gutter); top: 50%; transform: translateY(-50%); z-index: 50; width: calc(var(--index-w) - 1.5rem); }
.mo-index ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.mo-index a { position: relative; display: block; text-decoration: none; font-size: var(--sc-sm); color: var(--sc-ink-soft); padding-bottom: 0.2rem; }
.mo-index a span { font-family: var(--sc-mono); font-size: var(--sc-xs); }
.mo-index a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; background: var(--sc-accent); transform-origin: left; transform: scaleX(0.2); opacity: 0; transition: transform 260ms var(--sc-ease), opacity 260ms; }
.mo-index a.is-active { color: var(--sc-ink); font-weight: 700; }
.mo-index a.is-active span { color: var(--sc-accent); }
.mo-index a.is-active::after { transform: scaleX(1); opacity: 1; }

/* 1 Hero: wall text left, framed stage right, the couple breaks out of the frame. */
.mo-hero { position: relative; min-height: 100svh; display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.4fr); align-items: center; gap: 2rem; padding: 17svh var(--sc-gutter) 12svh; }
.mo-wall h1 { font-size: var(--sc-2xl); font-weight: 800; }
.mo-sub { margin-top: 0.8rem; font-size: var(--sc-lg); color: var(--sc-ink-soft); }
.mo-lede { margin-top: 1rem; max-width: 36ch; color: var(--sc-ink-soft); }
.mo-frame { position: relative; margin: 0; width: min(100%, 52vw, 104svh); justify-self: end; }
.mo-mat { background: #fff; padding: clamp(0.6rem, 1.2vw, 1.1rem); box-shadow: var(--sc-e3); aspect-ratio: 3 / 2; overflow: hidden; }
.mo-mat > * { width: 100%; height: 100%; object-fit: cover; }
.mo-stage { transform-origin: center; scale: 1.12; translate: calc(var(--mx, 0) * 5px) calc(var(--my, 0) * 3px); }
.mo-stage--empty { background: linear-gradient(135deg, color-mix(in srgb, var(--sc-accent) 18%, var(--sc-canvas)), var(--sc-canvas)); }
.mo-cutout {
  position: absolute;
  width: 74%;
  left: -17%;
  bottom: 4%;
  z-index: 3;
  pointer-events: none;
  translate: calc((var(--sc-p, 0.5) - 0.5) * -22vw + var(--mx, 0) * -10px) calc((var(--sc-p, 0.5) - 0.5) * -9vh + var(--my, 0) * -6px);
  rotate: calc((var(--sc-p, 0.5) - 0.5) * -7deg);
  filter: drop-shadow(0 26px 22px hsl(var(--sc-shadow) / 0.28));
}
.mo-plaque { position: absolute; z-index: 4; left: -3.5rem; bottom: -3.2rem; width: 19.5rem; margin: 0; padding: 1rem 1.1rem; background: var(--sc-surface); border-radius: 3px; box-shadow: var(--sc-e2); display: grid; gap: 0.35rem; }
.mo-plaque > div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 0.6rem; align-items: baseline; border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 9%, transparent); padding-bottom: 0.3rem; }
.mo-plaque > div:last-of-type { border-bottom: 0; }
.mo-plaque dt { font-family: var(--sc-mono); font-size: var(--sc-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sc-ink-soft); }
.mo-plaque dd { margin: 0; font-size: var(--sc-sm); font-weight: 600; transition: opacity 240ms; }
.mo-accent { color: var(--sc-accent); font-weight: 600; }
.mo-blank { border-bottom: 1px solid var(--sc-ink); min-height: 1.2em; }

/* 2 How it began. */
.mo-two { display: grid; grid-template-columns: 0.9fr 1.5fr; gap: 2rem; align-items: start; }
.mo-two h2 { font-size: var(--sc-xl); }
.mo-rows { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--sc-ink); }
.mo-rows li { display: grid; grid-template-columns: 7rem 1fr auto; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid color-mix(in srgb, var(--sc-ink) 14%, transparent); align-items: baseline; }
.mo-row-date { color: var(--sc-ink-soft); font-size: var(--sc-sm); text-align: right; }
.mo-dress { margin-top: 1.5rem; color: var(--sc-ink-soft); }

/* 3 Film strip under the magnifier. */
.mo-film-stage { background: var(--sc-canvas); }
.mo-scroller { position: absolute; left: 0; right: 0; top: 27svh; height: 40svh; overflow: visible; }
.mo-strip { position: relative; display: flex; gap: 2.2svh; height: 100%; width: max-content; padding: 3.4svh 6vw; background: var(--film); align-items: center; }
.mo-strip::before,
.mo-strip::after { content: ""; position: absolute; left: 0; right: 0; height: 1.9svh; background: radial-gradient(circle at 50% 50%, #ede7df 0 42%, transparent 46%) 0 0 / 3.2svh 1.9svh repeat-x; }
.mo-strip::before { top: 0.6svh; }
.mo-strip::after { bottom: 0.6svh; }
.mo-shot { margin: 0; height: 100%; display: grid; grid-template-rows: 1fr auto; gap: 0.4svh; }
.mo-shot img { height: 29.5svh; width: 44.3svh; object-fit: cover; }
.mo-shot figcaption { color: #cfc6bc; font-size: 0.7rem; }
.mo-card { width: 44.3svh; height: 29.5svh; display: grid; align-content: center; gap: 0.6rem; padding: 2rem; background: var(--sc-canvas); }
.mo-card h2 { font-size: var(--sc-xl); }
.mo-lens { position: absolute; z-index: 5; width: min(50svh, 40vw); aspect-ratio: 1; left: 50%; top: 47svh; transform: translate(-50%, -50%); border-radius: 50%; overflow: hidden; border: 6px solid #fff; box-shadow: 0 0 0 3px var(--sc-accent), var(--sc-e3); pointer-events: none; }
.mo-lens::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, transparent 55%, rgb(0 0 0 / 0.25) 100%), linear-gradient(var(--sc-accent), var(--sc-accent)) center / 1px 22px no-repeat, linear-gradient(var(--sc-accent), var(--sc-accent)) center / 22px 1px no-repeat; }
.mo-lens-rail { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.mo-lens-rail .mo-strip { padding-block: 3.4svh; }
.mo-plaque--live { left: var(--sc-gutter); bottom: 6svh; position: absolute; }
.mo-plaque--live.is-between dd { opacity: 0.35; }
.mo-stamp { justify-self: start; margin-top: 0.3rem; font-family: var(--sc-mono); font-size: var(--sc-xs); text-transform: uppercase; letter-spacing: 0.08em; color: var(--sc-accent-ink); background: var(--sc-accent); padding: 0.2rem 0.55rem; border-radius: 999px; opacity: 0; scale: 0.95; transition: opacity 240ms, scale 240ms var(--sc-ease); }
.mo-plaque--live.is-locked .mo-stamp { opacity: 1; scale: 1; }

/* 4 Grey becomes colour. */
.mo-color-stage { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; padding: 0 var(--sc-gutter); }
.mo-color-frame { position: relative; aspect-ratio: 3 / 2; background: #fff; padding: clamp(0.6rem, 1.2vw, 1.1rem); box-shadow: var(--sc-e3); }
.mo-color-frame img { position: absolute; inset: clamp(0.6rem, 1.2vw, 1.1rem); width: calc(100% - 2 * clamp(0.6rem, 1.2vw, 1.1rem)); height: calc(100% - 2 * clamp(0.6rem, 1.2vw, 1.1rem)); object-fit: cover; }
.mo-gray { filter: grayscale(1) contrast(0.92) brightness(1.06); }
.mo-status { display: grid; font-family: var(--sc-display); font-size: var(--sc-2xl); font-weight: 700; margin: 0.3rem 0 1.5rem; }
.mo-status > span { grid-area: 1 / 1; }
.mo-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.mo-steps li { border-top: 1px solid color-mix(in srgb, var(--sc-ink) 14%, transparent); padding-top: 0.6rem; }

/* 5 Numbers. */
.mo-numbers { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1.5rem; margin: 2rem 0 0; border-top: 2px solid var(--sc-ink); padding-top: 1.5rem; }
.mo-numbers dd { margin: 0.4rem 0 0; font-family: var(--sc-mono); font-weight: 600; font-size: var(--sc-3xl); color: var(--sc-accent); line-height: 1; }
#zahlen h2 { font-size: var(--sc-xl); }

/* 6 End. */
.mo-end-stage { display: grid; grid-template-columns: 1.3fr 1fr; gap: 3rem; align-items: center; padding: 0 var(--sc-gutter); }
.mo-frame--end { width: 100%; justify-self: stretch; }
.mo-frame--end .mo-stage { filter: saturate(0.8); scale: 1; translate: none; }
.mo-frame--end .mo-plaque { left: 1.5rem; bottom: -2rem; }
.mo-end-text h2 { font-size: var(--sc-2xl); }

@media (max-width: 900px) {
  .scp-moments main,
  .scp-moments .sc-footer { padding-left: 0; }
  .mo-index { left: 0; right: 0; top: auto; bottom: 0; transform: none; width: auto; background: color-mix(in srgb, var(--sc-canvas) 82%, transparent); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-top: 1px solid color-mix(in srgb, var(--sc-ink) 12%, transparent); padding: 0.4rem 0.8rem; }
  .mo-index ol { display: flex; overflow-x: auto; gap: 1rem; }
  .mo-index a { white-space: nowrap; }
  .mo-hero { grid-template-columns: 1fr; padding-top: 14svh; }
  .mo-frame { width: 100%; margin-top: 2rem; }
  .mo-cutout { width: 94%; left: -6%; }
  .mo-plaque { left: 0.5rem; width: min(19.5rem, 85vw); }
  .mo-two,
  .mo-color-stage,
  .mo-end-stage { grid-template-columns: 1fr; gap: 1.5rem; align-content: center; }
  .mo-rows li { grid-template-columns: 5.5rem 1fr; }
  .mo-rows .mo-row-date { grid-column: 2; text-align: left; }
  .mo-shot img,
  .mo-card { width: 33.3svh; height: 22.2svh; }
  .mo-lens { top: 37svh; width: 58vw; }
  .mo-scroller { top: 22svh; height: 30svh; }
  .scp-moments .sc-footer { padding-bottom: 4rem; }
}

/* Reduced motion: the cut-out stands, the strip scrolls natively with snap; the lens still reads. */
html.sc-reduced .mo-cutout { translate: none; rotate: none; }
html.sc-reduced .mo-film { height: auto !important; }
html.sc-reduced .mo-film-stage { position: relative; height: 80svh; }
html.sc-reduced .mo-scroller { overflow-x: auto; scroll-snap-type: x mandatory; }
html.sc-reduced .mo-shot,
html.sc-reduced .mo-card { scroll-snap-align: center; }
html.sc-reduced .mo-lens { display: none; }