/* GLASSWORKS 0.99 — what the visitor sees.
   ═══════════════════════════════════════════════════════════════════════
   Only two layers live over the scan: the WORLD layer (type anchored to
   points in the scan) and the PAGE layer (2-D sheets). Both are pinned to
   the canvas box, never to the window, so the editor can put them inside
   a panel and the show can put them full-bleed with no second stylesheet.

   NOTHING HERE CATCHES A POINTER BY DEFAULT. The scan is live underneath
   every one of these layers, and a sheet that swallows a drag makes the
   whole thing feel dead. Only the elements themselves opt in.
*/

:root {
  --gw-ease: cubic-bezier(.22,.61,.36,1);
  --gw-ink: #ffffff;
}

/* the box that sits exactly over the canvas */
.gw-stage { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.gw-stage > * { pointer-events: none; }

/* THE GESTURE SHEET. Laid over the canvas so the engine's own controller
   never sees a pointer, and under everything else so a label stays
   clickable and a button stays pressable. `touch-action: none` is what
   stops the browser eating a two-finger drag as a page zoom before any
   listener is reached — without it the lens gesture cannot exist. */
.gw-input {
  position: absolute; inset: 0;
  pointer-events: auto;
  touch-action: none;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* ── the world layer: type anchored in the scan ──────────────────── */
.gw-world {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--gw-ease);
}
.gw-world.up { opacity: 1; }

.gw-hs {
  position: absolute; top: 0; left: 0;
  will-change: transform, opacity;
  transition: opacity 260ms linear;
  /* the projected point is the BOTTOM CENTRE of the box by default; the
     anchor attribute moves the box relative to that point so the stem
     meets it where the author said. */
  --ax: -50%; --ay: -100%;
}
.gw-hs[data-anchor="top-left"]      { --ax: 0;     --ay: 0; }
.gw-hs[data-anchor="top-centre"]    { --ax: -50%;  --ay: 0; }
.gw-hs[data-anchor="top-right"]     { --ax: -100%; --ay: 0; }
.gw-hs[data-anchor="left-centre"]   { --ax: 0;     --ay: -50%; }
.gw-hs[data-anchor="right-centre"]  { --ax: -100%; --ay: -50%; }
.gw-hs[data-anchor="bottom-left"]   { --ax: 0;     --ay: -100%; }
.gw-hs[data-anchor="bottom-centre"] { --ax: -50%;  --ay: -100%; }
.gw-hs[data-anchor="bottom-right"]  { --ax: -100%; --ay: -100%; }

/* A world-placed label is put on its quad by a matrix3d written from the
   projection, so the box must NOT also shift itself by the anchor — the
   homography already accounts for it. */
.gw-hs.world { transform-origin: 0 0; }
.gw-hs.world .gw-hs-box { transform: none; }

.gw-hs-box {
  transform: translate(var(--ax), var(--ay));
  display: inline-block;
  white-space: nowrap;
  transition: background 160ms linear, box-shadow 160ms linear, border-color 160ms linear;
}
.gw-hs-box.shadow { text-shadow: 0 2px 22px rgba(0,0,0,.85), 0 0 3px rgba(0,0,0,.5); }

.gw-hs-head { display: block; font-size: 1em; font-style: normal; }
.gw-hs-sub  { display: block; font-size: .34em; font-style: normal; opacity: .78; margin-top: .5em; letter-spacing: .22em; }
.gw-hs-body { display: block; font-size: .28em; margin: .9em 0 0; opacity: .72;
              white-space: normal; max-width: 26em; letter-spacing: .02em; line-height: 1.55; }

/* a slide turns the invisible box into a real panel */
.gw-hs-box.slide { white-space: normal; }

/* selected, in the editor */
.gw-hs.sel .gw-hs-box { outline: 1px solid rgba(120,200,255,.9); outline-offset: 8px; }
.gw-stage.editing .gw-hs { cursor: pointer; }

/* ── the page layer: 2-D sheets ──────────────────────────────────── */
.gw-page {
  position: absolute; inset: 0;
  opacity: 0; visibility: hidden;
  transition: opacity 420ms var(--gw-ease), visibility 0s linear 420ms;
  --dim: .45; --pageblur: 0px;
}
.gw-page.on { opacity: 1; visibility: visible; transition-delay: 0s; }

.gw-veil {
  position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 50% 40%,
              rgba(0,0,0,calc(var(--dim) * .55)) 0%,
              rgba(0,0,0,var(--dim)) 60%,
              rgba(0,0,0,calc(var(--dim) * 1.25)) 100%);
  backdrop-filter: blur(var(--pageblur));
  -webkit-backdrop-filter: blur(var(--pageblur));
  pointer-events: none;
}

.gw-el {
  position: absolute;
  transform: translate(-50%, -50%);
  opacity: 0;
  pointer-events: none;
  text-align: center;
  max-width: 86vw;
}
.gw-el.gw-text { white-space: pre-wrap; }

.gw-el.in {
  opacity: 1;
  transition: opacity var(--in-ms) var(--gw-ease) var(--in-delay),
              transform var(--in-ms) var(--gw-ease) var(--in-delay);
  transform: translate(-50%, -50%);
}
.gw-el.still { transition: none !important; }

/* the entrance offsets: the element starts displaced and lands */
.gw-el[data-in-preset="fade-up"]:not(.in)   { transform: translate(-50%, calc(-50% + 18px)); }
.gw-el[data-in-preset="fade-down"]:not(.in) { transform: translate(-50%, calc(-50% - 18px)); }
.gw-el[data-in-preset="rise"]:not(.in)      { transform: translate(-50%, calc(-50% + 42px)); }
.gw-el[data-in-preset="scale"]:not(.in)     { transform: translate(-50%, -50%) scale(.94); }
.gw-el[data-in-preset="none"]               { transition: none; }

.gw-el.out {
  opacity: 0;
  transition: opacity var(--out-ms) var(--gw-ease) var(--out-delay),
              transform var(--out-ms) var(--gw-ease) var(--out-delay);
}
.gw-el.out[data-out-preset="fade-up"]   { transform: translate(-50%, calc(-50% - 18px)); }
.gw-el.out[data-out-preset="fade-down"] { transform: translate(-50%, calc(-50% + 18px)); }
.gw-el.out[data-out-preset="scale"]     { transform: translate(-50%, -50%) scale(1.04); }

.gw-button {
  pointer-events: auto;
  cursor: pointer;
  background: none; color: inherit;
  transition: background 220ms var(--gw-ease), border-color 220ms var(--gw-ease),
              opacity var(--in-ms) var(--gw-ease) var(--in-delay),
              transform var(--in-ms) var(--gw-ease) var(--in-delay);
}
.gw-button:hover { background: rgba(255,255,255,.14) !important; border-color: rgba(255,255,255,.9) !important; }
.gw-button:active { transform: translate(-50%, -50%) scale(.98); }

.gw-image img { display: block; }
.gw-image.empty::after {
  content: 'no picture';
  display: block; padding: 1.6vmin 2.4vmin;
  border: 1px dashed rgba(255,255,255,.35); border-radius: 6px;
  font: 400 1vmin/1 Inter, system-ui, sans-serif; letter-spacing: .2em;
  text-transform: uppercase; color: rgba(255,255,255,.5);
}

/* ── editing affordances on the page ─────────────────────────────── */
.gw-page.editing .gw-el { pointer-events: auto; cursor: move; }
.gw-page.editing .gw-el::before {
  content: ''; position: absolute; inset: -10px;
  border: 1px dashed transparent; border-radius: 6px;
  transition: border-color 120ms linear;
}
.gw-page.editing .gw-el:hover::before { border-color: rgba(255,255,255,.28); }
.gw-page.editing .gw-el.sel::before   { border-color: rgba(120,200,255,.95); border-style: solid; }

/* ── editing the type where it stands ────────────────────────────── */
.gw-hs [contenteditable] {
  outline: 2px solid rgba(120,200,255,.95);
  outline-offset: .18em;
  cursor: text;
  min-width: 1.5em;
}
.gw-stage.editing .gw-hs { cursor: pointer; }
.gw-stage.editing .gw-hs:hover .gw-hs-box { text-decoration: underline dotted rgba(255,255,255,.35); text-underline-offset: .35em; }

/* ── the word bar ────────────────────────────────────────────────── */
.gw-wordbar {
  position: fixed; z-index: 300000; display: none;
  align-items: center; gap: 3px;
  padding: 4px 6px; border-radius: 5px;
  background: #17171c; border: 1px solid #33333d;
  box-shadow: 0 10px 32px rgba(0,0,0,.6);
  font: 400 10px/1 Inter, system-ui, sans-serif;
}
.gw-wordbar.on { display: flex; }
.gw-wordbar button {
  background: none; border: 1px solid transparent; color: #c9c9d2;
  border-radius: 3px; padding: 3px 7px; cursor: pointer;
  font: inherit; letter-spacing: .08em; text-transform: uppercase;
}
.gw-wordbar button:hover { background: #23232b; border-color: #3a3a45; color: #fff; }
.gw-wordbar button.sw {
  width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.35);
}
.gw-wordbar button.sw:hover { transform: scale(1.12); }
.gw-wordbar input[type=color] {
  width: 20px; height: 18px; padding: 0; cursor: pointer;
  background: none; border: 1px solid #33333d; border-radius: 3px;
}
.gw-wordbar .sep { width: 1px; height: 14px; background: #33333d; margin: 0 3px; }