/* ==========================================================================
   BIMLEED — stage.css
   SESSION 17M. The liquid-glass mark and the particle constellation — the
   two stages of the home page. Loaded only by a page that carries one (the
   elements ask for it), and linked by the panel's canvas views so the owner
   sees them where he arranges them.

   The stage is the PAGE'S OWN PAPER — white in the light theme, the Civic
   near-black in the dark one — with the site's four spectral fields in its
   corners (peach, aqua, lilac, gold: tokens.css), the ground the BIMLEED
   mark is shown on. Every colour here is a token, so the header's theme
   switch, the system's dark mode and the owner's Look all reach it; the
   pictures read the same tokens (assets/js/stage.js) and repaint with them.
   ========================================================================== */

.stage-glass,
.constel {
  /* light (the default) */
  --stage-base: var(--civic-paper, var(--surface, #FFFFFF));
  --stage-card: rgba(255, 255, 255, 0.80);
  --stage-card-edge: rgba(22, 33, 29, 0.10);
  --stage-card-shadow: 0 1.25rem 2.5rem rgba(52, 40, 32, 0.08);
  --stage-btn: rgba(255, 255, 255, 0.72);
  --stage-still: drop-shadow(0 0.75rem 1.5rem rgba(29, 158, 117, 0.20));
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) :is(.stage-glass, .constel) {
    --stage-card: rgba(10, 10, 10, 0.80);
    --stage-card-edge: rgba(255, 255, 255, 0.12);
    --stage-card-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.30);
    --stage-btn: rgba(10, 10, 10, 0.55);
    --stage-still: drop-shadow(0 0 1.5rem rgba(93, 202, 165, 0.35));
  }
}
:root[data-theme="dark"] :is(.stage-glass, .constel),
[data-theme="dark"] :is(.stage-glass, .constel) {
  --stage-card: rgba(10, 10, 10, 0.80);
  --stage-card-edge: rgba(255, 255, 255, 0.12);
  --stage-card-shadow: 0 1.25rem 2.5rem rgba(0, 0, 0, 0.30);
  --stage-btn: rgba(10, 10, 10, 0.55);
  --stage-still: drop-shadow(0 0 1.5rem rgba(93, 202, 165, 0.35));
}
[data-theme="light"] :is(.stage-glass, .constel) {
  --stage-card: rgba(255, 255, 255, 0.80);
  --stage-card-edge: rgba(22, 33, 29, 0.10);
  --stage-card-shadow: 0 1.25rem 2.5rem rgba(52, 40, 32, 0.08);
  --stage-btn: rgba(255, 255, 255, 0.72);
  --stage-still: drop-shadow(0 0.75rem 1.5rem rgba(29, 158, 117, 0.20));
}

/* NO BOX. Both stages are transparent: the ground behind them is the page's
   own — the paper and the four spectral fields that civic.css lays behind
   every page (body::before, fixed to the viewport) — so the mark and the
   particles sit ON the page and melt into it, in light and in dark alike. */
.stage-glass,
.constel__stage {
  color: var(--ink);
  background: none;
}

/* ------------------------------------------------------------------ GLASS */
.stage-glass {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  inline-size: 100%;
  block-size: 100%;
  min-block-size: 18rem;
  touch-action: pan-y;
}
.stage-glass__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.6s ease;
}
.stage-glass.is-live .stage-glass__canvas { opacity: 1; }

/* The still: the mark itself — what a browser without WebGL, or without
   scripting, is shown. Never mirrored: it is a logo. */
.stage-glass__still {
  position: absolute;
  inset: 0;
  margin: auto;
  inline-size: min(64%, 22rem);
  block-size: auto;
  aspect-ratio: 1;
  filter: var(--stage-still);
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.stage-glass.is-live .stage-glass__still { opacity: 0; }

.stage-glass__tag {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-start: 1rem;
  z-index: 2;
  color: var(--ink);
  border-color: var(--line-strong);
  background: var(--stage-card);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
}

/* ------------------------------------------------ THE STOP BUTTON (2.2.2) */
.stage-toggle {
  position: absolute;
  inset-block-end: 1rem;
  inset-inline-end: 1rem;
  z-index: 3;
  display: inline-grid;
  place-items: center;
  inline-size: 2.75rem;
  block-size: 2.75rem;
  padding: 0;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--stage-btn, rgba(255, 255, 255, 0.72));
  -webkit-backdrop-filter: blur(10px) saturate(1.3);
  backdrop-filter: blur(10px) saturate(1.3);
  color: var(--ink);
  cursor: pointer;
  transition: border-color 0.2s ease, background-color 0.2s ease;
}
.stage-toggle[hidden] { display: none; }
.stage-toggle:hover { border-color: var(--ink); }
.stage-toggle:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.stage-toggle::before {
  content: "";
  inline-size: 0.7rem;
  block-size: 0.8rem;
  background: currentColor;
  clip-path: polygon(0 0, 35% 0, 35% 100%, 0 100%, 0 0, 65% 0, 100% 0, 100% 100%, 65% 100%, 65% 0);
}
.stage-toggle[aria-pressed="true"]::before { clip-path: polygon(0 0, 100% 50%, 0 100%); }

/* ---------------------------------------------------------- CONSTELLATION
   A tall element: the stage holds still (sticky) while the chapters scroll
   over it. Both are in one grid cell, so no negative margin is needed and
   the element is exactly as tall as its chapters. */
.constel {
  --constel-top: 0rem;
  --constel-h: 100vh;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  inline-size: 100%;
}
@supports (height: 100svh) {
  .constel { --constel-h: 100svh; }
}
.constel > * { grid-area: 1 / 1; }

.constel__stage {
  position: sticky;
  inset-block-start: var(--constel-top);
  align-self: start;
  /* the full width of the window, not the column: the particles have no
     side edges to stop at */
  inline-size: 100vw;
  margin-inline-start: calc(50% - 50vw);
  block-size: var(--constel-h);
  min-block-size: 30rem;
  overflow: hidden;
  isolation: isolate;
}
.constel__canvas {
  position: absolute;
  inset: 0;
  inline-size: 100%;
  block-size: 100%;
  display: block;
  opacity: 0;
  transition: opacity 0.8s ease;
  /* ... and none at the top or the foot either: they thin out into the page */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14%, #000 86%, transparent 100%);
}
.constel.is-live .constel__canvas { opacity: 1; }

.constel__ticks {
  position: absolute;
  inset-inline-end: 1.6rem;
  inset-block-start: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: none;
  flex-direction: column;
  gap: 0.55rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.constel.is-live .constel__ticks { display: flex; }
.constel__ticks li {
  inline-size: 0.35rem;
  block-size: 0.35rem;
  border-radius: 1rem;
  background: var(--line-strong);
  transition: block-size 0.35s ease, background-color 0.35s ease;
}
.constel__ticks li.is-on { block-size: 1.5rem; background: var(--civic-jade, var(--brand)); }

.constel__scenes {
  position: relative;
  z-index: 1;
  pointer-events: none;
}
.constel__scene {
  box-sizing: border-box;
  min-block-size: max(var(--constel-h), 30rem);
  display: flex;
  align-items: center;
  padding: clamp(1.5rem, 1rem + 4vw, 5.5rem);
}
.constel__card {
  pointer-events: auto;
  box-sizing: border-box;
  inline-size: min(100%, 31rem);
  padding: clamp(1.25rem, 0.9rem + 1.4vw, 2.25rem);
  border-radius: 8px;
  color: var(--ink);
  /* opaque enough to read on its own: the words never depend on what the
     particles happen to be doing behind them */
  background: var(--stage-card);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: inset 0 0 0 1px var(--stage-card-edge), var(--stage-card-shadow);
}
.constel__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.35rem 0.9rem;
  margin: 0 0 1rem;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.constel__n { font-variant-numeric: tabular-nums; color: var(--brand-text, var(--ink)); font-weight: 600; }
.constel__tag { font-weight: 600; }
.constel__h {
  margin: 0 0 1rem;
  color: var(--ink);
  font-size: clamp(1.55rem, 1.05rem + 1.7vw, 2.7rem);
  line-height: 1.05;
  text-wrap: balance;
}
.constel__p {
  margin: 0;
  color: var(--ink-2);
  font-size: var(--fs-lead, 1.15rem);
  line-height: 1.45;
  max-inline-size: 42ch;
}
.constel__link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-block-start: 1.25rem;
  color: var(--ink);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: var(--civic-jade, var(--brand));
  text-decoration-thickness: 2px;
  text-underline-offset: 0.3em;
}
.constel__link:hover { text-decoration-color: var(--ink); }
.constel__link:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; border-radius: 2px; }
.constel__arrow::before { content: "→"; display: inline-block; }
[dir="rtl"] .constel__arrow::before { content: "←"; }
[data-style="civic"] .constel__meta:lang(ar) { text-transform: none; letter-spacing: 0; font-family: var(--font-arabic); font-size: 0.9375rem; }   /* 17Q: Arabic needs the size Latin caps get from their cap height */

.constel__toggle { inset-block-end: 1.25rem; inset-inline-end: 1.25rem; }

/* SESSION 17O — ONE CHAPTER: the band that opens a service page. Not
   sticky, a little shorter than the window, the discipline's shape on the
   far side of its two lines. */
.constel--single { --constel-single-h: clamp(26rem, 70vh, 44rem); }
.constel--single .constel__stage {
  position: relative;
  inset-block-start: auto;
  block-size: var(--constel-single-h);
  min-block-size: 0;
}
.constel--single .constel__scene { min-block-size: var(--constel-single-h); padding-block: 1.5rem; }
.constel__h--statement {
  font-size: clamp(1.2rem, 0.9rem + 1vw, 1.8rem);
  line-height: 1.12;
  max-inline-size: 26ch;
}
.constel__who { margin: 1.1rem 0 0; color: var(--ink-2); font-size: var(--fs-body, 1rem); line-height: 1.5; max-inline-size: 46ch; }
.constel__whol { display: block; margin-block-end: 0.25rem; color: var(--ink); font-weight: 600; font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; }
[data-style="civic"] .constel__whol:lang(ar) { text-transform: none; letter-spacing: 0; font-family: var(--font-arabic); }
.svc-stage { padding-block: 0; }

/* The panel: one chapter on a stage of fixed shape, nothing sticky. */
.constel--editor .constel__stage { position: relative; inline-size: 100%; margin-inline-start: 0; block-size: auto; min-block-size: 0; aspect-ratio: 16 / 7; box-shadow: inset 0 0 0 1px var(--line); }
.constel--editor .constel__scene { min-block-size: 0; block-size: 100%; }
.constel--editor { aspect-ratio: 16 / 7; }

/* ---------------------------------------------------------------- PHONES */
@media (max-width: 767px) {
  .cv-el--glass-mark { aspect-ratio: 1 / 1.02; }
  .constel { --constel-top: 0rem; }
  .constel__stage { min-block-size: 26rem; }
  .constel__scene {
    align-items: flex-end;
    min-block-size: max(var(--constel-h), 26rem);
    padding: 0.75rem 0.75rem 4.75rem;
  }
  .constel__card { inline-size: 100%; padding: 1.1rem 1.15rem 1.25rem; }
  .constel__h { font-size: clamp(1.35rem, 1rem + 2.4vw, 1.9rem); }
  .constel__p { font-size: 1rem; }
  /* The floating nav covers the top of the stage and the action dock its
     foot, so on a phone the chapter marks and the stop button sit just
     under the nav, clear of both. */
  .constel__ticks { inset-inline-start: 1rem; inset-inline-end: auto; inset-block-start: 5.6rem; transform: none; flex-direction: row; }
  .constel__ticks li.is-on { block-size: 0.35rem; inline-size: 1.4rem; }
  .stage-toggle { inset-block-end: 0.85rem; inset-inline-end: 0.85rem; }
  .constel__toggle { inset-block-start: 4.6rem; inset-block-end: auto; inset-inline-end: 0.85rem; }
  /* one chapter on a phone: the shape, then its words — stacked, not laid over */
  .constel--single { display: block; }
  .constel--single .constel__stage { block-size: min(96vw, 24rem); }
  .constel--single .constel__scene { min-block-size: 0; padding: 0; }
  .constel--single .constel__toggle { inset-block-start: auto; inset-block-end: 0.5rem; }
}

/* A visitor who asked for less transparency gets solid panes. */
@media (prefers-reduced-transparency: reduce) {
  .constel__card, .stage-toggle, .stage-glass__tag {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--stage-base);
  }
}

@media print {
  .stage-glass__canvas, .constel__canvas, .stage-toggle, .constel__ticks { display: none; }
  .constel__stage { position: static; block-size: auto; min-block-size: 0; }
  .constel__scene { min-block-size: 0; }
}