/*
 * Campus Circle Motion
 * One authored rhythm: page enter, scroll reveal, card lift, modal depth.
 * Transform + opacity only. Every easing is exponential or spring-like.
 */
@keyframes campusSweep {
  100% {
    transform: translateX(100%);
  }
}

@keyframes campusPageEnter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes campusBlink {
  0%,
  100% {
    opacity: 0.35;
  }
  50% {
    opacity: 1;
  }
}

@keyframes campusRing {
  from {
    transform: scale(0.82);
    opacity: 0.8;
  }
  to {
    transform: scale(1.6);
    opacity: 0;
  }
}

@media (prefers-reduced-motion: no-preference) {
  .page-main {
    animation: campusPageEnter var(--dur-4) var(--ease-out) both;
  }

  .auth-shell {
    animation: campusPageEnter var(--dur-4) var(--ease-out) both;
  }

  .reveal {
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity var(--dur-4) var(--ease-out),
      transform var(--dur-4) var(--ease-out);
  }

  .reveal.is-visible {
    opacity: 1;
    transform: none;
  }


  .post-photo img {
    transform: scale(1.001);
  }

  .chat-message {
    animation: campusPageEnter var(--dur-3) var(--ease-out) both;
  }

  .notification-item,
  .conversation-item,
  .people-card,
  .announcement-item {
    transition:
      border-color var(--dur-2) var(--ease-out),
      transform var(--dur-3) var(--ease-out),
      box-shadow var(--dur-3) var(--ease-out),
      opacity var(--dur-3) var(--ease-out);
  }

  .btn,
  .action-btn,
  .action-link,
  .tag,
  .icon-btn,
  .radio-pill span {
    transition:
      background var(--dur-2) var(--ease-out),
      border-color var(--dur-2) var(--ease-out),
      color var(--dur-2) var(--ease-out),
      box-shadow var(--dur-2) var(--ease-out),
      transform var(--dur-2) var(--ease-out),
      opacity var(--dur-2) var(--ease-out);
  }
}

/* Mobile touch: springy press, no sticky hover */
@media (hover: none), (pointer: coarse) {
  .card:hover,
  .btn:hover,
  .action-btn:hover,
  .action-link:hover,
  .tag:hover,
  .icon-btn:hover {
    transform: none;
  }

  .card:active,
  .btn:active,
  .action-btn:active,
  .action-link:active {
    transform: scale(0.985);
  }
}

/* Route transition helper used by the JS after AJAX pagination */
.route-enter {
  animation: campusPageEnter var(--dur-4) var(--ease-out) both;
}

/* Loading button */
.btn.is-loading {
  pointer-events: none;
}

.btn.is-loading .icon {
  animation: campusBlink 0.9s var(--ease-in-out) infinite;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .reveal {
    opacity: 1;
    transform: none;
  }

  .site-header,
  .mobile-tabbar,
  .site-nav,
  .modal-backdrop,
  .lightbox-backdrop {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

@keyframes campusHeart {
  0% {
    transform: scale(1);
  }
  35% {
    transform: scale(1.34) rotate(-8deg);
  }
  62% {
    transform: scale(0.9) rotate(5deg);
  }
  100% {
    transform: scale(1);
  }
}

.action-btn.is-liked .icon {
  animation: campusHeart 440ms var(--ease-spring);
}

.rail-link .icon {
  transition: transform var(--dur-2) var(--ease-out);
}

.rail-link:hover .icon {
  transform: translateX(2px);
}

.mobile-tab.active .icon {
  transition: transform var(--dur-3) var(--ease-spring);
}

.mobile-tab.active:hover .icon {
  transform: translateY(-1px) scale(1.08);
}