/* ?depth trial (Claude, after podium.global): the opening that replaces the hero video. depth-opening.js draws it on a
   fixed canvas over a block of scroll room in front of Work; every step is scrubbed by the scroll, so it reverses. */
html.depth .shero{ display:none; }
.depth-room{ position:relative; height:625vh; }   /* = 5 screens once the page is zoomed to 80% */
.depth-canvas{ position:fixed; inset:0; z-index:50; pointer-events:none; }
.depth-room :is(.depth-line,.depth-name,.depth-cue,.depth-pct){ position:fixed; z-index:55; margin:0; opacity:calc(1 - var(--depth-open, 0) * 4); pointer-events:none;
  transition:color .6s var(--ease); color:#1b1a17; }   /* the opening is paper in both themes */
html.light .depth-room :is(.depth-line,.depth-cue,.depth-pct){ color:#1b1a17; }
.depth-line, .depth-name{ top:50%; font:600 clamp(13px,1.05vw,15px)/1.2 "Clash Display",sans-serif; letter-spacing:.02em; text-transform:uppercase; white-space:nowrap; }
/* Jun's line sits just to the right of the dot (his sketch); scrolling in slides it away to the right */
.depth-line{ left:calc(50% + 34px); text-align:left; transform:translate(calc(var(--depth-open, 0) * 42vw), -50%); }
.depth-room :is(.depth-line,.depth-name){ opacity:calc(1 - var(--depth-open, 0) * 2.2); }
.depth-cue{ right:var(--pad); bottom:clamp(22px,4vh,40px); font:600 11px/1 "Clash Display",sans-serif; letter-spacing:.06em; text-transform:uppercase; }
.depth-pct{ left:50%; top:calc(50% + 22px); transform:translateX(-50%); font:500 10px/1 "Geist Mono",monospace; letter-spacing:.2em; transition:opacity .5s var(--ease) !important; }
.depth-room.is-loaded .depth-pct{ opacity:0 !important; }
/* the real cards wait under the flying images and take over the moment they land */
html.depth:not(.depth-landed) #work .gentry-plate{ opacity:var(--depth-plate, 0); transition:none; }   /* fades up under the landing image */
/* while the opening is on screen the header floats over it with no bar behind (only the pill and controls) */
html.depth:not(.depth-landed) .site-header.is-stuck{ background:transparent !important; border-bottom-color:transparent !important; box-shadow:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
/* inside the dark space the header's ink turns light so the clock and buttons stay readable */
html.depth.depth-in:not(.depth-landed) .site-header{ --ink:#ece8df; --muted:rgba(236,232,223,.6); color:#ece8df; }
html.depth.depth-in:not(.depth-landed) .site-header .burger span{ background:#ece8df !important; }
html.depth.depth-in:not(.depth-landed) .hdr-time{ opacity:0; transition:opacity .4s var(--ease); }   /* the LED clock is drawn in page ink; it steps aside in the dark */
/* the simpler theme switch (Jun's pick): one icon, the same size and weight as the full-screen button, in both themes */
html.depth .theme-toggle, html.depth.light .theme-toggle{ width:32px; height:32px; padding:0; justify-content:center; border:0; background:transparent; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; border-radius:10px; }
html.depth .theme-toggle .tt-knob, html.depth.light .theme-toggle .tt-knob{ transform:none; background:transparent; box-shadow:none; }
html.depth .theme-toggle .tt-sec{ display:none; }
html.depth .theme-toggle .tt-knob svg{ color:currentColor !important; }
html.depth :is(.theme-toggle,.hdr-fs){ color:var(--muted); transition:color .3s var(--ease), background-color .3s var(--ease), transform .18s var(--ease); }
html.depth :is(.theme-toggle,.hdr-fs):hover{ color:var(--ink); background:rgba(128,128,128,.12); }
html.depth :is(.theme-toggle,.hdr-fs):focus-visible{ outline:1px solid var(--ink); outline-offset:2px; }
html.depth :is(.theme-toggle,.hdr-fs):active{ transform:scale(.94); }
/* dark theme, still on the paper opening: the header's ink is dark until the space opens */
html.depth:not(.light):not(.depth-in):not(.depth-landed) .site-header{ --ink:#1b1a17; --muted:rgba(27,26,23,.6); color:#1b1a17; }
html.depth:not(.light):not(.depth-in):not(.depth-landed) .site-header .burger span{ background:#1b1a17 !important; }
/* the whole page at 80%, as if the browser were zoomed out (Jun): type, nav, cards and spacing all scale together.
   Story films and the opening canvas sit outside these and stay full size. */
html.depth #after-hero, html.depth .site-footer, html.depth .site-header, html.depth #tubelight{ zoom:.8; }
/* the lanyard is set aside in this trial (Jun) while its replacement is decided; its slot in About stays empty */
html.depth :is(#pass, .lanyard-canvas){ visibility:hidden !important; }   /* keeps its measured size, so the lanyard code stays happy */
/* the side scroll rail: a blend-based inverse did not composite over the WebGL canvas, so it switches ink with the space */
html.depth.depth-in:not(.depth-landed) .daylight-rail{ opacity:1 !important; --rail-ink:#ece8df !important; --rail-reverse-ink:#ece8df !important; color:#ece8df !important; }   /* light ink in the dark space, its own ink everywhere else */
/* the middle nav pill stays out of the opening and arrives with Work */
html.depth:not(.depth-work):not(.depth-landed) #tubelight{ opacity:0 !important; pointer-events:none !important; translate:0 -14px; }
html.depth #tubelight{ transition:opacity .5s var(--ease), translate .6s var(--ease); }
/* in the dot phase the ink drop under the pointer is the cursor, so the site cursor steps aside */
html.depth.depth-dot body:not(.story-open) :is(#cursor, .cursor, #cursorHint){ opacity:0 !important; }   /* not while a story is open over the opening (a deep link lands there) */
/* Jun's name in LED diodes, over the opening (a 2D canvas: no extra WebGL context) */
.depth-name-canvas{ position:fixed; inset:0; z-index:52; pointer-events:none; }
/* the side rail stays readable while idle in this trial */
html.depth .daylight-rail.is-idle{ opacity:.75; }
/* the clock leaves the top bar in this trial (Jun: cleaner without it) */
html.depth .hdr-time{ display:none !important; }
/* the flying Resonate card sits above the dark space while it lands */
html.depth.depth-flying #work{ z-index:60; }   /* Work (z 5) must rise above the opening canvas (z 50) while the card lands */
html.depth.depth-flying #work .gentry-item:has(.gentry[data-id="a01"]){ opacity:1 !important; transform:none !important; transition:none !important; }   /* not waiting for its scroll reveal, nor fading in over it (its .9s reveal made a fast scroll blink) */
html.depth.depth-flying #work .gentry[data-id="a01"] :is(.gentry-plate,.led-card-frame){ will-change:transform,opacity; }
/* while scrolling down the top bar and its buttons slide away (the pill stays); scroll up or hover the top to bring them back */
html.depth .site-header{ transition:transform .55s cubic-bezier(.22,1,.36,1), opacity .4s cubic-bezier(.22,1,.36,1), background-color .4s ease, border-color .4s ease; }
html.depth.nav-away .site-header:not(:hover):not(:focus-within){ transform:translateY(-100%); opacity:0; }
html.depth.nav-away .site-header::after{ content:""; position:absolute; left:0; right:0; top:100%; height:28px; }   /* a hover strip at the very top, so the bar can be summoned */
@media (prefers-reduced-motion:reduce){ html.depth .site-header{ transition:none; } }
html.depth.depth-flying #work .gentry[data-id="a01"] .gentry-plate{ opacity:1 !important; }   /* the flying card shows in full */
/* phones: the line sits under the dot, centred, and sinks away as the opening opens */
@media (max-width:640px){
  .depth-line{ left:50%; right:auto; top:calc(50% + 34px); text-align:center; white-space:normal; width:min(84vw, 320px); transform:translate(-50%, calc(var(--depth-open, 0) * 18vh)); }
}
html.depth.depth-flying #work .gentry[data-id="a01"] .gentry-ref{ opacity:0; }   /* no A.01 tag while the card flies */
/* while Resonate settles, the title and carousel stay back and fade in above it at the end (never passing behind it) */
html.depth.depth-flying #work :is(.archive-head, #workMarquee){ opacity:var(--depth-head, 0); }
/* Phone dock (Jun + Codex review R03): the home page is zoomed to .8, and zoom also scales the dock's
   "100dvh from the top" placement, so it floated about 180 px above the bottom. Divide the offset by the zoom so it sits
   on the real bottom edge at the same visual size as on the other pages. */
@media (max-width:640px) { @supports (height:100dvh) {
  html.depth .tubelight { top:calc((100dvh - 3px - env(safe-area-inset-bottom,0px)) / .8); }   /* lands 12 px off the edge, like the other pages */
} }