/* A brief entrance for the geometry; card entrances run once on visibility. */
@media (prefers-reduced-motion: no-preference) {
  .home-page .hero-geometry svg { animation: home-geometry-settle 1200ms ease-out both; }
  .home-page .hero-geometry-square { animation-delay: 140ms; }
  .home-page .hero-geometry-ring { animation-delay: 280ms; }
  @keyframes home-geometry-settle {
    from { rotate: -18deg; scale: .82; }
    to { rotate: 0deg; scale: 1; }
  }
  .home-page :is(.button, .hero-volunteer) > span[aria-hidden="true"] {
    display: inline-block;
    transition: translate 220ms ease;
  }
  .home-page :is(.button, .hero-volunteer):is(:hover, :focus-visible) > span[aria-hidden="true"] {
    translate: 3px -2px;
  }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page :is(.subject-tile > svg, .skill-sketch > svg, .mentorship-benefit-icon) {
    transition: rotate 260ms ease, translate 260ms ease;
    transform-origin: center;
  }
  .home-page .subject-tile:hover > svg,
  .home-page .lgs-skill-card:hover .skill-sketch > svg,
  .home-page .mentorship-benefit:hover .mentorship-benefit-icon {
    rotate: -5deg;
    translate: 0 -2px;
  }
  .home-page .lesson-window { transition: rotate 300ms ease; }
  .home-page .lesson-photo-card:hover .lesson-window { rotate: -1deg; }
}

/* Lift selected cards without interfering with their scroll entrance. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page :is(.lgs-skill-card, .subject-tile, .mentorship-benefit) {
    transition: transform 260ms ease, box-shadow 260ms ease;
  }
  .home-page :is(.lgs-skill-card, .subject-tile, .mentorship-benefit):hover {
    transform: translateY(-12px);
    box-shadow: 0 20px 36px rgb(17 59 45 / 19%);
  }
}

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .home-page .mentor-schools > li {
    transition: transform 280ms ease, box-shadow 280ms ease;
  }
  .home-page .mentor-schools > li:hover {
    transform: translateY(-8px) rotate(-1deg);
    box-shadow: 6px 8px 0 #f6ce58;
  }
}