/* =========================================================================
   Site-wide animations (every page except Home and Facilities, which have
   their own).  Same look as the Home page:
     - Headings : letters fly in from random places and settle in order
     - Images   : 3D flip-up reveal (banners fade + zoom in softly)
   Switched on by js/site-anim.js (adds .sa-on to <main>).  Without JS, or
   with "reduce motion", the page simply shows normally.
   ========================================================================= */
@keyframes sa-flip {
  from { opacity: 0; transform: perspective(900px) rotateX(-70deg) translateY(30px); }
  to   { opacity: 1; transform: perspective(900px) rotateX(0) translateY(0); }
}
@keyframes sa-zoom {
  from { opacity: 0; transform: scale(1.06); }
  to   { opacity: 1; transform: none; }
}
@keyframes sa-letter {
  from { opacity: 0; transform: translate(var(--x), var(--y)) rotate(var(--r)) scale(0.4); }
  to   { opacity: 1; transform: none; }
}
@keyframes sa-fade {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* hidden until revealed */
.sa-on .sa-img:not(.in),
.sa-on .sa-fade:not(.in) { opacity: 0; }
.sa-on .sa-h:not(.in) .sa-lt { opacity: 0; }

/* play — backwards fill so hover effects keep working afterwards */
.sa-on .sa-img.in {
  animation: sa-flip 0.9s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: calc(var(--i, 0) * 0.15s + 0.05s);
}
.sa-on .sa-img.sa-banner.in { animation: sa-zoom 1.1s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; animation-delay: 0s; }
.sa-on .sa-fade.in { animation: sa-fade 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) backwards; }

/* heading letters: JS wraps every word (.sa-lw) and letter (.sa-lt) */
.sa-lw { display: inline-block; white-space: nowrap; }
.sa-lt { display: inline-block; }
.sa-on .sa-h.in .sa-lt {
  animation: sa-letter 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) backwards;
  animation-delay: var(--d, 0s);
}

@media (prefers-reduced-motion: reduce) {
  .sa-on .sa-img, .sa-on .sa-fade, .sa-on .sa-h .sa-lt { animation: none !important; opacity: 1 !important; }
}