/* The sign-in visual (.cdv), "Heatmap Aurora": the panel beside the sign-in / sign-up form and in the terminal's
   sign-in dialog. The canvas (auth-scene.js) draws on top of a CSS-only backdrop, so the panel looks finished before the script
   arrives and with JavaScript off. Theme tokens only; both themes designed (dark: a night chart lit by holo glows;
   light: a pale paper chart with pastel heat). The headlines stack in one grid cell, so the tallest reserves the
   room and a rotation never moves anything. */

.cdv {
  /* palette the canvas reads (getComputedStyle); --cdv-dark picks additive light (dark) or plain blending (light) */
  --cdv-dark: 1;
  --cdv-up: var(--a-up);
  --cdv-down: var(--a-down);
  --cdv-grid: var(--a-ch-grid);
  --cdv-text: var(--a-fg-3);
  --cdv-tag: var(--cd-on-holo);
  --cdv-heat-1: var(--cd-lilac);
  --cdv-heat-2: var(--cd-pink);
  --cdv-heat-3: var(--cd-gold);
  --cdv-heat-4: var(--cd-aqua);
  --cdv-ground: var(--a-sunken);
  --cdv-glow-a: color-mix(in srgb, var(--cd-lilac) 22%, transparent);
  --cdv-glow-b: color-mix(in srgb, var(--cd-pink) 14%, transparent);
  --cdv-glow-c: color-mix(in srgb, var(--cd-aqua) 12%, transparent);
  --cdv-veil: color-mix(in srgb, var(--a-sunken) 92%, transparent);
  --cdv-edge: var(--a-line-1);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-radius: var(--a-r-lg);
  border: 1px solid var(--cdv-edge);
  background:
    radial-gradient(60% 45% at 72% 28%, var(--cdv-glow-a), transparent 70%),
    radial-gradient(50% 40% at 30% 18%, var(--cdv-glow-b), transparent 70%),
    radial-gradient(55% 40% at 50% 78%, var(--cdv-glow-c), transparent 70%),
    var(--cdv-ground);
  color: var(--a-fg-1);
}
:root[data-theme="light"] .cdv {
  --cdv-dark: 0;
  --cdv-tag: var(--a-panel);
  --cdv-glow-a: color-mix(in srgb, var(--cd-lilac) 12%, transparent);
  --cdv-glow-b: color-mix(in srgb, var(--cd-pink) 8%, transparent);
  --cdv-glow-c: color-mix(in srgb, var(--cd-aqua) 8%, transparent);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) .cdv {
    --cdv-dark: 0;
    --cdv-tag: var(--a-panel);
    --cdv-glow-a: color-mix(in srgb, var(--cd-lilac) 12%, transparent);
    --cdv-glow-b: color-mix(in srgb, var(--cd-pink) 8%, transparent);
    --cdv-glow-c: color-mix(in srgb, var(--cd-aqua) 8%, transparent);
  }
}

/* the canvas: fades in on its first frame */
.cdv-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: -1; display: block;
  opacity: 0; transition: opacity .6s ease;
  direction: ltr;   /* the left-edge fade is drawn in the canvas: a CSS mask would cost a compositing pass per frame */
}
.cdv.cdv-ready .cdv-canvas { opacity: 1; }
/* a quiet chart-paper grid behind everything (visible before the canvas, and under it) */
.cdv::before {
  content: ''; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background-image: linear-gradient(var(--a-ch-grid) 1px, transparent 1px), linear-gradient(90deg, var(--a-ch-grid) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(80% 60% at 60% 35%, #000, transparent 75%);
  mask-image: radial-gradient(80% 60% at 60% 35%, #000, transparent 75%);
}
/* the copy sits on a soft veil at the foot of the panel */
.cdv::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 46%; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, transparent, var(--cdv-veil) 62%);
}

.cdv-copy { position: relative; padding: var(--a-sp-8) calc(var(--a-sp-8) + var(--a-sp-7)) calc(var(--a-sp-8) + var(--a-sp-7)); }
.cdv-kicker {
  display: inline-flex; align-items: center; gap: var(--a-sp-4); margin: 0 0 var(--a-sp-6);
  font: var(--a-fw-semibold) var(--a-fs-xs)/1 var(--a-sans); letter-spacing: var(--a-track-caps); text-transform: uppercase; color: var(--a-fg-3);
}
.cdv-kicker::before { content: ''; width: 24px; height: 2px; border-radius: var(--a-r-pill); background: var(--a-holo-h); }
.cdv-heads { display: grid; }
.cdv-h {
  grid-area: 1 / 1; margin: 0; max-width: 640px;
  opacity: 0; transform: translateY(6px); transition: opacity .7s ease, transform .7s ease; visibility: hidden;
}
.cdv-h.is-on { opacity: 1; transform: none; visibility: visible; }
.cdv-h b { display: block; max-width: 15em; font: var(--a-fw-semibold) var(--a-fs-display-s)/var(--a-lh-tight) var(--a-sans); letter-spacing: -0.02em; color: var(--a-fg-1); text-wrap: balance; }   /* no lone "act." on the last line (review 0.9.53) */
.cdv-h span { display: block; margin-top: var(--a-sp-5); max-width: 30em; font: var(--a-fw-regular) var(--a-fs-lg)/var(--a-lh-body) var(--a-sans); color: var(--a-fg-2); }

/* pause / play, like a video's */
.cdv-play {
  position: absolute; inset-inline-end: var(--a-sp-6); bottom: var(--a-sp-6); z-index: 1;
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border-radius: var(--a-r-pill); border: 1px solid var(--a-line-2); background: var(--a-glass); color: var(--a-fg-2); cursor: pointer;
}
.cdv-play:hover { color: var(--a-fg-1); border-color: var(--a-line-3); background: var(--a-glass-2); }
.cdv-play svg { width: 14px; height: 14px; fill: currentColor; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cdv-play:empty { display: none; }

@media (prefers-reduced-motion: reduce) {
  .cdv-h, .cdv-canvas { transition: none; }
  .cdv-h { transform: none; }
}

/* short banner (the auth pages below 1024 px): one line of copy over a faded chart */
@media (max-width: 1023px) {
  .cdv[data-cdv-auto] { justify-content: center; }
  .cdv[data-cdv-auto] .cdv-canvas { opacity: 0; }
  .cdv[data-cdv-auto].cdv-ready .cdv-canvas { opacity: .6; }
  .cdv[data-cdv-auto]::after { height: 100%; background: linear-gradient(90deg, var(--cdv-veil) 0, color-mix(in srgb, var(--a-sunken) 55%, transparent) 70%, transparent); }
  .cdv[data-cdv-auto] .cdv-copy { padding: var(--a-sp-6) calc(var(--a-sp-8) + var(--a-sp-7)) var(--a-sp-6) var(--a-sp-6); }
  .cdv[data-cdv-auto] .cdv-kicker { margin-bottom: var(--a-sp-4); }
  .cdv[data-cdv-auto] .cdv-h b { font-size: var(--a-fs-lg); line-height: var(--a-lh-snug); }
  .cdv[data-cdv-auto] .cdv-h span { display: none; }
  .cdv[data-cdv-auto] .cdv-play { bottom: 50%; transform: translateY(50%); }
}

/* right to left: the copy mirrors; the chart is a chart and stays left to right (cd-i18n.css: charts stay LTR) */
@media (max-width: 1023px) {
  [dir="rtl"] .cdv[data-cdv-auto] .cdv-copy { padding: var(--a-sp-6) var(--a-sp-6) var(--a-sp-6) calc(var(--a-sp-8) + var(--a-sp-7)); }
  [dir="rtl"] .cdv[data-cdv-auto]::after { background: linear-gradient(270deg, var(--cdv-veil) 0, color-mix(in srgb, var(--a-sunken) 55%, transparent) 70%, transparent); }
}