/* The homepage conversion illustration is decorative. Its default state is
   the finished composition; motion is a progressive enhancement. */
.hero-band .hero-visual {
  display: block;
  min-width: 0;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.conversion-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  width: 100%;
  isolation: isolate;
  container-type: inline-size;
}

.conversion-scene::before {
  content: "";
  position: absolute;
  inset: 9% -7% 2% 14%;
  z-index: -1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(222 180 6 / 16%), rgb(67 163 177 / 13%) 42%, transparent 69%);
}

.conversion-scene::after {
  content: "";
  position: absolute;
  inset: 2% -3% 0 6%;
  z-index: -1;
  background-image: radial-gradient(rgb(255 255 255 / 16%) .8px, transparent .8px);
  background-size: 22px 22px;
  mask-image: radial-gradient(ellipse, black, transparent 70%);
}

.conversion-source {
  position: relative;
  grid-area: 1 / 1;
  width: 88%;
  margin: 3% 0 0 2%;
  overflow: hidden;
  color: #d6e2eb;
  background: linear-gradient(130deg, #1e3c50, #132b3f);
  border: 1px solid rgb(206 228 242 / 27%);
  border-radius: 10px;
  box-shadow: 0 18px 42px rgb(0 0 0 / 24%);
  transform: rotate(-4deg);
}

.conversion-source-bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: 2.5% 4%;
  border-bottom: 1px solid rgb(255 255 255 / 12%);
  font: 500 clamp(.65rem, 2.1cqi, .75rem) 'JetBrains Mono', monospace;
}

.conversion-window-dots {
  display: flex;
  gap: 4px;
}

.conversion-window-dots i {
  width: 6px;
  height: 6px;
  background: #5b7589;
  border-radius: 50%;
}

.conversion-window-dots i:first-child { background: #d6b656; }
.conversion-source-type { margin-left: auto; color: #9dafbd; }

.conversion-code {
  padding: 2% 0 2.5%;
  counter-reset: source-line;
}

.conversion-code code {
  display: block;
  padding: .3% 3%;
  white-space: nowrap;
  font: 400 clamp(.54rem, 2.3cqi, .82rem)/1.65 'JetBrains Mono', monospace;
  border-left: 2px solid transparent;
  counter-increment: source-line;
}

.conversion-code code::before {
  content: counter(source-line, decimal-leading-zero);
  display: inline-block;
  width: 2.4em;
  color: #8298a9;
  font-size: .85em;
}

.tex-command { color: #ebcd72; }

.conversion-connection {
  position: absolute;
  grid-area: 2 / 1;
  left: 0;
  top: 0;
  width: 34%;
  height: 47%;
  overflow: visible;
}

.connection-track { stroke: rgb(222 180 6 / 18%); stroke-width: 2; }
.connection-trace { stroke: #deb406; stroke-width: 2; stroke-linecap: round; }
.connection-node { fill: #deb406; filter: drop-shadow(0 0 6px #deb406); }

.conversion-notes {
  position: relative;
  grid-area: 2 / 1;
  z-index: 2;
  width: 78%;
  margin: 0 0 0 auto;
  border: 1px solid #e5dfd0;
  border-radius: 9px;
  background: #fdfbf6;
  color: #10263b;
  box-shadow: 0 28px 60px rgb(0 0 0 / 28%), 0 5px 0 -2px #ece8dd, 0 10px 0 -4px #cec9bf;
  transform: rotate(2deg);
}

.conversion-notes-bar {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: 2.5% 5%;
  border-bottom: 1px solid #e5dfd0;
  color: #52616b;
  font-size: clamp(.61rem, 2cqi, .72rem);
}

.conversion-ready {
  margin-left: auto;
  color: #005f36;
  display: flex;
  align-items: center;
  gap: .3rem;
}

.conversion-ready > span {
  display: inline-grid;
  place-items: center;
  width: 1.2em;
  height: 1.2em;
  border-radius: 50%;
  background: #d9eade;
}

.conversion-notes-body { padding: 3% 7% 1%; }

.conversion-chapter {
  display: block;
  color: #82703b;
  font-size: clamp(.56rem, 1.8cqi, .65rem);
  text-transform: uppercase;
  letter-spacing: .08em;
}

.conversion-heading {
  margin-top: .3rem;
  font: 600 clamp(1.1rem, 4.5cqi, 1.65rem)/1.2 'Lora', Georgia, serif;
}

.conversion-prose {
  margin: .65em 0;
  color: #405162;
  font: 400 clamp(.65rem, 2.35cqi, .85rem)/1.6 'Lora', Georgia, serif;
}

.conversion-highlight {
  background: linear-gradient(#f3df87, #f3df87) 0 85% / 100% 60% no-repeat;
}

.conversion-equation {
  position: relative;
  padding: .3em 1.5em;
  border-top: 1px solid #ece7dc;
  border-bottom: 1px solid #ece7dc;
  font: italic 500 clamp(1.1rem, 4.4cqi, 1.6rem)/1.25 'Lora', Georgia, serif;
  text-align: center;
}

.conversion-equation span {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  color: #76818a;
  font: 400 .5em 'Inter', sans-serif;
}

.conversion-figure { display: block; width: 100%; height: clamp(60px, 14cqi, 80px); margin-top: 3%; }
.figure-grid { stroke: #e8e6de; stroke-width: .7; }
.figure-axis { stroke: #9ba6ad; stroke-width: 1; }
.figure-wave { stroke: #006958; stroke-width: 2.8; stroke-linecap: round; }
.figure-fill { fill: #dfece6; opacity: .75; }
.conversion-figure text { fill: #52616b; font: italic 12px Georgia, serif; }

.conversion-tools {
  display: flex;
  gap: 5%;
  border-top: 1px solid #e5dfd0;
  padding: 2.5% 7%;
  color: #405162;
  font-size: clamp(.6rem, 2cqi, .72rem);
}

.conversion-tools > span { display: flex; gap: .35em; align-items: center; }
.conversion-tools svg { width: 1.2em; height: 1.2em; }

.conversion-annotation {
  position: absolute;
  z-index: 3;
  left: 0;
  bottom: 12%;
  padding: 2.6% 3.5%;
  background: #f5e6a6;
  color: #584515;
  border: 1px solid #ead98c;
  border-radius: 4px 12px 12px 12px;
  box-shadow: 0 10px 24px rgb(0 0 0 / 16%);
  font-size: clamp(.62rem, 2.1cqi, .76rem);
  line-height: 1.6;
  transform: rotate(-3deg);
}

.conversion-annotation > span { margin-right: .3em; }
.conversion-annotation strong { font-weight: 600; }

.conversion-caption {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
  min-height: 44px;
  margin-top: 1rem;
  color: #cfdae2;
  font-size: .75rem;
}

.conversion-replay {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  gap: .4rem;
  min-height: 44px;
  padding: .3rem .5rem;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

.conversion-replay:hover { background: rgb(255 255 255 / 8%); color: #fff; }

/* One 4.6-second sequence, then still. Only an explicit replay restarts it. */
@media (prefers-reduced-motion: no-preference) {
  .is-playing .conversion-source { animation: source-arrive .7s .1s both; }
  .is-playing .conversion-code code { animation: source-select 1.05s .65s both; }
  .is-playing .conversion-code code:nth-child(2) { animation-delay: .95s; }
  .is-playing .conversion-code code:nth-child(3) { animation-delay: 1.25s; }
  .is-playing .conversion-code code:nth-child(4) { animation-delay: 1.55s; }
  .is-playing .connection-trace { animation: trace-draw 1.1s 1.1s both; }
  .is-playing .conversion-notes { animation: notes-arrive .85s 1.45s both; }
  .is-playing .conversion-heading,
  .is-playing .conversion-chapter { animation: content-arrive .55s 1.85s both; }
  .is-playing .conversion-prose { animation: content-arrive .55s 2.05s both; }
  .is-playing .conversion-equation { animation: content-arrive .55s 2.25s both; }
  .is-playing .figure-wave { animation: trace-draw 1.15s 2.5s both; }
  .is-playing .figure-fill { animation: figure-fill .7s 3s both; }
  .is-playing .conversion-highlight { animation: highlight-reveal .65s 3.35s both; }
  .is-playing .conversion-annotation { animation: annotation-arrive .7s 3.55s both; }
  .is-playing .conversion-tools,
  .is-playing .conversion-ready { animation: content-arrive .6s 4s both; }
}

@keyframes source-arrive {
  from { opacity: 0; transform: translate3d(-12px, 14px, 0) rotate(-7deg); }
  to { opacity: 1; transform: rotate(-4deg); }
}

@keyframes source-select {
  0%, 100% { background: transparent; border-left-color: transparent; }
  25%, 65% { background: rgb(222 180 6 / 11%); border-left-color: #deb406; }
}

@keyframes trace-draw {
  from { stroke-dasharray: 1; stroke-dashoffset: 1; }
  to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}

@keyframes notes-arrive {
  from { opacity: 0; transform: translate3d(12px, 24px, 0) rotate(5deg) scale(.96); }
  to { opacity: 1; transform: rotate(2deg) scale(1); }
}

@keyframes content-arrive {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: none; }
}

@keyframes figure-fill {
  from { opacity: 0; }
  to { opacity: .75; }
}

@keyframes highlight-reveal {
  from { background-size: 0 60%; }
  to { background-size: 100% 60%; }
}

@keyframes annotation-arrive {
  from { opacity: 0; transform: translate3d(-8px, 8px, 0) rotate(-6deg) scale(.96); }
  to { opacity: 1; transform: rotate(-3deg) scale(1); }
}

@media (max-width: 820px) {
  .hero-band .hero-visual { max-width: 480px; }
  .conversion-caption { margin-top: 1rem; font-size: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
  .conversion-replay { display: none; }
}