/* ============================================================
   R.K.H.S. SCHOOL – ANIMATIONS v2.0
   ============================================================ */

/* ----- KEYFRAMES ----- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(36px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(-55px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeRight {
  from { opacity: 0; transform: translateX(55px); }
  to   { opacity: 1; transform: translateX(0); }
}
@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes slideDown {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes pulseDot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.4; transform: scale(0.7); }
}
@keyframes floatBg {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%       { transform: translateY(-18px) rotate(3deg); }
}
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
@keyframes borderPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,179,0,0.4); }
  50%       { box-shadow: 0 0 0 10px rgba(255,179,0,0); }
}
@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position: 600px 0; }
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ----- SCROLL REVEAL (initial hidden state) ----- */
.reveal-up,
.reveal-left,
.reveal-right {
  opacity: 0;
  transition: opacity 0.7s cubic-bezier(0.4, 0, 0.2, 1),
              transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
}
.reveal-up    { transform: translateY(44px); }
.reveal-left  { transform: translateX(-55px); }
.reveal-right { transform: translateX(55px); }

/* Visible state (added by IntersectionObserver) */
.reveal-up.visible,
.reveal-left.visible,
.reveal-right.visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* Stagger delays */
.d1 { transition-delay: 0.08s !important; }
.d2 { transition-delay: 0.16s !important; }
.d3 { transition-delay: 0.24s !important; }
.d4 { transition-delay: 0.32s !important; }
.d5 { transition-delay: 0.40s !important; }

/* ----- ACTIVE SLIDE CONTENT ----- */
.slide.active .slide-badge   { animation: fadeUp 0.6s ease both 0.20s; }
.slide.active h1             { animation: fadeUp 0.7s ease both 0.38s; }
.slide.active .slide-tagline { animation: fadeUp 0.7s ease both 0.55s; }
.slide.active .hero-cta      { animation: fadeUp 0.7s ease both 0.72s; }

/* ----- STAFF CARD STAGGER ----- */
.staff-card { animation: scaleIn 0.42s ease both; }

/* ----- FACILITY CARD HOVER ICON ----- */
.facility-card:hover .fac-icon {
  background: var(--navy) !important;
  animation: floatBg 2s ease-in-out infinite;
}

/* ----- GALLERY HOVER ----- */
.gimg { transition: none; }
.gimg:hover .gimg-inner { transform: scale(1.08); }

/* ----- PRINCIPAL PHOTO ----- */
.principal-photo,
.principal-photo-placeholder {
  transition: box-shadow 0.3s, transform 0.3s;
}
.principal-photo-wrap:hover .principal-photo,
.principal-photo-wrap:hover .principal-photo-placeholder {
  transform: translateY(-4px);
  box-shadow: 0 16px 40px rgba(26,35,126,0.25);
}

/* ----- PHOTO BADGE PULSE ----- */
.photo-badge-corner {
  animation: borderPulse 2.5s infinite;
}

/* ----- LOADING SHIMMER ----- */
.shimmer-load {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 800px 100%;
  animation: shimmer 1.5s infinite linear;
}

/* ----- NAV HOVER ----- */
.nav-link { transition: color 0.3s, background 0.2s; }

/* ----- BUTTON PRESS ----- */
.btn:active { transform: scale(0.97) !important; }

/* ----- EXT CARD ----- */
.ext-card { transition: background 0.3s, color 0.3s, transform 0.3s, border-color 0.3s; }
.ext-card:hover .ext-icon { animation: floatBg 1s ease; }

/* ----- CONTACT CARD ----- */
.contact-card { transition: background 0.3s, transform 0.3s; }

/* ----- VISION CARD ----- */
.vision-card { transition: background 0.3s, transform 0.3s; }

/* ----- STAT ITEMS ----- */
.stat-item {
  animation: scaleIn 0.5s ease both;
}
.stat-item:nth-child(1) { animation-delay: 0.05s; }
.stat-item:nth-child(2) { animation-delay: 0.12s; }
.stat-item:nth-child(3) { animation-delay: 0.19s; }
.stat-item:nth-child(4) { animation-delay: 0.26s; }

/* ----- EVENT CARDS ----- */
.event-card:nth-child(1) { animation: fadeUp 0.5s ease both 0.0s; }
.event-card:nth-child(2) { animation: fadeUp 0.5s ease both 0.1s; }
.event-card:nth-child(3) { animation: fadeUp 0.5s ease both 0.2s; }
.event-card:nth-child(4) { animation: fadeUp 0.5s ease both 0.3s; }

/* ----- LAZY IMAGE ----- */
img[data-src] {
  opacity: 0;
  transition: opacity 0.5s ease;
}
img[data-src].loaded {
  opacity: 1;
}
img.lazy-placeholder {
  background: linear-gradient(90deg, #f0f2fa 25%, #e0e4f0 50%, #f0f2fa 75%);
  background-size: 400px 100%;
  animation: shimmer 1.2s infinite linear;
}

/* ----- PAGE HERO ----- */
.page-hero { animation: fadeUp 0.6s ease both; }

/* ----- PRINT MEDIA ----- */
@media print {
  .site-header, .site-footer, .no-print { display: none !important; }
  body { font-size: 12pt; }
}