/* Transform-only movement keeps layout and carousel snap positions stable. */
@media (prefers-reduced-motion: no-preference) {
  [data-motion="ready"] { opacity: 0; }
  [data-motion="entering"] {
    animation: pekria-enter 720ms cubic-bezier(.22,1,.36,1) var(--entrance-delay, 0ms) both;
  }
  :is(.family-hero-scene, .coordinator-scene, .teacher-scene, .family-lua-card)[data-motion="entering"] {
    animation-name: pekria-enter-scene;
    animation-duration: 900ms;
  }
  .floating-art {
    animation: pekria-float var(--float-duration, 5.6s) ease-in-out var(--float-delay, 0s) infinite;
    animation-play-state: paused;
    transform-origin: center 65%;
  }
  .floating-art.is-floating { animation-play-state: running; }
  .family-lua-mascot.floating-art { --float-lift: -7px; --float-tilt: 2deg; }
  .family-summary-card, .family-skill-card, .coordinator-card, .teacher-card,
  .family-information-cards > article {
    transition: transform 280ms cubic-bezier(.22,1,.36,1), box-shadow 280ms ease, border-color 280ms ease;
  }
  @media (hover: hover) and (pointer: fine) {
    :is(.family-summary-card, .family-skill-card, .coordinator-card, .teacher-card, .family-information-cards > article)[data-motion="settled"]:hover {
      transform: translateY(-4px);
      border-color: #d4bde6;
      box-shadow: 0 14px 28px -20px #53247750;
    }
  }
  @media (max-width: 600px) {
    [data-motion] { --entrance-distance: 14px; --entrance-delay: 0ms !important; }
    .floating-art { --float-lift: -4px; --float-tilt: 1.5deg; }
  }
}

@keyframes pekria-enter {
  from { opacity: 0; transform: translate3d(0, var(--entrance-distance, 24px), 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes pekria-enter-scene {
  from { opacity: 0; transform: translate3d(0, var(--entrance-distance, 28px), 0) scale(.985); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes pekria-float {
  0%, 100% { transform: translateY(0) rotate(-1deg); }
  50% { transform: translateY(var(--float-lift, -6px)) rotate(var(--float-tilt, 2deg)); }
}

@media (prefers-reduced-motion: reduce) {
  [data-motion], .floating-art { opacity: 1; transform: none; animation: none !important; transition: none !important; }
}
@media print {
  [data-motion], .floating-art { opacity: 1 !important; transform: none !important; animation: none !important; }
}