.moments {
  --moment-orange: #f76b2a;
  --moment-orange-dark: #e34c14;
  --moment-inset: max(var(--gutter), calc((100% - 520px) / 2));
  display: grid;
  grid-template: "intro" auto "stage" minmax(0, 1fr) "actions" auto / minmax(0, 1fr);
  container-type: inline-size;
  height: max(100dvh, 640px);
  padding-block: calc(var(--header-height) + env(safe-area-inset-top) + 8px) max(12px, env(safe-area-inset-bottom));
  background: radial-gradient(ellipse at 66% 36%, var(--moment-orange), var(--moment-orange-dark) 120%);
}

.moments-intro {
  grid-area: intro;
  min-width: 0;
  margin-inline: var(--moment-inset);
}

.moments-title {
  width: max-content;
  font-size: clamp(36px, min(16.4cqw, 8.6svh), 90px);
  font-weight: 900;
  letter-spacing: -.044em;
  line-height: .96;
  transform: rotate(-3deg) scaleX(.87);
  transform-origin: left center;
}

.moments-title span { position: relative; white-space: nowrap; }
.moments-title span::after {
  position: absolute;
  inset: auto 0 -.05em 0;
  height: .047em;
  content: '';
  border-radius: 100% 50%;
  background: var(--paper);
  box-shadow: 0 .1em 0 var(--paper);
}

.moment-tabs {
  display: flex;
  justify-content: space-between;
  gap: 4px;
  margin-top: 16px;
}

@media (max-width: 899px) {
  body[data-scene="momentos"] .scene-nav { top: max(76px, 12%); }
  .moment-tabs { margin-right: 8px; }
  .moment-caption { min-height: clamp(24px, 7.8cqw, 40px); }
  .moments:not([data-active-moment="parche"]) .moment-caption-text { font-size: clamp(17px, 6cqw, 35px); }
}

.moment-tabs button {
  position: relative;
  min-height: 44px;
  padding-inline: 4px;
  font-size: clamp(12px, 3.8cqw, 17px);
  font-weight: 700;
  white-space: nowrap;
}

.moment-tabs button::after {
  position: absolute;
  inset: auto 0 3px;
  height: 3px;
  content: '';
  background: var(--ink);
  scale: 0 1;
  transition: scale .2s;
}

.moment-tabs [aria-selected="true"]::after { scale: 1; }

.moment-stage {
  position: relative;
  grid-area: stage;
  min-width: 0;
  container-type: size;
}

.moment-viewport {
  position: absolute;
  inset: 0;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
}

.moment-viewport::-webkit-scrollbar { display: none; }
.moment-viewport:focus-visible { outline-offset: -5px; }
.moment-slide { position: relative; flex: 0 0 100%; min-width: 0; scroll-snap-align: start; scroll-snap-stop: always; }

.moment-photo {
  position: absolute;
  inset: 0;
  clip-path: url(#moment-photo-curve);
}

.moment-photo img { height: 100%; object-fit: cover; object-position: center top; }
#moment-topping .moment-photo img { object-position: center 52%; }
#moment-parche .moment-photo img { object-position: center 18%; }

.moment-pouch {
  position: absolute;
  z-index: 1;
  right: 12%;
  bottom: clamp(16px, 5cqw, 24px);
  width: min(40cqw, 36cqh, 230px);
  rotate: 10deg;
  pointer-events: none;
}

.moments-actions {
  grid-area: actions;
  display: grid;
  gap: 4px;
  margin-inline: var(--moment-inset);
  color: var(--paper);
}

.moment-caption { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.moment-caption-text {
  font-size: clamp(24px, 7.8cqw, 40px);
  font-weight: 900;
  font-style: italic;
  font-synthesis: style;
  letter-spacing: -.035em;
  line-height: 1;
  text-transform: uppercase;
}

.moment-count { font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.moment-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.moment-controls .round-button {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  flex: 0 0 44px;
  border: 2px solid currentColor;
  border-radius: 50%;
}
.moment-progress { display: flex; flex: 1; justify-content: center; gap: 4px; }
.moment-progress button { display: grid; flex: 1; min-width: 20px; max-width: 36px; height: 44px; place-items: center; }
.moment-progress span { width: 100%; height: 7px; background: var(--cream-line); border-radius: 8px; transition: background .2s; }
.moment-progress [aria-current] span { background: var(--paper); }
.moment-hint { text-align: center; font-size: 16px; font-style: italic; font-synthesis: style; font-weight: 600; }
.moment-action { text-align: center; margin-top: 8px; }
.moment-action .button { min-width: min(210px, 100%); min-height: 48px; font-size: 21px; font-weight: 700; }
.moments .next-scene { right: 8px; bottom: max(12px, env(safe-area-inset-bottom)); color: var(--paper); }

@media (hover: hover) {
  .moment-controls .round-button:hover { color: var(--ink); background: var(--paper); border-color: var(--paper); }
  .moment-action .button:hover { background: var(--paper); }
}

@media (max-height: 720px) and (max-width: 899px) {
  .moment-tabs { margin-top: 8px; }
  .moment-hint { font-size: 14px; }
  .moment-action { margin-top: 4px; }
}

@media (min-width: 900px) {
  .moments {
    --moment-inset: clamp(32px, 5.5vw, 96px);
    --moment-column-end: clamp(18px, 2.8vw, 44px);
    grid-template: "intro stage" auto "actions stage" minmax(0, 1fr) / minmax(0, 46%) minmax(0, 54%);
    column-gap: 16px;
    padding-bottom: 24px;
  }
  .moments-intro {
    margin-block-start: clamp(16px, 3svh, 40px);
    margin-inline-end: var(--moment-column-end);
  }
  .moments-title { font-size: clamp(50px, min(6vw, 13svh), 104px); transform: rotate(-3deg) scaleX(.76); }
  .moment-tabs { margin-top: clamp(24px, 5svh, 44px); }
  .moment-tabs button { font-size: clamp(14px, 1.35vw, 19px); }
  .moment-stage { margin-block: 8px 0; }
  .moment-photo { clip-path: url(#moment-photo-curve-wide); }
  .moment-pouch {
    /* Overlap the orange foreground below the crest of #moment-photo-curve-wide. */
    inset: calc(85.2% + clamp(30px, 7.2cqh, 56px)) auto auto 83%;
    width: min(34cqw, 32cqh, 260px);
    translate: -80% -96.5%;
    transform-origin: 80% 96.5%;
  }
  .moment-pouch img { transform: none; }
  .moments-actions {
    align-self: start;
    gap: clamp(16px, 3svh, 30px);
    margin-block-start: clamp(26px, 5svh, 48px);
    margin-inline-end: var(--moment-column-end);
  }
  .moment-caption-text { font-size: clamp(26px, 3.3vw, 48px); }
  .moment-action { margin-top: 4px; }
  .moments .next-scene { right: 24px; }
}