/* The suppression section: three steps down one side and a single stage
   beside them, rather than a row of tiles, so the section reads as the
   sequence it is. steps.js plays them. */

.steps {
  /* The line a step's time runs along: the stage's washed blue, a shade deeper. */
  --steps-track: #D8E3FB;
  /* The stage, white under the ribbon's colours: violet and sky glowing from
     opposite corners, and a breath of the warm the drawings give to ACCESS. */
  --steps-stage:
    radial-gradient(55% 65% at 12% 12%, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0) 70%),
    radial-gradient(55% 65% at 92% 92%, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0) 70%),
    radial-gradient(40% 45% at 90% 8%, rgba(251, 140, 90, 0.1), rgba(251, 140, 90, 0) 70%),
    var(--paper-ground);
  display: grid;
  gap: var(--space-8);
}
@media (min-width: 1080px) {
  .steps {
    grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
    gap: 3.5rem;
    align-items: center;
  }
}

.steps-list {
  display: grid;
  gap: var(--space-2);
  margin: 0;
  padding: 0;
  list-style: none;
}

/* The whole step is the button's target, so the reader can jump to it from its words too. */
.steps-step {
  position: relative;
  padding: var(--space-4) 0;
  cursor: pointer;
  transition: opacity 300ms ease;
}
.steps-step:not(.is-current) { opacity: 0.45; }
.steps-step:not(.is-current):hover { opacity: 0.7; }

.steps-heading { margin: 0; }
.steps-choose {
  all: unset;
  cursor: pointer;
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.steps-choose::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--radius-md);
}
.steps-choose:focus-visible::after {
  outline: 2px solid var(--color-accent);
  outline-offset: 4px;
}

.steps-body {
  margin: var(--space-2) 0 0;
  font-size: var(--text-base);
  line-height: 1.5;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* ---- stacked, below 1080 ----
   Each step a block of its own, numbered, its words in full and its drawing
   under them (steps.js gives each its own stage), with no single stage and
   nothing dimmed. */

.steps.is-stacked > .steps-stage { display: none; }
.steps.is-stacked .steps-list {
  gap: 3.25rem;
  counter-reset: steps-step;
}
.steps.is-stacked .steps-step,
.steps.is-stacked .steps-step:not(.is-current) {
  padding: 0;
  opacity: 1;
  cursor: auto;
  counter-increment: steps-step;
}
/* The step's number over its title, in the accent, as a sequence. */
.steps.is-stacked .steps-step::before {
  content: counter(steps-step, decimal-leading-zero);
  display: block;
  margin-bottom: var(--space-2);
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  letter-spacing: 0.04em;
  color: var(--color-accent);
  font-variant-numeric: tabular-nums;
}
.steps-title {
  font-family: var(--font-heading);
  font-weight: var(--font-bold);
  font-size: 1.25rem;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--color-text);
}
.steps.is-stacked .steps-step .steps-stage { margin-top: var(--space-5); }
.steps.is-stacked .steps-body { max-width: 40rem; }

/* How long the step has left on the stage while the steps play by themselves,
   and held full under the step on the stage once they no longer do. */
.steps-track {
  margin-top: var(--space-4);
  height: 3px;
  border-radius: 2px;
  overflow: hidden;
  background: var(--steps-track);
}
.steps-progress {
  height: 100%;
  background: var(--color-accent);
  transform-origin: left center;
}
.steps-progress.is-running { animation: steps-run 5600ms linear forwards; }
.steps[data-held] .steps-progress { animation-play-state: paused; }

.steps-stage {
  /* Shorter as the column narrows, so a drawing that has shrunk to fit its width does not float
     in the middle of an empty stage. */
  height: clamp(260px, 66vw, 380px);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background: var(--steps-stage);
  border: 1px solid var(--paper-line);
  border-radius: 24px;
}

/* The widest the drawings are shown, so they keep their fine lines. */
.steps-art {
  width: 100%;
  max-width: 580px;
  padding: 0 var(--space-4);
}
@media (prefers-reduced-motion: no-preference) {
  .steps-art { animation: steps-arrive 420ms ease; }
}
/* A drawing that covers the whole stage, run off its edges. */
.steps-bleed {
  align-self: stretch;
  max-width: none;
  padding: 0;
}

@keyframes steps-arrive {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: none; }
}
@keyframes steps-run {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

/* ---- adding a Campaign: the strands ---- */

.steps-strands {
  display: block;
  width: 100%;
  height: auto;
}
/* Marks the drawing as pointed at; the strands answer in their motion. */
.steps-strands.is-pointed { cursor: default; }

/* ---- suppression: the tiles ---- */

.steps-suppression {
  position: relative;
  width: 100%;
  height: 100%;
}
.steps-suppression canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
}

/* ---- the Opt-Out Link ----
   Each moving part takes its timing from the inline delay it is drawn with.
   Pointed at, the email turns to a new angle and the link comes forward;
   where the reader prefers less motion it stays as it is. */

/* The email's drawing is held to the stage's height, so a wide stage cannot push it off the top and foot. */
.steps-art:has(> .steps-optout) {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.steps-optout {
  display: block;
  width: 100%;
  height: auto;
  /* The email fills most of the stage, leaving room round it for its turn when pointed at. */
  max-height: calc(100% - 2rem);
  overflow: visible;
  transform-origin: center;
  font-family: var(--font-body);
}
.steps-lifted {
  filter: drop-shadow(0 1px 1px rgba(15, 23, 42, 0.05)) drop-shadow(0 6px 14px rgba(37, 99, 235, 0.08));
}
.steps-pop { transform-box: fill-box; transform-origin: center; }
.steps-grow { transform-box: fill-box; transform-origin: left center; }
.steps-movable { transform-box: fill-box; transform-origin: left center; }
.steps-hold { opacity: 0; }
.steps-highlight { opacity: 0; }

@media (prefers-reduced-motion: no-preference) {
  .steps-pop { animation: steps-pop 420ms cubic-bezier(0.165, 0.84, 0.44, 1) both; }
  .steps-grow { animation: steps-grow 520ms cubic-bezier(0.165, 0.84, 0.44, 1) both; }
  .steps-hold { animation: steps-hold 1000ms linear both; }
  .steps-optout { transition: transform 520ms cubic-bezier(0.165, 0.84, 0.44, 1); }
  .steps-optout.is-pointed { transform: perspective(1000px) rotateY(14deg) rotateX(4deg); }
  .steps-movable,
  .steps-highlight {
    transition: transform 520ms cubic-bezier(0.165, 0.84, 0.44, 1), opacity 520ms ease;
  }
  .steps-optout.is-pointed .steps-movable { transform: scale(1.06); }
  .steps-optout.is-pointed .steps-highlight { opacity: 0.1; }
}

@keyframes steps-pop {
  from { opacity: 0; transform: scale(0.4); }
  70% { opacity: 1; transform: scale(1.12); }
}
@keyframes steps-grow {
  from { transform: scaleX(0); }
}
/* Held until the drawing's new part takes its place, then gone. */
@keyframes steps-hold {
  from, 80% { opacity: 1; }
  to { opacity: 0; }
}