/* Immersive home: a hazy blurred backdrop and a 3D fly-through of the work */
body.home { background: #02030a; color: #fff; overflow: hidden; height: 100svh; }

.stage { position: fixed; inset: 0; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }

/* Backdrop = a volumetric "phantom space" cloud rendered in WebGL (volume.js) */
.volume { position: absolute; inset: 0; width: 100%; height: 100%; display: block; background: #02030a; }
/* vignette + top/bottom scrims for legibility, and fine film grain */
.haze {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden;
  background:
    linear-gradient(to bottom, rgba(0,0,0,.35), transparent 24%, transparent 58%, rgba(0,0,0,.6)),
    radial-gradient(ellipse at 50% 50%, transparent 55%, rgba(0,0,0,.55));
}
.haze::after {
  content: ""; position: absolute; inset: 0; mix-blend-mode: overlay; opacity: .14;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
}

/* 3D scene */
.scene { position: absolute; inset: 0; perspective: 1100px; perspective-origin: 50% 52%; }   /* eye level with the cards, so the row stays flat */
.rig { position: absolute; inset: 0; transform-style: preserve-3d; will-change: transform; }

.c {
  /* the card's own centre sits exactly on the ring's axis (left/top 50%/52% minus half its size), so the ring is symmetrical */
  position: absolute; left: 50%; top: 52%; height: var(--h, 240px); width: calc(var(--h, 240px) * var(--r, 1));
  margin-left: calc(var(--h, 240px) * var(--r, 1) * -0.5); margin-top: calc(var(--h, 240px) * -0.5);
  padding: 0; border: 0; border-radius: 14px; overflow: hidden; cursor: inherit;
  background: var(--g, #555); color: #fff; backface-visibility: hidden; will-change: transform, opacity;
  box-shadow: 0 26px 60px rgba(0,0,0,.4);
}
.c.is-film { background: #000; }
.c.is-film img, .c video { object-fit: contain; }   /* the whole video frame, never cropped */
.c video { width: 100%; height: 100%; display: block; pointer-events: none; background: #000; }
.c img { width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; -webkit-user-drag: none; opacity: 0; transition: opacity .5s; }
.c img.in { opacity: 1; }
.c::after { content: ""; position: absolute; inset: 0; background: rgba(255,255,255,var(--veil, 0)); pointer-events: none; }
.c.is-film::before {
  content: ""; position: absolute; z-index: 1; top: 10px; right: 10px; width: 28px; height: 28px; border-radius: 50%;
  background: rgba(0,0,0,.45) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 6.5v11l9-5.5z'/%3E%3C/svg%3E") center / 20px no-repeat;
}
.c.has-video::before { display: none; }
.c:focus-visible { outline: none; }

/* Glass UI */
.glass {
  background: rgba(255,255,255,.10); border: 1px solid rgba(255,255,255,.22); border-radius: 12px;
  backdrop-filter: blur(16px) saturate(1.5); -webkit-backdrop-filter: blur(16px) saturate(1.5);
}
.glass-nav { position: absolute; z-index: 6; top: 16px; right: var(--gutter); display: flex; overflow: hidden; }
.glass-nav a {
  color: #fff; text-decoration: none; padding: 11px clamp(12px, 1.6vw, 22px); font-family: var(--display); font-weight: 500; font-size: clamp(14px, 1.15vw, 16px);
  border-left: 1px solid rgba(255,255,255,.22); transition: background .2s;
}
.glass-nav a:first-child { border-left: 0; }
.glass-nav a:hover { background: rgba(255,255,255,.16); }




.nojs { position: absolute; z-index: 9; inset: 0; display: grid; place-items: center; background: #0a0c0d; font-size: 18px; }

@media (max-width: 640px) {
  .glass-nav { top: 14px; }
  .glass-nav a { padding: 10px 12px; font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
}

/* Keep the small crosshair the same size; invert its color over thumbnails only. */
body.home, body.home * { cursor: url("assets/cursor-crosshair-black.svg?v=20261022-outline6") 8 8, crosshair; }
body.home .c, body.home .c * { cursor: url("assets/cursor-crosshair-white.svg?v=20261022-hover7") 9 9, crosshair; }

/* my name, top left */
.wordmark {
  position: absolute; z-index: 6; top: 22px; left: var(--gutter); color: #fff; text-decoration: none;
  font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(18px, 2vw, 24px); line-height: 1;
  text-shadow: 0 1px 14px rgba(0,0,0,.35); padding: 10px 0;
}
@media (max-width: 640px) { .wordmark { top: 20px; } }

/* no work titles on the home page, not even in the viewer */
body.home #lb-caption { display: none; }

/* while a card flips and opens, tuck the UI away */
.stage.is-entering .glass, .stage.is-entering .wordmark { opacity: 0; transition: opacity .4s; pointer-events: none; }

/* loading screen: 0 → 100% */
.loader {
  position: fixed; inset: 0; z-index: 60; background: #02030a; color: #fff;
  display: flex; flex-direction: column; justify-content: space-between; padding: 22px var(--gutter) 0;
  transition: opacity .8s ease, visibility .8s;
}
.loader.done { opacity: 0; visibility: hidden; pointer-events: none; }
.loader-name { font-family: var(--display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(18px, 2vw, 24px); padding: 10px 0; }
.loader-main { display: flex; align-items: flex-end; padding-bottom: clamp(18px, 3vw, 36px); }
.pct { font-family: var(--display); font-weight: 900; font-size: clamp(110px, 26vw, 360px); line-height: .78; letter-spacing: -0.05em; font-variant-numeric: tabular-nums; min-width: 2.1ch; }
.pct-sign { font-family: var(--mono); font-size: clamp(16px, 2.4vw, 30px); letter-spacing: .1em; opacity: .7; margin: 0 0 .4em .4em; }
.bar { height: 3px; background: rgba(255,255,255,.16); margin: 0 calc(-1 * var(--gutter)); }
.bar i { display: block; height: 100%; width: 0; background: #fff; }

/* A fine white rim and diffuse halo highlight the hovered thumbnail. */
.stage {
  --card-hover-shadow:
    0 0 0 1px rgba(255, 255, 255, .55),
    0 28px 64px rgba(0, 0, 0, .45),
    0 0 30px 10px rgba(255, 255, 255, .4),
    0 0 76px 24px rgba(255, 255, 255, .3),
    0 0 130px 44px rgba(255, 255, 255, .2);
}
.c { transition: box-shadow .08s ease-out; }
.stage:not(.is-dragging):not(.is-entering) .c:focus-visible {
  box-shadow: var(--card-hover-shadow);
}
@media (hover: hover) and (pointer: fine) {
  .stage:not(.is-dragging):not(.is-entering) .c:hover {
    box-shadow: var(--card-hover-shadow);
  }
}
@media (prefers-reduced-motion: reduce) {
  .c { transition: none; }
}