/* Lightweight, one-shot hover effects. No downloads or mirrored lettering. */
.subject-card, .grade-card, .step, .assessment { position: relative; }
.sparkles { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; border-radius: inherit; }
.sparkles>span {
  position: absolute; opacity: 0; color: #ffd146; font: bold 2rem/1 sans-serif;
  -webkit-text-stroke: 1px #a05b00; paint-order: stroke fill;
  text-shadow: 0 2px 0 #fff, 0 0 10px #ffffffb0;
  transition: opacity .18s ease;
}
.sparkles>span:nth-child(1) { top: 8%; left: 7%; }
.sparkles>span:nth-child(2) { top: 16%; right: 8%; color: #ff90be; font-size: 1.65rem; }
.sparkles>span:nth-child(3) { top: 49%; left: 7%; color: #8ae9ff; font-size: 1.5rem; }
.sparkles>span:nth-child(4) { top: 61%; right: 6%; }
@keyframes friendly-tilt {
  0%,100% { transform: perspective(700px) rotateY(0deg) rotateZ(0deg) scale(1); }
  28% { transform: perspective(700px) rotateY(-7deg) rotateZ(-1.5deg) scale(1.025); }
  65% { transform: perspective(700px) rotateY(7deg) rotateZ(1.5deg) scale(1.025); }
}
@keyframes title-bounce {
  0%,100% { transform: translateY(0) rotate(0deg); }
  35% { transform: translateY(-3px) rotate(-1deg); }
  70% { transform: translateY(-2px) rotate(1deg); }
}
@keyframes star-pop {
  0% { transform: scale(.4) rotate(-18deg); }
  55% { transform: scale(1.25) rotate(12deg); }
  100% { transform: scale(1) rotate(0deg); }
}
.subject-card:focus-visible .sparkles>span, .grade-card:focus-visible .sparkles>span,
.step:focus-visible .sparkles>span, .assessment:focus-visible .sparkles>span { opacity: 1; }
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .menu-illustrated .subject-card:hover .subject-art { animation: friendly-tilt .8s ease-in-out; transform: none; }
  .grades-illustrated .grade-card:hover .grade-art { animation: friendly-tilt .8s ease-in-out; }
  :is(.subject-card,.grade-card,.step,.assessment):hover .sparkles>span { opacity: 1; animation: star-pop .6s ease-out; }
  :is(.subject-card,.grade-card,.step,.assessment):hover .playful-text { animation: title-bounce .65s ease-in-out; }
  .grade-banner .playful-text:hover, .unit-banner h1:hover, .reading-heading h1:hover,
  .intro h1:hover, .section-title h2:hover { animation: title-bounce .65s ease-in-out; }
  .intro img:hover, .unit-banner img:hover, .reading-heading img:hover { animation: friendly-tilt .8s ease-in-out; }
}
@media (hover: none) {
  :is(.subject-card,.grade-card,.step,.assessment):active .sparkles>span { opacity: 1; }
  .menu-illustrated .subject-card:hover .subject-art { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sparkles>span { transition: none; }
  :is(.subject-card,.grade-card,.step,.assessment):hover .sparkles>span { opacity: 1; animation: none; }
  .subject-card:hover, .grade-card:hover, .step:hover { transform: none; }
}
@media (forced-colors: active), print { .sparkles { display: none; } }