/* Overlooked — fold 3, the triptych. Everything here is scoped to .tri; the plates are style.css's own. */

.tri { position: relative; height: 420svh; }
.tri-stage { position: sticky; top: 0; height: 100svh; overflow: clip; isolation: isolate; }
/* carried on to fold 4, the pack rides out past the stage's foot, over the next fold */
.tri.tri-to-pack .tri-stage { overflow: visible; z-index: 2; }
/* a little baize under the cards, where the lamp would be */
.tri-felt { position: absolute; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 58% 52% at 50% 44%, rgba(34, 50, 43, .72), rgba(34, 50, 43, 0) 72%); }

/* every card, and the pack, is a 300×444 plate placed by its centre */
.tri-card, .tri-pack { position: absolute; left: 50%; top: 0; width: 300px; height: 444px; margin: -222px 0 0 -150px; transform-origin: 50% 50%; will-change: transform; }
.tri-pack { z-index: 1; pointer-events: none; }
.tri-card { z-index: 2; }
.tri-turn { position: absolute; inset: 0; transform-style: preserve-3d; }
.tri-turn > .card { position: absolute; left: 0; top: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tri-cover { position: absolute; inset: 0; transform: rotateX(180deg); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tri-layer { position: absolute; inset: 0; }
.tri-layer:nth-last-child(n+2) .tri-back { filter: brightness(.86); }
.tri-layer:nth-last-child(n+3) .tri-back { filter: brightness(.74); }

/* shadows: a tight contact shadow when it's down, a soft one that spreads and falls away as it lifts */
.tri-shadow { position: absolute; pointer-events: none; border-radius: 10px; }
.tri-shadow.tight { inset: 8px 6px 2px; background: rgba(3, 7, 5, .7); filter: blur(5px); translate: 0 3px; }
.tri-shadow.soft { inset: 22px 14px 4px; background: rgba(3, 7, 5, .78); filter: blur(24px); }
.tri-pack .tri-shadow.tight { opacity: .7; translate: 0 4px; }
.tri-pack .tri-shadow.soft { opacity: .35; translate: 0 18px; }

/* earlier cards settle back a touch; this is how far (the plate's own mask keeps it inside the perforation).
   The lamp still finds the top edge, so a card tucked behind reads as a card, not a hole in the felt. */
.tri-dim { position: absolute; inset: 0; opacity: 0; pointer-events: none; z-index: 5;
  background: #0B120F; }
.tri-phone .tri-dim { background: linear-gradient(180deg, transparent 5px, rgba(235, 228, 211, .5) 6px 7px, #0B120F 7px); }

/* the back of every card: a bone margin inside the perforation, a felt field, a brass frame and the dotted o */
.tri-back { position: absolute; inset: 0; --s: 12px; overflow: hidden; color: var(--brass-hi); background: #E3DAC5;
  -webkit-mask: linear-gradient(#000 0 0) center/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat, radial-gradient(circle calc(var(--s)*.3) at 50% 50%, #0000 96%, #000) calc(var(--s)/-2) calc(var(--s)/-2)/var(--s) var(--s);
  mask: linear-gradient(#000 0 0) center/calc(100% - var(--s)) calc(100% - var(--s)) no-repeat, radial-gradient(circle calc(var(--s)*.3) at 50% 50%, #0000 96%, #000) calc(var(--s)/-2) calc(var(--s)/-2)/var(--s) var(--s); }
.tri-back::after { content: ""; position: absolute; inset: 0; background: var(--noise); mix-blend-mode: multiply; opacity: .32; pointer-events: none; }
.tri-field { position: absolute; inset: 15px; background: radial-gradient(ellipse 90% 70% at 50% 42%, #284034, #1B2B23 62%, #14201A); }
.tri-engrave { position: absolute; inset: 30px; opacity: .6;
  background: repeating-radial-gradient(circle at 50% 50%, rgba(241, 218, 146, .075) 0 1px, transparent 1px 6px); }
.tri-frame { position: absolute; inset: 22px; border: 1.5px solid; opacity: .95;
  border-image: linear-gradient(calc(var(--px, .5)*300deg + var(--py, .5)*120deg), var(--brass-lo), var(--brass-hi) 45%, var(--brass-lo) 60%, var(--brass-hi)) 1; }
.tri-frame2 { position: absolute; inset: 29px; border: 1px solid rgba(201, 162, 75, .3); }
.tri-o { position: absolute; left: 50%; top: 50%; width: 136px; height: 136px; margin: -68px 0 0 -68px; opacity: .95; }

/* a card in the air: its radiance dims, and comes back as it lands */
.tri-card.tri-air .card .rim, .tri-card.tri-air .card .cast { opacity: 0; transition: opacity .12s ease; }

/* the dosa's postmark: its lift and strike are Web Animations (triptych.js), so nothing here may ease it.
   (.tri in front: style.css's `.card .postmark:not(.shot .postmark)` weighs 0,4,0.) */
.tri .tri-card .card .postmark { transform-origin: 27.5% 50%; transition: none; }
/* the seal pops as the print turns gold, and sinks as it turns back (style.css's .card .seal would only fade it) */
.tri .tri-card .card .seal { transition: opacity .45s var(--ease), scale .62s cubic-bezier(.3, 1.6, .5, 1); }

/* re-printed: one band of brass light crosses the plate, left to right, and is on the plate the whole time */
.tri-card.tri-sweep .card .front .sweep { background: linear-gradient(100deg, #7E5F1E, #F1DA92 38%, #FFF6CF 50%, #F1DA92 62%, #7E5F1E); mix-blend-mode: soft-light;
  -webkit-mask-image: linear-gradient(110deg, transparent 37%, rgba(0, 0, 0, .35) 44%, #000 49.5% 50.5%, rgba(0, 0, 0, .35) 56%, transparent 63%);
  mask-image: linear-gradient(110deg, transparent 37%, rgba(0, 0, 0, .35) 44%, #000 49.5% 50.5%, rgba(0, 0, 0, .35) 56%, transparent 63%);
  animation: tri-sweep .52s cubic-bezier(.32, .08, .5, .92) both; }
@keyframes tri-sweep {
  0% { opacity: 0; -webkit-mask-position: 90% 0; mask-position: 90% 0; }
  14%, 82% { opacity: 1; }
  100% { opacity: 0; -webkit-mask-position: 10% 0; mask-position: 10% 0; }
}

/* the words under each card: one line; a reprint's numbers under it */
.tri-probe { position: absolute; left: 0; top: 0; visibility: hidden; white-space: nowrap; pointer-events: none;
  font-family: var(--serif); font-weight: 400; font-size: 100px; letter-spacing: -.004em; }
.tri-cap { position: absolute; left: 50%; top: 0; z-index: 3; width: var(--cw, 360px); margin-left: calc(var(--cw, 360px) / -2); text-align: center; pointer-events: none;
  transform-origin: 50% 0; transition: opacity .6s var(--ease); }
.tri-cap p { margin: 0; }
.tri-eyebrow { font-family: var(--mono); font-weight: 400; font-size: 11px; line-height: 1; letter-spacing: .18em; text-transform: uppercase; color: var(--brass); }
.tri-eyebrow + .tri-line { margin-top: 13px; }
.tri-cap .tri-line { font-family: var(--serif); font-weight: 400; font-size: var(--tri-fs, 30px); line-height: 1.08; letter-spacing: -.004em; color: var(--bone); text-wrap: balance; }
.tri-cap .tri-detail { margin-top: 12px; font-family: var(--mono); font-weight: 400; font-size: 10.5px; line-height: 1.3; letter-spacing: .14em; text-transform: uppercase; color: var(--bone-dim); }
.tri-num { color: var(--bone); font-variant-numeric: tabular-nums; }
.tri-place { display: inline-block; transition: opacity .13s ease, translate .13s ease; }
.tri-place.tri-swap { opacity: 0; translate: 0 -.35em; }
.tri-cap .tw { display: inline-block; opacity: 0; transform: translate3d(0, .4em, 0); transition: opacity .28s ease, transform .4s var(--ease); }
.tri-cap.in .tri-eyebrow .tw, .tri-cap.in .tri-line .tw, .tri-cap.in.det .tri-detail .tw { opacity: 1; transform: none;
  transition: opacity .7s var(--ease) calc(var(--i) * 55ms + 40ms), transform .9s var(--ease) calc(var(--i) * 55ms + 40ms); }
.tri-cap.in.det .tri-detail .tw { transition-delay: 200ms; }
.tri-cap.rest { opacity: .42; }

.tri-phone .tri-eyebrow { font-size: 10.5px; }

/* reduced motion: the three, laid out and finished */
.tri.tri-still { height: auto; padding: clamp(80px, 14svh, 140px) var(--gutter, 24px); }
.tri-row { --tri-s: .8; display: flex; justify-content: center; align-items: flex-start; gap: clamp(28px, 4vw, 64px); }
.tri-slot { margin: 0; display: flex; flex-direction: column; align-items: center; width: max(calc(300px * var(--tri-s)), 220px); }
.tri-box { position: relative; width: calc(300px * var(--tri-s)); height: calc(444px * var(--tri-s)); filter: drop-shadow(0 18px 26px rgba(0, 0, 0, .32)); }
.tri-box > .card { position: absolute; left: 0; top: 0; transform: scale(var(--tri-s)); transform-origin: 0 0; }
.tri-still .tri-cap { position: static; margin: 26px 0 0; width: 100%; }
.tri-still .tri-cap .tri-line { font-size: clamp(22px, 2vw, 30px); }
.tri-still .tri-cap .tw { opacity: 1; transform: none; }
@media (max-width: 759.98px) {
  .tri-row { flex-direction: column; align-items: center; gap: 56px; }
  .tri-slot { width: min(340px, 100%); }
  .tri-still .tri-cap .tri-line { font-size: 25px; }
}

/* a card on the table is a card: tap it to turn it over */
.tri-card { pointer-events: auto; cursor: pointer; -webkit-tap-highlight-color: transparent; user-select: none; }