/* Rating tiers for every Personal category view (personal-tier.js sets data-tier). */
.ptier-rel { position: relative; }

/* 5 MASTERPIECE: gold ring that breathes + a light sweep */
[data-tier="5"]:not(.ptier-sm) {
  box-shadow: 0 0 0 2px #e5c586, 0 0 18px 2px rgba(229, 197, 134, 0.45), 0 14px 34px rgba(0, 0, 0, 0.45) !important;
  animation: ptierBreathe 3.2s ease-in-out infinite;
  z-index: 1;
}
[data-tier="5"]:not(.ptier-sm):hover { box-shadow: 0 0 0 2px #fff2b2, 0 0 30px 6px rgba(229, 197, 134, 0.6), 0 18px 40px rgba(0, 0, 0, 0.5) !important; }
@keyframes ptierBreathe {
  0%, 100% { box-shadow: 0 0 0 2px #e5c586, 0 0 14px 1px rgba(229, 197, 134, 0.35), 0 14px 34px rgba(0, 0, 0, 0.45); }
  50% { box-shadow: 0 0 0 2px #fff2b2, 0 0 26px 5px rgba(229, 197, 134, 0.6), 0 14px 34px rgba(0, 0, 0, 0.45); }
}
.ptier-shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; z-index: 3; }
.ptier-shine::before {
  content: ""; position: absolute; top: -20%; bottom: -20%; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255, 246, 214, 0.38), transparent);
  transform: skewX(-18deg);
  animation: ptierSweep 5.5s ease-in-out infinite;
}
@keyframes ptierSweep { 0%, 62% { left: -60%; } 100% { left: 130%; } }
[data-tier="5"].ptier-sm { background-image: linear-gradient(90deg, rgba(229, 197, 134, 0.16), rgba(229, 197, 134, 0.04)) !important; box-shadow: inset 0 0 0 1px rgba(229, 197, 134, 0.45); }

/* 4 Great: steady silver-blue ring */
[data-tier="4"]:not(.ptier-sm) { box-shadow: 0 0 0 1.5px rgba(186, 206, 236, 0.75), 0 0 12px rgba(147, 197, 253, 0.22), 0 12px 28px rgba(0, 0, 0, 0.4) !important; }
[data-tier="4"].ptier-sm { box-shadow: inset 0 0 0 1px rgba(186, 206, 236, 0.35); }

/* 3 Good: as designed */

/* 2 Average -> 0 Bad: only the picture fades, never the text */
[data-tier="2"] img { filter: saturate(0.72); }
[data-tier="1"] img { filter: saturate(0.42) brightness(0.82); }
[data-tier="0"] img { filter: grayscale(1) brightness(0.72); }
[data-tier="2"]:hover img, [data-tier="1"]:hover img, [data-tier="0"]:hover img { filter: none; transition: filter 0.3s ease; }

@media (prefers-reduced-motion: reduce) {
  [data-tier="5"]:not(.ptier-sm) { animation: none; }
  .ptier-shine::before { animation: none; display: none; }
}
body.paused [data-tier="5"], html[data-motion="paused"] [data-tier="5"] { animation: none !important; }
body.paused .ptier-shine::before, html[data-motion="paused"] .ptier-shine::before { animation: none; display: none; }

/* 5-star extras: twinkling sparkles + card-game tilt with a glare that follows the mouse */
.ptier-spark { position: absolute; width: 14px; height: 14px; pointer-events: none; opacity: 0;
  background: radial-gradient(circle, #fff 0 18%, rgba(255, 242, 178, 0.9) 22%, transparent 60%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
  animation: ptierTwinkle 4.8s ease-in-out infinite; filter: drop-shadow(0 0 4px rgba(255, 230, 150, 0.9)); }
.ptier-spark.k1 { top: 8px; left: 10px; animation-delay: 0s; }
.ptier-spark.k2 { top: 18%; right: 10px; width: 10px; height: 10px; animation-delay: 1.2s; }
.ptier-spark.k3 { bottom: 22%; left: 12px; width: 10px; height: 10px; animation-delay: 2.4s; }
.ptier-spark.k4 { bottom: 10px; right: 14px; animation-delay: 3.6s; }
@keyframes ptierTwinkle { 0%, 70%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); } 80% { opacity: 1; transform: scale(1.15) rotate(45deg); } 90% { opacity: 0.6; transform: scale(0.8) rotate(90deg); } }
.ptier-tilt { transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); transform-style: preserve-3d; }
.ptier-tilt.is-tilting { transform: perspective(700px) rotateX(var(--ptx, 0)) rotateY(var(--pty, 0)) scale(1.03) !important; transition: transform 0.08s linear; }
.ptier-tilt.is-tilting > .ptier-shine { background: radial-gradient(circle at var(--pgx, 50%) var(--pgy, 50%), rgba(255, 246, 214, 0.28), transparent 55%); }
@media (prefers-reduced-motion: reduce) { .ptier-spark { animation: none; display: none; } .ptier-tilt { transition: none; } }
body.paused .ptier-spark, html[data-motion="paused"] .ptier-spark { animation: none; display: none; }