/* ==========================================================================
   Something Wicked cards (049), rebuilt from the prototypes in the vault
   (reference/sw-*.html). Each card is a <figure class="media cs-card swc">
   filled by js/something-wicked.js; the frame, tape, header and pause button
   are shared (css/cards.css). Motion, timing, layout and text follow the
   prototypes; sizes are in cqw of the card. The site's own style: Outfit,
   Archivo 900 at 70% width, Reenie Beanie notes, yellow as the one accent,
   Quinthero and Heartless only where the logo and hero use them.
   ========================================================================== */

.swc {
  --e: cubic-bezier(.65, 0, .35, 1);
  --rule: #3A3833;
  --bg: var(--card);
  --fg: var(--bone);
  --ctl-bg: var(--bone);
  --ctl-fg: var(--ink);
}

.swc-card {
  font-family: 'Outfit', system-ui, sans-serif;
  font-weight: 400;
  line-height: normal;
}
.swc-card .cs-card-hd {
  right: calc(7% + 40px); /* room for the pause button */
  font-size: max(10px, 2.2cqw);
  font-weight: 600;
  letter-spacing: .14em;
  color: var(--muted);
}

/* The source line at the bottom */
.swc-src {
  position: absolute;
  left: 7%;
  right: 7%;
  bottom: 5%;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  column-gap: 3cqw;
  font-size: max(10px, 2.1cqw);
  color: var(--muted);
}
.swc-src span {
  white-space: nowrap;
}
/* Bottom text stacked with the source line, so nothing overlaps (.swc-foot
   is a shared .cs-card-foot, css/cards.css) */
.swc-foot .swc-src {
  position: static;
}

/* A handwritten note in yellow */
.swc-note {
  position: absolute;
  z-index: 6;
  font-family: var(--font-hand);
  line-height: 1;
  color: var(--yellow);
  white-space: nowrap;
}

/* Progress dots (shared .cs-card-dots, css/cards.css) in yellow */
.swc-dots i.is-on {
  background: var(--yellow);
  border-color: var(--yellow);
}

/* Small cards (phones, under 440px): one label per header and source line,
   no handwritten notes */
@container (max-width: 440px) {
  .swc-card .cs-card-hd span:last-child,
  .swc-src span:last-child,
  .swc-note {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   Logo construction: the guides draw in, then the mark inks in part by part
   -------------------------------------------------------------------------- */
.swc-stage {
  position: absolute;
  inset: 0;
  transition: opacity .8s;
}
.swc-stage.is-out {
  opacity: 0;
}
.swc-logo {
  position: absolute;
  top: 14cqw;
  left: 19.53cqw;
  width: 60.94cqw;
  height: 70cqw;
}
.swc-guides {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  transition: opacity 1s;
}
.swc-g {
  fill: none;
  stroke: var(--muted);
  stroke-width: 1;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  vector-effect: non-scaling-stroke;
  opacity: .55;
}
/* The centre line through the planchette's tip */
.swc-g.swc-ax {
  stroke: var(--yellow);
  stroke-dasharray: 2 1.4;
  opacity: .9;
}
.is-on .swc-g {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 1.3s var(--e) var(--d);
}
.swc-ly {
  position: absolute;
  display: block;
  opacity: 0;
}
.swc-ly img {
  display: block;
  width: 100%;
  height: 100%;
}
.swc-tri {
  clip-path: inset(0 0 100% 0);
  opacity: 1;
  transition: clip-path 1s var(--e);
}
.swc-sig {
  transform: scale(.6);
  transition: opacity .7s, transform .9s var(--e);
}
.swc-word {
  clip-path: inset(0 100% 0 0);
  opacity: 1;
  transition: clip-path 1.1s var(--e);
}
.swc-eye {
  transform: scale(.7);
  transition: opacity .7s, transform 1s var(--e);
}
.swc-hand {
  clip-path: inset(100% 0 0 0);
  transform: translateY(4%);
  opacity: 1;
  transition: clip-path 1.2s var(--e), transform 1.2s var(--e);
}
/* The rays open from where they really meet, a little left of centre */
.swc-ray {
  clip-path: circle(0% at 51.3% 99.3%);
  opacity: 1;
  transition: clip-path 1.4s var(--e);
}
.is-s1 .swc-tri { clip-path: inset(0 0 0 0); }
.is-s2 .swc-sig { opacity: 1; transform: none; }
.is-s3 .swc-word { clip-path: inset(0 0 0 0); }
.is-s4 .swc-eye { opacity: 1; transform: none; }
.is-s5 .swc-hand { clip-path: inset(0 0 0 0); transform: none; }
.is-s6 .swc-ray { clip-path: circle(150% at 51.3% 99.3%); }
.is-done .swc-guides { opacity: .18; }
.swc--logo .swc-note {
  font-size: max(13px, 3.2cqw);
  transform: rotate(-6deg);
  opacity: 0;
  transition: opacity .8s;
}
.swc--logo .is-on .swc-note {
  opacity: 1;
  transition-delay: 1.2s;
}
.swc--logo .is-s4 .swc-note,
.swc--logo .is-done .swc-note {
  opacity: 0;
  transition-delay: 0s;
}

/* --------------------------------------------------------------------------
   Light and dark: the bone panel slides over the ink one
   -------------------------------------------------------------------------- */
.swc--contrast {
  --bg: var(--ink);
}
/* The pause button turns ink on the bone panel */
.swc--contrast.is-light {
  --ctl-bg: var(--ink);
  --ctl-fg: var(--bone);
}
.swc-p {
  position: absolute;
  inset: 0;
  z-index: 1;
  isolation: isolate;
}
.swc-p--dark {
  background: var(--ink);
  color: var(--bone);
}
.swc-p--light {
  z-index: 2;
  background: var(--bone);
  color: var(--ink);
  clip-path: inset(0 0 0 100%);
  transition: clip-path 1.3s var(--e);
}
.is-light .swc-p--light {
  clip-path: inset(0 0 0 0);
}
.swc-p .cs-card-hd,
.swc-p .swc-src {
  color: inherit;
}
.swc-p > img {
  position: absolute;
  top: 12%;
  left: 50%;
  height: 60%;
  transform: translateX(-50%);
}
.swc-lab {
  position: absolute;
  left: 7%;
  bottom: 12.5%;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: max(14px, 5.2cqw);
  line-height: .9;
  text-transform: uppercase;
}
.swc-lab small {
  display: block;
  margin-top: 1cqw;
  font-family: 'Outfit', sans-serif;
  font-weight: 400;
  font-stretch: 100%;
  font-size: max(10px, 2.3cqw);
  text-transform: none;
}

/* --------------------------------------------------------------------------
   Logo levels: L1 steps down to L2, L3 and the favicon
   -------------------------------------------------------------------------- */
.swc-lvstage {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 13%;
  height: 52%;
  display: grid;
  place-items: center;
}
.swc-lv {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  opacity: 0;
  transform: scale(1.15);
  transition: opacity .8s, transform 1.1s var(--e);
}
.swc-lv.is-on {
  opacity: 1;
  transform: none;
}
.swc-lv.is-gone {
  opacity: 0;
  transform: scale(.7);
}
.swc-lv img {
  width: auto;
  height: 56cqw;
}
.swc-wm {
  text-align: center;
  line-height: .86;
}
.swc-wm b {
  display: block;
  font-family: var(--font-something);
  font-weight: 400;
  font-size: 12cqw;
  letter-spacing: .01em;
}
.swc-wm i {
  display: block;
  margin-top: -.5cqw;
  font-family: var(--font-wicked);
  font-style: normal;
  font-size: 12.6cqw;
}
.swc-sw {
  font-family: var(--font-something);
  font-size: 30cqw;
  line-height: 1;
}
.swc-fav {
  display: flex;
  align-items: flex-end;
  gap: 5cqw;
}
.swc-tab {
  display: flex;
  align-items: center;
  gap: 1.4cqw;
  padding: 1.6cqw 3cqw;
  border-radius: 1.6cqw 1.6cqw 0 0;
  background: #2A2926;
  font-size: max(10px, 2.2cqw);
  color: var(--bone-muted);
}
.swc-ico {
  display: grid;
  place-items: center;
  border-radius: 3px;
  background: var(--ink);
  color: var(--bone);
  font-family: var(--font-something);
  line-height: 1;
}
.swc--levels .swc-dots {
  align-self: flex-end;
  margin-bottom: -1cqw;
}
.swc-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: baseline;
  column-gap: 4cqw;
  min-height: calc(2 * 1.35 * max(11px, 2.6cqw) + 2.4cqw);
  padding-top: 2.4cqw;
  border-top: 1px solid var(--rule);
}
.swc-lvl {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: max(18px, 7cqw);
  line-height: .9;
  text-transform: uppercase;
  color: var(--bone);
  transition: opacity .4s;
}
.swc-rule {
  font-size: max(11px, 2.6cqw);
  line-height: 1.35;
  color: var(--bone-muted);
  transition: opacity .4s;
}
.swc-lvl.is-hide,
.swc-rule.is-hide {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   Typography: four fonts, two jobs
   -------------------------------------------------------------------------- */
.swc-grid {
  position: absolute;
  left: 7%;
  right: 7%;
  top: 13%;
  bottom: 14%;
  display: grid;
  grid-template-rows: 1fr 1fr;
  row-gap: 3cqw;
}
.swc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 4cqw;
  padding-top: 2.4cqw;
  border-top: 1px solid var(--rule);
}
.swc-grp {
  grid-column: 1 / -1;
  margin-bottom: 1.6cqw;
  font-size: max(10px, 2.1cqw);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
}
.swc-sp {
  overflow: hidden;
}
.swc-big {
  display: block;
  line-height: 1;
  transform: translateY(105%);
  transition: transform .7s var(--e);
}
.swc-nm {
  margin-top: 1.4cqw;
  font-size: max(11px, 2.5cqw);
  font-weight: 600;
  opacity: 0;
  transition: opacity .35s;
}
.swc-ro {
  font-size: max(10px, 2.2cqw);
  color: var(--bone-muted);
  opacity: 0;
  transition: opacity .35s;
}
.swc-q .swc-big {
  font-family: var(--font-something);
  font-size: 13cqw;
}
.swc-h .swc-big {
  font-family: var(--font-wicked);
  font-size: 14cqw;
}
.swc-a .swc-big {
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 13cqw;
  text-transform: uppercase;
}
.swc-o .swc-big {
  font-family: 'Outfit', sans-serif;
  font-weight: 300;
  font-size: 13cqw;
}
/* In: the names follow the letters. Out: they go with them, no delay */
.is-v .swc-big {
  transform: none;
  transition: transform 1s var(--e);
}
.is-v .swc-nm,
.is-v .swc-ro {
  opacity: 1;
}
.is-v .swc-nm { transition: opacity .7s .4s; }
.is-v .swc-ro { transition: opacity .7s .55s; }
.swc-note--type {
  top: 12.5%;
  right: 7%;
  font-size: max(14px, 4cqw);
  transform: rotate(-5deg);
  opacity: 0;
  transition: opacity .8s;
}
.swc-note--type.is-v {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Colour, like the homepage hero
   -------------------------------------------------------------------------- */
.swc--colour {
  --bg: var(--ink);
}
.swc--colour .swc-card {
  display: flex;
  flex-direction: column;
  padding-top: 13%;
}
.swc-art {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
}
.swc--colour .swc-foot {
  position: static;
  margin: 0 7% 5%;
}
.swc-hl {
  position: absolute;
  top: 13%;
  left: 7%;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 8cqw;
  line-height: .92;
  letter-spacing: -.005em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--bone);
}
.swc-ln {
  display: block;
  overflow: hidden;
  padding-bottom: .06em;
}
.swc-ln > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform .9s var(--e);
}
.swc-ln:nth-child(2) > span { transition-delay: .12s; }
.swc-ln:nth-child(3) > span { transition-delay: .24s; }
.swc-hl .swc-q {
  font-family: var(--font-something);
  font-weight: 400;
  font-size: 1.04em;
  letter-spacing: 0;
  text-transform: none;
}
.swc-hl .swc-h {
  margin-right: .12em;
  font-family: var(--font-wicked);
  font-weight: 400;
  font-size: 1.3em;
  line-height: .8;
  letter-spacing: 0;
  text-transform: none;
}
.swc-hl .swc-q,
.swc-hl .swc-h {
  color: var(--bone);
  transition: color .9s var(--e);
}
.is-v .swc-ln > span { transform: none; }
.is-y .swc-hl .swc-q,
.is-y .swc-hl .swc-h {
  color: var(--yellow);
}
/* An empty polaroid with tape */
.swc-pol {
  position: absolute;
  top: 10%;
  right: 6%;
  width: 24%;
  aspect-ratio: .86;
  padding: 1.6cqw 1.6cqw 5.2cqw;
  background: #FBFAF7;
  box-shadow: 0 1.6cqw 3.2cqw rgba(0, 0, 0, .5);
  opacity: 0;
  transform: translateY(-30%) rotate(4deg);
  transition: opacity .6s, transform 1s var(--e);
}
.swc-pol i {
  display: block;
  width: 100%;
  height: 100%;
  background: #E7E3DA;
}
.swc-pt {
  position: absolute;
  top: -2cqw;
  left: 50%;
  width: 12cqw;
  height: 3.6cqw;
  background: rgba(232, 220, 190, .88);
  transform: translateX(-50%) rotate(-3deg);
}
.is-p .swc-pol {
  opacity: 1;
  transform: rotate(4deg);
}
/* The caution tape, no type on it */
.swc-caution {
  position: absolute;
  left: -10%;
  right: -10%;
  bottom: 16%;
  height: 9%;
  background: var(--yellow);
  background-image:
    repeating-linear-gradient(-45deg, var(--ink) 0 1.6cqw, transparent 1.6cqw 3.2cqw),
    repeating-linear-gradient(-45deg, var(--ink) 0 1.6cqw, transparent 1.6cqw 3.2cqw);
  background-size: 100% 1.3cqw, 100% 1.3cqw;
  background-position: 0 0, 0 100%;
  background-repeat: no-repeat;
  transform: rotate(-5deg) translateX(-110%);
  transition: transform 1.3s var(--e);
}
.is-t .swc-caution {
  transform: rotate(-5deg);
}
.swc-note--colour {
  top: 63%;
  left: 30%;
  font-size: max(14px, 4.2cqw);
  transform: rotate(-6deg);
  opacity: 0;
  transition: opacity .8s;
}
.is-n .swc-note--colour {
  opacity: 1;
}
.swc-keys {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: 3cqw;
  padding-top: 2.4cqw;
  border-top: 1px solid var(--rule);
}
.swc-k i {
  display: block;
  width: 6cqw;
  height: 6cqw;
  border-radius: 50%;
  background: var(--c);
  box-shadow: 0 0 0 1px var(--rule);
}
.swc-k b {
  display: block;
  margin-top: 1.6cqw;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: max(13px, 4cqw);
  line-height: 1;
  text-transform: uppercase;
}
.swc-k span {
  display: block;
  margin-top: .6cqw;
  font-size: max(10px, 2.2cqw);
  color: var(--bone-muted);
}

/* --------------------------------------------------------------------------
   References: one studio at a time
   -------------------------------------------------------------------------- */
.swc--refs {
  --bg: var(--ink);
}
.swc-sl {
  position: absolute;
  inset: 0;
}
.swc-from {
  position: absolute;
  top: 15%;
  left: 7%;
  font-size: max(10px, 2.2cqw);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity .5s;
}
.swc-dots--refs {
  position: absolute;
  top: 15%;
  right: 7%;
}
.swc-st {
  position: absolute;
  top: 19%;
  left: 7%;
  right: 7%;
  overflow: hidden;
  font-family: 'Archivo', sans-serif;
  font-weight: 900;
  font-stretch: 70%;
  font-size: 21cqw;
  line-height: .95;
  text-transform: uppercase;
  color: var(--bone);
}
.swc-st span {
  display: block;
  transform: translateY(105%);
  transition: transform .9s var(--e);
}
.swc-pair {
  position: absolute;
  top: 47%;
  left: 7%;
  right: 7%;
  display: grid;
  grid-template-columns: 1fr 8cqw 1fr;
  align-items: center;
  column-gap: 2cqw;
}
/* Their pattern: plain, in a thin outlined box */
.swc-pat {
  min-height: 24cqw;
  padding: 3cqw;
  border: 1px solid var(--rule);
  opacity: 0;
  transform: translateY(8%);
  transition: opacity .6s, transform .7s var(--e);
}
.swc-pat small,
.swc-mine small {
  display: block;
  margin-bottom: 1.6cqw;
  font-size: max(9px, 1.9cqw);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.swc-pat small {
  color: var(--muted);
}
.swc-pat p {
  font-size: max(11px, 2.9cqw);
  line-height: 1.3;
  color: var(--bone-muted);
}
.swc-ar {
  width: 100%;
  overflow: visible;
}
.swc-ar path {
  fill: none;
  stroke: var(--yellow);
  stroke-width: 1.8;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  transition: stroke-dashoffset .7s var(--e);
}
/* Mine: a taped bone paper note in handwriting */
.swc-mine {
  position: relative;
  min-height: 24cqw;
  padding: 3cqw;
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 1.4cqw 3cqw rgba(0, 0, 0, .45);
  opacity: 0;
  transform: rotate(2.5deg) translateY(30%);
  transition: opacity .5s, transform .9s var(--e);
}
.swc-mine small {
  color: #57534C;
}
.swc-mine .swc-pt {
  width: 14cqw;
  height: 4cqw;
  background: rgba(232, 220, 190, .9);
  transform: translateX(-50%) rotate(-4deg);
}
.swc-hw {
  font-family: var(--font-hand);
  font-size: max(17px, 5.2cqw);
  line-height: 1;
  color: var(--ink);
}
.swc-sl.is-a .swc-from { opacity: 1; }
.swc-sl.is-a .swc-st span { transform: none; }
.swc-sl.is-a .swc-pat {
  opacity: 1;
  transform: none;
  transition-delay: .4s;
}
.swc-sl.is-a .swc-ar path {
  stroke-dashoffset: 0;
  transition-delay: 1.1s;
}
.swc-sl.is-a .swc-mine {
  opacity: 1;
  transform: rotate(2.5deg);
  transition-delay: 1.5s;
}
.swc-sl.is-o .swc-st span {
  transform: translateY(-105%);
  transition: transform .5s var(--e);
}
.swc-sl.is-o .swc-from,
.swc-sl.is-o .swc-pat,
.swc-sl.is-o .swc-mine {
  opacity: 0;
  transition-delay: 0s;
}
/* A slide that is neither showing nor leaving resets at once, so the old
   name never slides back through the new one */
.swc-sl:not(.is-a):not(.is-o) * {
  transition: none !important;
}
@container (max-width: 440px) {
  .swc-pair { grid-template-columns: 1fr 6cqw 1fr; }
  .swc-pat,
  .swc-mine {
    min-height: 30cqw;
    padding: 2.6cqw;
  }
  .swc-pat p { font-size: 10.5px; }
  .swc-hw { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   Before and after: wide, 1920:1000, full width. A real range input moves
   the handle; the labels are clipped to their own side.
   -------------------------------------------------------------------------- */
.swc--before-after {
  --bg: #111111;
  aspect-ratio: 1920 / 1000;
}
.swc--before-after .swc-card {
  touch-action: pan-y;
}
.swc--before-after img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  -webkit-user-drag: none;
}
.swc-after {
  clip-path: inset(0 0 0 var(--p));
}
.swc-lay {
  position: absolute;
  inset: 0;
  z-index: 4;
  pointer-events: none;
}
.swc-lay--before {
  clip-path: inset(0 calc(100% - var(--p)) 0 0);
}
.is-anim .swc-lay--before,
.is-anim .swc-after {
  transition: clip-path 1.6s var(--e);
}
.is-anim .swc-line {
  transition: left 1.6s var(--e);
}
.swc-line {
  position: absolute;
  top: 0;
  bottom: 0;
  left: var(--p);
  z-index: 3;
  width: 2px;
  margin-left: -1px;
  background: var(--bone);
  pointer-events: none;
}
.swc-knob {
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  margin: -22px 0 0 -22px;
  border-radius: 50%;
  background: var(--bone);
  color: var(--ink);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .4);
}
.swc-knob svg {
  width: 22px;
  height: 22px;
}
.swc-tag {
  position: absolute;
  bottom: 2.4cqw;
  left: 2.4cqw;
  padding: .6cqw 1cqw;
  background: rgba(11, 11, 11, .8);
  color: var(--bone);
  font-size: max(10px, 1.3cqw);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.swc-tag--after {
  left: auto;
  right: 2.4cqw;
  background: var(--yellow);
  color: var(--ink);
}
.swc--before-after input[type=range] {
  position: absolute;
  inset: 0;
  z-index: 5;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
}
.swc--before-after input[type=range]:focus-visible + .swc-line .swc-knob {
  outline: 2px solid var(--yellow);
  outline-offset: 3px;
}

/* --------------------------------------------------------------------------
   Easter egg (058): Ilio under the footer paper, only on this page. In the
   footer's own stack she lies under the paper (z -2, the paper is -1), so
   only her tail shows above the torn edge. She rises while still under it,
   then comes in front (.is-front) with her front paws on the edge, wiggles
   and says 'boo!' (always in front), then slides back under. The button is
   the hit area over the tail; it can't hold her, or she couldn't go under
   the paper. Positions are from the footer's top: desktop x from
   'trouble.' (js/something-wicked.js), phones 24px from the right.
   Values measured on the torn edge (img/paper/footer-edge.webp).
   -------------------------------------------------------------------------- */
.ilio,
.ilio-boo,
.ilio-btn {
  display: none;
}
.js .ilio,
.js .ilio-boo,
.js .ilio-btn {
  display: block;
}
.site-footer {
  --ilio-x: 692px;     /* 40px right of 'trouble.', set by the script */
  --ilio-w: 130px;
  --ilio-top: -161px;  /* out: paws on the edge (16px above the footer) */
  --ilio-hide: 90px;   /* under: only the tail above the edge */
}
.ilio {
  position: absolute;
  top: var(--ilio-top);
  left: var(--ilio-x);
  z-index: -2;
  width: var(--ilio-w);
  pointer-events: none;
  translate: 0 var(--ilio-hide);
  transition: translate .45s cubic-bezier(.55, 0, .8, .3);
}
.ilio svg {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 100%;
}
.ilio.is-up {
  translate: 0 0;
  transition: translate .35s cubic-bezier(.2, .7, .2, 1);
}
.ilio.is-front {
  z-index: 1;
}
@keyframes ilioWiggle {
  0%, 100% { rotate: 0deg; }
  20%      { rotate: -6deg; }
  45%      { rotate: 5deg; }
  70%      { rotate: -3deg; }
  85%      { rotate: 2deg; }
}
.ilio.is-wiggle svg {
  animation: ilioWiggle .6s ease-in-out;
}
/* 'boo!' in Reenie Beanie: up and to the left of her on the dark page */
.ilio-boo {
  position: absolute;
  top: -150px;
  left: calc(var(--ilio-x) - 72px);
  z-index: 2;
  color: var(--bone);
  font-size: 36px;
  line-height: 1;
  pointer-events: none;
  opacity: 0;
  rotate: -8deg;
  scale: .6;
  transition: opacity .15s, scale .2s cubic-bezier(.2, .7, .2, 1.4);
}
.ilio-boo.is-on {
  opacity: 1;
  scale: 1;
}
.ilio-btn {
  position: absolute;
  top: -79px;
  left: var(--ilio-x);
  z-index: 3;
  width: var(--ilio-w);
  height: 67px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

/* Phones: 72px wide at the right margin. Out, she fits the dark gap under
   Next up (96px): tail tip 2px below the image, paws just over the edge.
   'boo!' sits on the paper under the edge, left of her, in ink. */
@media (max-width: 759.98px) {
  .site-footer {
    --ilio-w: 72px;
    --ilio-top: -94px;
    --ilio-hide: 37px;
  }
  .ilio,
  .ilio-btn {
    left: auto;
    right: 24px;
  }
  .ilio-btn {
    top: -65px;
    height: 47px;
  }
  .ilio-boo {
    top: 2px;
    left: auto;
    right: 100px;
    color: var(--ink);
    font-size: 28px;
  }
}

/* Reduced motion: she's simply out, no wiggle; 'boo!' appears on click */
@media (prefers-reduced-motion: reduce) {
  .ilio {
    z-index: 1;
    translate: 0 0;
    transition: none;
  }
  .ilio-boo {
    scale: 1;
    transition: none;
  }
  .ilio-btn {
    top: var(--ilio-top);
    height: 153px;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 759.98px) {
  .ilio-btn {
    height: 85px;
  }
}