/* QNSET home page. Builds on qx.css (tokens, buttons, sections, CTA). */

/* ---------- Hero ---------- */

.qx-hero {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  min-height: max(640px, calc(100svh - 4rem));
  overflow: hidden;
}

.qx-hero-inner {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* three soft brand lights behind the wordmark; JS adds a little pointer parallax */
.qx-hero-glow {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0;
  animation: qx-fade 2.4s ease 1s forwards;
}

/* radial gradients rather than filter: blur() - same softness, far cheaper to animate */
.qx-hero-glow span {
  position: absolute;
  top: 8%;
  width: 46vw;
  aspect-ratio: 1;
  opacity: 0.16;
}

.qx-hero-glow span:nth-child(1) { left: -6%; background: radial-gradient(closest-side, rgba(255, 45, 74, 0.9), rgba(255, 45, 74, 0.25) 45%, transparent); }
.qx-hero-glow span:nth-child(2) { left: 26%; background: radial-gradient(closest-side, rgba(157, 77, 255, 0.9), rgba(157, 77, 255, 0.25) 45%, transparent); }
.qx-hero-glow span:nth-child(3) { left: 56%; background: radial-gradient(closest-side, rgba(47, 107, 255, 0.9), rgba(47, 107, 255, 0.25) 45%, transparent); }

.qx-brand {
  width: min(100%, 150vh);
  margin: auto 0;
  padding-block: clamp(1.5rem, 4vh, 3rem);
  font-weight: inherit;
}

.qx-wordmark {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
}

/* QNSET draws itself (timeline, seconds):
   0.10-1.46  a pen traces each letter outline, letters 0.09s apart
   1.15-2.00  a scanner sweeps left to right, filling the letters behind it;
              the rule under the wordmark draws in lockstep with it
   1.90-2.50  the outlines settle away under the solid fill
   Pen and outline share one duration and easing so the pen tip
   always sits exactly on the end of the line being drawn. */
.qx {
  --qx-draw: 1s;
  --qx-draw-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --qx-sweep: 0.85s;
  --qx-sweep-at: 1.15s;
}

.qx-wordmark use {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.qx-wm-line use {
  stroke: var(--qx-ink);
  stroke-width: 20;
  stroke-dasharray: 1 1;
  stroke-dashoffset: 1;
  animation:
    qx-draw var(--qx-draw) var(--qx-draw-ease) forwards,
    qx-fade-out 0.6s ease forwards;
}

/* the pen: a short bright dash riding the front of the line, glowing via #qx-pen-glow */
.qx-wm-pen use {
  stroke: #fff;
  stroke-width: 48;
  stroke-dasharray: 0.012 2;
  stroke-dashoffset: 0.012;
  opacity: 0;
  animation:
    qx-pen var(--qx-draw) var(--qx-draw-ease) forwards,
    qx-pen-fade var(--qx-draw) linear forwards;
}

.qx-wordmark g use:nth-of-type(1) { animation-delay: 0.1s, 0.1s; }
.qx-wordmark g use:nth-of-type(2) { animation-delay: 0.19s, 0.19s; }
.qx-wordmark g use:nth-of-type(3) { animation-delay: 0.28s, 0.28s; }
.qx-wordmark g use:nth-of-type(4) { animation-delay: 0.37s, 0.37s; }
.qx-wordmark g use:nth-of-type(5) { animation-delay: 0.46s, 0.46s; }

/* outlines: same start as the pen, then all settle away together at 1.9s */
.qx-wordmark .qx-wm-line use:nth-of-type(1) { animation-delay: 0.1s, 1.9s; }
.qx-wordmark .qx-wm-line use:nth-of-type(2) { animation-delay: 0.19s, 1.9s; }
.qx-wordmark .qx-wm-line use:nth-of-type(3) { animation-delay: 0.28s, 1.9s; }
.qx-wordmark .qx-wm-line use:nth-of-type(4) { animation-delay: 0.37s, 1.9s; }
.qx-wordmark .qx-wm-line use:nth-of-type(5) { animation-delay: 0.46s, 1.9s; }

.qx-wordmark .qx-wm-fill use {
  fill: var(--qx-ink);
  stroke: none;
  animation: none;
}

/* the fill is revealed by scaling its clip rect from the left edge */
.qx-wm-wipe {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  animation: qx-grow-x var(--qx-sweep) var(--qx-draw-ease) var(--qx-sweep-at) forwards;
}

.qx-wm-scan {
  opacity: 0;
  animation:
    qx-scan-move var(--qx-sweep) var(--qx-draw-ease) var(--qx-sweep-at) forwards,
    qx-scan-fade calc(var(--qx-sweep) + 0.2s) linear calc(var(--qx-sweep-at) - 0.1s) forwards;
}

/* the hairline under the wordmark is the scanner's trail */
.qx-rule {
  display: block;
  height: 2px;
  margin-top: clamp(0.9rem, 1.6vw, 1.5rem);
  background: var(--qx-spectrum);
  transform: scaleX(0);
  transform-origin: left;
  animation: qx-grow-x var(--qx-sweep) var(--qx-draw-ease) var(--qx-sweep-at) forwards;
}

.qx-sub {
  display: block;
  margin-top: clamp(0.75rem, 1.6vw, 1.5rem);
  font-size: clamp(0.95rem, 3.25vw, 3rem);
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(244, 244, 247, 0.82);
  /* without JS: still spread across the wordmark width */
  text-align: justify;
  text-align-last: justify;
}

/* JS splits it into characters and spaces them edge to edge */
.qx-sub.is-split {
  display: flex;
  justify-content: space-between;
}

.qx-sub.is-split > span {
  display: inline-block;
  min-width: 0.62em;
  text-align: center;
  opacity: 0;
}

.qx-sub.is-split > span.is-on { opacity: 1; }
.qx-sub.is-split > span.is-scrambling { color: var(--qx-faint); }
.qx-sub.is-split > .qx-sub-gap { min-width: 0.6em; }

.qx-hero-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 1.5rem 3rem;
  padding-block: 1.5rem 0;
  opacity: 0;
  animation: qx-fade-up 0.9s var(--qx-ease) 2.15s forwards;
}

.qx-hero-claim {
  margin: 0 0 0.6rem;
  font-size: clamp(1.5rem, 2.5vw, 2.4rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.035em;
}

.qx-hero-lead {
  margin: 0;
  max-width: 46ch;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
  line-height: 1.5;
  color: var(--qx-muted);
}

.qx-hud {
  display: flex;
  justify-content: space-between;
  gap: 1rem 2rem;
  flex-wrap: wrap;
  padding-block: 1.1rem 1.4rem;
  font-family: var(--qx-mono);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--qx-faint);
  opacity: 0;
  animation: qx-fade 1s ease 2.5s forwards;
}

.qx-hud-item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.qx-hud-item[hidden] {
  display: none;
}

.qx-hud-item b {
  font-weight: 500;
  color: var(--qx-ink);
}

.qx-live {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--qx-red);
  box-shadow: 0 0 0 0 rgba(255, 45, 74, 0.6);
  animation: qx-live 2s ease-out infinite;
}

.qx-scrollline {
  position: relative;
  width: 2.75rem;
  height: 1px;
  overflow: hidden;
  background: var(--qx-line);
}

.qx-scrollline::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--qx-ink);
  transform: translateX(-100%);
  animation: qx-scan 2.2s var(--qx-ease) infinite;
}

/* ---------- Process ---------- */

.qx-process {
  position: relative;
  padding-block: clamp(5rem, 12vh, 8rem);
  border-top: 1px solid var(--qx-line);
}

.qx-process-head {
  display: grid;
  gap: 2rem;
}

.qx-process-progress {
  position: relative;
  height: 2px;
  background: var(--qx-line);
  overflow: hidden;
}

.qx-process-progress span {
  position: absolute;
  inset: 0;
  background: var(--qx-spectrum);
  transform-origin: left;
  transform: scaleX(0);
}

.qx-process-track {
  display: grid;
  gap: 3.5rem;
  margin: 3.5rem auto 0;
  padding: 0;
  width: min(1320px, 100% - 2 * var(--qx-gutter));
  list-style: none;
}

.qx-step {
  --c: var(--qx-red);
  position: relative;
  padding-top: 1.75rem;
  border-top: 1px solid var(--qx-line);
  transition: opacity 0.6s ease;
}

.qx-step::before {
  content: '';
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.9s var(--qx-ease);
}

.qx-step.is-active::before {
  transform: scaleX(1);
}

.qx-step--purple { --c: var(--qx-purple); }
.qx-step--blue { --c: var(--qx-blue); }
.qx-step--white { --c: var(--qx-ink); }

.qx-step-num {
  display: block;
  font-family: var(--qx-mono);
  font-size: 0.8rem;
  color: var(--c);
}

.qx-step-title {
  margin: 0.75rem 0 1rem;
  font-size: clamp(2.5rem, 4.6vw, 4.5rem);
  font-weight: 650;
  line-height: 1;
  letter-spacing: -0.035em;
}

.qx-step-text {
  margin: 0;
  max-width: 34ch;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--qx-muted);
}

/* The four glyphs tell one story on the same 3x3 grid:
   scattered unknowns -> a connected structure -> built cells -> a live system. */
.qx-glyph {
  display: block;
  width: clamp(112px, 17vh, 156px);
  height: auto;
  margin-bottom: 1.75rem;
  color: var(--c);
  overflow: visible;
}

/* Discover: a focus ring hops between scattered points */
.qx-glyph .g-dots circle { opacity: 0.45; }
.qx-glyph .g-focus { transform: translate(94px, 74px); }
.qx-step.is-active .g-focus { animation: qx-focus 4.8s var(--qx-ease) infinite; }

/* Architect: nodes settle, then edges draw between them */
.qx-glyph .g-nodes circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.6);
  opacity: 0.5;
  transition: transform 0.6s var(--qx-ease), opacity 0.6s ease;
}
.qx-glyph .g-edges path {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 0.7s var(--qx-ease);
}
.qx-step.is-active .g-nodes circle { transform: none; opacity: 1; }
.qx-step.is-active .g-edges path { stroke-dashoffset: 0; }

/* Build: the cells fill in reading order */
.qx-glyph .g-slots { opacity: 0.28; }
.qx-glyph .g-cells rect {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0.5);
  opacity: 0;
  transition: transform 0.6s var(--qx-ease), opacity 0.4s ease;
}
.qx-step.is-active .g-cells rect { transform: none; opacity: 1; }

/* Operate: activity ripples diagonally across the finished grid */
.qx-glyph .g-live rect { opacity: 0.16; }
.qx-step.is-active .g-live rect { animation: qx-wave 2.6s ease-in-out infinite; }

.qx-glyph .g-nodes circle:nth-child(1),
.qx-glyph .g-cells rect:nth-child(1) { transition-delay: 0.00s; }
.qx-glyph .g-nodes circle:nth-child(2),
.qx-glyph .g-cells rect:nth-child(2) { transition-delay: 0.07s; }
.qx-glyph .g-nodes circle:nth-child(3),
.qx-glyph .g-cells rect:nth-child(3) { transition-delay: 0.14s; }
.qx-glyph .g-nodes circle:nth-child(4),
.qx-glyph .g-cells rect:nth-child(4) { transition-delay: 0.21s; }
.qx-glyph .g-nodes circle:nth-child(5),
.qx-glyph .g-cells rect:nth-child(5) { transition-delay: 0.28s; }
.qx-glyph .g-nodes circle:nth-child(6),
.qx-glyph .g-cells rect:nth-child(6) { transition-delay: 0.35s; }
.qx-glyph .g-nodes circle:nth-child(7),
.qx-glyph .g-cells rect:nth-child(7) { transition-delay: 0.42s; }
.qx-glyph .g-nodes circle:nth-child(8),
.qx-glyph .g-cells rect:nth-child(8) { transition-delay: 0.49s; }
.qx-glyph .g-nodes circle:nth-child(9),
.qx-glyph .g-cells rect:nth-child(9) { transition-delay: 0.56s; }
.qx-glyph .g-edges path:nth-child(1) { transition-delay: 0.35s; }
.qx-glyph .g-edges path:nth-child(2) { transition-delay: 0.41s; }
.qx-glyph .g-edges path:nth-child(3) { transition-delay: 0.47s; }
.qx-glyph .g-edges path:nth-child(4) { transition-delay: 0.53s; }
.qx-glyph .g-edges path:nth-child(5) { transition-delay: 0.59s; }
.qx-glyph .g-edges path:nth-child(6) { transition-delay: 0.65s; }
.qx-glyph .g-edges path:nth-child(7) { transition-delay: 0.71s; }
.qx-glyph .g-edges path:nth-child(8) { transition-delay: 0.77s; }
.qx-glyph .g-edges path:nth-child(9) { transition-delay: 0.83s; }
.qx-glyph .g-edges path:nth-child(10) { transition-delay: 0.89s; }
.qx-glyph .g-edges path:nth-child(11) { transition-delay: 0.95s; }
.qx-glyph .g-edges path:nth-child(12) { transition-delay: 1.01s; }
.qx-glyph .g-live rect:nth-child(1) { animation-delay: 0.00s; }
.qx-glyph .g-live rect:nth-child(2) { animation-delay: 0.18s; }
.qx-glyph .g-live rect:nth-child(3) { animation-delay: 0.36s; }
.qx-glyph .g-live rect:nth-child(4) { animation-delay: 0.18s; }
.qx-glyph .g-live rect:nth-child(5) { animation-delay: 0.36s; }
.qx-glyph .g-live rect:nth-child(6) { animation-delay: 0.54s; }
.qx-glyph .g-live rect:nth-child(7) { animation-delay: 0.36s; }
.qx-glyph .g-live rect:nth-child(8) { animation-delay: 0.54s; }
.qx-glyph .g-live rect:nth-child(9) { animation-delay: 0.72s; }

/* Desktop: pin the section and move the track sideways with scroll. */
@media (min-width: 900px) {
  .qx-js .qx-process {
    height: var(--qx-pin-h, auto);
    padding-block: 0;
  }

  .qx-js .qx-process-sticky {
    position: sticky;
    top: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100vh;
    padding-top: 4rem;
    overflow: hidden;
  }

  .qx-js .qx-process-head {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    align-items: end;
    gap: 3rem;
  }

  .qx-js .qx-process-progress {
    margin-bottom: 0.6em;
  }

  .qx-js .qx-process-track {
    display: flex;
    gap: clamp(2rem, 4vw, 4rem);
    width: max-content;
    margin: clamp(2.5rem, 7vh, 4.5rem) 0 0;
    padding-inline: max(var(--qx-gutter), (100vw - 1320px) / 2) 12vw;
    will-change: transform;
  }

  .qx-js .qx-step {
    width: clamp(340px, 34vw, 500px);
    opacity: 0.3;
  }

  .qx-js .qx-step.is-active {
    opacity: 1;
  }
}

/* ---------- Work cards ---------- */

#work {
  scroll-margin-top: 4rem;
}

.qx-work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 1fr;
  gap: 1.25rem;
}

.qx-card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  --qx-card-pad: clamp(1.5rem, 3vw, 2.5rem);
  min-height: 32rem;
  padding: var(--qx-card-pad);
  overflow: hidden;
  border: 1px solid var(--qx-line);
  border-radius: 1.5rem;
  background: var(--qx-surface);
  color: inherit;
  text-decoration: none;
}

/* soft light that follows the pointer */
.qx-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), rgba(157, 77, 255, 0.14), transparent 45%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

/* brighter edge where the pointer is */
.qx-card::after {
  content: '';
  position: absolute;
  inset: 0;
  padding: 1px;
  border-radius: inherit;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(244, 244, 247, 0.55), transparent 60%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity 0.5s ease;
  pointer-events: none;
}

.qx-card:hover::before,
.qx-card:hover::after,
.qx-card:focus-visible::before,
.qx-card:focus-visible::after {
  opacity: 1;
}

/* the arrow sits in the corner, out of the flow, so the name starts at the top */
.qx-card-top {
  position: absolute;
  top: var(--qx-card-pad);
  right: var(--qx-card-pad);
  display: flex;
}

.qx-card-arrow {
  color: var(--qx-faint);
  transition: transform 0.5s var(--qx-ease), color 0.3s ease;
}

.qx-card:hover .qx-card-arrow {
  color: var(--qx-ink);
  transform: translate(3px, -3px);
}

.qx-card-title {
  margin: 0;
  font-size: clamp(2.75rem, 5vw, 4.5rem);
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: -0.035em;
}

.qx-card-text {
  margin: 0;
  max-width: 44ch;
  line-height: 1.55;
  color: var(--qx-muted);
}

.qx-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ==========================================================================
   Magnesium card: the Magnesium brand (see magnesium.css). Navy and cobalt,
   the angular wordmark burning in, Flow, and the v1.2.0 binary_trees race.
   ========================================================================== */

.qx-card--mg {
  border-color: rgba(150, 175, 255, 0.18);
  background:
    radial-gradient(40rem 22rem at 25% -5%, rgba(47, 91, 255, 0.24), transparent 70%),
    linear-gradient(180deg, #0b1136, #04061a 70%);
  color: #eef2ff;
}

.qx-card--mg::before {
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), rgba(93, 132, 255, 0.2), transparent 45%);
}

.qx-card--mg .qx-card-text {
  /* leaves Flow's column free on the right */
  max-width: min(44ch, 100% - 6rem);
  color: rgba(226, 233, 255, 0.7);
}

.qx-mgc-wm {
  display: block;
  width: min(100% - 2.5rem, 31rem);
  height: auto;
  overflow: visible;
  filter: drop-shadow(0 0 22px rgba(47, 91, 255, 0.4));
}

.qx-mgc-bevel {
  transform: translate(4px, 5px);
}

/* the body burns in left to right once the card is on screen */
.qx-js .qx-mgc-wipe {
  transform-box: fill-box;
  transform-origin: left center;
  transform: scaleX(0);
  transition: transform 1.1s cubic-bezier(0.65, 0, 0.35, 1) 0.35s;
}

.qx-js .qx-card--mg.is-in .qx-mgc-wipe {
  transform: scaleX(1);
}

.qx-mgc-race {
  --qx-mgc-room: 1.5rem;
  position: relative;
  display: grid;
  gap: 0.7rem;
  margin: 0;
  padding-top: var(--qx-mgc-room);
  font-family: var(--qx-mono);
  font-size: 0.78rem;
}

.qx-mgc-win {
  margin: 0;
  font-family: 'Chakra Petch', var(--qx-display);
  font-size: 1.05rem;
  font-weight: 600;
  color: rgba(226, 233, 255, 0.7);
}

.qx-mgc-win strong {
  margin-right: 0.35rem;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
  color: #eef2ff;
  text-shadow: 0 0 24px rgba(93, 132, 255, 0.7);
}

.qx-mgc-race figcaption {
  margin-bottom: 0.2rem;
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(226, 233, 255, 0.45);
}

.qx-mgc-row {
  --w: 1;
  display: grid;
  grid-template-columns: 5.75rem minmax(0, 1fr) 3rem;
  align-items: center;
  gap: 0.9rem;
  color: rgba(226, 233, 255, 0.6);
}

.qx-mgc-row b {
  font-weight: 500;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.qx-mgc-bar {
  height: 6px;
}

.qx-mgc-bar i {
  display: block;
  width: calc(var(--w) * 100%);
  height: 100%;
  border-radius: 2px;
  background: #474f7e;
  transform-origin: left;
}

/* widths relative to the slowest runtime (CPython, 0.515 s) */
.qx-mgc-row.is-mg { --w: 0.154; color: #eef2ff; }
.qx-mgc-row.is-lua { --w: 0.375; }
.qx-mgc-row.is-py { --w: 1; }

.qx-mgc-row.is-mg .qx-mgc-bar { height: 8px; }
.qx-mgc-row.is-mg .qx-mgc-bar i { background: linear-gradient(90deg, #2f5bff, #a9c1ff); box-shadow: 0 0 14px rgba(93, 132, 255, 0.8); }
.qx-mgc-row.is-mg b { font-weight: 700; color: #a9c1ff; }
.qx-mgc-row.is-lua .qx-mgc-bar i { background: #7f87b8; }

/* every bar runs at one speed, so the fastest finishes first */
.qx-js .qx-mgc-bar i {
  transform: scaleX(0);
  transition: transform calc(var(--w) * 1.8s) linear 0.6s;
}

.qx-js .qx-card--mg.is-in .qx-mgc-bar i {
  transform: scaleX(1);
}

/* Flow stands on the headline number's line, at the right */
.qx-mgc-flow {
  position: absolute;
  right: 1rem;
  bottom: calc(100% - var(--qx-mgc-room) - 2.1rem);
  width: 4.25rem;
  height: auto;
  filter: drop-shadow(0 10px 18px rgba(0, 0, 0, 0.6));
  transform-origin: 50% 100%;
  transition: transform 0.6s var(--qx-ease);
}

.qx-js .qx-mgc-flow {
  opacity: 0;
  transform: translateY(40%) rotate(10deg);
  transition: opacity 0.3s ease 1.2s, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) 1.2s;
}

.qx-js .qx-card--mg.is-in .qx-mgc-flow {
  opacity: 1;
  transform: none;
}

.qx-js .qx-card--mg.is-in:hover .qx-mgc-flow {
  transform: rotate(-7deg) translateY(-4px);
  transition-delay: 0s;
}

/* ==========================================================================
   Helion card: the Helion app brand (see helion.css). Night ink, spectral
   amber, DM Serif, and the plan moving to where you are, played once.
   ========================================================================== */

.qx-card--he {
  border-color: rgba(242, 239, 232, 0.14);
  background:
    radial-gradient(36rem 20rem at 80% 110%, rgba(212, 160, 42, 0.14), transparent 70%),
    linear-gradient(180deg, #1b1b29, #14141f 55%, #0b0b10);
  color: #f2efe8;
  font-family: ui-serif, "New York", Charter, "Bitstream Charter", "Sitka Text", Cambria, Georgia, "Noto Serif", serif;
}

.qx-card--he::before {
  background: radial-gradient(560px circle at var(--mx, 50%) var(--my, 0%), rgba(212, 160, 42, 0.16), transparent 45%);
}

.qx-card--he::after {
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 0%), rgba(232, 184, 74, 0.55), transparent 60%);
}

.qx-card--he .qx-card-text {
  max-width: none;
  font-size: 1.05rem;
  color: #b3ada2;
}

.qx-card--he {
  container-type: inline-size;
}

/* letters as tall as the Magnesium wordmark's: that one is
   min(100% - 2.5rem, 31rem) wide with letters 87/640 of its width tall, and
   DM Serif's ascender is 0.70em, so 87/640/0.70 = 19.4% of the same width */
.qx-hec-title {
  font-family: "DM Serif Display", ui-serif, Georgia, serif;
  font-size: 6rem;
  font-size: min(19.4cqi - 0.485rem, 6rem);
  font-weight: 400;
  line-height: 1;
  /* pull the ascenders up level with the top of the Magnesium wordmark */
  margin-top: -0.12em;
  letter-spacing: -0.015em;
}

/* amber rises through the wordmark once, then drains back to cream */
.qx-hec-word {
  padding-right: 0.05em;
  background: linear-gradient(to top, #d4a02a 0 50%, #f2efe8 50% 100%) 0 0 / 100% 200%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.qx-js .qx-card--he.is-in .qx-hec-word {
  animation: qx-hec-fill 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0.4s both;
}

.qx-hec-demo {
  margin-top: auto;
  padding-top: 1.5rem;
}

.qx-hec-screen {
  --qx-hec-edge: rgba(242, 239, 232, 0.1);
  color: #b3ada2;
}

.qx-hec-here {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0.65rem;
  border: 1px solid var(--qx-hec-edge);
  border-radius: 999px;
  font-size: 0.74rem;
  color: #9a948a;
}

.qx-hec-here i {
  position: relative;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d4a02a;
}

.qx-hec-here i::after {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1.5px solid #d4a02a;
  border-radius: 50%;
  opacity: 0;
}

.qx-hec-rows {
  display: grid;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.qx-hec-row {
  position: relative;
  display: grid;
  align-content: center;
  gap: 0.1rem;
  height: 3.3rem;
  padding: 0 1rem;
  border: 1px solid var(--qx-hec-edge);
  border-radius: 0.6rem;
  background: rgba(242, 239, 232, 0.04);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) 1.7s, border-color 0.4s ease 1.7s, background-color 0.4s ease 1.7s;
}

.qx-hec-row::before {
  content: '';
  position: absolute;
  left: 0.45rem;
  top: 0.6rem;
  bottom: 0.6rem;
  width: 3px;
  border-radius: 2px;
  background: #d4a02a;
}

.qx-hec-row.is-fixed {
  background: rgba(242, 239, 232, 0.02);
  border-color: transparent;
}

.qx-hec-row.is-fixed::before {
  background: #5c5850;
}

.qx-hec-name {
  font-size: 0.86rem;
  font-weight: 600;
  color: #f2efe8;
}

.qx-hec-time {
  display: grid;
  font-size: 0.72rem;
  color: #9a948a;
  font-variant-numeric: tabular-nums;
}

.qx-hec-time > * {
  grid-area: 1 / 1;
  text-decoration: none;
  transition: opacity 0.3s ease 1.9s;
}

/* The app's loop, played once when the card comes into view (under five
   seconds, so no pause control): at 17:40 the plan says gym but you're still
   at the office, so the location pings and the gym block flags red; then
   Helion moves the gym later and brings Spanish (works anywhere) forward.
   Dinner is a calendar event and never moves.
   The finished state (plan already moved) is the default, so the card reads
   correctly without JavaScript and under reduced motion. With qx.js, the
   card starts at the original plan and moves when it comes into view. */
.qx-hec-row.is-gym::after {
  content: '';
  position: absolute;
  inset: -1px;
  border: 1px solid rgba(200, 68, 60, 0.7);
  border-radius: inherit;
  background: rgba(200, 68, 60, 0.12);
  opacity: 0;
  pointer-events: none;
}

.qx-js .qx-card--he.is-in .qx-hec-here i::after {
  animation: qx-hec-ping 1.1s cubic-bezier(0.16, 1, 0.3, 1) 0.4s 2;
}

.qx-js .qx-card--he.is-in .qx-hec-row.is-gym::after {
  animation: qx-hec-conflict 1.6s ease 0.5s both;
}

.qx-hec-row.is-gym,
.qx-hec-row.is-spanish { border-color: rgba(212, 160, 42, 0.45); background-color: rgba(212, 160, 42, 0.07); }
.qx-hec-row.is-gym { transform: translateY(3.75rem); }
.qx-hec-row.is-spanish { transform: translateY(-3.75rem); }
.qx-hec-time s { opacity: 0; }

.qx-js .qx-card--he:not(.is-in) .qx-hec-row { transform: none; border-color: var(--qx-hec-edge); background-color: rgba(242, 239, 232, 0.04); }
.qx-js .qx-card--he:not(.is-in) .qx-hec-row.is-fixed { border-color: transparent; background-color: rgba(242, 239, 232, 0.02); }
.qx-js .qx-card--he:not(.is-in) .qx-hec-time s { opacity: 1; }
.qx-js .qx-card--he:not(.is-in) .qx-hec-time s + span { opacity: 0; }

/* ---------- Keyframes ---------- */

@keyframes qx-hec-ping {
  from { transform: scale(0.6); opacity: 0.9; }
  to { transform: scale(2.1); opacity: 0; }
}

/* flags red while the gym block can't happen, clears as it moves */
@keyframes qx-hec-conflict {
  0% { opacity: 0; }
  20%, 70% { opacity: 1; }
  100% { opacity: 0; }
}

@keyframes qx-hec-fill {
  0% { background-position: 0 0; }
  45%, 60% { background-position: 0 100%; }
  100% { background-position: 0 0; }
}

@keyframes qx-draw { to { stroke-dashoffset: 0; } }
@keyframes qx-pen { to { stroke-dashoffset: -0.988; } }
@keyframes qx-pen-fade {
  0% { opacity: 0; }
  6%, 86% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes qx-scan-move { to { transform: translateX(387px); } }
@keyframes qx-scan-fade {
  0% { opacity: 0; }
  12%, 82% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes qx-focus {
  0%, 18% { transform: translate(94px, 74px); }
  25%, 43% { transform: translate(24px, 36px); }
  50%, 68% { transform: translate(126px, 140px); }
  75%, 93% { transform: translate(130px, 42px); }
  100% { transform: translate(94px, 74px); }
}
@keyframes qx-wave {
  0%, 100% { opacity: 0.16; }
  18% { opacity: 1; }
  45% { opacity: 0.16; }
}
@keyframes qx-live {
  0% { box-shadow: 0 0 0 0 rgba(255, 45, 74, 0.6); }
  80%, 100% { box-shadow: 0 0 0 8px rgba(255, 45, 74, 0); }
}
@keyframes qx-scan {
  0% { transform: translateX(-100%); }
  60%, 100% { transform: translateX(100%); }
}

/* ---------- Mobile ---------- */

@media (max-width: 899px) {
  .qx-work-grid {
    grid-template-columns: 1fr;
  }

  .qx-card {
    min-height: 0;
  }

}

@media (max-width: 639px) {
  .qx-hero-glow span {
    top: 24%;
    width: 110vw;
  }

  .qx-hero-glow span:nth-child(1) { left: -55%; }
  .qx-hero-glow span:nth-child(2) { left: -5%; }
  .qx-hero-glow span:nth-child(3) { left: 45%; }

  .qx-hero-foot {
    grid-template-columns: 1fr;
  }

  .qx-hud-scroll {
    display: none;
  }
}