/* henrywang.work home hero (hero3d). Intro text left, a rendered 3D model right that the visitor lights by moving the sun;
   stacked on phones. Theme tokens are local to the hero; point them at the site's own tokens when they match. */
.hero3d { --h3-bg: #ffffff; --h3-fg: #111111; --h3-muted: #6d6c68; --h3-hair: #e4e3df; --h3-sun: #e39a2d;
  --h3-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --h3-gut: clamp(16px, 4vw, 56px);
  --h3-still: url("fallback-light.webp"); font-family: var(--h3-font); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero3d { --h3-bg: #0f0f0f; --h3-fg: #ededeb; --h3-muted: #9b9a95; --h3-hair: #2a2a28; --h3-sun: #f0ae4a; --h3-still: url("fallback-dark.webp"); }
}
:root[data-theme="dark"] .hero3d { --h3-bg: #0f0f0f; --h3-fg: #ededeb; --h3-muted: #9b9a95; --h3-hair: #2a2a28; --h3-sun: #f0ae4a; --h3-still: url("fallback-dark.webp"); }
:where(.hero3d) p, :where(.hero3d) h1, :where(.hero3d) ul { margin: 0; }
.hero3d { position: relative; background: var(--h3-bg); color: var(--h3-fg); height: clamp(620px, 92svh, 1000px); overflow: hidden; user-select: none; -webkit-user-select: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28' viewBox='0 0 28 28'%3E%3Ccircle cx='14' cy='14' r='6' fill='%23e39a2d'/%3E%3Cg stroke='%23e39a2d' stroke-width='1.6' stroke-linecap='round'%3E%3Cpath d='M14 2v3M14 23v3M2 14h3M23 14h3M5.5 5.5l2.1 2.1M20.4 20.4l2.1 2.1M5.5 22.5l2.1-2.1M20.4 7.6l2.1-2.1'/%3E%3C/g%3E%3C/svg%3E") 14 14, crosshair; }
.hero3d:focus { outline: none; }
.hero3d:focus-visible { outline: 2px solid var(--h3-fg); outline-offset: -6px; }
.h3-stage { position: absolute; inset: 0; touch-action: pan-y; }
.h3-stage canvas { display: block; width: 100%; height: 100%; opacity: 0; transition: opacity 0.9s ease;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%); }
.hero3d.is-ready .h3-stage canvas { opacity: 1; }
@media (min-width: 761px) {
  .h3-stage canvas { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%), linear-gradient(to right, transparent 31%, #000 45%);
    -webkit-mask-composite: source-in; mask-image: linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%), linear-gradient(to right, transparent 31%, #000 45%); mask-composite: intersect; }
}
.h3-copy { position: absolute; z-index: 2; left: var(--h3-gut); top: clamp(104px, 16vh, 168px); width: min(31rem, 37vw); pointer-events: none; }
.h3-copy h1 { margin: 0; font-weight: 500; font-size: clamp(30px, 3.1vw, 46px); line-height: 1.1; letter-spacing: -0.022em; text-wrap: balance; }
.h3-copy .intro { margin: 22px 0 0; font-size: clamp(15px, 1.12vw, 17px); line-height: 1.62; color: var(--h3-muted); }
.h3-creds { list-style: none; margin: 24px 0 0; padding: 14px 0 0; border-top: 1px solid var(--h3-hair); display: grid; gap: 3px; font-size: 13.5px; line-height: 1.5; }
.h3-foot { position: absolute; z-index: 2; left: var(--h3-gut); right: var(--h3-gut); bottom: clamp(18px, 3.2vh, 34px); display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px 32px; pointer-events: none; }
.h3-readout { display: flex; align-items: center; gap: 14px; min-width: 0; font-size: 12.5px; line-height: 1.55; font-variant-numeric: tabular-nums; }
.h3-readout svg { flex: none; width: 64px; height: 64px; overflow: visible; }
.h3-readout p { margin: 0; }
.h3-readout .when { color: var(--h3-fg); font-weight: 500; }
.h3-readout .alt, .h3-readout .model { color: var(--h3-muted); }
.h3-side { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.h3-models { display: flex; gap: 18px; pointer-events: auto; }
.h3-models button { font: inherit; font-size: 12.5px; color: var(--h3-muted); background: none; border: 0; border-bottom: 1px solid transparent; border-radius: 0; padding: 2px 0; cursor: pointer; }
.h3-models button:hover, .h3-models button:focus-visible { color: var(--h3-fg); }
.h3-models button[aria-pressed="true"] { color: var(--h3-fg); border-bottom-color: var(--h3-fg); }
.h3-hint { margin: 0; font-size: 12.5px; color: var(--h3-muted); text-align: right; }
.h3-dates { display: none; }
.h3-fallback { position: absolute; right: var(--h3-gut); top: 45%; display: none; max-width: 22rem; color: var(--h3-muted); font-size: 13px; }
.hero3d.is-nogl .h3-fallback { display: block; }
@media (max-width: 760px) {
  .hero3d { height: auto; overflow: visible; cursor: auto; }
  .h3-copy { position: static; width: auto; padding: 92px var(--h3-gut) 0; }
  .h3-copy h1 { font-size: clamp(28px, 8.4vw, 38px); }
  .h3-stage { position: relative; inset: auto; height: clamp(300px, 86vw, 470px); margin-top: 6px; }
  .h3-foot { position: static; flex-direction: column; align-items: flex-start; padding: 0 var(--h3-gut) 28px; }
  .h3-readout { gap: 12px; }
  .h3-readout svg { width: 56px; height: 56px; }
  .h3-side { align-items: flex-start; }
  .h3-hint { text-align: left; }
  .h3-fallback { position: static; padding: 0 var(--h3-gut); }
}
@media (hover: none) {
  .hero3d { cursor: auto; }
  .h3-dates { display: flex; gap: 6px; pointer-events: auto; }
  .h3-dates button { font: inherit; font-size: 12.5px; color: var(--h3-muted); background: var(--h3-bg); border: 1px solid var(--h3-hair); border-radius: 0; padding: 6px 9px; }
  .h3-dates button[aria-pressed="true"] { color: var(--h3-fg); border-color: var(--h3-fg); }
}

/* no WebGL, or the model failed to load: a still render of the hero (3:30 pm, mid October) fills the stage instead */
.h3-fallback { display: none !important; }
.hero3d.is-nogl .h3-stage::after { content: ""; position: absolute; inset: 0; background: var(--h3-still) 61.8% 50% / cover no-repeat; }
@media (max-width: 760px) { .hero3d.is-nogl .h3-stage::after { background-position: 75% 50%; } }
.hero3d.is-nogl .h3-stage canvas, .hero3d.is-nogl .h3-readout, .hero3d.is-nogl .h3-hint, .hero3d.is-nogl .h3-dates, .hero3d.is-nogl .h3-models { display: none; }

/* henrywang.work: the site's colour tokens and page width, under its sticky 68 px header */
.hero3d { --h3-bg: var(--bg); --h3-fg: var(--ink); --h3-muted: var(--ink-2); --h3-hair: var(--line); --h3-font: var(--font);
  --h3-gut: max(var(--gutter), calc((100% - var(--max)) / 2)); height: clamp(560px, calc(92svh - 68px), 940px); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .hero3d { --h3-bg: var(--bg); --h3-fg: var(--ink); --h3-muted: var(--ink-2); --h3-hair: var(--line); }
}
:root[data-theme="dark"] .hero3d { --h3-bg: var(--bg); --h3-fg: var(--ink); --h3-muted: var(--ink-2); --h3-hair: var(--line); }
.h3-copy { top: clamp(40px, 8.5vh, 100px); }
body.has-cursor .hero3d { cursor: none; }          /* the site's own cursor turns into the sun over the hero */
@media (max-width: 760px) { .hero3d { height: auto; } .h3-copy { padding-top: 28px; } .h3-stage { height: clamp(300px, 92vw, 560px); } }
.h3-readout .credit { color: var(--h3-muted); font-size: 11px; opacity: 0.8; }