/* Pack the Moving Van: a technical drawing. Hairlines on sumi black, square corners,
   callouts with leader lines, one vermilion seal at the end. */

:root {
  --hair: color-mix(in srgb, var(--ak-bg) 34%, transparent);
  --hair-strong: color-mix(in srgb, var(--ak-bg) 70%, transparent);
  --rule: color-mix(in srgb, var(--ak-ink) 55%, transparent);
  --pad: 10px;
  --cell: 48px;
  --tray-cell: 32px;
  --ar: 0.9;
  --edge: max(10px, env(safe-area-inset-left));
}

* { box-sizing: border-box; }

html,
body {
  height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  background-color: var(--ak-bg);
  background-image: var(--ak-bg-art);
  background-size: var(--ak-bg-size);
  color: var(--ak-ink);
  font-family: var(--ak-font-body);
  -webkit-tap-highlight-color: transparent;
}

button { font: inherit; color: inherit; }

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

/* ---------- frame ---------- */

.play {
  position: fixed;
  inset: 0;
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-areas: "head" "stage" "panel";
  grid-template-rows: auto auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  row-gap: 6px;
  padding:
    max(8px, env(safe-area-inset-top))
    max(var(--pad), env(safe-area-inset-right))
    max(8px, env(safe-area-inset-bottom))
    max(var(--pad), env(safe-area-inset-left));
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}

.mute {
  position: fixed;
  top: max(12px, env(safe-area-inset-top));
  left: max(12px, env(safe-area-inset-left));
  z-index: 30;
  width: 48px;
  height: 48px;
  padding: 11px;
  border: 1.5px solid var(--ak-ink);
  border-radius: 0;
  background: var(--ak-surface);
  cursor: pointer;
  touch-action: manipulation;
}
.mute svg { width: 100%; height: 100%; display: block; }
.mute path {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 1.8;
  stroke-linejoin: miter;
}
.mute .mute-cross { display: none; }
.mute[aria-pressed="true"] .mute-waves { display: none; }
.mute[aria-pressed="true"] .mute-cross { display: inline; }
.mute:focus-visible,
.btn:focus-visible,
.slot:focus-visible,
.piece:focus-visible {
  outline: 3px solid var(--ak-focus);
  outline-offset: 3px;
}

.head {
  grid-area: head;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  min-height: 52px;
  padding: 0 64px;
}
.logo {
  display: block;
  height: 46px;
  width: auto;
}
.sheet {
  margin: 0;
  padding: 4px 8px;
  border: 1px solid var(--ak-ink);
  background: var(--ak-surface);
  font-family: var(--ak-font-display);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ak-ink);
  white-space: nowrap;
}
.sheet {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  line-height: 1.15;
}
.sheet b { font-size: 16px; }
/* The first-try streak, kept in view all through the load. */
.sheet-streak {
  font-family: var(--ak-font-body);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: none;
  color: var(--ak-ink-muted);
}

/* ---------- the drawing ---------- */

.stage {
  grid-area: stage;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
  /* Room for a piece left hanging past the doors. */
  padding-bottom: calc(var(--cell) * 0.3);
}

.board {
  position: relative;
  aspect-ratio: var(--ar);
  /* Squares grow with the screen but stop at a size that leaves the strip room. */
  width: calc(
    min(100%, calc((100dvh - 300px) * var(--ar)), calc(var(--vbw) * clamp(46px, 6.5dvh, 96px)))
      - var(--squeeze, 0px) * var(--ar)
  );
}

.plan {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.plan text {
  font-family: var(--ak-font-body);
  fill: var(--ak-ink-muted);
}
.plan .callout { font-size: 24px; letter-spacing: 1.5px; }
.plan .dim-text { font-size: 24px; font-family: var(--ak-font-display); fill: var(--ak-ink); }
.plan .dim { stroke: var(--ak-ink); stroke-width: 2.5; fill: none; }
.plan .callout-line { stroke: var(--ak-ink); stroke-width: 2.5; fill: none; }
.plan .callout-reach { stroke: var(--ak-bg); stroke-width: 3; stroke-dasharray: 8 6; fill: none; }
.plan .callout-dot { fill: var(--ak-bg); stroke: var(--ak-ink); stroke-width: 2; }
.plan .dim-small { font-size: 18px; font-family: var(--ak-font-body); fill: var(--ak-ink-muted); }
.plan .floor-bg { fill: var(--ak-ink); }
.plan .grid { stroke: var(--hair); stroke-width: 2; fill: none; }
.plan .grid-frame { stroke: var(--hair-strong); stroke-width: 3.5; fill: none; }
.plan .arch { fill: url(#hatch); stroke: var(--hair-strong); stroke-width: 3; }
.plan .hatch-line { stroke: var(--hair-strong); stroke-width: 3; }
.plan .door {
  stroke: var(--ak-bg);
  stroke-width: 6;
  stroke-dasharray: 16 12;
  fill: none;
}
.plan .door-shut {
  stroke: var(--ak-bg);
  stroke-width: 8;
  fill: none;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}
.plan .apron rect {
  fill: none;
  stroke: var(--rule);
  stroke-width: 2.5;
  stroke-dasharray: 8 8;
}
.plan .apron { opacity: 0; }
.board.is-dragging .plan .apron,
.board.has-overhang .plan .apron { opacity: 1; }

.plan .preview rect { fill: color-mix(in srgb, var(--ak-bg) 16%, transparent); stroke: var(--ak-bg); stroke-width: 4; stroke-dasharray: 12 8; }
.plan .preview.is-bad rect { fill: color-mix(in srgb, var(--ak-accent) 30%, transparent); stroke: var(--ak-accent); }
.plan .hint-edge { fill: none; stroke: var(--ak-bg); stroke-width: 9; stroke-dasharray: 16 10; stroke-linecap: square; }
/* Where a refused piece was tried: its outline in the seal's red. */
.plan .try-edge { fill: none; stroke: var(--ak-accent); stroke-width: 9; stroke-dasharray: 16 10; stroke-linecap: square; }
/* The hinted piece, faint, standing in its spot under the outline. */
.hint-ghost { opacity: 0.55; pointer-events: none; z-index: 0; cursor: pointer; }
.hint-ghost .shape .edge { stroke-dasharray: 14 10; }
.plan .badcell { fill: color-mix(in srgb, var(--ak-accent) 45%, transparent); stroke: var(--ak-accent); stroke-width: 6; }

.floor {
  position: absolute;
  left: 0;
  top: 0;
}

/* ---------- pieces ---------- */

.piece {
  position: absolute;
  left: calc(var(--x) * var(--cell));
  top: calc(var(--y) * var(--cell));
  width: calc(var(--w) * var(--cell));
  height: calc(var(--h) * var(--cell));
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: none;
  touch-action: none;
  cursor: grab;
}
.piece .shape { pointer-events: none; }
.piece .hit { pointer-events: all; }

.shape {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}
.shape .paper { fill: var(--ak-surface); }
.shape .edge {
  fill: none;
  stroke: var(--ak-ink);
  stroke-width: 20;
  stroke-linecap: square;
}
.shape .wash {
  fill: var(--ak-ink);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(0);
}
.shape .hit { fill: transparent; }
/* Straps on a box tied down at the last stop: an ink band with a pale stitch line. */
.shape .strap { stroke: var(--ak-ink); stroke-width: 16; fill: none; }
.shape .strap-stitch { stroke: var(--ak-bg); stroke-width: 3; stroke-dasharray: 10 8; fill: none; }
.piece.is-strapped { cursor: not-allowed; }
.shape .flag {
  fill: none;
  stroke: var(--ak-bg);
  stroke-width: 6;
  stroke-dasharray: 12 9;
  stroke-linecap: butt;
  opacity: 0;
}

.piece.is-down .shape .wash { opacity: 0.24; transform: scale(1); }
.piece.is-lifted { opacity: 0.25; }
.piece.is-held { opacity: 0.8; z-index: 3; }
.is-flagged .shape .edge { stroke: var(--ak-accent); }
.is-flagged .shape .flag { opacity: 1; }

.ghost {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 50;
  pointer-events: none;
  width: calc(var(--w) * var(--cell));
  height: calc(var(--h) * var(--cell));
}
.ghost .shape { filter: drop-shadow(3px 4px 0 color-mix(in srgb, var(--ak-ink) 40%, transparent)); }

/* ---------- the paper strip ---------- */

.panel {
  grid-area: panel;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
}

.note { display: flex; flex-direction: column; gap: 6px; }
.msg {
  margin: 0;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.35;
  color: var(--ak-ink);
}
/* A short upright phone: messages stay readable but take a line less. */
@media (orientation: portrait) and (max-height: 780px) {
  .msg { font-size: 16px; line-height: 1.3; }
  .msg:not(:empty) { padding: 6px 10px; }
}
.msg:empty { display: none; }
.msg:not(:empty) {
  padding: 8px 12px;
  background: var(--ak-surface);
  border: 1px solid var(--ak-ink);
  border-left: 5px solid var(--ak-ink);
}
.msg.is-wrong:not(:empty) { border-left-color: var(--ak-accent); }
.msg.is-teach { font-weight: 700; font-size: 19px; }
/* The load is done: the header says so in the seal's red. */
.sheet-row { display: flex; align-items: center; gap: 6px; }
.sheet-state:not(:empty) {
  padding: 0 4px;
  font-size: 11px;
  letter-spacing: 0.12em;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
}
/* Once the doors close the packing controls step aside; the result block is the next step. */
.play.is-packed .tray,
.play.is-packed .actions { visibility: hidden; }
/* The result block carries the streak now; the header keeps just the red Packed. */
.play.is-packed .sheet-streak { display: none; }

.tray {
  position: relative;
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 10px 4px;
  overflow: hidden;
  border-top: 1px solid var(--ak-ink);
  border-bottom: 1px solid var(--ak-ink);
  /* Registration ticks at the strip's four corners. */
  background:
    linear-gradient(var(--ak-ink), var(--ak-ink)) left 0 top 4px / 1px 14px no-repeat,
    linear-gradient(var(--ak-ink), var(--ak-ink)) right 0 top 4px / 1px 14px no-repeat,
    linear-gradient(var(--ak-ink), var(--ak-ink)) left 0 bottom 4px / 1px 14px no-repeat,
    linear-gradient(var(--ak-ink), var(--ak-ink)) right 0 bottom 4px / 1px 14px no-repeat,
    var(--ak-surface);
}

.slot {
  position: relative;
  display: grid;
  place-items: center;
  width: calc(var(--w) * var(--tray-cell) + 4px);
  height: calc(var(--h) * var(--tray-cell) + 4px);
  min-width: 48px;
  min-height: 48px;
  padding: 0;
  border: 0;
  background: none;
  cursor: grab;
  touch-action: none;
}
.slot-shape {
  width: calc(var(--w) * var(--tray-cell));
  height: calc(var(--h) * var(--tray-cell));
  pointer-events: none;
}
/* A kind that is all in the van steps out of the strip, leaving room for what still waits. */
.slot.is-out { display: none; }
.slot.is-lifted .slot-shape { opacity: 0.25; }
/* How many of a box still wait, as a small drawing tag. */
/* A placed piece carried over the strip: the strip answers that letting go here takes it out. */
.tray.is-target { outline: 3px dashed var(--ak-ink); outline-offset: -6px; }
.slot-count {
  position: absolute;
  right: -6px;
  top: -8px;
  padding: 1px 5px;
  background: var(--ak-surface);
  border: 1px solid var(--ak-ink);
  color: var(--ak-ink);
  font-family: var(--ak-font-display);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.2;
  pointer-events: none;
}
.slot-count:empty { display: none; }

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.btn {
  min-height: 52px;
  padding: 0 14px;
  border-radius: 0;
  font-family: var(--ak-font-display);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  touch-action: manipulation;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.btn[hidden] { display: none; }
.btn svg { width: 20px; height: 20px; flex: none; }
.btn svg path { fill: none; stroke: currentColor; stroke-width: 2; }
.btn svg .dash { stroke-dasharray: 3 2.4; }
.btn-quiet {
  background: var(--ak-choice-bg);
  color: var(--ak-choice-ink);
  border: 1.5px solid var(--ak-choice-border);
}
.btn-quiet:active { background: var(--ak-choice-selected-bg); color: var(--ak-choice-selected-ink); }
.btn-primary {
  flex: 1 1 160px;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  border: 1.5px solid var(--ak-outline);
  box-shadow: var(--ak-shadow);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.btn-primary:active { background: var(--ak-btn-active); transform: translate(2px, 2px); box-shadow: none; }
.btn:disabled { opacity: 0.45; cursor: default; }
.actions .btn-quiet {
  flex-direction: column;
  gap: 2px;
  min-width: 60px;
  padding: 0 6px;
  font-size: 13px;
}
@media (hover: hover) {
  .btn-primary:hover:not(:disabled) { background: var(--ak-btn-hover); }
}

/* ---------- callouts and leader lines ---------- */

.leaders {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 20;
  pointer-events: none;
  overflow: visible;
}
.leaders .halo { stroke: var(--ak-bg); stroke-width: 5; fill: none; stroke-linecap: square; }
.leaders .line { stroke: var(--ak-ink); stroke-width: 1.6; fill: none; }
.leaders .dot { fill: var(--ak-ink); stroke: var(--ak-bg); stroke-width: 2; }
.leaders .tip { fill: var(--ak-ink); stroke: var(--ak-bg); stroke-width: 1.5; stroke-linejoin: miter; }
.leaders .ring { fill: none; stroke: var(--ak-ink); stroke-width: 2.5; }
.leaders .ring-halo { fill: none; stroke: var(--ak-bg); stroke-width: 6; }
.leaders .is-wrong .line,
.leaders .is-wrong .ring { stroke: var(--ak-accent); }
.leaders .is-wrong .tip,
.leaders .is-wrong .dot { fill: var(--ak-accent); }

/* ---------- the title block ---------- */

.titleblock {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 25;
  width: min(calc(100dvw - 20px), 440px);
  background: var(--ak-surface);
  border: 2px solid var(--ak-ink);
  color: var(--ak-ink);
}
.titleblock[hidden] { display: none; }
.tb-row { display: flex; border-bottom: 1px solid var(--ak-ink); }
.tb-cell {
  flex: 1;
  padding: 6px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tb-cell + .tb-cell { border-left: 1px solid var(--ak-ink); }
.tb-k {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ak-ink-muted);
}
.tb-v {
  font-family: var(--ak-font-display);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
}
.tb-title { font-size: 19px; white-space: normal; }
.tb-top { align-items: stretch; }
.seal {
  flex: none;
  width: 116px;
  margin: 8px 10px 8px 0;
  padding: 6px 4px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  background: var(--ak-btn-fill);
  color: var(--ak-btn-ink);
  border: 3px double var(--ak-btn-ink);
  outline: 2px solid var(--ak-btn-fill);
  transform: rotate(-4deg);
}
.seal-word {
  font-family: var(--ak-font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.seal-sub {
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.tb-says {
  margin: 0;
  padding: 10px 12px;
  font-size: 18px;
  line-height: 1.4;
  border-bottom: 1px solid var(--ak-ink);
}
.tb-streak-says {
  margin: 0;
  padding: 8px 12px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--ak-ink-muted);
  border-bottom: 1px solid var(--ak-ink);
}
.tb-actions { display: flex; gap: 8px; padding: 10px; }
.tb-actions .btn { flex: 1 1 0; padding: 0 8px; }

/* ---------- sideways ---------- */

@media (orientation: landscape) {
  .play {
    grid-template-areas: "stage head" "stage panel";
    grid-template-columns: auto minmax(280px, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    column-gap: 14px;
  }
  /* One row of buttons, however narrow the strip: the long label may break onto two lines. */
  .actions { flex-wrap: nowrap; }
  .actions .btn-primary { flex: 1 1 0; min-width: 0; white-space: normal; line-height: 1.15; padding: 0 8px; }
  /* Clear of the mute button in the top-left corner. */
  .stage { padding-bottom: 0; padding-left: 44px; }
  /* The van lies on its side; it takes what the height allows and leaves the strip 280px. */
  .board {
    width: min(
      calc((100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ar)),
      calc(min(100dvw, 1180px) - 362px - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc(var(--vbw) * clamp(46px, 11dvh, 120px))
    );
  }
  .head { justify-content: flex-start; padding: 0 64px 0 0; min-height: 50px; }
  .logo { height: 44px; }
  .titleblock { width: min(46dvw, 440px); }
}

/* On a phone the block stays low and short, so the shut van above it stays in view. */
@media (max-width: 520px), (max-height: 430px) {
  .tb-cell { padding: 3px 10px; }
  .tb-title { font-size: 17px; }
  .tb-v { font-size: 15px; }
  .tb-says { padding: 6px 12px; }
  .tb-streak-says { padding: 4px 12px; font-size: 15px; line-height: 1.3; }
  .tb-actions { padding: 6px 8px; }
  .tb-actions .btn { min-height: 48px; }
  .seal { width: 104px; margin: 4px 8px 4px 0; padding: 2px 4px; }
  .seal-word { font-size: 16px; }
  .seal-sub { font-size: 10px; }
}

/* A small phone on its side: the strip slims down so the van keeps 44px squares. */
@media (orientation: landscape) and (max-width: 800px) {
  .play { grid-template-columns: auto minmax(224px, 1fr); }
  .board {
    width: min(
      calc((100dvh - 18px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * var(--ar)),
      calc(100dvw - 300px - env(safe-area-inset-left) - env(safe-area-inset-right)),
      calc(var(--vbw) * clamp(46px, 11dvh, 120px))
    );
  }
  .actions .btn-quiet { min-width: 52px; padding: 0 4px; font-size: 12px; }
  .actions .btn-primary { font-size: 13px; letter-spacing: 0.04em; }
  .msg { font-size: 15px; line-height: 1.25; }
  .msg:not(:empty) { padding: 5px 8px; }
}

@media (orientation: landscape) and (max-height: 430px) {
  /* The logo sits just above, so the block drops its title line and stays clear of the ? button. */
  .titleblock .tb-title { display: none; }
  .titleblock .tb-top { min-height: 0; }
  .tb-says { font-size: 16px; line-height: 1.3; }
  .tb-actions .btn { font-size: 14px; letter-spacing: 0.02em; }
  .btn { min-height: 48px; }
  .tb-says { padding: 6px 10px; }
  .tb-streak-says { padding: 4px 10px; font-size: 15px; line-height: 1.3; }
  .tb-cell { padding: 4px 8px; }
  .tb-actions { padding: 6px 8px; }
  .tb-title { font-size: 17px; }
  .msg:not(:empty) { padding: 6px 10px; }
  .msg.is-teach { font-size: 18px; }
  .msg { line-height: 1.25; }
  .seal { width: 108px; margin: 5px 8px 5px 0; padding: 3px 4px; }
  .seal-word { font-size: 16px; }
  .seal-sub { font-size: 10px; }
}

/* ---------- motion ---------- */

@media (prefers-reduced-motion: no-preference) {
  .piece.is-snapping { transition: transform 140ms cubic-bezier(0.2, 0.9, 0.3, 1); }
  .piece.just-set .shape { animation: settle 260ms cubic-bezier(0.3, 1.4, 0.5, 1); }
  .piece.just-set .shape .wash { transition: transform 420ms ease-out 60ms, opacity 420ms ease-out 60ms; }
  .piece.is-packed .shape { animation: pack 360ms cubic-bezier(0.3, 1.3, 0.5, 1) both; animation-delay: var(--delay, 0ms); }
  .plan .door-shut.is-shut { transition: stroke-dashoffset 640ms cubic-bezier(0.6, 0, 0.3, 1); }
  .plan .grid { transition: stroke 600ms ease; }
  .titleblock.is-in { animation: slide-in 420ms cubic-bezier(0.2, 0.9, 0.3, 1) both; }
  .titleblock.is-in .seal { animation: stamp 360ms cubic-bezier(0.5, 0, 0.6, 1.4) both; animation-delay: var(--seal-delay, 400ms); }
  .plan .hint-edge { animation: march 900ms linear infinite; }
  .leaders .ring.is-pulse { animation: pulse 1200ms ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
  .piece.is-turned .shape { animation: turn-in 200ms ease-out; }
}

.plan .door-shut.is-shut { stroke-dashoffset: 0; }
.board.is-packed .plan .grid { stroke: var(--hair-strong); }
.board.is-packed .plan .door { opacity: 0; }
.piece.is-packed .shape .wash { opacity: 0.3; transform: scale(1); }

@keyframes settle {
  0% { transform: scale(1.06); }
  100% { transform: scale(1); }
}
@keyframes pack {
  0% { transform: translateY(-4px) scale(1.03); }
  100% { transform: none; }
}
@keyframes slide-in {
  0% { transform: translateX(110%); }
  100% { transform: none; }
}
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-4deg) scale(1.8); }
  70% { opacity: 1; transform: rotate(-4deg) scale(0.94); }
  100% { opacity: 1; transform: rotate(-4deg) scale(1); }
}
@keyframes march {
  to { stroke-dashoffset: -26; }
}
@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.06); opacity: 0.55; }
}
@keyframes turn-in {
  0% { transform: rotate(-24deg) scale(0.96); }
  100% { transform: none; }
}