/* thennow.css — site extras for the DS ThenNow device (.ss-thennow, D115 A3, D130).
   The device itself — frame, wipe, labels, badge, reduced motion — is styled by ds/components.css.
   thennow.js drives it: dwell (--motion-dwell) then wipe, sweep back when it leaves the screen,
   click / tap / Enter / the figcaption invite to flip by hand. This file keeps only what the DS
   does not define: the mount spacing, the soft leading edge of the wipe, placeholder plates and
   their duotone clone, the credits disclosure, and the invite button's layout in a figcaption. */

.tn-mount { margin: 0 0 8px; }

/* the soft leading edge of the wipe: a narrow highlight that fades once the sweep has settled */
.ss-thennow .tn-now::after { content: ""; position: absolute; top: 0; bottom: 0; right: 0; width: 6%; pointer-events: none;
  background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55)); opacity: 0; transition: opacity .5s; }
.ss-thennow.alive .tn-now::after { opacity: 1; }
.ss-thennow.alive.settled .tn-now::after { opacity: 0; }

@media (max-width: 480px) {
  .ss-thennow .tn-say { max-width: calc(50% - 12px); }
}

/* Figure credits disclose their source in a one-line summary; the summary remains a 44px target. */
figure details.credits { margin-top: 6px; }
figure details.credits > summary { display: list-item; min-height: 44px; padding: 12px 0; cursor: pointer; color: var(--ink-soft); }
figure details.credits > summary::marker { color: var(--ink-soft); }
figure details.credits .cred { display: block; font-size: 12px; line-height: 1.45; }

/* WP2 (pin 98g9, 2026-09-26): the credit line reads as a control: a dotted underline, and the primary color on hover
   and keyboard focus; open, it drops the underline */
figure details.credits > summary { text-decoration: underline dotted; text-underline-offset: 3px; }
figure details.credits > summary:hover, figure details.credits > summary:focus-visible { color: var(--primary); }
figure details.credits[open] > summary { text-decoration: none; }

/* the invite: DS .ss-tn-invite; in a figcaption it keeps a little air before it */
figure .tn-invite { padding-left: 6px; margin: 0; }

/* a device whose now half is still a placeholder plate fades the plate in instead of wiping */
.ss-thennow.tn-plate .tn-now, .ss-thennow .tn-now:not(:has(img)) { clip-path: none; opacity: 0; transition: opacity 1.2s ease; }
.ss-thennow.tn-plate.alive .tn-now { opacity: 1; }
.ss-thennow.tn-plate .tn-now::after { display: none; }
/* the "same room, today" duotone clone under a plate keeps its look */
.ss-thennow .tn-now .tn-clone { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--primary); opacity: .5; pointer-events: none; }
.ss-thennow .tn-now .tn-clone picture { display: block; height: 100%; }
.ss-thennow .tn-now .tn-clone img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.05); mix-blend-mode: screen; transform: none; }
.ss-thennow .tn-now .tn-clone::after { content: ""; position: absolute; inset: 0; background: var(--patina); mix-blend-mode: multiply; opacity: .62; }
main .ss-thennow.tn-has-clone .tn-now .plate--now { z-index: 1; background: transparent; }

@media (prefers-reduced-motion: reduce) {
  .ss-thennow.tn-plate .tn-now { transition: none !important; }
  .ss-thennow .tn-now::after { display: none; }
}

/* TEMPORARY OVERRIDE of a DS-owned component, pending the DS release (DW-134 item 6, a DS change request).
   WP2 (pin sh0p, 2026-09-26): going back to THEN, the NOW label fades out as the wipe starts back, so the two labels
   never show together. The DS ThenNow fades the THEN label out on .alive but never fades the NOW label, so this fades
   the NOW label out when .alive goes, through the DS's own opacity transition (--motion-fade). Scoped to exactly the
   device's NOW label in its frame and to that one property; it redeclares no token and restyles nothing else. Remove it
   when a synced DS ThenNow carries the NOW-label fade (npm run ds:sync), and close DW-134 item 6. */
.ss-thennow:not(.alive) > .tn-frame > .tn-now > .tn-say--now { opacity: 0; }

/* TEMPORARY OVERRIDE of a DS-owned component, the THEN label's return, pending the DS release (DW-135, a DS change
   request); made site-side by the operator's decision of 2026-10-01 (pins 0muleo5fqv4cdlr and 0muplo0p7xruxl6).
   Going back from NOW to THEN, the DS fades the THEN label in over --motion-fade the moment .alive goes, while the
   photograph wipes back over --motion-wipe (by hand) or --motion-wipe-back (.leaving, the figure left the screen), so
   the label announced the archive photograph before it was there. The wipe uncovers the left edge last, where the label
   sits, so this holds the label's fade-in back by the running wipe less --motion-fade and it arrives with the
   photograph. Tokens only; it sets one property, transition-delay; never under reduced motion (no wipe there) and never
   for a placeholder plate (a plate fades, it does not wipe). The proper fix is still the DS ThenNow change (DW-135).
   Remove it when a synced DS ThenNow carries it (npm run ds:sync), and close DW-135. */
@media (prefers-reduced-motion: no-preference) {
  .ss-thennow:not(.alive):not(.tn-plate) > .tn-frame > .tn-say--then { transition-delay: calc(var(--motion-wipe) - var(--motion-fade)); }
  .ss-thennow.leaving:not(.alive):not(.tn-plate) > .tn-frame > .tn-say--then { transition-delay: calc(var(--motion-wipe-back) - var(--motion-fade)); }
}

/* pins 0muplo0p7xruxl6 / 0muleo5fqv4cdlr (verified 2026-10-05): going forward to NOW, the NOW label (which sits at the
   right edge, where the left-to-right wipe arrives last) faded in within 0.4s while the photograph was 1% across, so the
   label announced a picture that was not there. It now waits until the wipe is about half across and fades in as the
   photograph reaches its edge. One property, transition-delay; tokens only; never under reduced motion or on a plate.
   Temporary, with the THEN-label override above, until the DS ThenNow carries both (DW-135). */
@media (prefers-reduced-motion: no-preference) {
  .ss-thennow.alive:not(.tn-plate) > .tn-frame > .tn-now > .tn-say--now { transition-delay: calc(var(--motion-wipe) * .5); }
}