/* All branding lives here. The canvas reads these values at startup too. */
:root {
  /* Graphik is installed on every Accenture computer. */
  --font-family: "Graphik", "Helvetica Neue", Arial, sans-serif;

  --sky-top: #03050c;
  --sky-mid: #060915;
  --sky-bottom: #0b0a1d;
  --nebula-a: #5a36a8;
  --nebula-b: #24479c;
  --milky-way: #e6ddd0;
  --milky-way-dust: #3d2c24;
  --emission: #d8456f;
  --galaxy-core: #ffe7c6;

  --star-core: #fff3e0;
  --star-unlit: #b9b4cc;
  --star-general: #f4ecff;

  /* The Pride rainbow, one hue per theme, from the user. Figures, glow, lines, and labels
     all use pale versions of these, so the hue is what matters. */
  --theme-courage: #ff0000;
  --theme-confidence: #ff7800;
  --theme-belonging: #ffbf00;
  --theme-knowledge: #299e00;
  --theme-allyship: #224bff;
  --theme-joy: #a100ff;

  --text-primary: #f7f2ea;
  --text-secondary: rgba(247, 242, 234, 0.62);
  --text-faint: rgba(247, 242, 234, 0.35);

  --label-base: #c9cfe4;
  --label-tint: 22%;
  --label-size: 22px;
  --label-weight: 500;
  --label-tracking: 0.2em;
  --label-opacity: 0.78;
  --label-case: uppercase;

  --footer-height: 96px;
  --footer-invite-size: 38px;
  --footer-count-size: 24px;
  --empty-invite-size: 64px;
  --logo-width: 190px;
  --logo-height: 56px;

  --brand-logo-width: 300px;
  --brand-logo-top: 48px;
  /* The logo's star overhangs the wordmark on the right, so centering the image puts the
     wordmark 11 px left of center. This shift centers the wordmark over the count (and the
     screen), less 2 px for the star's weight. */
  --brand-optical-shift: 9px;
  --brand-count-gap: 16px;     /* the message count sits under the logo */
  --brand-count-size: 24px;

  /* The quote card. Sizes are for 10 feet (quote) and 6 feet (full text) on the 43-inch TV;
     js/config.js (card) holds the fitting limits. */
  --card-left: calc(960px - var(--brand-logo-width) / 2 + var(--brand-optical-shift));   /* the logo's left edge, 819 */
  --card-right: 150px;
  --card-top: 190px;          /* clear of the message count under the logo */
  --card-bottom: 100px;        /* no footer: the quote area sits 40 px lower, same height */
  --card-theme-size: 22px;     /* match --label-size: the label floats into this spot */
  --card-theme-tint: 45%;
  --card-quote-weight: 600;    /* Graphik Semibold */
  --card-quote-leading: 0.95;
  --card-text-leading: 1.25;
  --card-credit-weight: 400;   /* Graphik Regular */
  --card-credit-size: 30px;
  --card-text-color: rgba(247, 242, 234, 0.78);
  --card-credit-color: rgba(247, 242, 234, 0.7);

  /* The intro, in the ambient rotation. */
  --intro-title-size: 104px;
  --intro-title-weight: 600;   /* Graphik Semibold, like the quotes */
  --intro-title-leading: 0.95;
  --intro-subtitle-size: 44px;
  --intro-subtitle-weight: 400;
  --intro-subtitle-color: rgba(247, 242, 234, 0.8);
  --intro-center: 492px;       /* match ambient.scrimCenter in js/config.js */

  /* The toolbar and its sheets: frosted glass over the sky. In screen px, not stage px, so
     they stay a comfortable size to click on any screen. */
  --glass-fill: rgba(26, 29, 42, 0.46);
  --glass-fill-strong: rgba(22, 24, 36, 0.72);
  --glass-edge: rgba(255, 255, 255, 0.12);
  --glass-blur: blur(24px) saturate(170%);
  --glass-shadow: 0 10px 40px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  --tool-size: 44px;
  --tool-icon: 22px;
  --tool-color: rgba(247, 242, 234, 0.88);
  --tool-hover: rgba(255, 255, 255, 0.1);
  --toolbar-bottom: 24px;
  --tip-delay: 0.45s;

  --controls-bg: rgba(10, 12, 20, 0.78);
  --controls-accent: #c9cfe4;
  --controls-size: 18px;
}

.hide-cursor,
.hide-cursor * {
  cursor: none;
}

* {
  box-sizing: border-box;
  user-select: none;
  -webkit-user-select: none;
}

html,
body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--sky-top);
  font-family: var(--font-family);
  color: var(--text-primary);
  -webkit-font-smoothing: antialiased;
}

#stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform-origin: 0 0;
  overflow: hidden;
}

#sky {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
}

/* The display (index.html): the sky fills the window, and the stage's labels may reach past
   the stage into the sky around it. The earlier canvas build keeps its letterboxed canvas. */
.sky-fills-window #sky {
  position: fixed;
  width: 100%;
  height: 100%;
}

.sky-fills-window #stage {
  overflow: visible;
}

#overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.constellation-label {
  position: absolute;
  transform: translate(-50%, -50%);
  white-space: nowrap;
  font-size: var(--label-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
  color: color-mix(in oklab, var(--tint) var(--label-tint), var(--label-base));
  opacity: var(--label-opacity);
  /* Tracking adds space after the last letter too; matching space before it keeps the
     word centered on its point. */
  padding-left: var(--label-tracking);
  text-shadow: 0 0 18px rgba(3, 5, 12, 0.9);
}

/* The logo, top center, with the message count under it. */
.brand {
  position: absolute;
  top: var(--brand-logo-top);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--brand-count-gap);
}

.brand-logo {
  display: block;
  width: var(--brand-logo-width);
  transform: translateX(var(--brand-optical-shift));
}

.brand-count {
  font-size: var(--brand-count-size);
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(3, 5, 12, 0.9);
  transition: opacity 1s ease;
}

.is-empty .brand-count {
  opacity: 0;
}

.footer {
  position: absolute;
  left: 56px;
  right: 56px;
  bottom: 0;
  height: var(--footer-height);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
}

.footer-logos {
  display: flex;
  gap: 20px;
}

.logo-placeholder {
  width: var(--logo-width);
  height: var(--logo-height);
  border: 1.5px dashed var(--text-faint);
  border-radius: 10px;
  display: grid;
  place-items: center;
  font-size: 16px;
  color: var(--text-faint);
}

.footer-invite {
  grid-column: 2;
  font-size: var(--footer-invite-size);
  font-weight: 500;
  color: var(--text-primary);
  letter-spacing: 0.01em;
}

.footer-count {
  grid-column: 3;
  justify-self: end;
  font-size: var(--footer-count-size);
  color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
  transition: opacity 1s ease;
}

.empty-invite {
  position: absolute;
  left: 0;
  right: 0;
  top: 470px;
  text-align: center;
  font-size: var(--empty-invite-size);
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-primary);
  text-shadow: 0 0 40px rgba(5, 8, 25, 0.9);
  opacity: 0;
  transition: opacity 1.5s ease;
}

.empty-invite small {
  display: block;
  margin-top: 14px;
  font-size: 32px;
  font-weight: 400;
  color: var(--text-secondary);
}

.is-empty .empty-invite {
  opacity: 1;
}

.footer-invite {
  transition: opacity 1s ease;
}

.is-empty .footer-count,
.is-empty .footer-invite {
  opacity: 0;
}

.debug-panel {
  position: absolute;
  top: 20px;
  right: 20px;
  min-width: 260px;
  padding: 14px 18px;
  border-radius: 10px;
  background: rgba(0, 0, 0, 0.6);
  font: 15px/1.5 ui-monospace, Menlo, monospace;
  color: #d9f7d0;
  white-space: pre;
  display: none;
}

.debug .debug-panel {
  display: block;
}

/* The quote card. js/ui/card.js sets opacity and motion frame by frame. */
.card {
  position: absolute;
  top: var(--card-top);
  bottom: var(--card-bottom);
  left: var(--card-left);
  right: var(--card-right);
  flex-direction: column;
  justify-content: center;
  text-shadow: 0 0 32px rgba(2, 3, 8, 0.7);
}

/* No constellation to show (a theme not drawn yet): the quote takes the middle. */
.card.centered {
  left: 300px;
  right: 300px;
}

/* The ambient rotation's quote sits on the side away from its constellation. On the left,
   it mirrors the right-hand column: it ends at the logo's right edge. */
.card.flip {
  left: var(--card-right);
  right: var(--card-left);
}

.intro {
  position: absolute;
  left: 160px;
  right: 160px;
  top: calc(var(--intro-center) - 300px);
  height: 600px;
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  text-shadow: 0 0 36px rgba(2, 3, 8, 0.75);
}

.intro-title {
  margin: 0;
  font-size: var(--intro-title-size);
  font-weight: var(--intro-title-weight);
  line-height: var(--intro-title-leading);
  letter-spacing: -0.02em;
  color: var(--text-primary);
  text-wrap: balance;
}

.intro-title .w {
  display: inline-block;
}

.intro-subtitle {
  margin: 34px 0 0;
  font-size: var(--intro-subtitle-size);
  font-weight: var(--intro-subtitle-weight);
  color: var(--intro-subtitle-color);
  letter-spacing: 0.005em;
}

/* When the quote's constellation is on screen, its label floats into this spot and this
   copy stays hidden (js/main.js). */
.card-theme {
  align-self: flex-start;
  margin-bottom: 40px;
  font-size: var(--card-theme-size);
  font-weight: var(--label-weight);
  letter-spacing: var(--label-tracking);
  text-transform: var(--label-case);
  color: color-mix(in oklab, var(--tint) var(--card-theme-tint), var(--label-base));
}

.card-quote {
  margin: 0;
  font-weight: var(--card-quote-weight);
  line-height: var(--card-quote-leading);
  letter-spacing: -0.015em;
  color: var(--text-primary);
  text-wrap: balance;
}

.card-quote .w {
  display: inline-block;
}

/* The opening quote hangs in the margin, so the words align with the text below. */
.card-quote .hang {
  margin-left: -0.42em;
}

.card-text {
  margin: 48px 0 0;
  font-weight: 400;
  line-height: var(--card-text-leading);
  color: var(--card-text-color);
  text-wrap: balance;
}

.card-credit {
  margin: 40px 0 0;
  font-size: var(--card-credit-size);
  font-weight: var(--card-credit-weight);
  color: var(--card-credit-color);
  letter-spacing: 0.01em;
}

/* Development sliders, shown and hidden with the S key. */
.controls {
  position: absolute;
  left: 56px;
  bottom: 120px;
  width: 460px;
  padding: 22px 26px 18px;
  border-radius: 16px;
  background: var(--controls-bg);
  backdrop-filter: blur(12px);
  font-size: var(--controls-size);
  color: var(--text-primary);
  pointer-events: auto;
  display: none;
}

.show-controls .controls {
  display: block;
}

.controls label {
  display: block;
  margin-bottom: 16px;
}

.controls .row {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
}

.controls .value {
  font-variant-numeric: tabular-nums;
  color: var(--text-secondary);
}

.controls input[type="range"] {
  width: 100%;
  margin: 0;
  accent-color: var(--controls-accent);
}

.controls .hint {
  font-size: 14px;
  color: var(--text-faint);
}

/* The toolbar (js/ui/toolbar.js): share a message, play/pause, about. */
.toolbar {
  position: fixed;
  left: 50%;
  bottom: var(--toolbar-bottom);
  transform: translateX(-50%);
  display: flex;
  gap: 2px;
  padding: 5px;
  border-radius: 999px;
  background: var(--glass-fill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-edge);
  box-shadow: var(--glass-shadow);
  z-index: 10;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

/* After a few seconds without the cursor moving, the toolbar steps out of the way; any
   movement brings it back (js/ui/toolbar.js). */
.toolbar.idle {
  opacity: 0;
  transform: translate(-50%, 10px);
  pointer-events: none;
}

.toolbar:not(.idle) {
  transition-duration: 0.25s;
}

.booth .toolbar,
.opened-as-file .toolbar,
.no-webgl .toolbar {
  display: none;
}

.tool {
  position: relative;
  width: var(--tool-size);
  height: var(--tool-size);
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tool-color);
  cursor: pointer;
  transition: background-color 0.2s ease, transform 0.15s ease;
}

.tool:hover {
  background: var(--tool-hover);
}

.tool:active {
  transform: scale(0.94);
}

.tool:focus-visible,
.sheet-close:focus-visible,
.sheet-action:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.7);
  outline-offset: 2px;
}

.tool svg,
.sheet-close svg {
  width: var(--tool-icon);
  height: var(--tool-icon);
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.tool .icon-play,
.tool .icon-pause,
.tool .dot {
  fill: currentColor;
  stroke: none;
}

.tool .icon-play,
.tool.paused .icon-pause {
  display: none;
}

.tool.paused .icon-play {
  display: block;
}

/* Tooltips appear after a short hover, or at once for keyboard focus. */
.tip {
  position: absolute;
  bottom: calc(100% + 12px);
  left: 50%;
  transform: translate(-50%, 4px);
  padding: 6px 10px;
  border-radius: 8px;
  background: rgba(16, 18, 28, 0.88);
  border: 1px solid var(--glass-edge);
  color: var(--text-primary);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.01em;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.tool:hover .tip {
  opacity: 1;
  transform: translate(-50%, 0);
  transition-delay: var(--tip-delay);
}

.tool:focus-visible .tip {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* Sheets: the share form and about. Native dialogs, so focus, Esc, and the backdrop are
   handled by the browser. */
.sheet {
  width: min(640px, calc(100vw - 32px));
  max-height: calc(100vh - 48px);
  padding: 0;
  border: 1px solid var(--glass-edge);
  border-radius: 24px;
  background: var(--glass-fill-strong);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: 0 30px 90px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
  font-family: var(--font-family);
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px) scale(0.98);
  transition: opacity 0.28s ease, transform 0.36s cubic-bezier(0.2, 0.8, 0.2, 1), overlay 0.36s allow-discrete,
    display 0.36s allow-discrete;
}

.sheet[open] {
  opacity: 1;
  transform: none;
}

@starting-style {
  .sheet[open] {
    opacity: 0;
    transform: translateY(14px) scale(0.98);
  }
}

.sheet::backdrop {
  background: rgba(3, 5, 12, 0);
  -webkit-backdrop-filter: blur(0);
  backdrop-filter: blur(0);
  transition: background-color 0.3s ease, backdrop-filter 0.3s ease, overlay 0.36s allow-discrete,
    display 0.36s allow-discrete;
}

.sheet[open]::backdrop {
  background: rgba(3, 5, 12, 0.42);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}

@starting-style {
  .sheet[open]::backdrop {
    background: rgba(3, 5, 12, 0);
    backdrop-filter: blur(0);
  }
}

.sheet-inner {
  display: flex;
  flex-direction: column;
  max-height: calc(100vh - 48px);
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 18px 14px 26px;
}

.sheet-head h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  letter-spacing: -0.005em;
}

.sheet-close {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--tool-color);
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.sheet-close:hover {
  background: rgba(255, 255, 255, 0.16);
}

.sheet-close svg {
  width: 18px;
  height: 18px;
  stroke-width: 2;
}

/* The Airtable form is a light page, so it sits in its own rounded panel inside the glass,
   with the close button floating in its corner. */
.sheet-share .sheet-inner {
  position: relative;
  padding: 10px;
}

.form-frame {
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  height: min(720px, calc(100vh - 68px));
}

.sheet-close.on-light {
  position: absolute;
  top: 22px;
  right: 22px;
  background: rgba(20, 22, 30, 0.07);
  color: #3a3d48;
}

.sheet-close.on-light:hover {
  background: rgba(20, 22, 30, 0.14);
}

.form-embed {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  background: transparent;
}

.sheet-text {
  padding: 0 26px 26px;
  overflow-y: auto;
  font-size: 16px;
  line-height: 1.5;
  color: var(--card-text-color);
}

.sheet-text p {
  margin: 0 0 14px;
}

.sheet-action {
  margin: 8px 0 22px;
  padding: 11px 20px;
  border: 0;
  border-radius: 999px;
  background: var(--text-primary);
  color: #12141c;
  font: 600 15px var(--font-family);
  cursor: pointer;
  transition: transform 0.15s ease, opacity 0.2s ease;
}

.sheet-action:hover {
  opacity: 0.9;
}

.sheet-action:active {
  transform: scale(0.97);
}

.sheet-text .support {
  margin: 0;
  padding-top: 16px;
  border-top: 1px solid var(--glass-edge);
  font-size: 14px;
  color: var(--text-secondary);
}

.sheet-text .support strong {
  color: var(--text-primary);
  font-weight: 500;
}

.sheet-text a {
  color: var(--text-primary);
  text-underline-offset: 3px;
}

.sheet-text .credit {
  margin: 14px 0 0;
  font-size: 14px;
  color: var(--text-secondary);
}

/* The keyboard shortcuts sheet (?). */
.sheet-keys {
  width: min(560px, calc(100vw - 32px));
}

.keys h3 {
  margin: 22px 0 10px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-secondary);
}

.keys dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 10px 18px;
  margin: 0;
  font-size: 15px;
}

.keys dt {
  white-space: nowrap;
  color: var(--text-secondary);
}

.keys dd {
  margin: 0;
  color: var(--card-text-color);
}

.keys kbd,
.keys code {
  display: inline-block;
  min-width: 26px;
  padding: 2px 7px;
  border: 1px solid var(--glass-edge);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: var(--text-primary);
  font: 500 13px/1.5 var(--font-family);
  text-align: center;
}

.keys code {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 12px;
}

.keys-sim {
  display: none;
}

.sim-source .keys-sim {
  display: block;
}

/* Shown only when the page is opened as a file, where browsers block its scripts, or when
   the computer's graphics can't draw the sky. */
.file-notice,
.gl-notice {
  position: fixed;
  inset: 0;
  place-items: center;
  text-align: center;
  font-size: clamp(24px, 3.4vw, var(--empty-invite-size));
  font-weight: 500;
  line-height: 1.25;
  color: var(--text-primary);
  display: none;
}

.file-notice small,
.gl-notice small {
  display: block;
  margin-top: 0.4em;
  font-size: 0.5em;
  font-weight: 400;
  color: var(--text-secondary);
}

.opened-as-file .file-notice,
.no-webgl .gl-notice {
  display: grid;
}

.gl-notice p {
  max-width: 30em;
}

.opened-as-file #stage,
.no-webgl #stage {
  display: none;
}