h2 { font: var(--font-h2); }
a { color: inherit; }

.btn-secondary { color: var(--accent); }
.btn-bait { background: var(--jack-purple); color: var(--on-jack); border: 0; }

/* --- Homepage --- */

/* The headline and the slogan are sentences, so they show in the sans font: the pixel font of the
   buttons and labels is only for short labels, and it has no glyph for ß. */
.hero h1 { font: var(--font-h1); }
.slogan { font: var(--font-slogan); color: var(--muted); letter-spacing: var(--tracking-wide); text-transform: var(--case-slogan); }

/* --- The tricks Jack plays --- */

/* gotchas/tricks/move-out-of-place.js moves a part by --trick-x and --trick-y and tilts it by
   --trick-tilt. While the part is dragged, an outline undoes the move and the tilt, so it marks the
   spot the part started from. */
.trick-moved {
  position: relative;
  z-index: var(--layer-raised);
  translate: var(--trick-x) var(--trick-y);
  rotate: var(--trick-tilt);
  /* A finger that moves up or down on the part scrolls the page. A drag that starts to the side
     moves the part. */
  touch-action: pan-y;
  cursor: grab;
}
/* The card that hangs moves down and up only, so a finger that moves up or down drags it, and one
   that moves to the side scrolls the row. */
.trick-moved[data-trick="hang"] { touch-action: pan-x; }
.trick-moved::after {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-4));
  display: none;
  border: var(--border-2) dashed var(--accent);
  border-radius: var(--radius);
  transform: rotate(calc(-1 * var(--trick-tilt))) translate(calc(-1 * var(--trick-x)), calc(-1 * var(--trick-y)));
  pointer-events: none;
}
.trick-moved.dragging { cursor: grabbing; }
.trick-moved.dragging::after { display: block; }

.trick-letters { cursor: pointer; }

/* --- Traps --- */

.trap-bait { border-radius: var(--radius-10); }
.trap-promo { border: var(--border-2) solid var(--jack-purple); }
.promo-title { font: var(--font-label); text-transform: var(--case-label); color: var(--jack-purple); }
.login-head { font: 700 var(--font-18)/var(--leading-100) var(--sans); }
.trap-chat-bubble { background: var(--line); }
.trap-form { border: var(--border-2) solid var(--jack-purple); }
.trap-notice { border: var(--border-2) solid var(--jack); }
.notice-title { font: var(--font-label); text-transform: var(--case-label); color: var(--jack-purple); }
.survey-answer:hover { border-color: var(--jack-purple); }
.trap-qr { border: var(--border-2) solid var(--jack-purple); }
.qr-button { color: var(--text-2); }

/* --- Result cards and settings --- */

dialog::backdrop { background: var(--backdrop); }
.result, .settings { gap: var(--space-14); }
.caught { --tone: var(--danger); }
.spotted { --tone: var(--success); }
.result.caught, .result.spotted { border: var(--border-2) solid var(--tone); }
.result-head { display: flex; align-items: center; gap: var(--space-16); }
.result-head > div { display: grid; gap: var(--space-6); }
.attacker-gets { --layout-gap: var(--space-6); }
.result .character { width: var(--result-cast); flex: none; }
.result-headline, .result-label { font: var(--font-label); text-transform: var(--case-label); }
.result-headline { color: var(--tone); }
.result-label { color: var(--text-2); }
.flags { color: var(--text-2); }
.setting input:checked::after { background: var(--bg); }
.setting-note { margin: 0; font: var(--font-small); color: var(--text-2); }
.settings h2 { font: var(--font-dialog-title); color: var(--accent); text-transform: var(--case-title); }
.segmented { font: var(--font-segmented); text-transform: var(--case-button); }

/* --- Phone --- */

@media (width <= 760px) {
  .hero h1 { font: var(--font-h1-phone); }
  h2 { font: var(--font-h2-phone); }
}

/* --- Motion --- */

@media (prefers-reduced-motion: no-preference) {
  .btn { transition: transform var(--duration-150) var(--ease-spring), rotate var(--duration-200); }
  .btn:not(:disabled):hover { transform: translateY(var(--btn-lift)); }
  .btn:not(:disabled):active { transform: translateY(var(--space-1)) scale(var(--btn-press-scale)); }

  .result[open] { animation: card-pop var(--duration-400) var(--ease-pop) both; }
  .result.caught .character { animation: card-peek var(--duration-900) var(--duration-150) var(--ease-out) both; }
}

@keyframes card-pop { from { transform: var(--pop-from); opacity: 0; } }
@keyframes card-peek {
  0% { transform: translateY(var(--space-40)) scale(0.6); opacity: 0; }
  40% { transform: translateY(calc(-1 * var(--space-6))) scale(1.05); opacity: 1; }
  55% { transform: rotate(-8deg); }
  70% { transform: rotate(7deg); }
  85% { transform: rotate(-4deg); }
  100% { transform: none; }
}