/* Smart Page Studio credit (port of @one47/ui tokens.css "v1.9 Smart Page Studio credit") */
@keyframes sps-flap { to { transform: rotate(-26deg) scale(0.8); } }
@keyframes sps-flap2 { to { transform: rotate(20deg) scale(0.84); } }
@keyframes sps-wake {
  35% { transform: translateY(1px) scale(0.93, 1.05); }
  70% { transform: translateY(-2px) rotate(-5deg) scale(1.05); }
}
@keyframes sps-land {
  0% { transform: translateY(-2px) scale(1.1); }
  45% { transform: translateY(1px) scale(0.93, 1.04); }
}
@keyframes sps-shimmer {
  0% { background-position: 100% 0; opacity: 1; }
  85% { opacity: 1; }
  100% { background-position: 0 0; opacity: 0; }
}
@keyframes sps-spark {
  0% { transform: scale(0); opacity: 0; }
  25% { transform: scale(1.2) rotate(45deg); opacity: 1; }
  100% { transform: translateY(5px) scale(0) rotate(180deg); opacity: 0; }
}
@keyframes sps-burst {
  0% { transform: scale(0.4); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(0.2) rotate(120deg); opacity: 0; }
}

.sps-credit { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0 .35em; }
.sps-credit__a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; text-decoration: none; font-weight: 700; }
.sps-credit__a:hover .sps-credit__name { text-decoration: underline; text-underline-offset: 4px; }
.sps-credit__mark {
  display: inline-block; height: 1.5rem; width: auto; margin-right: 0.5rem; flex-shrink: 0;
  vertical-align: middle; overflow: visible; transition: filter 0.4s;
}
.sps-credit__name { position: relative; white-space: nowrap; }
.sps-credit__name::after {
  content: attr(data-text); content: attr(data-text) / ''; position: absolute; left: 0; top: 0;
  white-space: nowrap; color: transparent; pointer-events: none; opacity: 0;
  background: linear-gradient(100deg, transparent 34%, #0d9488 42%, #2dd4bf 47%, #c084fc 51%, #ec4899 55%, #db2777 59%, transparent 67%) 100% 0 / 300% 100%;
  -webkit-background-clip: text; background-clip: text;
}
.sps-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.sps-b, .sps-w1, .sps-w2 { transform-box: view-box; }
.sps-b { transform-origin: 25px 26px; }
.sps-w1, .sps-w2 { transform-origin: 27px 20px; }
.sps-box--g { opacity: 0; transition: opacity 0.3s; }
[data-play] :is(.sps-w1, .sps-w2), .sps-fly :is(.sps-w1, .sps-w2) { animation: sps-flap 0.07s ease-in-out infinite alternate; }
[data-play] .sps-w2, .sps-fly .sps-w2 { animation-name: sps-flap2; }
[data-play='wake'] .sps-b { animation: sps-wake 0.28s ease-in-out; }
[data-play='fly'] .sps-b { opacity: 0; }
[data-play='land'] .sps-b { animation: sps-land 0.45s ease-out; }
:is([data-play='wake'], [data-play='fly'], [data-play='glow']) .sps-box--g { opacity: 1; }
:is([data-play='wake'], [data-play='fly']) .sps-credit__name::after { animation: sps-shimmer 1.9s ease-in-out; }
:is([data-play='fly'], [data-play='glow']) .sps-credit__mark {
  filter: drop-shadow(0 0 3px rgb(236 72 153 / 0.75)) drop-shadow(0 0 7px rgb(45 212 191 / 0.55));
}
.sps-fly { position: fixed; z-index: 70; pointer-events: none; }
.sps-fly > *, .sps-fly__o > * { position: absolute; left: 0; top: 0; }
.sps-fly__b { will-change: transform; }
.sps-fly__b svg { display: block; width: 100%; height: 100%; overflow: visible; }
.sps-fly__t { overflow: visible; }
.sps-fly i {
  width: calc(var(--z) * 2); height: calc(var(--z) * 2); margin: calc(var(--z) * -1) 0 0 calc(var(--z) * -1);
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 55%, transparent), transparent 62%);
  animation: sps-spark 1s ease-out both;
}
.sps-fly i::before {
  content: ''; position: absolute; inset: 22%; background: radial-gradient(circle, #fff 0 14%, var(--c) 36%);
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%);
}
.sps-fly i.sps-x { animation: sps-burst 0.75s ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .sps-credit *, .sps-fly { animation: none !important; }
}

/* the credit row under each site footer */
.sps-row { margin-top: 20px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: center; text-align: center; font-size: .95rem; opacity: .9; }