/* Small, animated product illustrations above the returns chart. */
.product-tabs > .tab {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
}

.product-tab-illustration {
  display: block;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  overflow: visible;
  transition: filter 180ms ease;
}

.product-tab-label { min-width: 0; }
.product-tabs > .tab.active .product-tab-illustration,
.product-tabs > .tab:hover .product-tab-illustration {
  filter: drop-shadow(0 3px 4px rgba(36, 83, 114, .14));
}

.product-tab-illustration .pt-cap {
  transform-origin: 32px 35px;
  animation: product-cap-nod 5.6s ease-in-out infinite;
}
.product-tab-illustration .pt-coin {
  animation: product-coin-save 5.6s ease-in-out .6s infinite;
}
.product-tab-illustration .pt-umbrella {
  transform-origin: 29px 44px;
  animation: product-umbrella-sway 6s ease-in-out 1.1s infinite;
}
.product-tab-illustration .pt-check {
  stroke-dasharray: 18;
  stroke-dashoffset: 0;
  animation: product-policy-check 6s ease-in-out 1.6s infinite;
}
.product-tab-illustration .pt-bar {
  transform-box: fill-box;
  transform-origin: center bottom;
  animation: product-bar-grow 6s ease-in-out infinite;
}
.product-tab-illustration .pt-bar-one { animation-delay: 2s; }
.product-tab-illustration .pt-bar-two { animation-delay: 2.15s; }
.product-tab-illustration .pt-bar-three { animation-delay: 2.3s; }
.product-tab-illustration .pt-bear {
  transform-origin: 30px 53px;
  animation: product-bear-bob 6s ease-in-out 2.7s infinite;
}
.product-tab-illustration .pt-star {
  transform-box: fill-box;
  transform-origin: center;
  animation: product-star-shine 6s ease-in-out 2.9s infinite;
}

@keyframes product-cap-nod {
  0%, 38%, 100% { transform: translateY(0) rotate(0); }
  14% { transform: translateY(-2px) rotate(-5deg); }
  26% { transform: translateY(-1px) rotate(3deg); }
}
@keyframes product-coin-save {
  0%, 40%, 100% { transform: translateY(0); opacity: 1; }
  13% { transform: translateY(-3px); opacity: 1; }
  24% { transform: translateY(10px); opacity: 0; }
  25%, 29% { transform: translateY(-5px); opacity: 0; }
}
@keyframes product-umbrella-sway {
  0%, 40%, 100% { transform: rotate(0); }
  13% { transform: rotate(-5deg); }
  27% { transform: rotate(5deg); }
}
@keyframes product-policy-check {
  0%, 7% { stroke-dashoffset: 18; }
  24%, 100% { stroke-dashoffset: 0; }
}
@keyframes product-bar-grow {
  0%, 40%, 100% { transform: scaleY(1); }
  12% { transform: scaleY(.6); }
  28% { transform: scaleY(1.06); }
}
@keyframes product-bear-bob {
  0%, 36%, 100% { transform: rotate(0); }
  12% { transform: rotate(-4deg); }
  24% { transform: rotate(4deg); }
}
@keyframes product-star-shine {
  0%, 40%, 100% { transform: scale(1); opacity: .8; }
  20% { transform: scale(1.2); opacity: 1; }
}

@media (max-width: 1100px) and (min-width: 761px) {
  .product-tabs > .tab { gap: 6px; font-size: 16px; }
  .product-tab-illustration { width: 36px; height: 36px; flex-basis: 36px; }
}
@media (max-width: 760px) {
  .product-tabs > .tab { gap: 6px; padding: 5px 11px; }
  .product-tab-illustration { width: 30px; height: 30px; flex-basis: 30px; }
}
.product-tab-illustration .pt-vault-dial {
  transform-origin: 30px 32px;
  animation: product-vault-unlock 5.6s ease-in-out .6s infinite;
}
.product-tab-illustration .pt-vault-coin {
  animation: product-vault-coin 5.6s ease-in-out .6s infinite;
}
@keyframes product-vault-unlock {
  0%, 45%, 100% { transform: rotate(0deg); }
  16% { transform: rotate(90deg); }
  30% { transform: rotate(-30deg); }
}
@keyframes product-vault-coin {
  0%, 45%, 100% { transform: translateY(0); }
  20% { transform: translateY(-4px); }
}

@media (prefers-reduced-motion: reduce) {
  .product-tab-illustration, .product-tab-illustration * {
    animation: none !important;
    transition: none !important;
  }
}