/* ============================================================================
   DALC — photography stage (work-photography.html, "Selected work")
   A dark viewfinder band: folder covers on a drag strip, centre panel in
   colour, a HUD bar with a fisheye toggle, a tick ruler, and a compass cursor
   whose needle swings toward the direction you drag and settles back to north.
   The strip itself is drawn by photo-stage.js in WebGL. Everything inside
   .ps-src is the real, crawlable markup — it is also the no-WebGL fallback.
   ========================================================================== */
.ps{--ps-bg:#111;--ps-ink:#f3eee6;--ps-dim:rgba(243,238,230,.56);--ps-red:#F26B4D;--ps-teal:#1FA396;
    --ps-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
    position:relative;background:var(--ps-bg);color:var(--ps-ink);margin:0 0 40px;
    font-family:var(--ps-mono);letter-spacing:.02em}

/* ── live stage (hidden until photo-stage.js confirms WebGL) ─────────────── */
.ps-view,.ps-bar,.ps-ruler,.ps-cursor{display:none}
.ps.is-live .ps-view{display:block}
.ps.is-live .ps-bar{display:grid}
.ps.is-live .ps-ruler{display:block}
.ps.is-live .ps-src{display:none}

.ps-view{position:relative;height:clamp(420px,72vh,760px);outline:none;touch-action:pan-y;
    user-select:none;-webkit-user-select:none}
.ps-view:focus-visible{box-shadow:inset 0 0 0 2px var(--ps-teal)}
.ps-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .28s}
.ps.is-swapping .ps-canvas{opacity:0}
@media (hover:hover) and (pointer:fine){ .ps-view{cursor:none} }

/* ── HUD bar ─────────────────────────────────────────────────────────────── */
.ps-bar{grid-template-columns:1fr auto 1fr;align-items:center;gap:20px;padding:20px 32px 14px;
    font-size:12.5px;text-transform:uppercase}
.ps-left{display:flex;align-items:center;gap:20px}
.ps-right{display:flex;justify-content:flex-end;align-items:center;gap:18px;color:var(--ps-dim)}
/* bracketed box — four corner ticks, like a viewfinder frame */
.ps-box{position:relative;display:grid;place-items:center;width:100px;height:50px;flex:none;perspective:300px}
.ps-box::before,.ps-box::after{content:"";position:absolute;inset:0;pointer-events:none;
    border:1.5px solid var(--ps-ink);
    -webkit-mask:linear-gradient(#000 0 0) top left/10px 10px no-repeat,
                 linear-gradient(#000 0 0) top right/10px 10px no-repeat,
                 linear-gradient(#000 0 0) bottom left/10px 10px no-repeat,
                 linear-gradient(#000 0 0) bottom right/10px 10px no-repeat;
            mask:linear-gradient(#000 0 0) top left/10px 10px no-repeat,
                 linear-gradient(#000 0 0) top right/10px 10px no-repeat,
                 linear-gradient(#000 0 0) bottom left/10px 10px no-repeat,
                 linear-gradient(#000 0 0) bottom right/10px 10px no-repeat}
.ps-box::after{display:none}
/* client logos take turns: each holds ~3s, then flips edge-on and hands over */
.ps-logo{grid-area:1/1;width:auto;height:auto;max-width:76px;max-height:28px;object-fit:contain;
    opacity:0;backface-visibility:hidden;animation:psLogo 7s cubic-bezier(.45,0,.2,1) infinite}
.ps-logo + .ps-logo{animation-delay:-3.5s}
@keyframes psLogo{
  0%{opacity:0;transform:rotateY(-90deg)}
  6%,44%{opacity:1;transform:rotateY(0)}
  50%,100%{opacity:0;transform:rotateY(90deg)}
}
@media (prefers-reduced-motion:reduce){ .ps-logo{animation-name:psLogoFade} }
@keyframes psLogoFade{ 0%{opacity:0} 6%,44%{opacity:1} 50%,100%{opacity:0} }

.ps-toggle,.ps-back{font:inherit;text-transform:inherit;letter-spacing:inherit;color:var(--ps-ink);
    background:none;border:0;padding:6px 0;cursor:pointer}
.ps-toggle b{font-weight:700;color:var(--ps-dim);transition:color .25s}
.ps-toggle[aria-pressed="true"] b{color:var(--ps-red)}
.ps-toggle:hover b,.ps-back:hover{color:var(--ps-ink)}
.ps-back{color:var(--ps-dim)}
.ps-back[hidden]{display:none}
.ps-toggle:focus-visible,.ps-back:focus-visible{outline:2px solid var(--ps-teal);outline-offset:4px}

.ps-center{position:relative;text-align:center;min-width:0;padding-top:4px}
.ps-center::before{content:"";position:absolute;left:50%;top:-12px;margin-left:-6px;
    border:6px solid transparent;border-top:8px solid var(--ps-red);border-bottom:0}
.ps-title{display:block;font-weight:700;font-size:14px;letter-spacing:.04em;white-space:nowrap;
    overflow:hidden;text-overflow:ellipsis}
.ps-sub{display:block;margin-top:4px;color:var(--ps-dim)}
.ps-title,.ps-sub{transition:opacity .22s,transform .22s}
.ps-center.is-changing .ps-title,.ps-center.is-changing .ps-sub{opacity:0;transform:translateY(4px)}

/* ── ruler: ticks scroll with the strip, red line stays at centre ─────────── */
.ps-ruler{position:relative;height:30px;overflow:hidden;
    background-image:
      linear-gradient(90deg,rgba(243,238,230,.62) 0 1px,transparent 1px),
      linear-gradient(90deg,rgba(243,238,230,.26) 0 1px,transparent 1px);
    background-size:100px 22px,10px 9px;background-repeat:repeat-x;
    background-position:var(--ps-tick,0px) 100%,var(--ps-tick,0px) 100%}
.ps-ruler::after{content:"";position:absolute;left:50%;bottom:0;width:2px;height:28px;margin-left:-1px;
    background:var(--ps-red)}
/* progress marker inside a folder */
.ps-mark{position:absolute;top:0;left:0;width:0;height:0;margin-left:-6px;opacity:0;
    border:6px solid transparent;border-top:8px solid var(--ps-red);border-bottom:0;
    transition:opacity .3s}
.ps[data-mode="photos"] .ps-mark{opacity:1}

/* ── compass cursor ──────────────────────────────────────────────────────── */
.ps.is-live .ps-cursor{display:block}
.ps-cursor{position:absolute;left:0;top:0;z-index:5;pointer-events:none;opacity:0;
    transition:opacity .2s;will-change:transform}
.ps-cursor.on{opacity:1}
.ps-cursor-in{display:flex;align-items:center;gap:10px;transform:translate(-23px,-23px)}
.ps-compass{position:relative;width:46px;height:46px;flex:none;transition:transform .18s}
.ps-cursor.is-down .ps-compass{transform:scale(.86)}
.ps-compass svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.ps-needle{position:absolute;inset:0;will-change:transform}
.ps-label{position:relative;padding:5px 9px;font-size:10.5px;font-weight:700;text-transform:uppercase;
    letter-spacing:.08em;color:var(--ps-ink);white-space:nowrap;
    background:rgba(17,17,17,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.ps-label::before{content:"";position:absolute;inset:0;border:1.5px solid var(--ps-ink);
    -webkit-mask:linear-gradient(#000 0 0) top left/6px 6px no-repeat,linear-gradient(#000 0 0) top right/6px 6px no-repeat,
                 linear-gradient(#000 0 0) bottom left/6px 6px no-repeat,linear-gradient(#000 0 0) bottom right/6px 6px no-repeat;
            mask:linear-gradient(#000 0 0) top left/6px 6px no-repeat,linear-gradient(#000 0 0) top right/6px 6px no-repeat,
                 linear-gradient(#000 0 0) bottom left/6px 6px no-repeat,linear-gradient(#000 0 0) bottom right/6px 6px no-repeat}

.ps-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ── crawlable source / no-WebGL fallback ────────────────────────────────── */
.ps-src{max-width:1240px;margin:0 auto;padding:44px 48px 30px}
.ps-folder{margin:0 0 44px}
.ps-folder h3{margin:0 0 4px;font-size:15px;text-transform:uppercase;letter-spacing:.06em}
.ps-folder h3 small{margin-left:10px;font-weight:400;color:var(--ps-dim)}
.ps-folder p{margin:0 0 16px;font-family:var(--font-body);font-size:15px;color:var(--ps-dim)}
.ps-grid{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:10px}
.ps-grid a{display:block;border-radius:6px;overflow:hidden}
.ps-grid img{width:100%;height:auto;aspect-ratio:3/4;object-fit:cover;display:block}  /* height:auto — the width/height attrs would otherwise win */

@media (max-width:900px){
  .ps-view{height:clamp(380px,64svh,620px)}
  .ps-bar{grid-template-columns:1fr 1fr;padding:16px 18px 12px;gap:12px 14px;font-size:11.5px}
  .ps-center{grid-column:1/-1;grid-row:1;margin-top:6px}
  .ps-left{gap:12px}
  .ps-box{width:78px;height:42px}
  .ps-logo{max-width:60px;max-height:22px}
  .ps-src{padding:30px 22px 20px}
}
/* the folder/still count is already in the "Selected work" header — no room for it twice */
@media (max-width:560px){ .ps-meta{display:none} }
@media (prefers-reduced-motion:reduce){
  .ps-canvas,.ps-title,.ps-sub{transition:none}
}