/* Wobbly tiki objects + quote box for mansswanberg.com
   Decorative pictures gently undulate, jitter on hover, and pop a quote box on click. */

:root {
  --toy-ink: #000000;
  --toy-cream: #FFF8E5;
  --toy-pink: #E4127B;
  --toy-quote: "Hanken Grotesk", "Helvetica Neue", Arial, sans-serif;
  --toy-display: "Dala Floda", Georgia, "Times New Roman", serif;
}

/* ---------- idle undulation ---------- */
.toy-host { cursor: pointer; }

.toy-host > img.toy {
  transform-origin: 50% 60%;
  animation: toy-undulate var(--toy-dur, 5s) ease-in-out var(--toy-delay, 0s) infinite alternate;
  will-change: transform;
}

@keyframes toy-undulate {
  0%   { transform: translate(0, 0) rotate(calc(var(--toy-tilt, 2deg) * -1)) scale(1); }
  33%  { transform: translate(var(--toy-dx, 1.5px), calc(var(--toy-dy, 3px) * -1)) rotate(calc(var(--toy-tilt, 2deg) * 0.4)) scale(1.012); }
  66%  { transform: translate(calc(var(--toy-dx, 1.5px) * -0.6), calc(var(--toy-dy, 3px) * -0.4)) rotate(var(--toy-tilt, 2deg)) scale(0.994); }
  100% { transform: translate(calc(var(--toy-dx, 1.5px) * -1), var(--toy-dy, 3px)) rotate(calc(var(--toy-tilt, 2deg) * -0.3)) scale(1.006); }
}

/* ---------- hover: vibrate and hop ---------- */
.toy-host:hover > img.toy,
.toy-host:focus-visible > img.toy {
  animation: toy-jitter 0.9s steps(1, end) infinite;
}

@keyframes toy-jitter {
  0%   { transform: translate(0, 0) rotate(0deg); }
  12%  { transform: translate(-2px, 1px) rotate(-3deg); }
  25%  { transform: translate(2px, -3px) rotate(2deg); }
  37%  { transform: translate(-1px, -6px) rotate(-1deg) scale(1.03); }
  50%  { transform: translate(3px, -2px) rotate(4deg); }
  62%  { transform: translate(-3px, 0) rotate(-4deg); }
  75%  { transform: translate(1px, -5px) rotate(2deg) scale(1.02); }
  87%  { transform: translate(-2px, -1px) rotate(-2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.toy-host:focus-visible { outline: 2px dashed var(--toy-cream); outline-offset: 4px; }

/* ---------- magenta stars and gems: an occasional double pulse ---------- */
.toy-host.pink.pulse {
  animation: toy-pulse 0.95s cubic-bezier(.3, 0, .3, 1) both;
}

@keyframes toy-pulse {
  0%   { scale: 1; }
  14%  { scale: 1.38; }
  30%  { scale: 0.96; }
  44%  { scale: 1.32; }
  62%  { scale: 0.98; }
  100% { scale: 1; }
}

/* ---------- quote box ---------- */
.toy-quote {
  position: fixed;
  cursor: pointer;
  z-index: 2147483000;
  width: min(300px, calc(100vw - 32px));
  box-sizing: border-box;
  padding: 38px 28px;
  background: var(--toy-ink);
  color: var(--toy-cream);
  border: 2px solid var(--toy-cream);
  outline: 1px solid var(--toy-cream);
  outline-offset: -9px;
  font: 300 17px/1.38 var(--toy-quote);
  letter-spacing: -0.1px;
  transform-origin: var(--toy-ox, 50%) var(--toy-oy, 0%);
  animation: toy-pop 0.22s cubic-bezier(.2, 1.4, .4, 1) both;
}

/* zigzag band inside the top and bottom rules */
.toy-quote::before,
.toy-quote::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  height: 8px;
  background:
    linear-gradient(135deg, var(--toy-cream) 25%, transparent 25%) 0 0 / 12px 8px repeat-x,
    linear-gradient(225deg, var(--toy-cream) 25%, transparent 25%) 0 0 / 12px 8px repeat-x;
  opacity: 0.9;
}
.toy-quote::before { top: 14px; }
.toy-quote::after  { bottom: 14px; transform: scaleY(-1); }

/* corner stars */
.toy-quote .toy-corner {
  position: absolute;
  width: 14px;
  height: 14px;
  color: var(--toy-pink);
  font: 14px/14px var(--toy-display);
  text-align: center;
  background: var(--toy-ink);
}
.toy-quote .toy-corner.tl { top: -8px; left: -8px; }
.toy-quote .toy-corner.tr { top: -8px; right: -8px; }
.toy-quote .toy-corner.bl { bottom: -8px; left: -8px; }
.toy-quote .toy-corner.br { bottom: -8px; right: -8px; }

.toy-quote p {
  margin: 0;
  text-wrap: pretty;
  /* trim the font's extra space above and below so the text sits optically centered */
  text-box: trim-both cap alphabetic;
}

@keyframes toy-pop {
  from { transform: scale(0.6) rotate(-3deg); opacity: 0; }
  to   { transform: scale(1) rotate(0deg); opacity: 1; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .toy-host > img.toy,
  .toy-host:hover > img.toy,
  .toy-host:focus-visible > img.toy,
  .toy-host.pink.pulse { animation: none; }
  .toy-quote { animation: none; }
}