/* Lightweight motion layer: progressive enhancement with reduced-motion support. */
:root {
  --header-offset: 104px;
  --motion-duration: 620ms;
  --motion-ease: cubic-bezier(.2, .75, .25, 1);
}

html { scroll-padding-top: var(--header-offset); }
[id] { scroll-margin-top: var(--header-offset); }

.motion-ready .reveal-item {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--motion-duration) var(--motion-ease),
    transform var(--motion-duration) var(--motion-ease);
  transition-delay: min(calc(var(--reveal-order, 0) * 70ms), 280ms);
  will-change: opacity, transform;
}

.motion-ready .reveal-item.reveal-from-left { transform: translate3d(-22px, 0, 0); }
.motion-ready .reveal-item.reveal-from-right { transform: translate3d(22px, 0, 0); }
.motion-ready .reveal-item.is-revealed { opacity: 1; transform: none; will-change: auto; }

@media (hover: hover) and (pointer: fine) {
  .button,
  .info-card,
  .course-card,
  .reason-card,
  .student-card,
  .media-gallery-item,
  .post-card {
    transition:
      transform 180ms ease,
      box-shadow 180ms ease,
      border-color 180ms ease,
      background-color 180ms ease;
  }

  .button:hover { transform: translateY(-2px); }
  .info-card:hover,
  .course-card:hover,
  .reason-card:hover,
  .student-card:hover,
  .media-gallery-item:hover,
  .post-card:hover {
    transform: translateY(-4px);
    border-color: rgba(59, 85, 95, .32);
    box-shadow: 0 16px 38px rgba(38, 50, 56, .12);
  }
}

@media (max-width: 580px) {
  :root { --header-offset: 88px; --motion-duration: 520ms; }
  .motion-ready .reveal-item { transform: translate3d(0, 16px, 0); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .motion-ready .reveal-item,
  .motion-ready .reveal-item.reveal-from-left,
  .motion-ready .reveal-item.reveal-from-right {
    opacity: 1;
    transform: none;
    will-change: auto;
  }
}