/* Hallmark · genre: playful · page: a service (page-service-detail.php) · theme: custom (site tokens) · tone: playful-bold · anchor hue: 265
 * Loaded after offer.css.
 * idea: the scroll story — the steps scroll past on one side while a browser window on the
 * other plays a scene for the step in the middle of the screen (service.js). The page in the
 * window is drawn from boxes, so it reads at any size.
 *
 * Inside the window everything is measured in em, and the window's font-size is 2% of its
 * width (a container query unit), so a scene scales as one picture: 50em wide, 31.25em high.
 * Each scene's animations run while it is .is-active, and pause off screen (.is-paused, from
 * site.js [data-ambient]). With reduced motion base.css shortens them to their end state, so
 * every animation keeps `both` fill and ends on a finished picture.
 */

/* The section and its two columns ---------------------------------------------------- */

.stage {
  padding: var(--space-4xl) var(--gutter);
  background-color: var(--color-paper-2);
}

.stage__inner {
  display: grid;
  gap: var(--space-2xl);
  max-width: var(--page-max);
  margin-inline: auto;
}

.stage__grid {
  display: grid;
  gap: var(--space-xl);
}

/* Phones: the window stays at the top while the steps scroll under it. */
.stage__view {
  position: sticky;
  inset-block-start: calc(var(--header-h) + var(--ruler-offset, 0px) + var(--space-md));
  z-index: 2;
  align-self: start;
  padding-block-end: var(--space-md);
  background-image: linear-gradient(to bottom, var(--color-paper-2) 85%, transparent);
}

/* Tablets: keep the window short enough to leave room for the step under it. */
@media (max-width: 63.99rem) {
  .stage__view .browser {
    max-width: 34rem;
    margin-inline: auto;
  }
}

@media (min-width: 64rem) {
  .stage__grid {
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    gap: var(--space-3xl);
  }

  /* Roughly centred on the screen, never under the header. */
  .stage__view {
    grid-column: 2;
    grid-row: 1;
    inset-block-start: max(calc(var(--header-h) + var(--ruler-offset, 0px) + var(--space-xl)), calc(50dvh - 15rem));
    padding: 0;
    background: none;
  }

  .stage__steps {
    grid-column: 1;
    grid-row: 1;
  }
}

/* Steps ------------------------------------------------------------------------------- */

.stage__steps {
  display: grid;
}

.step {
  display: grid;
  align-content: center;
  gap: var(--space-sm);
  min-height: 55dvh;
  padding-block: var(--space-xl);
  opacity: 0.35;
  transition: opacity var(--dur-long) var(--ease-out);
}

@media (min-width: 64rem) {
  .step {
    min-height: 78dvh;
  }

  .step:first-child {
    min-height: 60dvh;
    align-content: start;
  }
}

/* Without JS every step reads at full strength. */
html:not(.js) .step,
.step.is-active {
  opacity: 1;
}

.step__meta {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.step__no {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 2px solid var(--color-blue);
  border-radius: 50%;
  color: var(--color-blue);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  transition:
    background-color var(--dur-long) var(--ease-out),
    color var(--dur-long) var(--ease-out),
    scale var(--dur-long) var(--ease-out);
}

.step.is-active .step__no {
  background-color: var(--color-blue);
  color: var(--color-paper);
  scale: 1.08;
}

.step__stage {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

.step__name {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 400;
  line-height: var(--leading-tight);
  text-transform: uppercase;
}

.step__text {
  max-width: 42ch;
  font-size: var(--text-md);
  line-height: 1.5;
}

.step__gets {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  margin-block-start: var(--space-xs);
}

.step__gets li {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  font-size: var(--text-sm);
  font-weight: 650;
}

.step__gets li::before {
  content: "";
  width: 0.4rem;
  height: 0.4rem;
  border-radius: 50%;
  background-color: var(--color-blue);
}

/* The browser window ------------------------------------------------------------------ */

.browser {
  container-type: inline-size;
  overflow: clip;
  border: var(--rule-hair) solid var(--color-rule);
  border-radius: var(--radius-lg);
  background-color: var(--color-paper);
  box-shadow: 0 2.5rem 4rem -2.5rem var(--color-shadow);
}

.browser__bar {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-xs) var(--space-sm);
  border-block-end: var(--rule-hair) solid var(--color-rule);
  background-color: var(--color-paper-2);
}

/* The traffic lights are the three dots. */
.browser__lights {
  display: flex;
  gap: 0.3rem;
}

.browser__lights i {
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.browser__lights i:nth-child(2) {
  background-color: var(--color-blue-soft);
}

.browser__lights i:nth-child(3) {
  background-color: var(--color-lime);
}

.browser__url {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  min-width: 0;
  min-height: 1.75rem;
  padding: 0 var(--space-sm);
  border-radius: var(--radius-pill);
  background-color: var(--color-paper);
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 600;
}

.browser__url > span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.browser__url.is-changing > span {
  animation: url-type var(--dur-long) var(--ease-out);
}

@keyframes url-type {
  from {
    clip-path: inset(0 100% 0 0);
  }
}

.browser__lock {
  display: none;
  width: 0.8rem;
  height: 0.8rem;
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
}

.browser.is-secure .browser__lock {
  display: block;
}

.browser__count {
  color: var(--color-muted);
  font-size: var(--text-xs);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.browser__count b {
  color: var(--color-ink);
}

.browser__view {
  position: relative;
  overflow: clip;
  aspect-ratio: 16 / 10;
  font-size: 2cqi; /* 1em = 2% of the window's width: the scene is 50em × 31.25em */
  line-height: 1.3;
}

.browser__progress {
  display: grid;
  grid-auto-columns: 1fr;
  grid-auto-flow: column;
  gap: 2px;
  height: 4px;
  background-color: var(--color-paper-2);
}

.browser__progress i {
  background-color: var(--color-blue);
  transform-origin: left;
  scale: 0 1;
  transition: scale var(--dur-reveal) var(--ease-out);
}

.browser__progress i.is-on {
  scale: 1 1;
}

/* Scenes: stacked, one shown at a time. */
.scene {
  position: absolute;
  inset: 0;
  opacity: 0;
  scale: 0.98;
  visibility: hidden;
  transition:
    opacity var(--dur-long) var(--ease-out),
    scale var(--dur-long) var(--ease-out),
    visibility 0s var(--dur-long);
}

.scene.is-active {
  opacity: 1;
  scale: 1;
  visibility: visible;
  transition:
    opacity var(--dur-long) var(--ease-out),
    scale var(--dur-long) var(--ease-out),
    visibility 0s;
}

.stage.is-paused .scene,
.stage.is-paused .scene *,
.stage.is-held .scene,
.stage.is-held .scene *,
.stage.is-held .scene *::before,
.stage.is-held .scene *::after {
  animation-play-state: paused !important;
}

/* Shared motions */
@keyframes pop {
  from {
    opacity: 0;
    scale: 0.6;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 1.5em;
  }
}

@keyframes fade {
  from {
    opacity: 0;
  }
}

@keyframes ring {
  0% {
    box-shadow: 0 0 0 0 color-mix(in oklch, var(--ring, var(--color-blue)) 55%, transparent);
  }

  100% {
    box-shadow: 0 0 0 0.9em color-mix(in oklch, var(--ring, var(--color-blue)) 0%, transparent);
  }
}

/* The page mock-up (wireframe, design, prototype, responsive, launch, audit, improve) ---- */

.mock {
  position: absolute;
  inset: 2em 3em auto;
  display: grid;
  gap: 2.5em;
  container: mock / inline-size;
}

.mock__nav {
  display: flex;
  align-items: center;
  gap: 2em;
  height: 2em;
}

.mock__logo {
  display: flex;
  gap: 0.25em;
}

.mock__logo i {
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background-color: var(--color-rule);
}

.mock__links {
  display: flex;
  gap: 1.2em;
  margin-inline-start: auto;
}

.mock__links i {
  width: 3em;
  height: 0.6em;
  border-radius: 0.3em;
  background-color: var(--color-rule);
}

.mock__btn {
  width: 5em;
  height: 1.8em;
  border-radius: 1em;
  background-color: var(--color-rule);
}

.mock__hero {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 2.5em;
  align-items: start;
}

.mock__copy {
  display: grid;
  justify-items: start;
  gap: 0.8em;
}

.mock__title {
  display: none;
  font-family: var(--font-display);
  font-size: 3.2em;
  line-height: 0.95;
  text-transform: uppercase;
}

.mock__bar {
  width: 90%;
  height: 0.8em;
  border-radius: 0.4em;
  background-color: var(--color-rule);
}

.mock__bar--h {
  width: 100%;
  height: 1.6em;
}

.mock__bar--short {
  width: 60%;
}

.mock__cta {
  display: grid;
  place-items: center;
  width: 6em;
  height: 2.2em;
  border-radius: 1.1em;
  background-color: var(--color-rule);
  color: transparent;
  font-size: 1em;
  font-weight: 700;
}

.mock__img {
  aspect-ratio: 3 / 2;
  border-radius: 1em;
  background-color: var(--color-paper-2);
}

.mock__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5em;
}

.mock__card {
  height: 6em;
  border-radius: 1em;
  background-color: var(--color-paper-2);
}

/* Wire: grey boxes, a crossed-out picture. */
.mock--wire .mock__img,
.mock--wire .mock__card {
  border: 0.12em dashed var(--color-rule);
  background:
    linear-gradient(to top right, transparent calc(50% - 0.06em), var(--color-rule) 50%, transparent calc(50% + 0.06em)),
    linear-gradient(to bottom right, transparent calc(50% - 0.06em), var(--color-rule) 50%, transparent calc(50% + 0.06em)),
    var(--color-paper);
}

/* Design: the finished page. */
.mock--design .mock__logo i {
  background-color: var(--color-blue);
}

.mock--design .mock__links i {
  background-color: var(--color-muted);
  opacity: 0.45;
}

.mock--design .mock__btn {
  background-color: var(--color-ink);
}

.mock--design .mock__title {
  display: block;
}

.mock--design .mock__bar--h {
  display: none;
}

.mock--design .mock__bar {
  background-color: var(--color-paper-2);
}

.mock--design .mock__cta {
  background-color: var(--color-blue);
  color: var(--color-paper);
}

.mock--design .mock__img {
  background: url("../img/works/1920x1280_pr03.webp") center / cover var(--color-blue);
}

.mock--design .mock__card:nth-child(1) {
  background: radial-gradient(circle, var(--color-ink) 0.9em, transparent 0.95em) 1.2em 1.2em / 2em 2em no-repeat, var(--color-lime);
}

.mock--design .mock__card:nth-child(2) {
  background: radial-gradient(circle, var(--color-paper) 0.9em, transparent 0.95em) 1.2em 1.2em / 2em 2em no-repeat, var(--color-blue);
}

.mock--design .mock__card:nth-child(3) {
  background: radial-gradient(circle, var(--color-lime) 0.9em, transparent 0.95em) 1.2em 1.2em / 2em 2em no-repeat, var(--color-ink);
}

/* The mock-up narrows into tablet and phone layouts (responsive scene). */
@container mock (max-width: 34em) {
  .mock__links {
    display: none;
  }

  .mock__btn {
    margin-inline-start: auto;
    width: 2em;
    border-radius: 50%;
  }

  .mock__cards {
    grid-template-columns: repeat(2, 1fr);
  }

  .mock__card:nth-child(3) {
    display: none;
  }
}

@container mock (max-width: 20em) {
  .mock__hero {
    grid-template-columns: 1fr;
    gap: 1.5em;
  }

  .mock__title {
    font-size: 2.6em;
  }

  .mock__cards {
    grid-template-columns: 1fr;
  }
}

/* Scene: sitemap ------------------------------------------------------------------------ */

.sitemap {
  position: absolute;
  inset: 3em 3em 2.5em;
  display: grid;
  grid-template-rows: auto 1fr auto;
  justify-items: center;
  row-gap: 2.6em;
}

.sitemap__node {
  display: grid;
  place-items: center;
  min-width: 7em;
  padding: 0.55em 1em;
  border: 0.15em solid var(--color-ink);
  border-radius: 0.6em;
  background-color: var(--color-paper);
  font-weight: 750;
  white-space: nowrap;
}

.sitemap__node--root {
  position: relative;
  border-color: var(--color-blue);
  background-color: var(--color-blue);
  color: var(--color-paper);
  font-size: 1.2em;
}

/* the line down from Home */
.sitemap__node--root::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  left: 50%;
  width: 0.13em;
  height: 1.15em;
  background-color: var(--color-ink);
  translate: -50% 0;
}

.sitemap__row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5em;
  width: 100%;
  align-self: start;
}

/* the line across */
.sitemap__row::before {
  content: "";
  position: absolute;
  inset-block-start: -1.3em;
  inset-inline: 12.5%;
  height: 0.15em;
  background-color: var(--color-ink);
}

.sitemap__col {
  position: relative;
  display: grid;
  align-content: start;
  justify-items: center;
  gap: 0.7em;
}

/* the line down to each page */
.sitemap__col::before {
  content: "";
  position: absolute;
  inset-block-start: -1.3em;
  left: 50%;
  width: 0.15em;
  height: 1.3em;
  background-color: var(--color-ink);
  translate: -50% 0;
}

.sitemap__leaf {
  width: 75%;
  height: 1.7em;
  border: 0.1em solid var(--color-rule);
  border-radius: 0.45em;
  background-color: var(--color-paper-2);
}

.sitemap__goal {
  display: flex;
  gap: 0.6em;
  padding: 0.6em 1.2em;
  border-radius: 2em;
  background-color: var(--color-lime);
  font-weight: 600;
}

.scene.is-active .sitemap__node--root { animation: pop 0.5s var(--ease-out) both; }
.scene.is-active .sitemap__row::before { animation: draw-x 0.5s 0.4s var(--ease-out) both; }
.scene.is-active .sitemap__col::before { animation: draw-y 0.3s 0.8s var(--ease-out) both; }
.scene.is-active .sitemap__col .sitemap__node { animation: pop 0.45s var(--ease-out) both; }
.scene.is-active .sitemap__col:nth-child(1) .sitemap__node { animation-delay: 1s; }
.scene.is-active .sitemap__col:nth-child(2) .sitemap__node { animation-delay: 1.12s; }
.scene.is-active .sitemap__col:nth-child(3) .sitemap__node { animation-delay: 1.24s; }
.scene.is-active .sitemap__col:nth-child(4) .sitemap__node { animation-delay: 1.36s; }
.scene.is-active .sitemap__leaf { animation: rise 0.45s 1.6s var(--ease-out) both; }
.scene.is-active .sitemap__leaf + .sitemap__leaf { animation-delay: 1.75s; }
.scene.is-active .sitemap__leaf + .sitemap__leaf + .sitemap__leaf { animation-delay: 1.9s; }
.scene.is-active .sitemap__goal { animation: rise 0.5s 2.2s var(--ease-out) both; }

@keyframes draw-x {
  from {
    scale: 0 1;
  }
}

@keyframes draw-y {
  from {
    scale: 1 0;
    transform-origin: top;
  }
}

/* Scene: wireframe ------------------------------------------------------------------------ */

.scene__columns {
  position: absolute;
  inset: 0 3em;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1em;
  pointer-events: none;
}

.scene__columns i {
  background-color: color-mix(in oklch, var(--color-blue) 8%, transparent);
}

.scene__measure {
  position: absolute;
  padding: 0.2em 0.5em;
  border-radius: 0.3em;
  background-color: var(--color-blue);
  color: var(--color-paper);
  font-size: 0.85em;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.scene__measure--a {
  inset-block-start: 0.4em;
  left: 50%;
  translate: -50% 0;
}

.scene__measure--b {
  inset-block-start: 17.6em;
  inset-inline-start: 0.4em;
}

.scene.is-active .mock--wire > * { animation: rise 0.5s var(--ease-out) both; }
.scene.is-active .mock--wire > :nth-child(2) { animation-delay: 0.2s; }
.scene.is-active .mock--wire > :nth-child(3) { animation-delay: 0.4s; }
.scene.is-active .scene__columns { animation: fade 0.6s 0.9s var(--ease-out) both; }
.scene.is-active .scene__measure { animation: pop 0.4s 1.4s var(--ease-out) both; }
.scene.is-active .scene__measure--b { animation-delay: 1.6s; }

/* Scene: design ---------------------------------------------------------------------------- */

.guide {
  position: absolute;
  inset-block-end: 1.5em;
  inset-inline-end: 1.5em;
  display: grid;
  gap: 0.4em;
  padding: 1em 1.2em;
  border-radius: 1em;
  background-color: var(--color-paper);
  box-shadow: 0 1em 2em -1em var(--color-shadow), 0 0 0 0.08em var(--color-rule);
  rotate: 3deg;
}

.guide__type {
  font-family: var(--font-display);
  font-size: 2.6em;
  line-height: 1;
}

.guide__swatches {
  display: flex;
  gap: 0.3em;
}

.guide__swatches i {
  width: 1.4em;
  height: 1.4em;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.guide__swatches i:nth-child(2) { background-color: var(--color-lime); }
.guide__swatches i:nth-child(3) { background-color: var(--color-ink); }
.guide__swatches i:nth-child(4) { background-color: var(--color-paper-2); box-shadow: inset 0 0 0 0.08em var(--color-rule); }

.guide__name {
  color: var(--color-muted);
  font-size: 0.8em;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.scene--design.is-active .mock__img { animation: paint 0.9s 0.2s var(--ease-in-out) both; }
.scene--design.is-active .mock__title { animation: rise 0.6s 0.5s var(--ease-out) both; }
.scene--design.is-active .mock__cta { animation: pop 0.4s 0.9s var(--ease-out) both; }
.scene--design.is-active .mock__card { animation: rise 0.5s 1s var(--ease-out) both; }
.scene--design.is-active .mock__card:nth-child(2) { animation-delay: 1.1s; }
.scene--design.is-active .mock__card:nth-child(3) { animation-delay: 1.2s; }
.scene--design.is-active .guide { animation: slide-in 0.6s 1.5s var(--ease-out) both; }

@keyframes paint {
  from {
    clip-path: inset(0 100% 0 0 round 1em);
  }

  to {
    clip-path: inset(0 0 0 0 round 1em);
  }
}

@keyframes slide-in {
  from {
    opacity: 0;
    translate: 4em 0;
    rotate: 12deg;
  }
}

/* Scene: prototype -------------------------------------------------------------------------- */

.cursor {
  position: absolute;
  left: 78%;
  top: 86%;
  z-index: 2;
  width: 2.2em;
  filter: drop-shadow(0 0.2em 0.3em var(--color-shadow));
}

.cursor svg {
  width: 100%;
  fill: var(--color-ink);
  stroke: var(--color-paper);
  stroke-width: 1.5;
  stroke-linejoin: round;
}

.pin {
  position: absolute;
  left: 21%;
  top: 48%;
  padding: 0.5em 0.9em;
  border-radius: 1em 1em 1em 0.2em;
  background-color: var(--color-lime);
  font-weight: 750;
  opacity: 0;
}

.scene--prototype.is-active .cursor { animation: cursor-path 5s 0.3s var(--ease-in-out) infinite both; }
.scene--prototype.is-active .mock__cta { animation: press 5s 0.3s infinite both; }
.scene--prototype.is-active .pin { animation: pin-show 5s 0.3s var(--ease-out) infinite both; }

@keyframes cursor-path {
  0% { left: 78%; top: 86%; }
  35%, 45% { left: 11%; top: 56%; scale: 1; }
  40% { scale: 0.85; }
  70%, 100% { left: 66%; top: 34%; }
}

@keyframes press {
  0%, 38% { scale: 1; box-shadow: 0 0 0 0 color-mix(in oklch, var(--color-blue) 50%, transparent); }
  40% { scale: 0.9; }
  44% { scale: 1; }
  60%, 100% { box-shadow: 0 0 0 1em color-mix(in oklch, var(--color-blue) 0%, transparent); }
}

@keyframes pin-show {
  0%, 44% { opacity: 0; scale: 0.6; }
  50%, 100% { opacity: 1; scale: 1; }
}

/* Scene: code --------------------------------------------------------------------------------- */

.editor {
  position: absolute;
  inset: 0 42% 0 0;
  display: grid;
  grid-template-rows: auto 1fr;
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.editor__tabs {
  display: flex;
  border-block-end: 0.08em solid var(--color-rule-dark);
  font-size: 0.85em;
}

.editor__tabs span {
  padding: 0.7em 1.2em;
  color: var(--color-muted-dark);
}

.editor__tabs span:first-child {
  border-block-end: 0.15em solid var(--color-lime);
  color: var(--color-paper);
}

.editor__code {
  margin: 0;
  padding: 1em 1.2em;
  overflow: hidden;
  font-family: ui-monospace, "Cascadia Code", Menlo, Consolas, monospace;
  font-size: 0.95em;
  line-height: 1.9;
}

.editor__line {
  display: block;
  min-height: 1.9em;
  white-space: pre;
}

.editor__no {
  display: inline-block;
  width: 2em;
  color: var(--color-ink-3);
  user-select: none;
}

.editor__code b { color: var(--color-blue-soft); font-weight: 400; }
.editor__code i { color: var(--color-lime); font-style: normal; }
.editor__code u { color: var(--color-blue-tint); text-decoration: none; }
.editor__code em { color: var(--color-lime); font-style: normal; opacity: 0.7; }
.editor__code s { color: var(--color-muted-dark); text-decoration: none; }

.preview {
  position: absolute;
  inset: 0 0 0 58%;
  overflow: hidden;
  background-color: var(--color-paper);
  font-size: 0.52em; /* the same page, half size */
}

.preview .mock {
  inset: 3em 2.5em auto;
}

.preview .mock__hero {
  grid-template-columns: 1fr;
}

.scene--code.is-active .editor__line { animation: type 0.5s steps(18) both; animation-delay: calc(var(--n) * 0.32s + 0.2s); }
.scene--code.is-active .preview .mock__title { animation: rise 0.5s 0.9s var(--ease-out) both; }
.scene--code.is-active .preview .mock__bar { animation: fade 0.4s 1.2s both; }
.scene--code.is-active .preview .mock__cta { animation: pop 0.4s 1.5s var(--ease-out) both; }
.scene--code.is-active .preview .mock__img { animation: paint 0.7s 1.8s var(--ease-in-out) both; }
.scene--code.is-active .preview .mock__cards { animation: rise 0.5s 2.3s var(--ease-out) both; }

@keyframes type {
  from {
    clip-path: inset(0 100% 0 0);
  }

  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Scene: responsive ------------------------------------------------------------------------ */

.flex-frame {
  position: absolute;
  inset-block-start: 1.6em;
  left: 50%;
  width: 46em;
  height: 25.5em;
  overflow: hidden;
  border: 0.18em solid var(--color-ink);
  border-radius: 1.2em;
  background-color: var(--color-paper);
  translate: -50% 0;
}

.flex-frame .mock {
  position: relative;
  inset: auto;
  padding: 1.5em 2em;
}

.flex-label {
  position: absolute;
  inset-block-end: 1em;
  inset-inline: 0;
  display: flex;
  justify-content: center;
  gap: 0.5em;
  font-size: 0.9em;
  font-weight: 750;
}

.flex-label span {
  padding: 0.3em 0.9em;
  border-radius: 1em;
  color: var(--color-muted);
}

.flex-label span:first-child {
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.scene--responsive.is-active .flex-frame { animation: narrow 7s 0.4s var(--ease-in-out) infinite both; }
.scene--responsive.is-active .flex-label span { animation: label-on 7s 0.4s infinite both; }
.scene--responsive.is-active .flex-label span:nth-child(2) { animation-name: label-on-2; }
.scene--responsive.is-active .flex-label span:nth-child(3) { animation-name: label-on-3; }

@keyframes narrow {
  0%, 22% { width: 46em; }
  32%, 52% { width: 30em; }
  62%, 88% { width: 15em; }
  100% { width: 46em; }
}

@keyframes label-on {
  0%, 26%, 96%, 100% { background-color: var(--color-ink); color: var(--color-paper); }
  28%, 94% { background-color: transparent; color: var(--color-muted); }
}

@keyframes label-on-2 {
  0%, 26%, 58%, 100% { background-color: transparent; color: var(--color-muted); }
  28%, 56% { background-color: var(--color-ink); color: var(--color-paper); }
}

@keyframes label-on-3 {
  0%, 58%, 94%, 100% { background-color: transparent; color: var(--color-muted); }
  60%, 92% { background-color: var(--color-ink); color: var(--color-paper); }
}

/* Scene: score --------------------------------------------------------------------------------- */

.gauges {
  position: absolute;
  inset: 4em 3em auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
}

.gauge {
  position: relative;
  display: grid;
  justify-items: center;
  gap: 0.8em;
}

.gauge__ring {
  width: 100%;
  max-width: 9em;
  rotate: -90deg;
}

.gauge__ring circle {
  fill: none;
  stroke: var(--color-paper-2);
  stroke-width: 4;
}

.gauge__ring .gauge__fill {
  stroke: var(--color-blue);
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
}

.gauge__tick {
  position: absolute;
  inset-block-start: 0;
  width: min(100%, 9em);
  aspect-ratio: 1;
  padding: 2.4em;
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.gauge__label {
  font-size: 1.15em;
  font-weight: 750;
}

.gauges__note {
  position: absolute;
  inset-block-end: 3em;
  inset-inline: 0;
  color: var(--color-muted);
  font-weight: 600;
  text-align: center;
}

.gauges__note::before {
  content: "";
  display: inline-block;
  width: 0.6em;
  height: 0.6em;
  margin-inline-end: 0.5em;
  border-radius: 50%;
  background-color: var(--color-lime);
  box-shadow: 0 0 0 0.15em var(--color-ink);
}

.scene--score.is-active .gauge__fill { animation: gauge 1.2s var(--ease-out) both; animation-delay: calc(var(--i) * 0.25s + 0.2s); }
.scene--score.is-active .gauge__tick { animation: pop 0.4s var(--ease-out) both; animation-delay: calc(var(--i) * 0.25s + 1.3s); }
.scene--score.is-active .gauges__note { animation: rise 0.5s 2.4s var(--ease-out) both; }

@keyframes gauge {
  from {
    stroke-dashoffset: 100;
  }
}

/* Scene: launch ---------------------------------------------------------------------------- */

.burst {
  position: absolute;
  left: 50%;
  top: 50%;
}

.burst i {
  position: absolute;
  width: 1em;
  height: 1em;
  border-radius: 50%;
  background-color: var(--color-blue);
  rotate: calc(var(--k) * 30deg);
  translate: -50% -50%;
  opacity: 0;
}

.burst i:nth-child(3n + 2) { background-color: var(--color-lime); }
.burst i:nth-child(3n) { background-color: var(--color-ink); }

.live {
  position: absolute;
  left: 50%;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 0.7em;
  padding: 0.9em 1.6em;
  border-radius: 2em;
  background-color: var(--color-ink);
  color: var(--color-paper);
  font-size: 1.4em;
  font-weight: 750;
  white-space: nowrap;
  translate: -50% -50%;
  box-shadow: 0 1em 2em -1em var(--color-shadow);
}

.live__dot {
  --ring: var(--color-lime);
  width: 0.7em;
  height: 0.7em;
  border-radius: 50%;
  background-color: var(--color-lime);
}

.scene--launch.is-active .mock { animation: fade 0.6s both; }
.scene--launch.is-active .live { animation: pop 0.5s 0.5s var(--ease-out) both; }
.scene--launch.is-active .live__dot { animation: ring 1.4s 1s infinite; }
.scene--launch.is-active .burst i { animation: burst 1.1s 0.55s var(--ease-out) both; }

@keyframes burst {
  0% { opacity: 1; transform: translate(0, 0) scale(0.4); }
  70% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-13em) scale(1); }
}

/* Scene: audit ------------------------------------------------------------------------------- */

.scene--audit .mock {
  filter: grayscale(1) contrast(0.85);
  opacity: 0.75;
}

.issue {
  --ring: var(--color-blue);
  position: absolute;
  display: grid;
  place-items: center;
  width: 2em;
  height: 2em;
  border-radius: 50%;
  background-color: var(--color-blue);
  color: var(--color-paper);
  font-weight: 800;
}

.issue--1 { left: 26%; top: 25%; }
.issue--2 { left: 72%; top: 34%; }
.issue--3 { left: 18%; top: 57%; }

.audit {
  position: absolute;
  inset-block-end: 1.5em;
  inset-inline-end: 1.5em;
  display: grid;
  gap: 0.2em;
  min-width: 17em;
  padding: 0.8em 1em;
  border-radius: 1em;
  background-color: var(--color-paper);
  box-shadow: 0 1em 2em -1em var(--color-shadow), 0 0 0 0.08em var(--color-rule);
  counter-reset: issue;
}

.audit li {
  display: flex;
  align-items: center;
  gap: 0.6em;
  padding-block: 0.25em;
  font-weight: 650;
  counter-increment: issue;
}

.audit li::before {
  content: counter(issue);
  display: grid;
  place-items: center;
  width: 1.5em;
  height: 1.5em;
  border: 0.13em solid var(--color-blue);
  border-radius: 50%;
  color: var(--color-blue);
  font-size: 0.85em;
  font-weight: 800;
}

/* The pins pulse, the list ticks them off one by one (each pin goes as its line is done),
 * and the page gets its colour back. */
.scene--audit.is-active .mock { animation: colour-back 0.8s 3.2s var(--ease-out) both; }
.scene--audit.is-active .audit { animation: slide-in 0.5s 0.6s var(--ease-out) both; }
.scene--audit.is-active .audit li { animation: tick-done 0.4s both; animation-delay: calc(var(--i) * 0.5s + 1.6s); }
.scene--audit.is-active .audit li::before { animation: tick-dot 0.4s both; animation-delay: calc(var(--i) * 0.5s + 1.6s); }
.scene--audit.is-active .issue--1 { animation: pop 0.4s var(--ease-out) both, ring 1.4s 0.5s 2, gone 0.3s 1.6s both; }
.scene--audit.is-active .issue--2 { animation: pop 0.4s 0.2s var(--ease-out) both, ring 1.4s 0.7s 2, gone 0.3s 2.1s both; }
.scene--audit.is-active .issue--3 { animation: pop 0.4s 0.4s var(--ease-out) both, ring 1.4s 0.9s 1, gone 0.3s 2.6s both; }

@keyframes colour-back {
  to {
    filter: none;
    opacity: 1;
  }
}

@keyframes tick-done {
  to {
    color: var(--color-muted);
    text-decoration: line-through;
    text-decoration-color: var(--color-blue);
  }
}

@keyframes tick-dot {
  to {
    background-color: var(--color-blue);
    color: var(--color-paper);
  }
}

@keyframes gone {
  to {
    opacity: 0;
    scale: 0.4;
  }
}

/* Scene: search ------------------------------------------------------------------------------ */

.serp {
  position: absolute;
  inset: 2.2em 5em auto;
  display: grid;
  gap: 1.8em;
}

.serp__box {
  display: flex;
  align-items: center;
  gap: 0.7em;
  height: 2.8em;
  padding: 0 1.3em;
  border: 0.1em solid var(--color-rule);
  border-radius: 1.4em;
  box-shadow: 0 0.4em 1em -0.6em var(--color-shadow);
  font-weight: 600;
}

.serp__box::before {
  content: "";
  width: 0.9em;
  height: 0.9em;
  border: 0.17em solid var(--color-muted);
  border-radius: 50%;
}

.serp__q {
  overflow: hidden;
  white-space: nowrap;
  border-inline-end: 0.1em solid var(--color-blue);
}

.serp__list {
  position: relative;
  height: 21.6em;
}

.serp__item {
  --pos: 0;
  position: absolute;
  inset-inline: 0;
  inset-block-start: 0;
  display: grid;
  gap: 0.35em;
  height: 4.6em;
  padding: 0.5em 0.9em;
  border-radius: 0.8em;
  translate: 0 calc(var(--pos) * 5.4em);
}

.serp__item--b { --pos: 1; }
.serp__item--c { --pos: 2; }
/* srgb: mixing lime and white in oklch swings the hue round to cyan */
.serp__item--you { --pos: 3; background-color: color-mix(in srgb, var(--color-lime) 45%, var(--color-paper)); }

.serp__url {
  color: var(--color-muted);
  font-size: 0.85em;
}

.serp__title {
  width: 60%;
  height: 1.1em;
  border-radius: 0.3em;
  background-color: var(--color-blue-deep);
  opacity: 0.55;
}

.serp__title--you {
  width: auto;
  height: auto;
  background: none;
  color: var(--color-blue-deep);
  font-size: 1.1em;
  font-weight: 750;
  opacity: 1;
}

.serp__line {
  width: 85%;
  height: 0.7em;
  border-radius: 0.3em;
  background-color: var(--color-paper-2);
}

/* Ours climbs from fourth to first, passing the others one by one. */
.scene--search.is-active .serp__q { animation: type 0.9s 0.2s steps(20) both; }
.scene--search.is-active .serp__item--a { animation: down-a 3s 1s var(--ease-in-out) both; }
.scene--search.is-active .serp__item--b { animation: down-b 3s 1s var(--ease-in-out) both; }
.scene--search.is-active .serp__item--c { animation: down-c 3s 1s var(--ease-in-out) both; }
.scene--search.is-active .serp__item--you { animation: climb 3s 1s var(--ease-in-out) both; }

@keyframes climb {
  0%, 10% { translate: 0 16.2em; }
  25%, 43% { translate: 0 10.8em; }
  58%, 76% { translate: 0 5.4em; }
  91%, 100% { translate: 0 0; }
}

@keyframes down-c {
  0%, 10% { translate: 0 10.8em; }
  25%, 100% { translate: 0 16.2em; }
}

@keyframes down-b {
  0%, 43% { translate: 0 5.4em; }
  58%, 100% { translate: 0 10.8em; }
}

@keyframes down-a {
  0%, 76% { translate: 0 0; }
  91%, 100% { translate: 0 5.4em; }
}

/* Scene: campaign ------------------------------------------------------------------------- */

.ads {
  position: absolute;
  inset: 0;
}

.ad {
  position: absolute;
  display: grid;
  align-content: start;
  gap: 0.6em;
  padding: 0.9em;
  border-radius: 1em;
  background-color: var(--color-paper);
  box-shadow: 0 1.2em 2.4em -1.2em var(--color-shadow), 0 0 0 0.08em var(--color-rule);
}

.ad__img {
  border-radius: 0.6em;
  background: url("../img/hero/hero-03_11.webp") center / cover var(--color-blue);
}

.ad__bar {
  width: 90%;
  height: 0.7em;
  border-radius: 0.35em;
  background-color: var(--color-paper-2);
}

.ad__bar--short {
  width: 55%;
}

.ad__tag {
  color: var(--color-muted);
  font-size: 0.8em;
  font-weight: 700;
}

.ad__title {
  color: var(--color-blue-deep);
  font-size: 1.15em;
  font-weight: 750;
  line-height: 1.25;
}

.ad--post {
  left: 6%;
  top: 14%;
  width: 14em;
  rotate: -7deg;
}

.ad--post .ad__img {
  height: 10em;
}

.ad__heart {
  position: absolute;
  inset-block-start: 1.6em;
  inset-inline-end: 1.6em;
  width: 1.5em;
  height: 1.5em;
  border-radius: 50%;
  background-color: var(--color-lime);
  box-shadow: 0 0 0 0.12em var(--color-ink);
}

.ad--search {
  left: 31%;
  top: 34%;
  z-index: 1;
  width: 19em;
}

.ad--story {
  right: 6%;
  top: 8%;
  width: 9.5em;
  height: 18em;
  padding: 0;
  overflow: hidden;
  rotate: 6deg;
}

.ad--story .ad__img {
  position: absolute;
  inset: 0;
  border-radius: 0;
  background-image: url("../img/hero/hero-03_6.webp");
}

.ad__cta {
  position: absolute;
  inset-block-end: 1em;
  inset-inline: 1em;
  display: grid;
  place-items: center;
  height: 2.2em;
  border-radius: 1.1em;
  background-color: var(--color-paper);
  font-weight: 750;
}

.scene--campaign.is-active .ad { animation: fly-in 0.7s var(--ease-out) both; }
.scene--campaign.is-active .ad--search { animation-delay: 0.25s; }
.scene--campaign.is-active .ad--story { animation-delay: 0.5s; }
.scene--campaign.is-active .ad__heart { animation: pop 0.4s 1.4s var(--ease-out) both, ring 1.2s 1.8s 2; --ring: var(--color-lime); }

@keyframes fly-in {
  from {
    opacity: 0;
    translate: 0 8em;
    rotate: 0deg;
  }
}

/* Scene: chart ---------------------------------------------------------------------------- */

.chart {
  position: absolute;
  inset: 2.4em 3em;
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: 1em;
}

.chart__legend {
  display: flex;
  gap: 1.5em;
  font-weight: 700;
}

.chart__key {
  display: flex;
  align-items: center;
  gap: 0.5em;
}

.chart__key::before {
  content: "";
  width: 1.4em;
  height: 0.3em;
  border-radius: 0.15em;
  background-color: var(--color-blue);
}

.chart__key--b::before {
  background-color: var(--color-ink);
}

.chart__plot {
  width: 100%;
  height: 100%;
  overflow: visible;
  /* the grid behind the chart is the site's dot grid */
  background-image: radial-gradient(circle, var(--color-rule) 0 0.12em, transparent 0.16em);
  background-size: 2em 2em;
}

.chart__area {
  fill: color-mix(in oklch, var(--color-blue) 14%, transparent);
}

.chart__line {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
}

.chart__line--b {
  stroke: var(--color-ink);
  stroke-width: 2;
}

.chart__months {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: 0.85em;
  font-weight: 600;
}

.chart__tip {
  position: absolute;
  inset-block-start: 2.8em;
  inset-inline-end: -0.5em;
  padding: 0.4em 0.9em;
  border-radius: 1em 1em 0.2em 1em;
  background-color: var(--color-lime);
  font-weight: 750;
}

.scene--chart.is-active .chart__line { animation: line-draw 1.6s 0.3s var(--ease-in-out) both; }
.scene--chart.is-active .chart__line--b { animation-delay: 0.7s; }
.scene--chart.is-active .chart__area { animation: fade 0.8s 1.4s both; }
.scene--chart.is-active .chart__tip { animation: pop 0.45s 1.9s var(--ease-out) both; }

@keyframes line-draw {
  from {
    stroke-dashoffset: 1;
  }

  to {
    stroke-dashoffset: 0;
  }
}

/* Scene: uptime ----------------------------------------------------------------------------- */

.status {
  position: absolute;
  inset: 2.6em 3.5em;
  display: grid;
  align-content: start;
  gap: 1em;
}

.status__head {
  display: flex;
  align-items: center;
  gap: 0.6em;
  font-size: 1.7em;
  font-weight: 800;
}

.status__dot {
  --ring: var(--color-blue);
  width: 0.55em;
  height: 0.55em;
  border-radius: 50%;
  background-color: var(--color-blue);
}

.status__bars {
  display: flex;
  align-items: end;
  gap: 0.3em;
  height: 5.5em;
  margin-block-start: 0.6em;
}

.status__bars i {
  flex: 1;
  height: 100%;
  border-radius: 0.2em;
  background-color: var(--color-blue);
  transform-origin: bottom;
}

.status__bars i.is-dip {
  height: 60%;
  background-color: var(--color-lime);
}

.status__axis {
  display: flex;
  justify-content: space-between;
  color: var(--color-muted);
  font-size: 0.8em;
  font-weight: 600;
}

.status__rows {
  display: grid;
  margin-block-start: 0.8em;
  border-block-start: 0.08em solid var(--color-rule);
}

.status__rows li {
  display: flex;
  justify-content: space-between;
  padding-block: 0.65em;
  border-block-end: 0.08em solid var(--color-rule);
}

.status__rows span {
  color: var(--color-muted);
}

.scene--uptime.is-active .status__dot { animation: ring 1.6s infinite; }
.scene--uptime.is-active .status__bars i { animation: grow-up 0.4s var(--ease-out) both; animation-delay: calc(var(--d) * 0.03s + 0.2s); }
.scene--uptime.is-active .status__rows li { animation: rise 0.45s var(--ease-out) both; animation-delay: calc(var(--i) * 0.2s + 1.3s); }

@keyframes grow-up {
  from {
    scale: 1 0;
  }
}

/* Scene: fix ------------------------------------------------------------------------------------ */

.thread {
  position: absolute;
  inset: 2.5em 40% 2.5em 3em;
  display: flex;
  flex-direction: column;
  gap: 0.8em;
}

.bubble {
  max-width: 80%;
  padding: 0.75em 1.1em;
  border-radius: 1.2em 1.2em 1.2em 0.3em;
  background-color: var(--color-paper-2);
  font-weight: 600;
}

.bubble--us {
  align-self: flex-end;
  border-radius: 1.2em 1.2em 0.3em 1.2em;
  background-color: var(--color-blue);
  color: var(--color-paper);
}

/* "Typing…" is the three dots. */
.bubble--typing {
  display: flex;
  gap: 0.35em;
  overflow: hidden;
}

.bubble--typing i {
  width: 0.6em;
  height: 0.6em;
  border-radius: 50%;
  background-color: var(--color-paper);
}

.ticket {
  position: absolute;
  inset-block-start: 2.5em;
  inset-inline-end: 3em;
  display: grid;
  gap: 1em;
  width: 13em;
  padding: 1.3em 1.4em 1.5em;
  border-radius: 1em;
  background-color: var(--color-paper);
  box-shadow: 0 1em 2em -1em var(--color-shadow), 0 0 0 0.08em var(--color-rule);
}

.ticket__head {
  padding-block-end: 0.7em;
  border-block-end: 0.08em solid var(--color-rule);
  color: var(--color-muted);
  font-size: 0.8em;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.ticket__steps {
  display: grid;
  gap: 0.9em;
}

.ticket li {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.7em;
  color: var(--color-muted);
  font-weight: 700;
}

.ticket li::before {
  content: "";
  width: 1em;
  height: 1em;
  border: 0.15em solid var(--color-rule);
  border-radius: 50%;
  background-color: var(--color-paper);
}

.scene--fix.is-active .bubble--them:first-child { animation: rise 0.4s 0.2s var(--ease-out) both; }
.scene--fix.is-active .bubble--typing { animation: typing-life 1.5s 0.9s both; }
.scene--fix.is-active .bubble--typing i { animation: hop 0.9s infinite; }
.scene--fix.is-active .bubble--typing i:nth-child(2) { animation-delay: 0.15s; }
.scene--fix.is-active .bubble--typing i:nth-child(3) { animation-delay: 0.3s; }
.scene--fix.is-active .bubble--reply { animation: rise 0.4s 2.4s var(--ease-out) both; }
.scene--fix.is-active .bubble--thanks { animation: rise 0.4s 3.3s var(--ease-out) both; }
.scene--fix.is-active .ticket li { animation: ticket-on 0.3s both; }
.scene--fix.is-active .ticket li::before { animation: ticket-dot 0.3s both; }
.scene--fix.is-active .ticket li:nth-child(1),
.scene--fix.is-active .ticket li:nth-child(1)::before { animation-delay: 0.3s; }
.scene--fix.is-active .ticket li:nth-child(2),
.scene--fix.is-active .ticket li:nth-child(2)::before { animation-delay: 1s; }
.scene--fix.is-active .ticket li:nth-child(3),
.scene--fix.is-active .ticket li:nth-child(3)::before { animation-delay: 2.4s; }
.scene--fix.is-active .ticket li:nth-child(3)::before { animation-name: ticket-done; }

@keyframes typing-life {
  0% { opacity: 0; max-height: 0; padding-block: 0; }
  12%, 85% { opacity: 1; max-height: 3em; padding-block: 0.75em; }
  100% { opacity: 0; max-height: 0; padding-block: 0; margin-block: -0.4em; }
}

@keyframes hop {
  0%, 60%, 100% { translate: 0 0; }
  30% { translate: 0 -0.35em; }
}

@keyframes ticket-on {
  to { color: var(--color-ink); }
}

@keyframes ticket-dot {
  to { border-color: var(--color-blue); background-color: var(--color-blue); }
}

@keyframes ticket-done {
  to { border-color: var(--color-ink); background-color: var(--color-lime); }
}

/* Scene: improve -------------------------------------------------------------------------------- */

.mock__new {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.2em;
  padding: 1em 1.4em;
  border-radius: 1em;
  background-color: var(--color-lime);
  overflow: hidden;
}

.mock__new .mock__bar--h {
  display: block;
  flex: 1;
  height: 1.2em;
  background-color: var(--color-ink);
  opacity: 0.85;
}

.mock__new .mock__cta {
  background-color: var(--color-ink);
  color: var(--color-paper);
  width: auto;
  padding: 0 1em;
}

.mock__new-tag {
  padding: 0.25em 0.7em;
  border-radius: 1em;
  background-color: var(--color-blue);
  color: var(--color-paper);
  font-size: 0.85em;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.scene--improve .mock {
  gap: 1.6em;
}

.scene--improve.is-active .mock__new { animation: open-up 0.8s 0.6s var(--ease-out) both; }
.scene--improve.is-active .mock__new-tag { animation: pop 0.4s 1.3s var(--ease-out) both; }
.scene--improve.is-active .mock__new .mock__cta { animation: press 2.6s 1.8s infinite both; }

@keyframes open-up {
  from {
    max-height: 0;
    padding-block: 0;
    opacity: 0;
    margin-block: -0.8em;
  }

  to {
    max-height: 6em;
  }
}

/* Scene: report -------------------------------------------------------------------------------- */

.report {
  position: absolute;
  left: 50%;
  top: 50%;
  display: grid;
  gap: 1em;
  width: 30em;
  padding: 1.6em 1.8em;
  border-radius: 1.2em;
  background-color: var(--color-paper);
  box-shadow: 0 1.5em 3em -1.5em var(--color-shadow), 0 0 0 0.08em var(--color-rule);
  translate: -50% -50%;
}

.report__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-block-end: 0.8em;
  border-block-end: 0.12em solid var(--color-ink);
  font-family: var(--font-display);
  font-size: 1.5em;
  text-transform: uppercase;
}

.report__head b {
  padding: 0.15em 0.6em;
  border-radius: 1em;
  background-color: var(--color-lime);
  font-family: var(--font-body);
  font-size: 0.55em;
  letter-spacing: 0.08em;
}

.report__list {
  display: grid;
  gap: 0.7em;
}

.report__list li {
  display: flex;
  align-items: center;
  gap: 0.8em;
  font-weight: 650;
}

.report__list li::before {
  content: "";
  flex: none;
  width: 1.3em;
  height: 1.3em;
  border-radius: 50%;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4L18 8'/%3E%3C/svg%3E") center / 75% no-repeat,
    var(--color-blue);
}

.report__list li:last-child {
  color: var(--color-blue-deep);
}

.report__list li:last-child::before {
  background: var(--color-lime);
  box-shadow: inset 0 0 0 0.12em var(--color-ink);
}

.scene--report.is-active .report { animation: rise 0.6s var(--ease-out) both; }
.scene--report.is-active .report__list li { animation: rise 0.4s var(--ease-out) both; animation-delay: calc(var(--i) * 0.3s + 0.5s); }
.scene--report.is-active .report__list li::before { animation: pop 0.35s var(--ease-out) both; animation-delay: calc(var(--i) * 0.3s + 0.7s); }