/* PKB toys: animated decorations in the logo's shapes. Transform and opacity only.
   Everything stops under prefers-reduced-motion (style.css) and pauses off screen (toys.js). */
[data-toy] { display: block; pointer-events: none; }
[data-toy] svg { display: block; width: 100%; height: auto; overflow: visible; }
[data-toy].idle *, [data-toy].idle { animation-play-state: paused !important; }

/* balloons swaying on their strings */
.bl { transform-box: fill-box; transform-origin: 50% 100%; animation: sway 4.6s ease-in-out infinite alternate; }
.bl:nth-of-type(2) { animation-duration: 5.4s; animation-delay: -1.2s; }
.bl:nth-of-type(3) { animation-duration: 3.9s; animation-delay: -2.4s; }
@keyframes sway { from { transform: rotate(-5deg) translateY(0); } to { transform: rotate(5deg) translateY(-6px); } }

/* pinwheel */
.spin { transform-origin: 0 0; animation: spin 3.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ball pit balls jiggling */
.jig { transform-box: fill-box; transform-origin: 50% 100%; animation: jig 1.8s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes jig { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* carousel horses bobbing and the flag waving */
.bob { transform-box: fill-box; animation: bob 1.6s ease-in-out infinite alternate; }
.bob.two { animation-delay: -0.8s; }
@keyframes bob { from { transform: translateY(-9px); } to { transform: translateY(9px); } }
.flag { transform-box: fill-box; transform-origin: 0% 100%; animation: flag 0.9s ease-in-out infinite alternate; }
@keyframes flag { from { transform: skewY(-8deg); } to { transform: skewY(8deg); } }
.stripe { animation: stripe 2.4s linear infinite; }
@keyframes stripe { to { transform: translateX(-40px); } }

/* rising balloons */
.rise { position: absolute; bottom: -130px; width: 46px; animation: rise 9s linear infinite; animation-delay: var(--d, 0s); }
.rise svg { animation: sway 2.8s ease-in-out infinite alternate; transform-origin: 50% 100%; }
@keyframes rise { from { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 85% { opacity: 1; } to { transform: translateY(-460px); opacity: 0; } }

/* a ball that hops in beside section eyebrows (a pseudo-element, so the language switch cannot remove it) */
.hopper::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; margin-right: 10px; vertical-align: -1px; background: var(--c, var(--magenta)); }
.motion .hopper::before { opacity: 0; }
.motion .hopper.go::before { animation: hop 1.1s cubic-bezier(0.3, 0.6, 0.4, 1) forwards; }
@keyframes hop {
  0% { opacity: 0; transform: translate(-90px, -30px); }
  10% { opacity: 1; }
  35% { transform: translate(-45px, 0); }
  55% { transform: translate(-22px, -16px); }
  75% { transform: translate(-6px, 0); }
  88% { transform: translate(0, -5px); }
  100% { opacity: 1; transform: translate(0, 0); }
}

/* the 3-hour clock */
.clock .arc { stroke-dasharray: 251.3; stroke-dashoffset: 251.3; transition: stroke-dashoffset 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.clock .hand { transform-origin: 50px 50px; transition: transform 1.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.clock.go .arc { stroke-dashoffset: 188.5; }
.clock.go .hand { transform: rotate(90deg); }

/* things popping in as you scroll */
.motion .rv { opacity: 0; transform: translateY(22px) scale(0.97); transition: opacity 500ms ease-out, transform 600ms cubic-bezier(0.2, 0.8, 0.2, 1.15); transition-delay: calc(var(--i, 0) * 80ms); }
.motion .rv.in { opacity: 1; transform: none; }

/* confetti from a picked day */
.confetti { position: fixed; left: 0; top: 0; width: 10px; height: 6px; border-radius: 3px; pointer-events: none; z-index: 50; background: var(--c); animation: pop 950ms cubic-bezier(0.1, 0.7, 0.3, 1) forwards; }
.confetti.dot { width: 8px; height: 8px; border-radius: 50%; }
@keyframes pop {
  from { transform: translate(var(--x), var(--y)) rotate(0); opacity: 1; }
  to { transform: translate(calc(var(--x) + var(--dx)), calc(var(--y) + var(--dy))) rotate(var(--r)); opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .clock .arc { stroke-dashoffset: 188.5; }
  .clock .hand { transform: rotate(90deg); }
  .rise { display: none; }
}