/* Reusable pieces: liquid glass, chart panels, adoption bars, stat row, question wheel,
   and the type of the 3D-anchored chart labels. (The finale's buttons are in contact.css.)
   Loads after layout.css: .glass must win over .hero-glass on padding and radius. */

/* ---------- Liquid glass ----------
   An almost clear pane that bends light at its rim. No drawn border: a hairline catch-light,
   brightest at the top-left and bottom-right corners, like a lens edge. */
.glass {
  padding: var(--s-6) var(--card-px); border-radius: 28px; isolation: isolate;
  background: radial-gradient(120% 80% at 0% 0%,rgba(255,255,255,.04),rgba(255,255,255,0) 55%),rgba(255,255,255,.012);
  backdrop-filter: blur(12px) saturate(150%); -webkit-backdrop-filter: blur(12px) saturate(150%);
  box-shadow: inset 0 .5px 0 rgba(255,255,255,.2), inset 0 0 24px rgba(255,255,255,.025);
}
/* the rim: a 1px gradient ring, cut out of a full gradient with a mask */
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(135deg,rgba(255,255,255,.42),rgba(255,255,255,.07) 20%,rgba(255,255,255,0) 45%,
    rgba(255,255,255,0) 60%,rgba(255,255,255,.07) 82%,rgba(255,255,255,.26));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; opacity: .5;
}
/* a blur filter would break backdrop-filter while revealing */
.glass.reveal { filter: none }

/* ---------- Chart panels ----------
   charts.js draws each SVG at its real pixel size, so these font sizes are true pixels at every width. */
.panel {
  margin-top: var(--s-5); padding: var(--s-4) var(--s-4) var(--s-3); border-radius: 20px;
  background: rgba(255,255,255,.018); box-shadow: inset 0 .5px 0 rgba(255,255,255,.12);
}
.panel h3 {
  font-family: var(--body); font-weight: 600; font-size: 13px; line-height: 16px; letter-spacing: -.008em; color: var(--kicker);
  margin-bottom: var(--s-3); display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-4);
}
.panel h3 span + span { white-space: nowrap; font-weight: 400; font-size: 12px; color: var(--grey-2) }
.panel svg { width: 100%; height: auto; display: block; overflow: visible }
.panel svg text {
  font-family: var(--body); font-size: 11px; font-weight: 500; letter-spacing: 0; fill: var(--grey-2);
  font-variant-numeric: tabular-nums;
  /* a halo in the panel colour keeps labels clean where they cross a gridline or the curve */
  paint-order: stroke; stroke: rgba(9,9,16,.92); stroke-width: 3px; stroke-linejoin: round;
}
.panel svg .lb { font-size: 12px; fill: var(--kicker) }
.panel svg .hl { font-size: 12px; font-weight: 600; fill: var(--white) }
/* chart animation: charts.js adds .go to a panel the first time its chapter settles on screen */
.draw { stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 2.6s cubic-bezier(.6,0,.2,1) .4s }
.panel.go .draw { stroke-dashoffset: 0 }
.fade { opacity: 0; transition: opacity 1.2s ease 1.6s }
.panel.go .fade { opacity: 1 }
.pt { opacity: 0; transition: opacity .6s ease }
.panel.go .pt { opacity: 1 }
@keyframes halo { 0% { r: 5; opacity: .55 } 100% { r: 16; opacity: 0 } }
.halo { animation: halo 2.4s ease-out infinite }

/* ---------- Stat row (from / to under a chart) ---------- */
.stat-row { display: flex; justify-content: space-between; align-items: flex-end; gap: var(--s-4); margin-top: var(--s-2) }
.stat-row .num {
  font-family: var(--display); font-weight: 600; font-size: clamp(24px,2.1vw,30px); letter-spacing: -.03em; line-height: 1;
  color: var(--white); font-variant-numeric: tabular-nums;
}
.stat-row .from .num { color: rgba(235,235,245,.55) }
.stat-row .to { text-align: right }
.stat-row .cap { margin-top: var(--s-1); font-size: 12px; line-height: 16px; letter-spacing: -.005em; color: var(--grey-2); white-space: nowrap }

/* ---------- Adoption bars ---------- */
.bars { display: grid; gap: var(--s-2) }
.bar {
  display: grid; grid-template-columns: 84px 1fr 66px; align-items: center; gap: var(--s-3);
  font-size: 13px; line-height: 16px; letter-spacing: -.008em; font-variant-numeric: tabular-nums;
}
.bar .nm { color: var(--dim) }
.bar .tr { height: 8px; border-radius: 4px; background: rgba(255,255,255,.04); position: relative }
.bar .tr i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; background: rgba(255,255,255,.26);
  transform-origin: left; transform: scaleX(0); transition: transform 1.6s cubic-bezier(.6,0,.2,1) .5s;
}
.panel.go .bar .tr i { transform: scaleX(1) }
.bar .v { text-align: right; color: rgba(238,241,255,.8) }
.bar.gpt .nm, .bar.gpt .v { color: var(--blue); font-weight: 600 }
.bar.gpt .tr i { min-width: 5px; background: var(--blue); box-shadow: 0 0 10px var(--blue); animation: glow 1.6s ease-in-out infinite }
@keyframes glow { 50% { box-shadow: 0 0 3px var(--blue) } }

/* ---------- Hard questions: one at a time, crossfading in place (ui.js advances them) ----------
   The questions share one grid cell, so the wheel is exactly as tall as the longest question:
   the card hugs its content with no empty band. Set at the headline size (40/44, 28/32 on phones), so a
   balanced question fills the standard card width instead of leaving its right half empty.
   No mask and no 3D, so the question on show is always fully legible. The two cross over in place, together, over
   400 ms (the site's one curve, EASE in ui.js): the outgoing one drifts up as it fades (.out, set by ui.js; its fade
   a little quicker, 300 ms, so the two overlap only briefly) while the next rises into its place, so the card is
   never empty. */
.q-wheel {
  position: relative; margin: var(--s-3) calc(var(--s-5) * -1) var(--s-2); padding: .3em var(--s-5);
  font-family: var(--display); font-weight: 600; font-size: 40px; line-height: 44px; letter-spacing: -.02em;
  color: var(--grey);
}
.q-drum { position: relative; display: grid }
.q-wheel .q {
  grid-area: 1 / 1; align-self: center; margin: 0; max-width: 15.5em;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .3s cubic-bezier(.28,.11,.32,1), transform .4s cubic-bezier(.28,.11,.32,1), visibility 0s .4s;
}
.q-wheel .q.on {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .4s cubic-bezier(.28,.11,.32,1), transform .4s cubic-bezier(.28,.11,.32,1), visibility 0s;
}
.q-wheel .q.out { transform: translateY(-10px) }
/* Progress pills: one quiet dot per question; the current one stretches into a capsule that fills over its
   7 seconds (ui.js sets --qp, 0→1), so you can see when the next question is coming. Pausing freezes the fill.
   Each dot is a 24×44 button (the current one 46 wide): full-height touch targets around small marks. */
.q-count { display: flex; justify-content: flex-start; align-items: center; gap: 0; margin: -4px 0 -4px -9px }
.q-count button:not(.q-toggle) {
  appearance: none; border: 0; background: none; padding: 0; cursor: pointer; width: 24px; height: 44px; position: relative;
  transition: width .5s cubic-bezier(.28,.11,.32,1);
}
.q-count button:not(.q-toggle).on { width: 46px }
.q-count button:not(.q-toggle)::before,
.q-count button:not(.q-toggle)::after {
  content: ""; position: absolute; left: 50%; top: 50%; height: 6px; margin-top: -3px; border-radius: 3px;
}
.q-count button:not(.q-toggle)::before {
  width: 6px; margin-left: -3px; background: rgba(255,255,255,.3);
  transition: width .5s cubic-bezier(.28,.11,.32,1), margin-left .5s cubic-bezier(.28,.11,.32,1), background-color .3s;
}
.q-count button:not(.q-toggle):hover::before { background: rgba(255,255,255,.6) }
.q-count button:not(.q-toggle).on::before { width: 32px; margin-left: -16px; background: rgba(255,255,255,.16) }
.q-count button:not(.q-toggle)::after {
  width: 32px; margin-left: -16px; background: var(--white); box-shadow: 0 0 10px rgba(255,255,255,.35);
  transform-origin: left center; transform: scaleX(0); opacity: 0; transition: opacity .3s;
}
.q-count button:not(.q-toggle).on::after { opacity: 1; transform: scaleX(var(--qp, 0)) }
.q-count button:not(.q-toggle):focus-visible { outline: 2px solid var(--blue); outline-offset: -8px; border-radius: 12px }
/* the carousel's pause/play toggle (ui.js adds it after the dots) */
.q-count .q-toggle {
  appearance: none; border: 0; cursor: pointer; position: relative;
  width: 36px; height: 36px; padding: 0; margin-left: 11px; border-radius: 50%;
  display: grid; place-items: center; color: var(--grey); background: rgba(255,255,255,.06);
  transition: color .2s cubic-bezier(.28,.11,.32,1), background-color .2s cubic-bezier(.28,.11,.32,1);
}
.q-count .q-toggle::before { content: none }
.q-count .q-toggle::after { content: ""; position: absolute; inset: -4px }   /* 44px hit area */
.q-count .q-toggle svg { width: 12px; height: 12px; fill: currentColor }
.q-count .q-toggle:hover { color: var(--white); background: rgba(255,255,255,.12) }
.q-count .q-toggle:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px }

/* text selection in the one accent */
::selection { background: var(--blue); color: #fff }

/* ---------- 3D-anchored chart labels: type and colour (hud.css positions them) ----------
   #labels raises specificity over hud.css, which loads later. Nothing goes below 11px. */
#labels .lbl { font-variant-numeric: tabular-nums }
#labels .lbl.grid { font-size: 11px; color: var(--grey-2) }
#labels .lbl.yr { font-size: 11px; font-weight: 500; color: var(--kicker) }
#labels .lbl.cap { font-size: 12px; line-height: 16px; font-weight: 600; color: var(--kicker) }
#labels .lbl .sub { display: block; font-size: 11px; line-height: 14px; font-weight: 400; color: var(--kicker); margin-top: 2px }

/* ---------- Responsive ---------- */
@media (max-width:820px) {
  #labels .lbl { font-size: 11px }
  #labels .lbl.tok { font-size: 13px }
  #labels .lbl.cap { font-size: 11px; line-height: 14px }
}
@media (max-width:734px) {
  .q-wheel { font-size: 28px; line-height: 32px }
}
@media (max-width:520px) {
  .panel { padding: var(--s-3) var(--s-3) var(--s-2); border-radius: 16px }
  .bar { grid-template-columns: 78px 1fr 64px; font-size: 11px; line-height: 14px }
  .copy:has(.panel) .note-long { display: none }
  .panel .src { margin-top: var(--s-2); font-size: 11px; line-height: 14px }
}
/* tablets held upright: a card with a chart becomes two columns (words | chart), so it stays short and the sculpture
   above it keeps its size (layout.css centres the card; the chart redraws at its column's width) */
@media (min-width:768px) and (max-width:1024px) and (orientation:portrait) {
  .copy:has(.panel) {
    display: grid; column-gap: var(--s-5); align-items: start;
    grid-template-columns: minmax(0,1fr) minmax(0,1.15fr); grid-template-rows: auto auto auto auto 1fr;
  }
  .copy:has(.panel) > * { grid-column: 1 }
  .copy:has(.panel) > .panel { grid-column: 2; grid-row: 1 / -1; margin-top: 0 }
  .copy:has(.panel) .note-long { display: none }
}
/* short desktop screens: the chart already shows the number ("2025: $582B"), so only the question stays */
@media (min-width:821px) and (max-height:760px) {
  .copy:has(.panel) .note-long { display: none }
}
/* phone landscape: a card with a chart becomes two columns (words | chart) so it fits the short screen,
   leaving the sculpture its own space on the right */
@media (orientation:landscape) and (max-height:500px) {
  .glass { padding: var(--s-4) var(--card-px) }
  .copy:has(.panel) {
    max-width: min(680px,80%); display: grid; column-gap: var(--s-5); align-items: start;
    grid-template-columns: minmax(0,1fr) minmax(0,1.1fr); grid-template-rows: auto auto auto auto 1fr;
  }
  .copy:has(.panel) > * { grid-column: 1 }
  .copy:has(.panel) > .panel { grid-column: 2; grid-row: 1 / -1; margin-top: 0 }
  .panel { padding: var(--s-2) var(--s-3) }
  .panel h3 { margin-bottom: var(--s-1) }
  .copy:has(.panel) .note-long { display: none }
  .stat-row .num { font-size: 20px }
  .q-wheel { font-size: 26px; line-height: 30px; margin-top: var(--s-2) }
  #labels .lbl { font-size: 11px }
  #labels .lbl.tok { font-size: 13px }
  #labels .lbl.cap { font-size: 11px; line-height: 14px }
  #labels .lbl small { display: none }
}