/* Playground v3, homepage (owner 2026-10-11). Prototype: design/playground-assets (playground-embed.html, approved).
   The section keeps the site's heading (components.css .section-head) in normal flow; below it the wall: a full-bleed,
   100svh WebGL lens over an endless card grid (js/playground.js), which captures page scroll when it reaches the top.
   Side panel from the right. All values from tokens.css (--pg-* and the shared ones). */

/* ---------- the wall ---------- */
/* native sticky scrolling (owner 2026-10-11): the stage sticks inside a tall track; the page's scroll through the track
   moves the camera (js). The track is only tall with WebGL (.is-gl); the no-WebGL card grid stays in normal flow. */
.pgw-track { position: relative; }
/* a sideways trackpad swipe over the wall pans it (js) and must never start the browser's back / forward swipe.
   Not on .pgw: it is a scroll container (overflow: hidden), and Chrome then swallows the vertical part of a diagonal
   wheel gesture that started over it (the page would not scroll) */
html, body { overscroll-behavior-x: none; }
.pgw-track.is-gl { height: calc(100vh + 300vh); height: calc(100svh + var(--pg-travel)); }
.pgw-track.is-gl > .pgw { position: sticky; top: 0; touch-action: pan-y; }   /* touch: the page scrolls vertically, js pans the wall sideways */
.pgw { position: relative; width: 100vw; margin-left: calc(50% - 50vw); height: 100vh; height: 100svh; overflow: hidden; background: var(--pg-tile); }
.pgw__wall { position: absolute; inset: 0; display: none; width: 100%; height: 100%; touch-action: pan-y; outline: none; }
.pgw.is-gl .pgw__wall { display: block; }
@media (hover: hover) and (pointer: fine) { .pgw.is-gl .pgw__wall { cursor: none; } }
.pgw__wall:focus-visible { box-shadow: inset 0 0 0 var(--bw-2) var(--c-brand); }
.pgw__fade { position: absolute; left: 0; right: 0; height: 150px; pointer-events: none; z-index: 1; }
.pgw__fade--t { top: 0; height: calc(var(--nav-h) + 120px); background: linear-gradient(var(--pg-fade), transparent); }
.pgw__fade--b { bottom: 0; background: linear-gradient(transparent, var(--pg-fade)); }
.pgw:not(.is-gl) .pgw__fade { display: none; }

/* labels: the site's label face (Glegoo bold, uppercase) */
.pgw__hint, .pgw-card__pf, .pgw-card__tg span, .pgp__ey, .pgp-meta dt, .pgp__sec, .pgp-next span {
  font-family: var(--font-glegoo); font-weight: var(--fw-bold); font-size: var(--pg-label-fs); line-height: 1.4;
  letter-spacing: var(--pg-label-ls); text-transform: uppercase; }
/* hint (bottom centre) and the Exit pill (bottom left): only while the wall holds the page */
.pgw__hint { position: absolute; z-index: 2; left: 50%; bottom: calc(var(--page-margin) + env(safe-area-inset-bottom, 0px));   /* level with the Exit pill */ transform: translateX(-50%);
  padding: 10px var(--sp-16); border-radius: 999px; background: var(--c-btn-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border);
  color: var(--pg-pill-text); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity 0.6s; }
.pgw__hint.is-up { bottom: calc(var(--page-margin) + env(safe-area-inset-bottom, 0px) + var(--pg-exit-h) + var(--sp-8)); }   /* above the Exit pill, 8 px gap */
.pgw__hint.is-on { opacity: 1; pointer-events: auto; cursor: default; }   /* an overlay while shown: no wall cursor / hover under it */
/* Exit pill (owner 2026-10-11): "Exit" + two round yellow buttons, ↑ the section above, ↓ the section below.
   The pill has the secondary button look; tooltips name the sections (pointer hover and keyboard focus) */
.pgw-exit { position: absolute; z-index: 3; left: var(--page-margin); bottom: calc(var(--page-margin) + env(safe-area-inset-bottom, 0px));   /* same gutter as the left; clears the iPhone home bar */
  display: inline-flex; align-items: center; gap: var(--pg-exit-gap); height: var(--pg-exit-h); padding: 0 var(--pg-exit-pad-r) 0 var(--pg-exit-pad-l); border-radius: 999px;
  background: var(--c-btn-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border), var(--shadow-btn);
  font-family: var(--font-figtree); font-weight: var(--fw-semibold); font-size: var(--btn-fs); line-height: 1; color: var(--c-grey-e6e9f3); white-space: nowrap; }
.pgw-exit__lbl { margin-right: calc(var(--pg-exit-label-gap) - var(--pg-exit-gap)); }   /* 14 px from "Exit" to ↑ */
.pgw-exit__b { position: relative; display: grid; place-items: center; flex: none; width: var(--pg-exit-btn); height: var(--pg-exit-btn); padding: 0; border: 0; border-radius: 50%;
  background: var(--c-brand); color: var(--c-on-brand); cursor: pointer; transition: transform var(--dur-btn) ease; }
.pgw-exit__b svg { width: var(--pg-exit-icon); height: var(--pg-exit-icon); }
.pgw-exit__b::before { content: ""; position: absolute; inset: calc((var(--tap) - var(--pg-exit-btn)) / -2); }   /* 44 px tap area */
.pgw-exit__tip { position: absolute; left: 50%; bottom: calc(100% + var(--sp-12)); transform: translate(-50%, 4px); padding: 8px 12px; border-radius: var(--r-8);
  background: var(--c-btn-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border), var(--shadow-btn); color: var(--c-white);
  font-family: var(--font-figtree); font-weight: var(--fw-medium); font-size: 13px; line-height: 1.2; white-space: nowrap;
  opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.15s, transform 0.15s, visibility 0s linear 0.15s; }
.pgw-exit__b:first-of-type .pgw-exit__tip { left: 0; transform: translate(-12px, 4px); }
.pgw-exit__b:focus-visible .pgw-exit__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.15s, transform 0.15s; }
.pgw-exit__b:first-of-type:focus-visible .pgw-exit__tip { transform: translate(-12px, 0); }
@media (hover: hover) {
  .pgw-exit__b:hover { transform: translateY(-2px); }
  .pgw-exit__b:hover .pgw-exit__tip { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition: opacity 0.15s, transform 0.15s; }
  .pgw-exit__b:first-of-type:hover .pgw-exit__tip { transform: translate(-12px, 0); }
}
.pgw:not(.is-stuck) .pgw-exit { opacity: 0; transform: translateY(10px); visibility: hidden; pointer-events: none;
  transition: opacity 0.35s, transform 0.35s, visibility 0s linear 0.35s; }
.pgw.is-stuck .pgw-exit { transition: opacity 0.35s, transform 0.35s, visibility 0s; }
@media (max-width: 767.98px) { .pgw__hint { display: none; } }

/* custom cursor (fine pointers, over the wall only) */
.pgw-cur { position: fixed; left: 0; top: 0; z-index: var(--z-pg-cur); width: var(--pg-cur); height: var(--pg-cur); margin: calc(var(--pg-cur) / -2) 0 0 calc(var(--pg-cur) / -2);
  border-radius: 50%; background: var(--c-brand); pointer-events: none; display: grid; place-items: center; opacity: 0; will-change: transform;
  transition: width 0.25s var(--pg-ease), height 0.25s var(--pg-ease), margin 0.25s var(--pg-ease), background-color 0.2s, opacity 0.2s; }
.pgw-cur span { font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: 12px; line-height: 1; color: var(--c-on-brand); opacity: 0; transition: opacity 0.15s; white-space: nowrap; }
.pgw-cur.is-on { opacity: 1; }
.pgw-cur.is-view { width: var(--pg-cur-view); height: var(--pg-cur-view); margin: calc(var(--pg-cur-view) / -2) 0 0 calc(var(--pg-cur-view) / -2); }
.pgw-cur.is-view span { opacity: 1; }
.pgw-cur.is-drag { width: var(--pg-cur-drag); height: var(--pg-cur-drag); margin: calc(var(--pg-cur-drag) / -2) 0 0 calc(var(--pg-cur-drag) / -2); background: transparent; box-shadow: inset 0 0 0 var(--bw-2) var(--c-brand); }
.pgw-cur.is-drag span { opacity: 1; color: var(--c-brand); }
@media (hover: none), (pointer: coarse) { .pgw-cur { display: none; } }

/* ---------- no-WebGL card grid (also the no-script state) ---------- */
.pgw:not(.is-gl) { height: auto; overflow: visible; padding: 0 var(--page-margin) var(--sp-24); }
.pgw.is-gl .pgw__grid { display: none; }
.pgw__grid { list-style: none; margin: 0 auto; padding: 0; max-width: var(--page-w); display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr));
  gap: var(--bw-1); background: var(--pg-line); border: var(--bw-1) solid var(--pg-line); }
.pgw-card { all: unset; box-sizing: border-box; width: 100%; height: 100%; display: grid; gap: 14px; padding: var(--sp-16); background: var(--pg-tile); cursor: pointer; transition: background-color 0.2s; }
.pgw-card__hd, .pgw-card__ft { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-width: 0; }
.pgw-card__nm { font-family: var(--font-figtree); font-weight: var(--fw-bold); font-size: 15px; color: var(--pg-fg); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pgw-card__pf { color: var(--pg-muted); white-space: nowrap; font-size: 10px; }
.pgw-card__im { display: block; border-radius: var(--r-10); overflow: hidden; aspect-ratio: 4 / 3; }
.pgw-card__im img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--pg-ease); }
.pgw-card__tg { display: flex; flex-wrap: wrap; gap: 6px; }
.pgw-card__tg span { font-size: 10px; letter-spacing: 0.06em; padding: 5px 8px; border-radius: 999px; box-shadow: inset 0 0 0 var(--bw-1) var(--pg-pill-line); color: var(--pg-pill-text); transition: background-color 0.2s, color 0.2s, box-shadow 0.2s; }
.pgw-card__go { display: none; font-family: var(--font-figtree); font-weight: var(--fw-extrabold); font-style: italic; font-size: 13px; color: var(--c-brand); white-space: nowrap; }
.pgw-card__go i { font-style: italic; font-weight: var(--fw-black); }
@media (hover: hover) { .pgw-card:hover { background: var(--pg-tile-hover); } .pgw-card:hover .pgw-card__im img { transform: scale(1.035); }
  .pgw-card:hover .pgw-card__tg span { background: var(--c-brand); box-shadow: none; color: var(--c-on-brand); }
  .pgw-card:hover .pgw-card__go { display: inline; } }
.pgw-card:focus-visible { outline: var(--bw-2) solid var(--c-brand); outline-offset: calc(var(--bw-2) * -1); }

/* ---------- side panel ---------- */
.pgp-veil { position: fixed; inset: 0; z-index: var(--z-pg-veil); background: var(--pg-veil); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px);
  opacity: 0; pointer-events: none; transition: opacity 0.35s; }
.pgp-veil.is-on { opacity: 1; pointer-events: auto; }
html.pgp-open { overflow: hidden; }
.pgp { position: fixed; top: 0; right: 0; bottom: 0; z-index: var(--z-pg-panel); width: min(var(--pg-panel-w), 100%); display: flex; flex-direction: column;
  background: var(--pg-panel); box-shadow: inset var(--bw-1) 0 0 var(--pg-line); color: var(--pg-fg);
  transform: translateX(102%); transition: transform var(--pg-dur-panel) var(--pg-ease); visibility: hidden; }
.pgp.is-open { transform: none; visibility: visible; }
.pgp:not(.is-open) { transition: transform var(--pg-dur-panel) var(--pg-ease), visibility 0s linear var(--pg-dur-panel); }
.pgp__hd { display: flex; align-items: center; justify-content: flex-end; gap: 10px; padding: calc(14px + env(safe-area-inset-top, 0px)) var(--sp-20) 14px; box-shadow: inset 0 calc(var(--bw-1) * -1) 0 var(--pg-line); }
/* 44 px round icon buttons, the site's secondary button look (dark pill; yellow on pointer hover / focus) */
.pgp__ib { flex: none; display: grid; place-items: center; width: var(--tap); height: var(--tap); padding: 0; border: 0; border-radius: 50%; cursor: pointer;
  background: var(--c-btn-bg); box-shadow: inset 0 0 0 var(--bw-1) var(--c-btn-border), var(--shadow-btn); color: var(--c-grey-e6e9f3);
  transition: background-color var(--dur-btn) ease, box-shadow var(--dur-btn) ease, color var(--dur-btn) ease, transform var(--dur-btn) ease; }
.pgp__ib svg { width: 20px; height: 20px; }
@media (hover: hover) { .pgp__ib:hover, .pgp__ib:focus-visible { background: var(--c-brand-20); box-shadow: inset 0 0 0 var(--bw-1) var(--c-brand), var(--shadow-btn); color: var(--c-white); transform: translateY(-2px); } }
.pgp__bd { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; padding: 26px clamp(18px, 4vw, 36px) 50px; display: grid; gap: 22px; align-content: start;
  grid-auto-rows: max-content; }   /* rows never shrink: with the body taller than the panel, the fact box (overflow hidden) collapsed to 2 px */
.pgp__ey { color: var(--c-brand); }
.pgp__ey i { font-style: normal; margin: 0 0.5em; }
.pgp__nm { margin: -8px 0 0; font-family: var(--font-figtree); font-weight: var(--fw-black); font-style: italic; font-size: var(--pg-title-fs); line-height: 1; letter-spacing: -0.02em; text-wrap: balance; overflow-wrap: anywhere; }
.pgp__ln { margin: 0; font-size: 18px; line-height: 1.5; max-width: 52ch; }
.pgp__ds { margin: 0; font-size: 15px; line-height: 1.65; color: var(--pg-pill-text); max-width: 62ch; }
.pgp-meta { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bw-1); background: var(--pg-line); border: var(--bw-1) solid var(--pg-line); border-radius: 14px; overflow: hidden; }
.pgp-meta div { background: var(--pg-panel); padding: 14px var(--sp-16); display: grid; gap: 6px; align-content: start; }
.pgp-meta dt { color: var(--pg-muted); font-size: 10px; }
.pgp-meta dd { margin: 0; font-weight: var(--fw-bold); font-size: 14px; }
.pgp-shots { display: grid; gap: 14px; }
.pgp-shots img { display: block; width: 100%; height: auto; }
.pgp-cover { border-radius: 14px; overflow: hidden; aspect-ratio: 4 / 3; background: var(--pg-tile); }
.pgp-cover img { height: 100%; object-fit: cover; }
.pgp__sec { display: flex; justify-content: space-between; margin-top: 6px; color: var(--pg-muted); }
.pgp-web { border-radius: var(--r-12); overflow: hidden; box-shadow: 0 0 0 var(--bw-1) var(--pg-line); background: var(--c-white); }
.pgp-mob { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-12); align-items: start; }
/* phone frame (owner 2026-10-11): a dark bezel around each mobile screen, 1 px line, concentric radii (28 = 22 + 6) */
.pgp-phone { padding: var(--pg-phone-pad); border-radius: var(--pg-phone-r-out); background: var(--pg-phone-bezel); box-shadow: inset 0 0 0 var(--bw-1) var(--pg-line); }
.pgp-phone img { aspect-ratio: 428 / 926; object-fit: cover; object-position: top; border-radius: var(--pg-phone-r); background: var(--c-white); }
.pgp-next { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-16);
  box-shadow: inset 0 var(--bw-1) 0 var(--pg-line); padding-top: 22px; margin-top: 8px; }
.pgp-next span { color: var(--pg-muted); flex: none; }
.pgp-next b { font-family: var(--font-figtree); font-weight: var(--fw-black); font-style: italic; font-size: var(--pg-next-fs); line-height: 1.1; text-align: right; transition: color 0.2s; }
@media (hover: hover) { .pgp-next:hover b { color: var(--c-brand); } }
.pgp-next__end { font-style: inherit; white-space: nowrap; }
/* 0.5em of the name, 0.3em gap; centred on the cap height (0.5cap above the baseline), colour = the name's */
.pgp-next__ar { display: inline-block; width: 0.5em; height: 0.5em; margin-left: 0.3em; vertical-align: calc(0.5cap - 0.25em); transition: transform var(--dur-btn) var(--ease-out); }
@media (hover: hover) { .pgp-next:hover .pgp-next__ar { transform: translateX(4px); } }
.pgp-next:focus-visible .pgp-next__ar { transform: translateX(4px); }
.pgp-next:focus-visible { outline: var(--bw-2) solid var(--c-brand); outline-offset: 6px; }
@media (max-width: 767.98px) {
  .pgp-mob { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pgp-phone { padding: var(--pg-phone-pad-phone); border-radius: var(--pg-phone-r-out-phone); }   /* two columns: scaled ~0.88 with the frame width */
  .pgp-phone img { border-radius: var(--pg-phone-r-phone); }
  .pgp-next b { font-size: 22px; }
  .pgw-exit { padding: 0 var(--pg-exit-pad-r); }   /* phones: arrows only, 8 px all round (8 + 32 + 6 + 32 + 8 = 86 x 48) */
  .pgw-exit__lbl { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .pgp-next__ar, .pgp, .pgp-veil, .pgw__hint, .pgw-exit, .pgw-exit__b, .pgw-exit__tip, .pgw-cur, .pgw-card, .pgw-card__im img { transition: none !important; }
  .pgp-next .pgp-next__ar { transform: none !important; }   /* no movement */
}