/* LAIS gateway sign — holographic guide signing ASL WELCOME, then PEACE.
   Art: transparent PNG/WebP keyed from black (public/img/gateway-holo/), both poses share
   one crop box so the crossfade never jumps. Hologram feel = soft blue edge glow,
   faint scan lines masked to the figure, slow breathing opacity.
   Desktop orbit hub: tucked beside the heading (no push). Tablet/phone: small row above it.
   Decorative: pointer-events none, never covers a control. */
:is(#hub, #gwAiHost) .gw-sign {
  --gw-h: 116px;                     /* figure height */
  --gw-cap: var(--muted, #c4b5e0);
  --gw-glow: rgba(86, 190, 255, .55);
  --gw-glow2: rgba(40, 140, 230, .28);
  --gw-disc: transparent;
  --gw-fade: .9s;
  position: relative;
  display: grid;
  justify-items: center;
  margin: 4px auto 0;
  width: max-content;
  max-width: 100%;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
}
:is(#hub, #gwAiHost) .gw-sign * { pointer-events: none; }
:is(#hub, #gwAiHost) .gw-sign .gw-sign-sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
:is(#hub, #gwAiHost) .gw-sign-pose {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--gw-fade) ease-in-out, visibility 0s linear var(--gw-fade);
}
:is(#hub, #gwAiHost) .gw-sign[data-pose="1"] .gw-sign-p1,
:is(#hub, #gwAiHost) .gw-sign[data-pose="2"] .gw-sign-p2 {
  opacity: 1;
  visibility: visible;
  transition: opacity var(--gw-fade) ease-in-out, visibility 0s;
}

/* ---------- the figure ---------- */
:is(#hub, #gwAiHost) .gw-sign-figs {
  position: relative;
  height: var(--gw-h);
  aspect-ratio: 163 / 240;
  line-height: 0;
  isolation: isolate;
}
:is(#hub, #gwAiHost) .gw-holo-pic, :is(#hub, #gwAiHost) .gw-holo-img { display: block; height: 100%; width: 100%; }
:is(#hub, #gwAiHost) .gw-holo-img {
  object-fit: contain;
  filter: drop-shadow(0 0 3px var(--gw-glow)) drop-shadow(0 0 9px var(--gw-glow2));
  -webkit-user-drag: none;
}
:is(#hub, #gwAiHost) .gw-holo-pic { animation: gw-breathe 5.2s ease-in-out infinite; }
/* soft backing light, only used where the hub is light (Maroon / Enterprise desktop) */
:is(#hub, #gwAiHost) .gw-holo-disc {
  position: absolute; z-index: -1;
  left: -22%; right: -22%; top: -6%; bottom: -4%;
  background: radial-gradient(closest-side, var(--gw-disc), transparent);
}
/* faint hologram scan lines, clipped to the figure's own shape */
:is(#hub, #gwAiHost) .gw-holo-scan {
  position: absolute; inset: 0;
  background: repeating-linear-gradient(to bottom, rgba(255,255,255,.16) 0 1px, transparent 1px 3px);
  background-size: 100% 3px;
  -webkit-mask: var(--gw-mask) center / contain no-repeat;
          mask: var(--gw-mask) center / contain no-repeat;
  mix-blend-mode: screen;
  opacity: .55;
  animation: gw-scan 6s linear infinite;
}
@keyframes gw-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .92; } }
@keyframes gw-scan { to { background-position: 0 24px; } }
:is(#hub, #gwAiHost) .gw-sign.gw-paused .gw-holo-pic,
:is(#hub, #gwAiHost) .gw-sign.gw-paused .gw-holo-scan { animation-play-state: paused; }

:is(#hub .hub-hero, #gwAiHost) p.gw-sign-cap {
  margin: 4px 0 0 !important;
  font-family: "Source Sans 3", var(--q-sans, system-ui), sans-serif;
  font-size: 13.5px !important;
  font-weight: 600;
  letter-spacing: .02em;
  line-height: 1.25;
  color: var(--gw-cap) !important;
  white-space: nowrap;
  max-width: none;
}

/* ---------- theme colours (glow stays hologram-blue; caption + backing follow theme) ---------- */
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) :is(#hub, #gwAiHost) .gw-sign { --gw-cap: var(--muted, #c4b5e0); }
html[data-theme="maroon"] :is(#hub, #gwAiHost) .gw-sign { --gw-cap: #F1E2E8; }
html[data-theme="enterprise"] :is(#hub, #gwAiHost) .gw-sign { --gw-cap: #E3EEF7; }
/* light desktop hubs: deeper glow + a whisper of navy behind her so the light reads */
html.lais-hub-orbit[data-theme="maroon"] :is(#hub, #gwAiHost) .gw-sign {
  --gw-cap: var(--q-muted, #5E5459);
  --gw-glow: rgba(30, 120, 210, .55); --gw-glow2: rgba(20, 70, 150, .30);
  --gw-disc: rgba(18, 38, 78, .16);
}
html.lais-hub-orbit[data-theme="enterprise"] :is(#hub, #gwAiHost) .gw-sign {
  --gw-cap: var(--q-muted, #405068);
  --gw-glow: rgba(30, 120, 210, .55); --gw-glow2: rgba(20, 70, 150, .30);
  --gw-disc: rgba(18, 38, 78, .16);
}

/* ---------- desktop orbit hub: beside the heading, no push (JS sets --gw-x/--gw-y) ---------- */
html.lais-hub-orbit #hub .hub-hero { position: relative; }
html.lais-hub-orbit :is(#hub, #gwAiHost) .gw-sign.gw-beside {
  position: absolute; margin: 0; left: var(--gw-x, auto); top: var(--gw-y, 0); z-index: 1;
}
html.lais-hub-orbit #hub .hub-hero .gw-sign:not(.gw-beside) + h1 { margin-top: 2px !important; }

/* ---------- tablet / phone: small row, figure left, caption right ---------- */
@media (max-width: 899.98px), (hover: none) {
  html:not(.lais-hub-orbit) :is(#hub, #gwAiHost) .gw-sign { --gw-h: 84px; margin: 6px auto 0; }
  html:not(.lais-hub-orbit) :is(#hub, #gwAiHost) .gw-sign-pose { flex-direction: row; gap: 10px; }
  html:not(.lais-hub-orbit) :is(#hub .hub-hero, #gwAiHost) p.gw-sign-cap { margin: 0 !important; }
  html:not(.lais-hub-orbit) #hub .hub-hero .gw-sign + h1 { margin-top: 4px !important; }
}
@media (max-width: 599.98px) {
  html:not(.lais-hub-orbit) :is(#hub, #gwAiHost) .gw-sign { --gw-h: 68px; }
  :is(#hub, #gwAiHost) .gw-sign:not(.gw-beside) { margin: 4px 0 0; justify-items: start; }
  :is(#hub .hub-hero, #gwAiHost) p.gw-sign-cap { font-size: 13px !important; }
  :is(#hub, #gwAiHost) .gw-holo-img { filter: drop-shadow(0 0 2px var(--gw-glow)) drop-shadow(0 0 6px var(--gw-glow2)); }
}

/* ---------- reduced motion: no fading, no shimmer; both poses side by side ---------- */
@media (prefers-reduced-motion: reduce) {
  :is(#hub, #gwAiHost) .gw-sign { grid-auto-flow: column; column-gap: 22px; }
  :is(#hub, #gwAiHost) .gw-sign-pose,
  :is(#hub, #gwAiHost) .gw-sign[data-pose] .gw-sign-pose { grid-area: auto; opacity: 1; visibility: visible; transition: none; }
  :is(#hub, #gwAiHost) .gw-sign-p1 { grid-column: 1; }
  :is(#hub, #gwAiHost) .gw-sign-p2 { grid-column: 2; }
  :is(#hub, #gwAiHost) .gw-holo-pic, :is(#hub, #gwAiHost) .gw-holo-scan { animation: none; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 899.98px) {
  html:not(.lais-hub-orbit) :is(#hub, #gwAiHost) .gw-sign-pose { flex-direction: column; gap: 0; }
  html:not(.lais-hub-orbit) :is(#hub .hub-hero, #gwAiHost) p.gw-sign-cap { margin-top: 2px !important; font-size: 12px !important; }
}
@media (prefers-reduced-motion: reduce) and (max-width: 599.98px) {
  html:not(.lais-hub-orbit) :is(#hub, #gwAiHost) .gw-sign { --gw-h: 60px; column-gap: 16px; }
}

/* ---------- AI/SI page: same guide beside "Ask Language Access" (JS adds #gwAiHost) ---------- */
#gwAiHost { position: relative; height: 0; pointer-events: none; }
#gwAiHost .gw-sign { --gw-h: 112px; }
#gwAiHost .gw-sign.gw-beside { position: absolute; margin: 0; left: var(--gw-x, auto); top: var(--gw-y, 0); z-index: 1; }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) #gwAiHost .gw-sign { --gw-cap: rgba(233,213,255,.85); }
html[data-theme="maroon"] #gwAiHost .gw-sign {
  --gw-cap: var(--q-muted, #5E5459);
  --gw-glow: rgba(30, 120, 210, .55); --gw-glow2: rgba(20, 70, 150, .30); --gw-disc: rgba(18, 38, 78, .16);
}
html[data-theme="enterprise"] #gwAiHost .gw-sign {
  --gw-cap: var(--q-muted, #405068);
  --gw-glow: rgba(30, 120, 210, .55); --gw-glow2: rgba(20, 70, 150, .30); --gw-disc: rgba(18, 38, 78, .16);
}
/* not beside (narrow): a small row above the heading, inside the header flow */
#gwAiHost.gw-flow { height: auto; }
html:not(.lais-hub-orbit) #gwAiHost.gw-flow .gw-sign { --gw-h: 64px; margin: 2px auto 0; }
html:not(.lais-hub-orbit) #gwAiHost.gw-flow .gw-sign-pose { flex-direction: row; gap: 10px; }
html:not(.lais-hub-orbit) #gwAiHost.gw-flow p.gw-sign-cap { margin: 0 !important; font-size: 13px !important; }
@media (prefers-reduced-motion: reduce) {
  html:not(.lais-hub-orbit) #gwAiHost.gw-flow .gw-sign { --gw-h: 56px; }
  html:not(.lais-hub-orbit) #gwAiHost.gw-flow .gw-sign-pose { flex-direction: column; gap: 0; }
  html:not(.lais-hub-orbit) #gwAiHost.gw-flow p.gw-sign-cap { margin-top: 2px !important; font-size: 12px !important; }
}

/* reduced motion on the desktop hub: both poses beside the heading, captions wrap, still no push */
@media (prefers-reduced-motion: reduce) {
  html.lais-hub-orbit #hub .gw-sign { --gw-h: 100px; column-gap: 6px; }
  html.lais-hub-orbit #hub .hub-hero p.gw-sign-cap { white-space: normal !important; max-width: 108px !important; text-align: center; font-size: 12.5px !important; }
}

/* ---------- "Where do you want to go" hub links (AI/SI topbar, map blades, phone tools row) ---------- */
.topbar .gw-topbar-links { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.topbar .back-link.gw-hub-link { white-space: nowrap; }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .topbar .back-link.gw-hub-link {
  color: #fde68a; border-color: rgba(245, 215, 110, .45); background: rgba(40, 28, 8, .45);
}
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .topbar .back-link.gw-hub-link:hover { background: rgba(245, 215, 110, .14); border-color: rgba(253, 230, 138, .75); }
html[data-theme="maroon"] body .topbar .back-link.gw-hub-link { border-color: #E3C27A !important; background: rgba(227, 194, 122, .16) !important; }
html[data-theme="enterprise"] body .topbar .back-link.gw-hub-link { border-color: #C8902E !important; background: rgba(200, 144, 46, .16) !important; }

/* map blade (Classic steel look: warm gold, distinct from fuchsia / red / violet / slate) */
.map-blades .blade.blade--hub {
  background: linear-gradient(180deg, #fff7d6 0%, #fde68a 18%, #d4a72c 44%, #fbe7a1 56%, #a16207 80%, #ca8a04 100%);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55), inset 0 -1px 0 rgba(113,63,18,.4), 0 0 10px rgba(234,179,8,.35);
}
.map-blades .blade.blade--hub .blade-word { color: #3a2604; text-shadow: 0 1px 0 rgba(255,255,255,.45); letter-spacing: .03em; }
/* Maroon + Enterprise pills: gold "compass" icon */
html[data-theme="maroon"] body .map-blades .blade--hub::before,
html[data-theme="enterprise"] body .map-blades .blade--hub::before {
  background: radial-gradient(circle at 50% 50%, #fff 0 2.2px, transparent 2.6px),
              radial-gradient(circle at 50% 50%, transparent 0 5px, rgba(255,255,255,.9) 5.4px 6.6px, transparent 7px),
              linear-gradient(180deg, #D4A84E, #9A6F22) !important;
}
html[data-theme="maroon"] body .map-blades .blade--hub { border-color: #C9A45C !important; }
html[data-theme="enterprise"] body .map-blades .blade--hub { border-color: #C8902E !important; }

/* phone / tablet tools row: full-width line under the four tools */
.nav-tools-mobile .btn.gw-hub-btn { flex: 1 1 100%; grid-column: 1 / -1; width: auto; max-width: none; font-weight: 700; white-space: nowrap; }
html:not([data-theme="maroon"]):not([data-theme="enterprise"]) .nav-tools-mobile .btn.gw-hub-btn { color: #fde68a !important; border-color: rgba(245,215,110,.5) !important; }
html[data-theme="maroon"] body .nav-tools-mobile .btn.gw-hub-btn { border-color: #C9A45C !important; }
html[data-theme="enterprise"] body .nav-tools-mobile .btn.gw-hub-btn { border-color: #C8902E !important; }

/* AI/SI phone: keep both topbar links on one tidy line */
@media (max-width: 599.98px) {
  .topbar .gw-topbar-links { gap: 6px; }
  .topbar .gw-topbar-links .back-link { padding: 6px 10px; font-size: 11px; }
}


/* ---------- AI/SI page: guide stands right of the AI orb, same size as Wony (left) ---------- */
html body #gwAiHost.gw-stage { position: absolute; right: 1%; left: auto; top: calc(50% + 176px); transform: translateY(-100%); height: auto; z-index: 2; pointer-events: none; }
html body #gwAiHost.gw-stage .gw-sign { --gw-h: clamp(150px, 18.2vw, 224px); margin: 0; }
html body #gwAiHost.gw-stage .gw-sign-pose { flex-direction: column; gap: 0; }
html body #gwAiHost.gw-stage p.gw-sign-cap { margin: 4px 0 0 !important; font-size: 13px !important; white-space: nowrap; text-align: center; }
@media (max-width: 640px) {
  html body #gwAiHost.gw-stage { right: -4px; top: calc(50% + 178px); }
  html body #gwAiHost.gw-stage .gw-sign { --gw-h: 128px; }
  html body #gwAiHost.gw-stage p.gw-sign-cap { font-size: 11.5px !important; white-space: normal; max-width: 104px; }
}
@media (prefers-reduced-motion: reduce) {
  html body #gwAiHost.gw-stage .gw-sign { --gw-h: clamp(100px, 11vw, 140px); column-gap: 8px; }
}

/* ---------- guide parked off the hub (2026-10-22, SHOW_ON_HUB = false in lais-gateway-sign.js) ----------
   Tablet/phone hub: the guide's row used to sit between the eyebrow and the heading; keep a small
   breath there so the heading doesn't hug the eyebrow. Only applies when no guide precedes the h1,
   so it switches itself off automatically if the guide comes back. #hub only — AI/SI page untouched. */
html:not(.lais-hub-orbit) #hub .hub-hero > .eyebrow + h1 { margin-top: 10px !important; }