/* Motion layer, 13 October 2026. Everything that moves is gated on prefers-reduced-motion:
   no-preference. Reveals are one-shot (a revealed block never hides again), so scrolling
   back up, printing and saving the page are complete. */
:root { --ease-out: cubic-bezier(.22,.68,0,1); --frame-pad: 6px; --frame-line: rgba(var(--brass-rgb),.32); }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }

/* ---------- What it makes ---------- */
.work-grid { display: grid; grid-template-columns: 1.25fr .8fr 1fr; gap: 24px; align-items: start; }
.work-tile { margin: 0; }
.work-stage { background: #0b0f1a; border: 1px solid var(--frame-line); border-radius: 10px; padding: 14px; display: flex; gap: 12px; align-items: center; justify-content: center; min-height: 360px; transition: border-color .25s; }
.work-tile:hover .work-stage { border-color: rgba(var(--brass-rgb),.6); }
.work-media { position: relative; border-radius: 6px; overflow: hidden; background: #04060d; line-height: 0; }
.work-media video, .work-media img { display: block; width: 100%; height: auto; }
.work-pair .work-media:first-child { flex: 1.15; } .work-pair .work-media:last-child { flex: .62; }
.work-single .work-media { width: min(100%, 210px); }
.work-carousel .work-stage { position: relative; }
.work-carousel .work-media { width: 46%; position: relative; box-shadow: 0 14px 30px rgba(0,0,0,.4); transition: transform .5s var(--ease-out); }
.work-carousel .work-media:nth-child(1) { transform: rotate(-6deg) translateX(30%); z-index: 1; }
.work-carousel .work-media:nth-child(2) { z-index: 3; }
.work-carousel .work-media:nth-child(3) { transform: rotate(6deg) translateX(-30%); z-index: 2; }
.work-carousel:hover .work-media:nth-child(1) { transform: rotate(-9deg) translateX(18%); }
.work-carousel:hover .work-media:nth-child(3) { transform: rotate(9deg) translateX(-18%); }
.work-play { position: absolute; right: 8px; bottom: 8px; font: inherit; font-size: 12px; line-height: 1; color: var(--cream); background: rgba(6,9,18,.72); border: 1px solid rgba(var(--cream-rgb),.25); border-radius: 999px; padding: 6px 10px; cursor: pointer; }
.work-tile figcaption { margin-top: 16px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.work-tile figcaption strong { display: block; color: var(--cream); font-weight: 500; font-size: 15px; margin-bottom: 4px; }

/* ---------- Product plates on case pages ---------- */
.product-plate { margin: 46px 0 56px; }
.plate-head h2 { font-size: 34px; line-height: 1.15; margin: 0 0 22px; }
.plate-head .section-kicker { margin-bottom: 10px; }
.plate-frame { background: #0b0f1a; border: 1px solid var(--frame-line); border-radius: 12px; padding: 12px; display: grid; gap: 12px; justify-items: center; }
.plate-img { position: relative; width: min(100%, var(--w, 100%)); }
.plate-zoom { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 6px; overflow: hidden; }
.plate-zoom img { display: block; width: 100%; height: auto; }
.pin { position: absolute; transform: translate(-50%, -50%); width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; color: var(--bg) !important; background: var(--brass); border: 2px solid #121826; box-shadow: 0 0 0 3px rgba(var(--brass-rgb),.3); text-decoration: none; }
.pin:hover, .pin:focus-visible { box-shadow: 0 0 0 6px rgba(var(--brass-rgb),.35); }
.pin-legend { list-style: none; margin: 16px 0 0; padding: 0; display: grid; gap: 8px; }
.pin-legend li { display: flex; gap: 12px; align-items: baseline; font-size: 14px; line-height: 1.6; }
.pin-legend a { color: #bcc4d5; }
.pin-legend a:hover { color: var(--cream); }
.pin-n { flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 600; background: var(--brass); color: var(--bg); transform: translateY(2px); }
.pin-to { color: var(--brass); white-space: nowrap; }
.product-plate > figcaption { margin-top: 14px; font-size: 13px; line-height: 1.7; color: var(--muted); }

/* Lightbox */
.plate-lightbox { padding: 0; border: 1px solid var(--frame-line); border-radius: 12px; background: #070a13; max-width: min(96vw, 1400px); max-height: 92vh; overflow: auto; }
.plate-lightbox::backdrop { background: rgba(3,4,9,.82); }
.plate-lightbox img { display: block; max-width: 100%; height: auto; }
.plate-lightbox button { position: sticky; top: 10px; float: right; margin: 10px; font: inherit; font-size: 13px; color: var(--cream); background: rgba(6,9,18,.85); border: 1px solid rgba(var(--cream-rgb),.25); border-radius: 999px; padding: 6px 12px; cursor: pointer; }

/* ---------- Log excerpt in Results ---------- */
.case-reading, .case-reading > *, .log-tail { min-width: 0; }
.log-tail { margin: 26px 0 8px; max-width: 100%; }
.log-tail figcaption { font-size: 12px; color: var(--brass); margin-bottom: 8px; }
.log-tail pre { margin: 0; padding: 16px 18px; background: #080b15; border: 1px solid rgba(var(--cream-rgb),.12); border-radius: 6px; overflow-x: auto; }
.log-tail code { font-family: ui-monospace, 'Cascadia Mono', Consolas, monospace; font-size: 12.5px; line-height: 1.8; color: #e0d8c9; white-space: pre; }
.log-line { display: block; }

/* ---------- Reading timeline (case pages) ---------- */
.read-timeline { position: sticky; top: 100px; z-index: 39; height: 0; }
.read-track { position: absolute; left: 0; right: 0; top: 0; height: 3px; background: rgba(var(--cream-rgb),.07); }
.read-head { position: absolute; left: 0; top: 0; height: 3px; width: 100%; background: var(--brass); transform-origin: left; transform: scaleX(var(--read, 0)); }
.read-tick { position: absolute; top: -4px; width: 2px; height: 11px; background: rgba(var(--brass-rgb),.55); border: 0; padding: 0; cursor: pointer; pointer-events: auto; }
.read-tick::after { content: attr(data-label); position: absolute; top: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 12px; color: var(--cream); background: #0b0f1a; border: 1px solid var(--frame-line); border-radius: 4px; padding: 3px 8px; opacity: 0; pointer-events: none; transition: opacity .2s; }
.read-tick:hover::after, .read-tick:focus-visible::after { opacity: 1; }

/* ---------- Motion (only when the reader has not asked for less) ---------- */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
  .atlas-wordmark span { animation: wm-rec 1.4s ease-in-out .6s 2; }

  /* Hero entrance: the copy rises line by line, the plate settles in, then drifts very slowly. */
  .atlas-intro > * { animation: rise .9s var(--ease-out) both; }
  .atlas-intro > :nth-child(1) { animation-delay: .05s; }
  .atlas-intro > :nth-child(2) { animation-delay: .15s; }
  .atlas-intro > :nth-child(3) { animation-delay: .3s; }
  .atlas-intro > :nth-child(4) { animation-delay: .42s; }
  .atlas-plate { animation: plate-in 1.2s var(--ease-out) .25s both; }
  .atlas-plate-screen img { animation: plate-drift 48s ease-in-out 1.5s infinite alternate; }
  .atlas-plate-light { animation: atlas-light 2.4s ease-out .3s both; }
  .scope-strip { animation: rise .9s var(--ease-out) .55s both; }

  /* One-shot scroll reveals with a small stagger inside a group. */
  html.js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .85s var(--ease-out), transform .85s var(--ease-out); }
  html.js .reveal.is-in { opacity: 1; transform: none; }
  html.js .reveal-group > .reveal:nth-child(2) { transition-delay: .08s; }
  html.js .reveal-group > .reveal:nth-child(3) { transition-delay: .16s; }
  html.js .reveal-group > .reveal:nth-child(4) { transition-delay: .24s; }
  html.js .reveal-group > .reveal:nth-child(5) { transition-delay: .32s; }
  html.js .reveal-group > .reveal:nth-child(6) { transition-delay: .4s; }
  html.js .reveal-group > .reveal:nth-child(n+7) { transition-delay: .48s; }

  .atlas-primary, .text-link, .evidence-card, .case-entry h3 a, .site-nav a { transition: color .2s, border-color .2s, background .2s, transform .2s; }
  .case-entry:hover .case-identity h3 a { color: var(--brass); }
  .log-tail.is-typing .log-line { clip-path: inset(0 100% 0 0); animation: log-type .9s steps(32, end) forwards; }
  .log-tail.is-typing .log-line:nth-child(2) { animation-delay: .9s; } .log-tail.is-typing .log-line:nth-child(3) { animation-delay: 1.8s; } .log-tail.is-typing .log-line:nth-child(4) { animation-delay: 2.7s; }
}
@keyframes wm-rec { 50% { opacity: .15; } }
@keyframes rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes plate-in { from { opacity: 0; transform: translateY(26px) scale(.985); } to { opacity: 1; transform: none; } }
@keyframes plate-drift { from { transform: scale(1); } to { transform: scale(1.045); } }
@keyframes atlas-light { from { opacity: 0; } to { opacity: 1; } }
@keyframes log-type { to { clip-path: inset(0 0 0 0); } }

@media (max-width: 1100px) {
  .work-grid { grid-template-columns: 1fr 1fr; }
  .work-tile.work-pair { grid-column: 1 / -1; }
}
@media (max-width: 820px) { .read-timeline { top: 90px; } }
@media (max-width: 520px) {
  .work-grid { grid-template-columns: 1fr; }
  .work-stage { min-height: 0; }
  .plate-head h2 { font-size: 28px; }
  .plate-frame { padding: 8px; }
  .pin { width: 22px; height: 22px; }
  .pin-legend li { font-size: 13px; }
  .pin-to { white-space: normal; }
  .read-timeline { top: 103px; }
}

/* Edge ticks open their label inward; the bar never widens the page (14 October 2026). */
.read-timeline { overflow-x: clip; overflow-y: visible; }
.read-tick--end::after { left: auto; right: 0; transform: none; }
.read-tick--start::after { left: 0; transform: none; }