/* t13 "Card Turn" — scroll turns each project card over, from a dark numbered
   back carrying the project's own photograph to its live glass front.
   Every element here is a [data-fx] overlay; real cards are only hidden
   (.zz13-wait) while their scene is running, never restyled. */

.zz13-wait, .zz13-ghost { opacity: 0 !important; }
/* Opacity alone can leave invisible glass cards in the compositing tree.
   Their animated copies are visible instead; retain layout, release painting. */
.aps-project-glass.zz13-wait { visibility: hidden !important; will-change: auto !important; }

.zz13-spacer { grid-column: 1 / -1; position: relative; margin: 0; padding: 0; min-width: 0; pointer-events: none; overflow-anchor: none; }
.zz13-rail { position: absolute; left: 0; right: 0; top: 0; pointer-events: none; z-index: 4; }
.zz13-stage { position: -webkit-sticky; position: sticky; left: 0; right: 0; pointer-events: none; visibility: hidden; }
.zz13-cam { z-index: 2; position: absolute; left: 0; top: 0; right: 0; bottom: 0; transform-origin: 50% 0; }
.zz13-turn { position: absolute; }
.zz13-face { position: absolute !important; left: 0 !important; top: 0 !important; margin: 0 !important; transform-origin: 50% 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.zz13-ground {
  position: absolute; left: 6%; right: 6%; bottom: -26px; height: 52px; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(5, 30, 26, .42), rgba(5, 30, 26, 0));
  opacity: 0; transform-origin: 50% 50%;
}
.zz13-shade, .zz13-sheen { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; z-index: 5; }
.zz13-stage.is-active .zz13-face { will-change: transform; }
.zz13-stage.is-active .zz13-shade,.zz13-stage.is-active .zz13-sheen { will-change: opacity; }
.zz13-stage.is-active .zz13-sheen > i { will-change: transform; }
.zz13-shade { background: #04120F; }
.zz13-sheen { overflow: hidden; }
.zz13-sheen > i {
  position: absolute; top: 0; bottom: 0; left: 0; width: 260%;
  background-image: linear-gradient(100deg, rgba(255,255,255,0) 30%, rgba(255,255,255,.3) 48%, rgba(255,255,255,.05) 56%, rgba(255,255,255,0) 66%);
}

/* ---- back face: deep brand teal, the project photograph, set in large numerals */
.zz13-back {
  overflow: hidden; box-sizing: border-box; color: #fff; isolation: isolate;
  background: #0A2623;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 22px 44px -26px rgba(4, 24, 21, .55);
  font-family: 'Barlow Condensed', sans-serif;
}
.zz13-back-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .34; filter: saturate(.75) contrast(1.05); transform-origin: 50% 40%; }
.zz13-back-scrim { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(7, 30, 27, .72) 0%, rgba(7, 30, 27, .55) 38%, rgba(6, 24, 21, .93) 78%, #061714 100%); }
.zz13-back-frame { position: absolute; inset: .75em; border: 1px solid rgba(246, 181, 30, .32); border-radius: calc(var(--zz13-r, 28px) - .75em); pointer-events: none; }
.zz13-back-top { position: absolute; left: 1.9em; right: 1.9em; top: 1.7em; display: flex; justify-content: space-between; align-items: baseline; font-weight: 600; font-size: .95em; letter-spacing: .3em; text-transform: uppercase; }
.zz13-back-no { color: #F6B51E; }
.zz13-back-status { color: rgba(255,255,255,.62); letter-spacing: .26em; }
.zz13-back-num {
  position: absolute; left: 0; right: 0; top: 13%; text-align: center;
  font-weight: 700; line-height: .82; letter-spacing: -.02em;
  font-size: var(--zz13-num, 15em);
  color: transparent; -webkit-background-clip: text; background-clip: text;
  background-size: cover; background-position: 50% 50%;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .28);
  font-variant-numeric: lining-nums tabular-nums;
}
.zz13-back-num.is-solid { background-image: none !important; color: transparent; -webkit-text-stroke: 1.5px rgba(246, 181, 30, .9); }
.zz13-back-foot { position: absolute; left: 1.9em; right: 1.9em; bottom: 1.8em; }
.zz13-back-rule { display: block; width: 2.75em; height: 2px; background: #F6B51E; margin-bottom: 1.05em; transform-origin: 0 50%; }
.zz13-back-sector { font-weight: 600; font-size: .95em; letter-spacing: .26em; text-transform: uppercase; color: #F6B51E; margin-bottom: .55em; }
.zz13-back-loc { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 1.62em; line-height: 1.18; color: #fff; letter-spacing: .005em; }
.zz13-back-year { font-family: 'Barlow', sans-serif; font-weight: 500; font-size: 1em; margin-top: .5em; color: rgba(255,255,255,.6); letter-spacing: .04em; }

/* ---- scene readout: section, odometer and the turning line */
.zz13-read { z-index: 1; position: absolute; left: 0; right: 0; opacity: 0; font-family: 'Barlow Condensed', sans-serif; color: #0C2B28; }
.zz13-read-row { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; padding-bottom: 12px; }
.zz13-read-label { min-width: 0; font-weight: 600; font-size: clamp(24px, 2vw, 32px); line-height: 1.2; letter-spacing: .12em; text-transform: uppercase; color: #8E2C2E; display: flex; align-items: center; gap: 12px; }
.zz13-read-label i { display: inline-block; width: 28px; flex-shrink: 0; height: 2px; background: #F6B51E; }
.zz13-read-count { flex-shrink: 0; white-space: nowrap; font-weight: 600; font-size: 22px; letter-spacing: .08em; color: #0C2B28; display: flex; align-items: baseline; gap: 6px; font-variant-numeric: tabular-nums; }
.zz13-read-count small { font-size: 15px; letter-spacing: .2em; color: rgba(12,43,40,.45); }
.zz13-odo { display: inline-flex; height: 1em; line-height: 1; overflow: hidden; vertical-align: -.12em; }
.zz13-odo span { display: block; width: .56em; text-align: center; }
.zz13-odo b { display: block; font-weight: inherit; }
.zz13-line { position: relative; height: 1px; background: rgba(12, 43, 40, .14); }
.zz13-line-fill { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: #F6B51E; transform-origin: 0 50%; transform: scaleX(0); height: 2px; top: -.5px; }
.zz13-tick { position: absolute; top: -4px; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #F6F4EF; border: 1px solid rgba(12,43,40,.35); box-sizing: border-box; }
.zz13-tick.on { background: #F6B51E; border-color: #F6B51E; }

/* Keep letter turns in the real heading: its wrapped height remains in flow. */
.zz13-word { display: inline-block !important; white-space: nowrap; font: inherit !important; letter-spacing: inherit !important; color: inherit !important; }
.zz13-letter { display: inline-block !important; font: inherit !important; letter-spacing: inherit !important; color: inherit !important; transform-origin: 50% 100%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.zz13-heading-moving .zz13-letter { will-change: transform, opacity; }
@media (prefers-reduced-motion: reduce) {
  .zz13-letter { transform: none !important; opacity: 1 !important; }
  [data-fx] { display: none !important; }
  .zz13-wait, .zz13-ghost { opacity: 1 !important; }
  .aps-project-glass.zz13-wait { visibility: visible !important; }
}

@media (max-width: 700px) {
  .zz13-rail { overflow: clip; overflow-clip-margin: 15px; }
  .zz13-read-row { align-items: flex-start; flex-wrap: wrap; gap: 8px 12px; }
  .zz13-read-label { flex: 1 1 230px; min-width: 0; font-size: clamp(20px, 3.5vw, 24px); line-height: 1.2; letter-spacing: .08em; white-space: normal; }
  .zz13-read-label i { display: none; }
  .zz13-read-count { flex-shrink: 0; font-size: 18px; white-space: nowrap; }
  .zz13-read-count small { font-size: 12px; letter-spacing: .14em; }
}