/* Glass illustrations extracted from the supplied visual reference. */
.strengths-section .strength-card.large { height: 320px; }
.strengths-section .strength-card.small,
.strengths-section .strength-card.small:last-child { height: 300px; }
.strengths-section .strength-card h3 { font-size: 35px; }
.strengths-section .strength-card.small h3 { font-size: 26px; }
.strengths-section .strength-card p { font-size: 15px; }
#skills-bubble-menu .pill-label { font-size: .94em; }

.strength-art {
  position: absolute;
  right: 14px;
  bottom: 10px;
  width: min(280px, 86%);
  z-index: 1;
  pointer-events: none;
  scale: .76;
  transform-origin: right bottom;
  transform: none;
  transition: transform 650ms cubic-bezier(.2, 1.4, .35, 1), filter 650ms ease;
}
.strengths-section .strength-card:not(.featured) .strength-art { scale: .7; }
.strengths-section .strength-card:not(.featured) .strength-art {
  transform: perspective(700px) rotateX(var(--strength-tilt-x, 0deg)) rotateY(var(--strength-tilt-y, 0deg));
}
.strength-art.is-jelly-active img { will-change: rotate, scale, translate; }
.strength-art img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 8px 10px #00000024);
  animation: strength-art-float 8s ease-in-out infinite;
}
.strength-art-flower { width: min(390px, 86%); bottom: 8px; }
.strength-art-star { width: min(150px, 35%); right: 20px; bottom: 142px; }
.strength-art-folder { bottom: 8px; }
.strength-art-characters { width: min(300px, 90%); bottom: 8px; }
.strength-art-book { width: min(286px, 88%); bottom: 10px; }
.strength-art-star img { animation-delay: -1s; animation-duration: 9s; filter: none; }
.strength-art-folder img { animation-delay: -2s; animation-duration: 9s; }
.strength-art-characters img { animation-delay: -4s; animation-duration: 10s; }
.strength-art-book img { animation-delay: -6s; animation-duration: 11s; }

/* Keep the three skill labels in the featured card in the same glossy material. */
.strengths-section .featured .floating-tags > span {
  background: linear-gradient(165deg, #666666 0%, #272727 18%, #050505 65%, #303030 100%);
  border-color: #ffffff38;
  box-shadow: inset 0 1px 0 #ffffff70, inset 0 -8px 14px #000000a8, 0 12px 20px #00000070;
}

@keyframes strength-art-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(-5px) rotate(1deg); }
}
@media(hover: hover) and (pointer: fine) {
  .strength-card:hover .strength-art {
    transform: translateY(-5px) scale(1.04);
    filter: brightness(1.12);
  }
  .strengths-section .strength-card:not(.featured):hover .strength-art {
    transform: perspective(700px) translateY(-5px) rotateX(var(--strength-tilt-x, 0deg)) rotateY(var(--strength-tilt-y, 0deg)) scale(1.04);
  }
  .strengths-section .featured:hover .floating-tags > span {
    box-shadow: inset 0 1px 0 #ffffff8c, inset 0 -8px 14px #000000b8, 0 17px 25px #0000008c;
  }
}
@media(max-width:1100px) {
  .strengths-section .strength-card h3 { font-size: 26px; }
  .strengths-section .strength-card.small h3 { font-size: 20px; }
}
@media(min-width:601px) and (max-width:1000px) {
  .strengths-section .strength-card h3 { font-size: 24px; }
  .strength-art-flower { width: 94%; }
  .strength-art-characters { width: 94%; }
}
@media(max-width:800px) {
  .strengths-section .strength-card p { font-size: 13px; }
}
@media(max-width:600px) {
  .strengths-section .strength-card.large { height: 300px; }
  .strengths-section .strength-card.large h3 { font-size: 26px; }
  .strengths-section .strength-card.small h3 { font-size: 23px; }
  .strength-art { right: 12px; }
  .strength-art-flower { width: min(330px, 94%); bottom: 6px; }
  .strength-art-star { right: 18px; bottom: 142px; width: min(125px, 35%); }
  .strength-art-folder { width: min(280px, 86%); }
  .strength-art-characters { width: min(300px, 90%); }
  .strength-art-book { width: min(286px, 88%); }
}
@media(max-width:360px) {
  .strengths-section .strength-card.featured h3 { font-size: 22px; }
  .strength-art-star img { clip-path: inset(0 0 0 16%); }
}
@media(prefers-reduced-motion: reduce) {
  .strength-art img { animation: none; }
  .strength-card:hover .strength-art,
  .strengths-section .strength-card:not(.featured) .strength-art,
  .strengths-section .strength-card:not(.featured):hover .strength-art { transform: none; filter: none; }
}