/* 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 */

  --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;
}

#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);
}

/* 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;
}