/* depth.css: real 3D for the Hearthfold slide images. CSS 3D transforms only (perspective, rotate, translateZ), driven by depth.js.
   Linked, with depth.js, only by the pages that use it: the home page (stack) and /work/hearthfold/ (flow). Tokens come from site.css.

   STACK (home): <div class="d3-stage" data-d3="stack"> holding 4 x <a class="d3-card" href><picture>...</picture></a>.
     The stage sets the perspective and the pointer tilt (--d3-rx, --d3-ry, written by depth.js). It must keep a true 3D context, so it never
     clips: overflow:clip on a preserve-3d element flattens it. The non-3D parent .hf__media does the clipping. The stage is pointer-events:none
     and the cards pointer-events:auto, because the stage's own flat box would otherwise win hit-testing over cards at negative z. Each card is fanned by :nth-child
     through --cx --cy (percent of the card), --cz (px), --cry --crx. Keyboard focus lifts a card forward (--cz becomes --zf).
     depth.js adds .d3-live while the stage is on screen and the tab is visible: that starts the idle float (8 to 12 s, 6 px).
   FLOW (/work/hearthfold/): <section class="d3-flow" data-d3="flow" hidden> with .d3-head (optional), .d3-track > figure.d3-item (picture + figcaption),
     button.d3-prev, button.d3-next, p.d3-status. depth.js removes [hidden], then writes --o (offset from the current item) on each item.
     CSS turns --o into a coverflow: 0 faces front, +-1 are turned 52 degrees inward and pushed back, +-2 fade, +-3 and beyond are .d3-far (display none).
   Reduced motion: no tilt, no float, no transitions; the stack becomes a flat 2 x 2 grid and the flow stays hidden (the flat slide list is the fallback).
   Cloud pause (html.sky-paused, set by site.js from ah_sky): the float freezes in place and depth.js stops the tilt.
   Rules kept: white page, no dark surface, shadows on the 3D objects only, radii from tokens, spacing from tokens, every transition 200 ms or less. */

/* ---------- Stack ---------- */
.hf__media{overflow:clip;overflow-clip-margin:32px}
.d3-stage{--d3-p:1100px;--w:50%;--zf:170px;position:relative;width:100%;aspect-ratio:16/10;pointer-events:none;transform-style:preserve-3d;transform:perspective(var(--d3-p)) rotateX(var(--d3-rx,0deg)) rotateY(var(--d3-ry,0deg))}
.d3-card{--cx:0%;--cy:0%;--cz:0px;--cry:-14deg;--crx:4deg;pointer-events:auto;position:absolute;left:50%;top:50%;display:block;width:var(--w);aspect-ratio:16/9;overflow:hidden;border:1px solid var(--rule);border-radius:var(--r-card);background:#fff;box-shadow:0 16px 28px -16px rgba(0,13,47,.4),0 2px 6px rgba(0,13,47,.1);transform:translate3d(calc(-50% + var(--cx)),calc(-50% + var(--cy)),var(--cz)) rotateY(var(--cry)) rotateX(var(--crx));transition:transform var(--dur-ui) var(--ease),border-color var(--dur-press) var(--ease)}
.d3-card picture{display:block;border-radius:inherit}
.d3-card>picture>img{display:block;width:100%;height:100%;border:0;border-radius:inherit;object-fit:cover}
.d3-card:nth-child(1){--cx:-32%;--cy:44%;--cz:110px;--cry:-10deg}
.d3-card:nth-child(2){--cx:-5%;--cy:9%;--cz:30px;--cry:-13deg}
.d3-card:nth-child(3){--cx:22%;--cy:-26%;--cz:-50px;--cry:-16deg}
.d3-card:nth-child(4){--cx:48%;--cy:-61%;--cz:-130px;--cry:-19deg}
.d3-card:hover{border-color:var(--bl-obj)}
.d3-card:focus-visible{--cz:var(--zf)}
.d3-stage.d3-live,.d3-stage.d3-live .d3-card{will-change:transform}
@keyframes d3-float{0%,100%{translate:0 0}50%{translate:0 -6px}}
.d3-stage.d3-live .d3-card{animation:d3-float 10s ease-in-out infinite}
.d3-stage.d3-live .d3-card:nth-child(2){animation-duration:8s;animation-delay:-3s}
.d3-stage.d3-live .d3-card:nth-child(3){animation-duration:12s;animation-delay:-6s}
.d3-stage.d3-live .d3-card:nth-child(4){animation-duration:9s;animation-delay:-1s}
html.sky-paused .d3-stage .d3-card{animation-play-state:paused}

/* ---------- Flow ---------- */
.d3-flow{--w:62%;--step:52%;--gap:18%;display:grid;grid-template-columns:auto minmax(0,1fr) auto;grid-template-areas:"head head head" "track track track" "prev status next";column-gap:var(--sp-3);row-gap:var(--sp-4);align-items:center}
.d3-head{grid-area:head}
.d3-track{grid-area:track;display:grid;perspective:1400px;perspective-origin:50% 42%;overflow:hidden;padding-block:var(--sp-5);touch-action:pan-y;user-select:none;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.d3-item{--s:clamp(-1,var(--o,0),1);--a:max(var(--o,0),calc(var(--o,0)*-1));grid-area:1/1;justify-self:center;width:var(--w);z-index:calc(9 - var(--a));opacity:clamp(0,calc(1.7 - var(--a)*.6),1);transform:translate3d(calc(var(--s)*var(--step) + (var(--o,0) - var(--s))*var(--gap)),0,calc(var(--a)*-110px)) rotateY(calc(var(--s)*52deg));transition:transform var(--dur-ui) var(--ease),opacity var(--dur-ui) var(--ease)}
.d3-item[aria-hidden=true]{cursor:pointer}
.d3-item.d3-far{display:none}
.d3-item picture,.d3-item a{display:block}
.d3-item img{display:block;width:100%;height:auto;border:1px solid var(--rule);border-radius:var(--r-card);background:#fff;box-shadow:0 18px 32px -16px rgba(0,13,47,.4),0 2px 6px rgba(0,13,47,.1)}
.d3-item figcaption{min-height:3em;margin-top:var(--sp-3);font-size:var(--fs-body-sm);line-height:1.5;color:var(--fg-2);text-align:center;opacity:calc(1 - var(--a))}
.d3-prev,.d3-next{display:inline-flex;align-items:center;justify-content:center;min-width:44px;min-height:44px;padding:var(--sp-2) var(--sp-4);border:1px solid var(--input);border-radius:var(--r-inner);background:#fff;color:var(--ink);font:600 var(--fs-body-sm)/1.2 var(--sans);cursor:pointer;transition:border-color var(--dur-press) var(--ease)}
.d3-prev{grid-area:prev}
.d3-next{grid-area:next}
.d3-prev:hover,.d3-next:hover{border-color:var(--bl-obj)}
.d3-prev[aria-disabled=true],.d3-next[aria-disabled=true]{border-color:var(--rule);color:var(--fg-2);cursor:default}
.d3-status{grid-area:status;max-width:none;text-align:center;font:600 var(--fs-body-sm)/var(--lh-ui) var(--sans);color:var(--fg-2)}
.d3-sr{position:absolute;width:1px;height:1px;margin:0;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}
@media (min-width:1024px){.d3-flow{--w:56%}}
@media (max-width:767px){.d3-stage{aspect-ratio:3/2;--w:52%}.d3-flow{--w:76%;--step:48%;--gap:14%}}

/* ---------- Reduced motion: flat ---------- */
@media (prefers-reduced-motion:reduce){
  .hf__media{overflow:visible}
  .d3-stage,.d3-stage.d3-live{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--grid-gap);aspect-ratio:auto;overflow:visible;transform:none;will-change:auto}
  .d3-stage .d3-card,.d3-stage.d3-live .d3-card{position:static;width:auto;transform:none;box-shadow:none;animation:none;transition:none;will-change:auto}
  .d3-flow{display:none}
}

/* ---------- Forced colors: real borders stay ---------- */
@media (forced-colors:active){
  .d3-card,.d3-item img{border-color:CanvasText}
  .d3-prev,.d3-next{border-color:ButtonText}
}
@media print{.d3-flow{display:none}}