/* =========================================================================
   logo3d.css — the painted TG logo "comes alive" in place. A transparent WebGL
   canvas layers over the wallpaper + icons (above icons, BELOW open windows and
   the taskbar). No overlay, no glass, no takeover — just the live pieces and one
   faint chip. Reuses the Tahmures design-system tokens declared in xp.css.
   ========================================================================= */

.logo3d {
  position: fixed;
  inset: 0;
  z-index: 6;                 /* above scattered icons (z 3), below windows (10+) */
  pointer-events: none;       /* clicks fall through to icons / taskbar / wallpaper */
  background: none;
}

/* WebGL host fills the viewport. The canvas toggles pointer-events between
   none / auto in JS (cursor hit-test against the logo pieces). It starts hidden
   and crossfades in exactly as the without-logo wallpaper fades the painted
   logo out — so the painted mark appears to simply turn 3D in place. */
.logo3d__gl {
  position: absolute; inset: 0;
  opacity: 0;
  transition: opacity 760ms ease-out;
}
.logo3d__gl.is-live  { opacity: 1; }
.logo3d__gl.is-calib { opacity: 0.5; transition: none; }   /* calibration overlay */
.logo3d__gl canvas { display: block; touch-action: none; pointer-events: none; }

@media (prefers-reduced-motion: reduce) {
  .logo3d__gl { transition: none; }   /* instant swap is fine */
}

/* -------- faint chip, bottom-centre (desktop stays in use) -------------- */
.logo3d__chip {
  position: absolute;
  left: 50%; bottom: 46px;
  transform: translateX(-50%) translateY(6px);
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 7px 14px;
  pointer-events: auto;       /* clickable even though the layer is pe:none */
  background: rgba(255,255,255,.62);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  backdrop-filter: blur(9px) saturate(1.1);
  border: 1px solid rgba(35,31,32,.10);
  box-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 4px 16px rgba(35,31,32,.10);
  font-family: var(--tg-font-mono, "DM Mono", monospace);
  font-size: 10px;
  letter-spacing: .08em;
  color: var(--tg-grey-80, #333);
  white-space: nowrap;
  opacity: 0;
  transition: opacity 320ms ease-out 200ms;
}
.logo3d__chip.is-shown { opacity: .72; }
.logo3d__chip.is-shown:hover { opacity: 1; }

.logo3d__hint { color: var(--tg-grey-80, #333); }
.logo3d__hint--dim { color: var(--tg-grey-50, #808080); }

.logo3d__dot {
  width: 3px; height: 3px; border-radius: 50%;
  background: var(--tg-grey-20, #ccc);
  flex: none;
}

.logo3d__reset {
  appearance: none;
  font: inherit;
  letter-spacing: .14em;
  text-transform: uppercase;
  font-size: 9px;
  color: var(--tg-black, #231F20);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--tg-grey-20, #ccc);
  padding: 1px 0;
  cursor: pointer;
  transition: color 120ms ease-out, border-color 120ms ease-out;
}
.logo3d__reset:hover { color: var(--tg-cyan, #00AEEF); border-color: var(--tg-cyan, #00AEEF); }
.logo3d__reset:focus-visible { outline: 1px solid var(--tg-black, #231F20); outline-offset: 2px; }

/* desktop icons must sit ABOVE the without-logo wallpaper layer (z 2) but below
   the 3D canvas (z 6). Scoped raise so the swap layering works. */
.desktop .dicon { z-index: 3; }

/* ---- logo-swap wallpaper layers (low z → high) ----
   with-logo (base, z 0) · without-logo (z 2, fades in) · icons (z 3) · canvas (z 6) */
.desktop__wall--logo,
.desktop__wall--nologo {
  position: absolute; inset: 0;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}
.desktop__wall--logo   { z-index: 0; }
.desktop__wall--nologo { z-index: 2; opacity: 0; transition: opacity 760ms ease-out; }
.desktop__wall--nologo.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .desktop__wall--nologo { transition: none; } }

@media (max-width: 720px) {
  .logo3d__chip { bottom: 40px; font-size: 9px; gap: 8px; padding: 6px 11px; }
}

/* ---- clickable logo hotspot (over the painted logo, before play) ----
   Sits above the wallpaper layers and the corner-anchored icons (the icon
   quadrants leave the centre clear), below the 3D canvas + windows. */
.logo-hotspot {
  position: absolute;
  left: 31%; top: 39%;
  width: 41%; height: 31%;
  z-index: 4;
  cursor: pointer;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding-bottom: 6px;
}
.logo-hotspot__hint {
  pointer-events: none;
  font-family: var(--tg-font-mono, "DM Mono", monospace);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(35,31,32,.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  padding: 5px 12px;
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 2px 10px rgba(0,0,0,.22);
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 160ms ease-out, transform 160ms ease-out;
}
.logo-hotspot:hover .logo-hotspot__hint { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .logo-hotspot__hint { transition: none; opacity: .85; transform: none; }
}

/* ---- centred confirm dialog + dimmer veil ---- */
.dlg-veil {
  position: fixed; inset: 0;
  z-index: 99999;
  background: rgba(10,24,64,.12);
}
.dlg.dlg--center {
  position: fixed;
  left: 50%; top: 44%;
  transform: translate(-50%, -50%);
}