:root{
  --motion-fast: 180ms;
  --motion-med: 360ms;
  --motion-slow: 650ms;
  --motion-ease: cubic-bezier(.2,.9,.2,1);
}
html{scroll-behavior:smooth;}

/* View Transitions (supported browsers) */
::view-transition-old(root),
::view-transition-new(root){
  animation-duration: 260ms;
  animation-timing-function: var(--motion-ease);
}



/* Page enter/exit */
body{
  opacity:0;
  transform: translateY(10px) scale(.992);
  filter: blur(2px);
  transition:
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-med) var(--motion-ease),
    filter var(--motion-med) var(--motion-ease);
}
/* Home uses its own intro overlay; don't hide it before JS runs */
body.intro-on{
  opacity:1;
  transform:none;
  filter:none;
}
body.page-ready,
body.intro-on.page-ready{
  opacity:1;
  transform:none;
  filter:none;
}
body.page-exit{
  opacity:0;
  transform: translateY(-8px) scale(.992);
  filter: blur(2px);
}

/* Reveal on scroll */
.reveal{
  opacity:0;
  transform: translateY(18px);
  filter: blur(3px);
  will-change: transform, opacity, filter;
  transition:
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-med) var(--motion-ease),
    filter var(--motion-med) var(--motion-ease);
}
.reveal.reveal-in{
  opacity:1;
  transform:none;
  filter:none;
}

/* Micro interactions */
button, .btn, a.role, a.login-btn, a{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    background-color var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) var(--motion-ease);
}

button:hover, .btn:hover, a.role:hover, a.login-btn:hover{
  transform: translateY(-2px);
}
button:active, .btn:active, a.role:active, a.login-btn:active{
  transform: translateY(0);
}

/* Cards */
.card, .notice-card, .campus-card, .gallery-item{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) var(--motion-ease);
}
.card:hover, .notice-card:hover, .campus-card:hover, .gallery-item:hover{
  transform: translateY(-4px) scale(1.01);
}

/* Modal open/close (safe generic) */
.modal, .lightbox, #modal, #imageModal{
  transition:
    opacity var(--motion-med) var(--motion-ease),
    transform var(--motion-med) var(--motion-ease);
}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto !important;}
  body, .reveal, button, .btn, a, .card, .notice-card, .campus-card, .gallery-item{
    transition:none !important;
    transform:none !important;
    filter:none !important;
    scroll-behavior:auto !important;
  }
  body{opacity:1 !important}
}