/* Design & Branding demo: a concept mark constructed on a grid (assets/js/demos/logo.js).
   Without JavaScript or motion the stage shows the finished mark. With it, the stage gets .is-live and
   one class per step reached (.s1 to .s6); each part moves into place with transform, opacity or
   clip-path when its step arrives. */

.logodemo {
  display: grid;
  gap: var(--space-l);
}

@media (min-width: 768px) {
  .logodemo {
    grid-template-columns: minmax(0, 1fr) minmax(0, 15rem);
    align-items: start;
  }
}

/* Stage */

.logodemo__stage {
  --bg: var(--paper);
  --mark: var(--ink);
  --guide: var(--line);
  display: grid;
  justify-items: center;
  padding: var(--space-m) var(--space-m) var(--space-l);
  background: var(--bg);
  border: var(--border);
  border-radius: calc(var(--radius) * 2);
  box-shadow: var(--shadow);
  color: var(--mark);
}

.logodemo__stage[data-bg="ink"] {
  --bg: var(--night);
  --mark: var(--night-ink);
  --guide: var(--night-line);
  border-color: var(--night);
}

.mark {
  width: 100%;
  max-width: 22rem;
  height: auto;
}

.mark .guide {
  fill: var(--guide);
}

.mark .guide-circle {
  fill: none;
  stroke: var(--guide);
}

.mark :is(.half, .seal) {
  fill: var(--mark);
}

.mark .blade {
  fill: var(--bg);
}

.logodemo__word {
  margin-top: calc(var(--space-s) * -1);
  font-family: var(--font-serif);
  font-size: var(--step-4);
  font-weight: 300;
  line-height: 1;
  letter-spacing: 0.02em;
}

.logodemo__word span {
  display: inline-block;
}

/* The finished mark: guides gone, halves parted, blade hidden. */

.mark__guides {
  opacity: 0;
}

.half--a {
  transform: translateY(-7px);
}

.half--b {
  transform: translateY(7px);
}

.blade {
  opacity: 0;
}

/* Construction, one step at a time. */

.is-live .mark__guides {
  opacity: 1;
  transition: opacity var(--dur-slow) var(--ease-out);
}

.is-live.s6 .mark__guides {
  opacity: 0;
}

.mark .guide {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition: transform var(--dur-rise) var(--ease-out) calc(var(--i) * 70ms);
}

.mark .guide--down {
  transform-origin: 50% 0;
}

.is-live:not(.s1) .guide {
  transform: scaleX(0);
}

.is-live:not(.s1) .guide--down {
  transform: scaleY(0);
}

.mark .guide-circle {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  transition:
    opacity var(--dur-slow) var(--ease-out) 300ms,
    transform var(--dur-slow) var(--ease-out) 300ms;
}

.is-live:not(.s1) .guide-circle {
  opacity: 0;
  transform: scale(0.85);
}

.mark__form {
  transform-origin: 200px 200px;
  transition:
    opacity var(--dur-rise) var(--ease-out),
    transform var(--dur-rise) var(--ease-out);
}

.is-live:not(.s2) .mark__form {
  opacity: 0;
  transform: scale(0.2);
}

/* The cut: a blade the colour of the background crosses the circle, then the halves part. */
.blade {
  transform-box: fill-box;
  transform-origin: 0 50%;
  transition:
    transform var(--dur-wipe) var(--ease-out),
    opacity var(--dur-fast) var(--ease-out);
}

.is-live:not(.s3) .blade {
  transform: scaleX(0);
}

.is-live.s3:not(.s4) .blade {
  opacity: 1;
}

.half {
  transition: transform var(--dur) var(--ease-out) var(--dur-fast);
}

.is-live:not(.s3) .half {
  transform: none;
}

/* The seal is pressed in. */
.mark .seal {
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

.is-live:not(.s4) .seal {
  opacity: 0;
}

.is-live.s4 .seal {
  animation: seal-press var(--dur-fast) var(--ease-out) both;
}

.logodemo__word span {
  transition:
    opacity var(--dur-rise) var(--ease-out) calc(var(--i, 0) * 60ms),
    transform var(--dur-rise) var(--ease-out) calc(var(--i, 0) * 60ms);
}

.is-live:not(.s5) .logodemo__word span {
  opacity: 0;
  transform: translateY(0.4em);
}

/* Replay starts from blank without animating backwards. */
.is-reset,
.is-reset * {
  transition: none !important;
  animation: none !important;
}

/* Steps and controls */

.logodemo__side {
  display: grid;
  align-content: start;
  gap: var(--space-m);
}

.logodemo__steps {
  display: grid;
  font-family: var(--font-sans);
  font-size: var(--step--1);
}

.logodemo__steps button {
  display: grid;
  gap: 0.125rem;
  width: 100%;
  padding: var(--space-2xs) var(--space-xs);
  border-left: 2px solid var(--line);
  color: var(--ink-2);
  text-align: left;
}

.logodemo__steps button:hover:not(:disabled) {
  color: var(--ink);
}

.logodemo__steps strong {
  color: var(--ink);
  font-weight: 500;
}

.logodemo__steps [aria-current] {
  border-left-color: var(--ink);
  background: var(--paper-2);
  color: var(--ink);
}

.logodemo__steps button:disabled {
  cursor: default;
}

.logodemo__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
}