/* Animated card illustrations (markup in src/scenes.ts). Without motion they show their
   finished state; with motion each scene plays a short loop while its card is on screen. */
.scene {
  --ac: var(--cyan);
  --ac2: var(--violet);
  --sk-line: #d9e2ee;
  --warn: #f43f5e;
  margin: -6px -6px 18px;
  border-radius: 18px;
  background: linear-gradient(160deg, var(--soft), transparent 85%);
  overflow: hidden;
}
.scene.violet {
  --ac: var(--violet);
  --ac2: var(--cyan);
}
:root[data-theme="dark"] .scene {
  --sk-line: rgba(255, 255, 255, 0.16);
}
.scene svg {
  display: block;
  width: 100%;
  height: auto;
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  overflow: visible;
}
.scene svg * {
  transform-box: fill-box;
  transform-origin: center;
}
.scene .ol {
  transform-origin: left center;
}
.scene .ot {
  transform-origin: center top;
}
.scene .ob {
  transform-origin: center bottom;
}
.scene .f-card {
  fill: var(--card);
}
.scene .f-soft {
  fill: var(--soft);
}
.scene .f-line {
  fill: var(--sk-line);
}
.scene .f-ink {
  fill: var(--ink);
}
.scene .f-ac {
  fill: var(--ac);
}
.scene .f-ac2 {
  fill: var(--ac2);
}
.scene .f-white {
  fill: #fff;
}
.scene .f-warn {
  fill: var(--warn);
}
.scene .k-line {
  stroke: var(--sk-line);
  stroke-width: 1.2;
}
.scene .k-ink {
  stroke: var(--ink);
}
.scene .k-ac {
  stroke: var(--ac);
}
.scene .k-ac2 {
  stroke: var(--ac2);
}
.scene .k-white {
  stroke: #fff;
}
.scene .k-warn {
  stroke: var(--warn);
}
.scene .o25 {
  opacity: 0.25;
}
.scene .o35 {
  opacity: 0.35;
}
.scene .o55 {
  opacity: 0.55;
}
.scene .o60 {
  opacity: 0.6;
}
.scene .o70 {
  opacity: 0.7;
}
.scene .a-draw,
.scene .a-gauge {
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
}
.scene .a-gauge {
  stroke-dashoffset: 0.25;
}
.scene .a-toggle.t1,
.scene .a-toggle.t2 {
  transform: translateX(16px);
}
.scene .a-toggle-bg {
  opacity: 0;
}
.scene .a-toggle-bg.t1,
.scene .a-toggle-bg.t2 {
  opacity: 1;
}
.scene .a-needle {
  transform-box: view-box;
  transform-origin: 120px 108px;
  transform: rotate(45deg);
}
.scene .a-settle {
  transform: scaleY(0.15);
}
.scene .a-ring {
  opacity: 0;
}
.scene .a-hide {
  opacity: 0;
}

@media (prefers-reduced-motion: no-preference) {
  /* One six-second story per scene. Delays (d1…d8) stagger the steps; during the delay an
     element holds its first frame, so it does not flash before its turn. */
  .scene [class*="a-"] {
    animation-duration: 6s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
    animation-fill-mode: backwards;
  }
  .scene .d1 {
    animation-delay: 0.3s;
  }
  .scene .d2 {
    animation-delay: 0.6s;
  }
  .scene .d3 {
    animation-delay: 0.9s;
  }
  .scene .d4 {
    animation-delay: 1.2s;
  }
  .scene .d5 {
    animation-delay: 1.5s;
  }
  .scene .d6 {
    animation-delay: 1.8s;
  }
  .scene .d7 {
    animation-delay: 2.1s;
  }

  .scene .a-type {
    animation-name: sc-type;
  }
  .scene .a-pop {
    animation-name: sc-pop;
  }
  .scene .a-slide {
    animation-name: sc-slide;
  }
  .scene .a-drop {
    animation-name: sc-drop;
  }
  .scene .a-rise {
    animation-name: sc-rise;
  }
  .scene .a-letter {
    animation-name: sc-letter;
  }
  .scene .a-draw {
    animation-name: sc-draw;
  }
  .scene .a-stamp {
    animation-name: sc-stamp;
  }
  .scene .a-flap {
    animation-name: sc-flap;
  }
  .scene .a-hide {
    animation-name: sc-hide;
  }
  .scene .a-show {
    animation-name: sc-show;
  }
  .scene .a-shackle {
    animation-name: sc-shackle;
  }
  .scene .a-gauge {
    animation-name: sc-gauge;
  }
  .scene .a-needle {
    animation-name: sc-needle;
  }
  .scene .a-press {
    animation-name: sc-press;
  }
  .scene .a-lid {
    animation-name: sc-lid;
  }
  .scene .a-fall {
    animation-name: sc-fall;
  }
  .scene .a-fly {
    animation-name: sc-fly;
    animation-timing-function: ease-in-out;
  }
  .scene .a-bounceback {
    animation-name: sc-bounceback;
    animation-duration: 3s;
    animation-timing-function: ease-in-out;
  }
  .scene .a-progress.p1 {
    animation-name: sc-progress1;
  }
  .scene .a-progress.p2 {
    animation-name: sc-progress2;
  }
  .scene .a-progress.p3 {
    animation-name: sc-progress3;
  }
  .scene .a-done.p1 {
    animation-name: sc-done1;
  }
  .scene .a-done.p2 {
    animation-name: sc-done2;
  }
  .scene .a-done.p3 {
    animation-name: sc-done3;
  }
  .scene .a-toggle.t1 {
    animation-name: sc-tog1;
  }
  .scene .a-toggle.t2 {
    animation-name: sc-tog2;
  }
  .scene .a-toggle.t3 {
    animation-name: sc-tog3;
  }
  .scene .a-toggle-bg.t1 {
    animation-name: sc-togbg1;
  }
  .scene .a-toggle-bg.t2 {
    animation-name: sc-togbg2;
  }
  .scene .a-toggle-bg.t3 {
    animation-name: sc-togbg3;
  }
  .scene .a-settle.s1 {
    animation-name: sc-settle1;
  }
  .scene .a-settle.s2 {
    animation-name: sc-settle2;
  }
  .scene .a-settle.s3 {
    animation-name: sc-settle3;
  }
  .scene .a-settle.s4 {
    animation-name: sc-settle4;
  }

  /* Continuous motion (own rhythm). */
  .scene .a-peek {
    animation: sc-peek 3s ease-in-out infinite;
  }
  .scene .a-swing {
    animation: sc-swing 2s ease-in-out infinite;
  }
  .scene .a-pulse {
    animation: sc-pulse 1.6s ease-in-out infinite;
  }
  .scene .a-ring {
    animation: sc-ring 2.2s ease-out infinite backwards;
  }
  .scene .a-wave {
    animation: sc-wave 0.9s ease-in-out infinite alternate;
  }
  .scene .a-wave.w2 {
    animation-duration: 0.7s;
    animation-delay: 0.2s;
  }
  .scene .a-wave.w3 {
    animation-duration: 1.1s;
    animation-delay: 0.1s;
  }
  .scene .a-scan {
    animation: sc-scan 2.4s ease-in-out infinite alternate;
  }
  .scene .a-spin {
    animation: sc-spin 1s linear infinite;
  }
  .scene .a-twinkle {
    animation: sc-twinkle 1.8s ease-in-out infinite;
  }
  .scene .a-blink {
    animation: sc-blink 4s ease-in-out infinite;
  }
  .scene .a-float {
    animation: sc-float 3s ease-in-out infinite;
  }
  .scene .a-bounce {
    animation: sc-bounce 1.2s ease-in-out infinite;
  }

  /* Only animate the scenes that are on screen (motion.js sets .live); off screen they show
     their finished picture, and each time a card comes back its story starts again. */
  .motion .card:not(.live) .scene * {
    animation: none;
  }

  @keyframes sc-type {
    0% {
      transform: scaleX(0);
    }
    14%,
    86% {
      transform: scaleX(1);
      opacity: 1;
    }
    94%,
    100% {
      transform: scaleX(1);
      opacity: 0;
    }
  }
  @keyframes sc-pop {
    0% {
      transform: scale(0.4);
      opacity: 0;
    }
    10%,
    86% {
      transform: scale(1);
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-slide {
    0% {
      transform: translateX(18px);
      opacity: 0;
    }
    12%,
    86% {
      transform: none;
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-drop {
    0% {
      transform: translateY(-26px);
      opacity: 0;
    }
    12%,
    86% {
      transform: none;
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-rise {
    0% {
      transform: translateY(20px);
      opacity: 0;
    }
    14%,
    86% {
      transform: none;
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-letter {
    0%,
    12% {
      transform: translateY(46px);
    }
    30%,
    86% {
      transform: none;
    }
    100% {
      transform: translateY(46px);
    }
  }
  @keyframes sc-draw {
    0% {
      stroke-dashoffset: 1;
    }
    30%,
    86% {
      stroke-dashoffset: 0;
      opacity: 1;
    }
    94%,
    100% {
      stroke-dashoffset: 0;
      opacity: 0;
    }
  }
  @keyframes sc-stamp {
    0% {
      transform: scale(1.8) rotate(-24deg);
      opacity: 0;
    }
    8% {
      transform: scale(0.92) rotate(-6deg);
      opacity: 1;
    }
    13%,
    86% {
      transform: scale(1) rotate(-8deg);
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-flap {
    0%,
    6% {
      transform: scaleY(1);
    }
    16%,
    84% {
      transform: scaleY(-1);
    }
    96%,
    100% {
      transform: scaleY(1);
    }
  }
  @keyframes sc-hide {
    0%,
    18% {
      opacity: 1;
    }
    26%,
    86% {
      opacity: 0;
    }
    96%,
    100% {
      opacity: 1;
    }
  }
  @keyframes sc-show {
    0%,
    18% {
      opacity: 0;
      transform: scale(0);
    }
    26%,
    86% {
      opacity: 1;
      transform: scale(1);
    }
    96%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-shackle {
    0%,
    40% {
      transform: translateY(-9px);
    }
    48%,
    88% {
      transform: none;
    }
    100% {
      transform: translateY(-9px);
    }
  }
  @keyframes sc-gauge {
    0%,
    6% {
      stroke-dashoffset: 1;
    }
    55%,
    88% {
      stroke-dashoffset: 0.25;
    }
    100% {
      stroke-dashoffset: 1;
    }
  }
  @keyframes sc-needle {
    0%,
    6% {
      transform: rotate(-90deg);
    }
    55% {
      transform: rotate(48deg);
    }
    60%,
    88% {
      transform: rotate(45deg);
    }
    100% {
      transform: rotate(-90deg);
    }
  }
  @keyframes sc-press {
    0%,
    38% {
      transform: scale(1);
    }
    42% {
      transform: scale(0.86);
    }
    48%,
    100% {
      transform: scale(1);
    }
  }
  @keyframes sc-lid {
    0%,
    20% {
      transform: none;
    }
    30%,
    60% {
      transform: rotate(-26deg);
    }
    70%,
    100% {
      transform: none;
    }
  }
  @keyframes sc-fall {
    0%,
    24% {
      transform: none;
      opacity: 1;
    }
    44% {
      transform: translateY(42px) scale(0.7);
      opacity: 0;
    }
    90% {
      transform: translateY(42px) scale(0.7);
      opacity: 0;
    }
    100% {
      transform: none;
      opacity: 1;
    }
  }
  @keyframes sc-fly {
    0% {
      transform: translate(-82px, 54px) rotate(-30deg);
      opacity: 0;
    }
    8% {
      opacity: 1;
    }
    45% {
      transform: none;
    }
    80% {
      transform: translate(86px, 18px) rotate(28deg);
      opacity: 1;
    }
    90%,
    100% {
      transform: translate(92px, 22px) rotate(30deg);
      opacity: 0;
    }
  }
  @keyframes sc-bounceback {
    0% {
      transform: none;
      opacity: 0;
    }
    10% {
      opacity: 1;
    }
    45% {
      transform: translateX(50px);
    }
    65% {
      transform: translateX(22px);
      opacity: 0.6;
    }
    80%,
    100% {
      transform: translateX(18px);
      opacity: 0;
    }
  }
  @keyframes sc-progress1 {
    0% {
      transform: scaleX(0);
    }
    35%,
    86% {
      transform: scaleX(1);
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-progress2 {
    0% {
      transform: scaleX(0);
    }
    55%,
    86% {
      transform: scaleX(1);
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-progress3 {
    0% {
      transform: scaleX(0);
    }
    72%,
    86% {
      transform: scaleX(1);
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-done1 {
    0%,
    35% {
      transform: scale(0);
      opacity: 0;
    }
    42%,
    86% {
      transform: scale(1);
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-done2 {
    0%,
    55% {
      transform: scale(0);
      opacity: 0;
    }
    62%,
    86% {
      transform: scale(1);
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-done3 {
    0%,
    72% {
      transform: scale(0);
      opacity: 0;
    }
    78%,
    86% {
      transform: scale(1);
      opacity: 1;
    }
    94%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-tog1 {
    0%,
    15% {
      transform: none;
    }
    22%,
    90% {
      transform: translateX(16px);
    }
    100% {
      transform: none;
    }
  }
  @keyframes sc-togbg1 {
    0%,
    15% {
      opacity: 0;
    }
    22%,
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-tog2 {
    0%,
    35% {
      transform: none;
    }
    42%,
    90% {
      transform: translateX(16px);
    }
    100% {
      transform: none;
    }
  }
  @keyframes sc-togbg2 {
    0%,
    35% {
      opacity: 0;
    }
    42%,
    90% {
      opacity: 1;
    }
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-tog3 {
    0%,
    52% {
      transform: none;
    }
    58%,
    70% {
      transform: translateX(16px);
    }
    76%,
    100% {
      transform: none;
    }
  }
  @keyframes sc-togbg3 {
    0%,
    52% {
      opacity: 0;
    }
    58%,
    70% {
      opacity: 1;
    }
    76%,
    100% {
      opacity: 0;
    }
  }
  @keyframes sc-settle1 {
    0% {
      transform: scaleY(0.5);
    }
    10% {
      transform: scaleY(1);
    }
    20% {
      transform: scaleY(0.35);
    }
    30% {
      transform: scaleY(0.9);
    }
    40% {
      transform: scaleY(0.6);
    }
    46%,
    90% {
      transform: scaleY(0.15);
    }
    100% {
      transform: scaleY(0.5);
    }
  }
  @keyframes sc-settle2 {
    0% {
      transform: scaleY(0.8);
    }
    10% {
      transform: scaleY(0.3);
    }
    20% {
      transform: scaleY(1);
    }
    30% {
      transform: scaleY(0.45);
    }
    40% {
      transform: scaleY(0.95);
    }
    46%,
    90% {
      transform: scaleY(0.15);
    }
    100% {
      transform: scaleY(0.8);
    }
  }
  @keyframes sc-settle3 {
    0% {
      transform: scaleY(0.35);
    }
    10% {
      transform: scaleY(0.75);
    }
    20% {
      transform: scaleY(0.5);
    }
    30% {
      transform: scaleY(1);
    }
    40% {
      transform: scaleY(0.4);
    }
    46%,
    90% {
      transform: scaleY(0.15);
    }
    100% {
      transform: scaleY(0.35);
    }
  }
  @keyframes sc-settle4 {
    0% {
      transform: scaleY(1);
    }
    10% {
      transform: scaleY(0.55);
    }
    20% {
      transform: scaleY(0.85);
    }
    30% {
      transform: scaleY(0.3);
    }
    40% {
      transform: scaleY(0.7);
    }
    46%,
    90% {
      transform: scaleY(0.15);
    }
    100% {
      transform: scaleY(1);
    }
  }
  @keyframes sc-peek {
    0%,
    100% {
      transform: none;
    }
    30% {
      transform: translateX(-8px);
    }
    65% {
      transform: translateX(4px);
    }
  }
  @keyframes sc-swing {
    0%,
    50%,
    100% {
      transform: none;
    }
    10% {
      transform: rotate(16deg);
    }
    20% {
      transform: rotate(-12deg);
    }
    30% {
      transform: rotate(8deg);
    }
    40% {
      transform: rotate(-4deg);
    }
  }
  @keyframes sc-pulse {
    0%,
    100% {
      transform: none;
      opacity: 1;
    }
    50% {
      transform: scale(1.3);
      opacity: 0.6;
    }
  }
  @keyframes sc-ring {
    0% {
      transform: scale(1);
      opacity: 0.8;
    }
    100% {
      transform: scale(1.5);
      opacity: 0;
    }
  }
  @keyframes sc-wave {
    from {
      transform: scaleY(0.35);
    }
    to {
      transform: scaleY(1);
    }
  }
  @keyframes sc-scan {
    from {
      transform: none;
    }
    to {
      transform: translateY(92px);
    }
  }
  @keyframes sc-spin {
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes sc-twinkle {
    0%,
    100% {
      transform: scale(0.6) rotate(0);
      opacity: 0.5;
    }
    50% {
      transform: scale(1.15) rotate(45deg);
      opacity: 1;
    }
  }
  @keyframes sc-blink {
    0%,
    90%,
    100% {
      transform: none;
    }
    94% {
      transform: scaleY(0.1);
    }
  }
  @keyframes sc-float {
    0%,
    100% {
      transform: none;
    }
    50% {
      transform: translateY(-4px);
    }
  }
  @keyframes sc-bounce {
    0%,
    100% {
      transform: none;
    }
    50% {
      transform: translateY(5px);
    }
  }
}