/* =====================================================================
   DISPLAY THEME — Juniper Holdings 2026 M&A Offsite
   Change the look here. display.js only reads --transition-duration
   and --font-fit-min from this file.

   The stage keeps the screen ratio below (default 2700×1080) and is
   letterboxed on other screens. All sizes use cqh/cqw, i.e. % of the
   stage height/width: 1cqh = 10.8px on a 2700×1080 screen.

   Hooks:
     body[data-state="empty"]   no question on screen (shows the idle title)
     body[data-state="live"]    a question is on screen
     .question.is-visible       question fully shown
   ===================================================================== */

@font-face {
  font-family: "Acumin Variable Concept";
  src: url("assets/AcuminVariableConcept.ttf") format("truetype");
  font-weight: 100 900;
  font-stretch: 50% 125%;
  font-display: block;
}

:root {
  /* ---- Screen ---- */
  --stage-ratio: 2700 / 1080;       /* e.g. 16 / 9 for a Full HD projector */
  --outside-color: #0a1326;          /* letterbox bars */

  /* ---- Background ---- */
  --bg-color: #0f1b33;
  --bg-image: none;                  /* e.g. url("assets/background.jpg") */
  --bg-overlay: radial-gradient(ellipse at 50% 50%, #16284a 0%, #0f1b33 60%, #0a1326 100%);
  --stars-display: block;            /* "none" to hide the star field */

  /* ---- Brand colors ---- */
  --text-color: #ffffff;
  --text-soft: #d3d8e2;
  --accent-color: #c8102e;

  /* ---- Typography ---- */
  --font-family: "Acumin Variable Concept", "Acumin Pro", "Segoe UI", sans-serif;
  --font-weight: 350;
  --line-height: 1.16;
  --letter-spacing: -0.025em;
  --text-align: center;

  /* ---- Question size ----
     Short questions:  --font-size-max (large but contained)
     Longer questions: shrink progressively to fit the box
     Never smaller than --font-size-max × --font-fit-min
     (8cqh × 0.45 = 3.6cqh ≈ 39px on a 1080px-high screen). */
  --font-size-max: 8cqh;
  --font-fit-min: 0.45;
  --font-fit-emergency: 0.15;        /* only used if a very long question doesn't fit at the minimum */

  /* ---- Question position ---- */
  --content-padding: 21cqh 14cqw 25cqh 14cqw;   /* top right bottom left */
  --content-max-width: min(62cqw, 150cqh);       /* text block never wider than this */
  --content-justify: center;
  --content-align: center;

  /* ---- Accent line above the question ---- */
  --accent-display: none;
  --accent-width: 3cqw;
  --accent-height: 0.2cqh;
  --accent-gap: 5cqh;
  --accent-inline: auto;

  /* ---- Name of the person asking (above the question) ---- */
  --asker-display: block;            /* "none" to never show it */
  --asker-prefix: "Asked by";
  --asker-size: 2.5cqh;
  --asker-color: var(--text-soft);
  --asker-gap: 4.2cqh;               /* space between name and question */

  /* ---- Event line (top) ---- */
  --eyebrow-display: flex;
  --eyebrow-top: 9cqh;
  --eyebrow-size: 2.6cqh;
  --eyebrow-gap: 2cqw;
  --eyebrow-dash: 3cqw;

  /* ---- Idle title (no question on screen) ---- */
  --idle-display: block;
  --idle-size: 13.9cqh;

  /* ---- Logos (bottom) ---- */
  --logos-display: flex;
  --logos-bottom: 8cqh;
  --logos-gap: 2.6cqw;
  --logos-scale: 0.62;               /* 1 = same size as the title screen */

  /* ---- Animation ---- */
  --transition-duration: 700ms;
  --transition-easing: cubic-bezier(0.2, 0.7, 0.2, 1);
  --hidden-opacity: 0;
  --hidden-transform: translateY(2cqh);
  --hidden-filter: blur(6px);
}

/* ---------------------------------------------------------------------
   Structure
   --------------------------------------------------------------------- */

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--outside-color);
  cursor: none;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-user-select: none;
  user-select: none;
}

.stage {
  position: fixed;
  left: 50%;
  top: 50%;
  width: min(100vw, calc(100vh * var(--stage-ratio)));
  aspect-ratio: var(--stage-ratio);
  transform: translate(-50%, -50%);
  overflow: hidden;
  container-type: size;
  background: var(--bg-color);
  font-family: var(--font-family);
  color: var(--text-color);
}

.stage__background {
  position: absolute;
  inset: 0;
  background-color: var(--bg-color);
  background-image: var(--bg-overlay), var(--bg-image);
  background-size: cover, cover;
  background-position: center, center;
  background-repeat: no-repeat;
}

.stage__stars {
  display: var(--stars-display);
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---- Event line ---- */
.stage__eyebrow {
  display: var(--eyebrow-display);
  position: absolute;
  left: 0;
  right: 0;
  top: var(--eyebrow-top);
  justify-content: center;
  align-items: center;
  gap: var(--eyebrow-gap);
  font-size: var(--eyebrow-size);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.eyebrow__strong { font-weight: 600; }
.eyebrow__light { font-weight: 300; color: var(--text-soft); }
.eyebrow__dash { width: var(--eyebrow-dash); height: 2px; background: var(--accent-color); }

/* ---- Idle title ---- */
.stage__idle {
  display: var(--idle-display);
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  margin: 0;
  transform: translateY(-58%);
  text-align: center;
  font-size: var(--idle-size);
  font-weight: 300;
  line-height: 1.05;
  letter-spacing: -0.035em;
  opacity: 0;
  transition: opacity var(--transition-duration) var(--transition-easing);
}
.idle__strong { font-weight: 600; }
body[data-state="empty"] .stage__idle { opacity: 1; transition-delay: var(--transition-duration); }

/* ---- Logos ---- */
.stage__logos {
  display: var(--logos-display);
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--logos-bottom);
  justify-content: center;
  align-items: center;
  gap: var(--logos-gap);
}
.logo { display: block; width: auto; }
.logo--ssg { height: calc(10cqh * var(--logos-scale)); transform: translateY(calc(-1.2cqh * var(--logos-scale))); }
.logo--juniper { height: calc(9.26cqh * var(--logos-scale)); }
.logo--taurus { height: calc(5.56cqh * var(--logos-scale)); transform: translateY(calc(-0.37cqh * var(--logos-scale))); }
.logos__divider { width: 1px; height: calc(7.4cqh * var(--logos-scale)); background: rgba(255, 255, 255, 0.3); }

/* ---- Question ---- */
.stage__content {
  position: absolute;
  inset: 0;
  box-sizing: border-box;
  padding: var(--content-padding);
  display: flex;
  overflow: hidden;
}

.question {
  flex: 1;
  min-width: 0;
  min-height: 0;
  display: flex;
  align-items: var(--content-align);
  justify-content: var(--content-justify);
  opacity: var(--hidden-opacity);
  transform: var(--hidden-transform);
  filter: var(--hidden-filter);
  transition:
    opacity var(--transition-duration) var(--transition-easing),
    transform var(--transition-duration) var(--transition-easing),
    filter var(--transition-duration) var(--transition-easing);
  will-change: opacity, transform;
}

.question.is-visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.question__inner {
  max-width: var(--content-max-width);
  min-width: 0;
}

.question__inner::before {
  content: "";
  display: var(--accent-display);
  width: var(--accent-width);
  height: var(--accent-height);
  min-height: 2px;
  background: var(--accent-color);
  margin-bottom: var(--accent-gap);
  margin-inline: var(--accent-inline);
}

/* ---- Name of the person asking ----
   Shown only when the question has asked_by (.question.has-asker).
   Pick the style with data-asker-style on <body> in index.html. */
.question__asker { display: none; margin: 0 0 var(--asker-gap); color: var(--asker-color); font-size: var(--asker-size); line-height: 1.2; text-align: var(--text-align); }
.question.has-asker .question__asker { display: var(--asker-display); }

/* a: uppercase label between red dashes */
[data-asker-style="a"] .question.has-asker .question__asker {
  width: fit-content;
  margin: 0 auto var(--asker-gap);
  padding: 0 3.9cqw;
  background:
    linear-gradient(var(--accent-color), var(--accent-color)) left center / 2.4cqw 2px no-repeat,
    linear-gradient(var(--accent-color), var(--accent-color)) right center / 2.4cqw 2px no-repeat;
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
}
[data-asker-style="a"] .question__asker::before { content: var(--asker-prefix) "\00a0"; font-weight: 300; }

/* b: quiet sentence, name slightly stronger */
[data-asker-style="b"] .question__asker { font-size: calc(var(--asker-size) * 1.15); font-weight: 500; letter-spacing: 0; }
[data-asker-style="b"] .question__asker::before { content: var(--asker-prefix) "\00a0"; font-weight: 300; }

/* c: outlined tag with a red dot */
[data-asker-style="c"] .question.has-asker .question__asker {
  display: inline-flex; align-items: center; gap: 0.9cqw;
  padding: 0.9cqh 1.4cqw; border: 1px solid rgba(255, 255, 255, 0.32); border-radius: 999px;
  font-size: calc(var(--asker-size) * 0.85); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-color);
}
[data-asker-style="c"] .question__asker::before { content: ""; width: 0.9cqh; height: 0.9cqh; border-radius: 50%; background: var(--accent-color); }
[data-asker-style="c"] .question__inner { display: flex; flex-direction: column; align-items: center; }

.question__text {
  margin: 0;
  font-size: calc(var(--font-size-max) * var(--fit, 1));
  font-weight: var(--font-weight);
  line-height: var(--line-height);
  letter-spacing: var(--letter-spacing);
  text-align: var(--text-align);
  text-wrap: balance;
  overflow-wrap: anywhere;
  hyphens: manual;
}