/* The By moment screen as the film plays it (app-review-moment-face.js; the approved mock moment_transitions): each
   moment's face is its moving preview with one photos button, and between two moments that play the seam the film draws. */

.moment-face { position: relative; align-self: center; width: 100%; min-width: 0; overflow: hidden; aspect-ratio: 16 / 9; border-radius: 14px; background: var(--bg-2, #0c0c12); }
/* A portrait film's clip is cropped to a shorter face: two faces fit a phone's screen, as in a landscape film. An explicit width
   keeps it off 0 by 0 where the auto margins of a flex column would collapse a width-less item. */
.moment-face[data-shape="portrait"] { aspect-ratio: 4 / 5; width: 84%; }
/* On a wide screen a face at the full column is over a screen tall (a 4:5 face at 1058 px is 1322 px): cap it so several moments show at once. */
@media (min-width: 700px) {
  .moment-face { max-width: 520px; }
  .moment-face[data-shape="portrait"] { max-width: 300px; width: 100%; }
}
.moment-face-media { position: absolute; inset: 0; }
.moment-face-poster, .moment-face-media > video, .moment-face-media > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* A face with no clip loaded is a still photograph and nothing moves on it: no ring, no drift, no pulse. Motion starts when a clip
   has loaded (`is-ready`) and plays. */

/* The photos button: three prints (closed); the prints under a bar to close them (open) -- two states, two shapes. */
.moment-photos-btn { position: absolute; inset-block-end: 8px; inset-inline-end: 8px; width: 48px; height: 44px; display: grid;
  place-items: center; border: 0; border-radius: 12px; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; }
.moment-photos-btn[aria-expanded="true"] { background: var(--gold); color: var(--on-accent); }
.moment-photos-count { position: absolute; inset-block-start: -7px; inset-inline-end: -7px; min-width: 20px; height: 20px; padding: 0 5px; box-sizing: border-box; border-radius: 10px; background: var(--ink); color: var(--surface-2); font-size: .72rem; font-weight: 700; line-height: 20px; text-align: center; font-variant-numeric: tabular-nums; pointer-events: none; }
.moment-photos-btn .moment-photos-open, .moment-photos-btn[aria-expanded="true"] .moment-photos-closed { display: none; }
.moment-photos-btn[aria-expanded="true"] .moment-photos-open { display: block; }
.moment-strip[hidden] { display: none; }

/* A moment the film leaves out is a thin band: the moments that play, and the seams between them, stay close together. */
.moment-row.is-length-out .moment-face, .moment-row[data-state="skip"] .moment-face { aspect-ratio: auto; height: 64px; }
.moment-row.is-length-out .moment-face-poster, .moment-row[data-state="skip"] .moment-face-poster { opacity: .3; filter: grayscale(1); }
.moment-row.is-length-out .moment-face-media, .moment-row[data-state="skip"] .moment-face-media { visibility: hidden; }

/* The seam: its kind in its own shape. One a tap plays wears a button's pill; a day card or a graphic is named only. */
.moment-seam { display: flex; flex-direction: column; align-items: center; min-width: 0; margin: 0 0 4px; }
.moment-seam::before { content: ""; width: 2px; height: 10px; background: var(--line-strong); }
.moment-seam-btn, .moment-seam-mark { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; min-height: 44px;
  padding-block: 4px; padding-inline: 10px 14px; font: inherit; font-size: .85rem; font-weight: 600; color: var(--ink); }
.moment-seam-btn { border: 1.5px solid var(--line-strong); border-radius: 999px; background: var(--surface); cursor: pointer; }
.moment-seam-btn[aria-expanded="true"] { border-color: var(--gold); }
.moment-seam-mark { color: var(--ink-dim); }
.moment-seam-btn > span, .moment-seam-mark > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.moment-seam svg { flex: none; color: var(--gold); }
.moment-seam.is-changed .moment-seam-btn, .moment-seam.is-changed .moment-seam-mark { animation: moment-seam-pulse 1.1s ease-out 2; }
@keyframes moment-seam-pulse { 0% { box-shadow: 0 0 0 0 rgba(240, 177, 85, .7); } 100% { box-shadow: 0 0 0 12px rgba(240, 177, 85, 0); } }
.moment-seam-preview { width: 100%; margin-block-start: 8px; overflow: hidden; aspect-ratio: 16 / 10; border-radius: 12px; background: #000; }
.moment-seam-preview[hidden] { display: none; }
.moment-seam-preview video { display: block; width: 100%; height: 100%; object-fit: cover; }

@media (prefers-reduced-motion: reduce) {
  .moment-seam.is-changed .moment-seam-btn, .moment-seam.is-changed .moment-seam-mark { animation: none; }
}

/* The face's states after a one-shot choice of photographs (app-review-moment-face.js): `updating` keeps the old clip playing, dimmed,
   under a thin edge sliding along the top; `ready` is one pulse of the face's edge as the new clip lands; `failed` is a quiet dot and
   the old clip stays. A still bar where motion is reduced. */
.moment-face.is-ready[data-face-state="updating"] .moment-face-media { opacity: .72; }
.moment-face.is-ready[data-face-state="updating"]::before { content: ""; position: absolute; inset-block-start: 0; inset-inline-start: 0; z-index: 3;
  width: 34%; height: 3px; border-radius: 2px; background: var(--gold); animation: moment-face-edge 1.1s linear infinite; }
@keyframes moment-face-edge { from { transform: translateX(-100%); } to { transform: translateX(300%); } }
.moment-face[data-face-state="ready"] { box-shadow: inset 0 0 0 3px var(--gold); transition: box-shadow .4s ease-out; }
.moment-face[data-face-state="failed"]::after { content: ""; position: absolute; inset-block-start: 10px; inset-inline-end: 10px; z-index: 3;
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold); opacity: .8; }
@media (prefers-reduced-motion: reduce) {
  .moment-face.is-ready[data-face-state="updating"]::before { animation: none; width: 100%; }
}