/* Momenten (spec §7.8): statisch of gestapeld en gepind. */
.c-moments.c-section--deferred { contain-intrinsic-size: auto 2400px; }
.c-moments { padding-block: 0; } /* full-bleed pin (F4) */
.c-moments__head { margin-block-end: var(--space-lg); text-align: center; }
.c-moments__head, .c-moments__pad { padding-block-start: var(--section-pad-block); }
.c-moment { display: grid; grid-template-areas: 'm'; justify-items: center; padding: var(--space-xl) var(--gutter); }
.c-moment__frame { position: relative; width: min(100%, 70rem); --ratio: 16 / 9; }
.c-moment__img { width: 100%; height: 100%; object-fit: cover; }
.c-moment__img--mobile { display: none; }
/* Task Q: de regel draagt haar eigen donkere basis over de tekst, uitdovend, dus zonder naad. */
.c-moment__frame, .c-moment__text { grid-area: m; }
.c-moment__frame::after { content: ''; position: absolute; inset: 0; background: linear-gradient(#0000 45%, #171717bf); }
.c-moment__text { position: relative; width: min(100%, 70rem); align-self: end; padding: var(--space-lg) var(--space-md); color: var(--calma-ivory);
  background: linear-gradient(#0000, #171717b3 var(--space-lg), #171717b3 calc(100% - var(--space-lg)), #0000); }
.c-moment__line { font-family: var(--font-display); font-size: var(--text-3xl); line-height: 1.05; }
@media (prefers-reduced-motion: no-preference) {
  .supports-scroll-timeline:not(.motion-off):not(.scroll-driven-off) {
    & .c-moments__scroll { height: calc(var(--count, 3) * 100svh); view-timeline-name: --moments; }
    & .c-moments__sticky { position: sticky; inset-block-start: var(--header-h, 4.5rem); height: calc(100svh - var(--header-h, 4.5rem)); overflow: clip; }
    & .c-moment { position: absolute; inset: 0; align-content: center; animation: calma-moment linear both; animation-timeline: --moments; animation-range: contain var(--from) contain var(--to); }
    & .c-moment:first-child { animation: none; }
    & .c-moment__text .u-mask-line > span { transform: none; animation: calma-moment-line linear both; animation-timeline: --moments; animation-range: contain calc(var(--from) + var(--i) * 3%) contain calc(var(--to) + 6% + var(--i) * 3%); }
    & .c-moment:first-child .u-mask-line > span { animation-range: entry calc(40% + var(--i) * 15%) contain calc(var(--i) * 4%); }
    & .c-moment__text { position: absolute; inset-inline: 0; inset-block-end: 12svh; margin-inline: auto; padding-inline: var(--gutter); }
    /* Mobiel binnen dezelfde poort (I3): erbuiten gaf dit 200 svh leegte. */
    @media (max-width: 749px) {
      & .c-moments__scroll { height: calc(var(--count-m, 2) * 100svh); }
      & .c-moment__text { inset-block-end: 6svh; }
    }
  }
}
@keyframes calma-moment { from { opacity: 0; transform: scale(1.06); } }
@keyframes calma-moment-line { from { transform: translateY(110%); } }
@media (max-width: 749px) {
  .c-moment__frame { --ratio: 4 / 5; }
  .c-moment__img--has-mobile { display: none; }
  .c-moment__img--mobile { display: block; }
  .c-moment:nth-child(3) { display: none; }
  .c-moment { --from: var(--from-m) !important; --to: var(--to-m) !important; }
}