/* ============================================================
   MARIA POLYTECHNIC COLLEGE — animations.css  v4.0  CLEAN
   Smooth, subtle motion. Nothing jarring. Nothing clumsy.
   ============================================================ */

/* ── Page entry ──────────────────────────────────────────── */
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}
body.inner-page main,
body[class*="-page"] main {
  animation: pageEnter .5s cubic-bezier(.22,.68,0,1) both;
}

/* ── Core keyframes ──────────────────────────────────────── */
@keyframes aFadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aFadeDown {
  from { opacity: 0; transform: translateY(-18px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes aFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes aZoomIn {
  from { opacity: 0; transform: scale(.92); }
  to   { opacity: 1; transform: scale(1); }
}
@keyframes aZoomUp {
  from { opacity: 0; transform: scale(.95) translateY(22px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes aHeroBg {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}
@keyframes aColorBar {
  0%   { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

/* ── Animation utility classes ───────────────────────────── */
/* All start hidden, .anim-in makes them visible             */

.a-fade-up {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  .6s  cubic-bezier(.25,.46,.45,.94),
    transform .6s cubic-bezier(.25,.46,.45,.94);
}
.a-fade-up.anim-in  { opacity: 1; transform: translateY(0); }

/* Keep fade-left/right but use same gentle values as fade-up */
.a-fade-left {
  opacity: 0;
  transform: translateY(30px); /* same as fade-up for subtlety */
  transition:
    opacity  .6s  cubic-bezier(.25,.46,.45,.94),
    transform .6s cubic-bezier(.25,.46,.45,.94);
}
.a-fade-left.anim-in  { opacity: 1; transform: translateY(0); }

.a-fade-right {
  opacity: 0;
  transform: translateY(30px);
  transition:
    opacity  .6s  cubic-bezier(.25,.46,.45,.94),
    transform .6s cubic-bezier(.25,.46,.45,.94);
}
.a-fade-right.anim-in { opacity: 1; transform: translateY(0); }

.a-fade-down {
  opacity: 0;
  transform: translateY(-18px);
  transition:
    opacity  .5s  cubic-bezier(.25,.46,.45,.94),
    transform .5s cubic-bezier(.25,.46,.45,.94);
}
.a-fade-down.anim-in { opacity: 1; transform: translateY(0); }

.a-fade-in {
  opacity: 0;
  transition: opacity .65s ease;
}
.a-fade-in.anim-in { opacity: 1; }

.a-zoom-in {
  opacity: 0;
  transform: scale(.92);
  transition:
    opacity  .6s  cubic-bezier(.25,.46,.45,.94),
    transform .6s cubic-bezier(.25,.46,.45,.94);
}
.a-zoom-in.anim-in { opacity: 1; transform: scale(1); }

.a-zoom-up {
  opacity: 0;
  transform: scale(.96) translateY(22px);
  transition:
    opacity  .55s cubic-bezier(.25,.46,.45,.94),
    transform .55s cubic-bezier(.25,.46,.45,.94);
}
.a-zoom-up.anim-in { opacity: 1; transform: scale(1) translateY(0); }

/* ── Stagger delays ──────────────────────────────────────── */
.a-delay-1 { transition-delay: .07s !important; }
.a-delay-2 { transition-delay: .14s !important; }
.a-delay-3 { transition-delay: .21s !important; }
.a-delay-4 { transition-delay: .28s !important; }
.a-delay-5 { transition-delay: .35s !important; }
.a-delay-6 { transition-delay: .42s !important; }
.a-delay-7 { transition-delay: .49s !important; }

/* ── Scroll progress bar ─────────────────────────────────── */
#scroll-progress-bar {
  position: fixed;
  top: 0; left: 0;
  height: 3px; width: 0%;
  background: linear-gradient(90deg,
    var(--accent, #f5a623),
    var(--cta,    #ff6b1a),
    #ff4f81,
    var(--accent-2, #16b8a6)
  );
  background-size: 200% 100%;
  animation: aColorBar 2.5s linear infinite;
  z-index: 9999;
  pointer-events: none;
  transition: width .1s linear;
  border-radius: 0 2px 2px 0;
  box-shadow: 0 0 8px rgba(255,107,26,.4);
}

/* ── Back-to-top ─────────────────────────────────────────── */
#back-to-top {
  position: fixed;
  bottom: 26px; right: 26px;
  width: 46px; height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--base-3, #1d4e9e), var(--accent, #f5a623));
  border: none;
  color: #fff;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 22px rgba(14,27,61,.26);
  opacity: 0; pointer-events: none;
  transform: translateY(16px) scale(.8);
  transition:
    opacity .28s ease,
    transform .32s cubic-bezier(.34,1.56,.64,1),
    box-shadow .22s ease;
  z-index: 900;
}
#back-to-top.visible {
  opacity: 1; pointer-events: auto;
  transform: translateY(0) scale(1);
}
#back-to-top:hover {
  transform: translateY(-3px) scale(1.08) !important;
  box-shadow: 0 12px 28px rgba(14,27,61,.34);
}
#back-to-top svg { width: 22px; height: 22px; flex-shrink: 0; }

/* ── Hero Ken-Burns (applied inline by JS) ───────────────── */
[class*="-hero__media"],
[class*="-hero__bg"],
.inner-hero__bg {
  animation: aHeroBg 10s ease-out both;
}

/* ── Hero content entrance ───────────────────────────────── */
[class*="-hero__content"],
.inner-hero__content {
  animation: aFadeUp .8s .1s cubic-bezier(.22,.68,0,1.1) both;
}

/* ── Card hover — gentle lift ────────────────────────────── */
.pillar-card, .activity-box,
.about-panel, .about-pillar-card, .about-recognition-card, .about-fact,
.admissions-highlight,
.admissions-procedure__steps article,
.achievement-sports__results article,
.club-initiative,
.contact-contact__item, .contact-form-card,
.dept-support__grid > article,
.grievance-about-card, .grievance-policy, .grievance-step,
.placement-support, .placement-training__item,
.student-life-activity, .student-life-campus-row,
.student-life-culture-row, .student-life-leadership-row,
.programme-directory__grid > *,
.authority-entry, .authority-intro {
  transition:
    transform  .28s cubic-bezier(.25,.46,.45,.94),
    box-shadow .28s ease !important;
  will-change: transform;
}
.pillar-card:hover, .activity-box:hover,
.about-panel:hover, .about-pillar-card:hover,
.about-recognition-card:hover, .about-fact:hover,
.admissions-highlight:hover,
.admissions-procedure__steps article:hover,
.achievement-sports__results article:hover,
.club-initiative:hover,
.contact-contact__item:hover, .contact-form-card:hover,
.dept-support__grid > article:hover,
.grievance-about-card:hover, .grievance-policy:hover, .grievance-step:hover,
.placement-support:hover,
.placement-training__item:hover,
.student-life-activity:hover, .student-life-campus-row:hover,
.student-life-culture-row:hover, .student-life-leadership-row:hover,
.programme-directory__grid > *:hover,
.authority-entry:hover {
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(14,27,61,.13) !important;
}

.achievement-academic__feature,
.achievement-process__timeline article,
.dept-careers__panel,
.facilities-amenity,
.facilities-labs__feature,
.facilities-lab-row,
.facilities-learning__item,
.management-chairman,
.management-founder,
.management-principal,
.placement-overview__feature,
.vm-card {
  will-change: auto;
}

.achievement-academic__feature:hover,
.achievement-process__timeline article:hover,
.dept-careers__panel:hover,
.facilities-amenity:hover,
.facilities-labs__feature:hover,
.facilities-lab-row:hover,
.facilities-learning__item:hover,
.management-chairman:hover,
.management-founder:hover,
.management-principal:hover,
.placement-overview__feature:hover,
.vm-card:hover {
  transform: none !important;
  box-shadow: none !important;
}

/* ── Image hover zoom — contained inside overflow:hidden ─── */
.about-image-card, .split-image, .about__media,
.dept-image, .achievement-academic__media, .achievement-competitions__media,
.approval-government__media, .approval-affiliation__media,
.club-initiative__media, .club-overview__visual,
.facilities-campus__media, .facilities-library__media,
.facilities-labs__feature-media, .facilities-lab-row__media,
.facilities-learning__item figure, .facilities-amenity__media,
.grievance-about__media, .grievance-policies__image,
.management-founder__visual,
.management-principal__visual, .student-life-gallery__item,
.student-life-campus__media, .student-life-culture__media,
.student-life-leadership__media,
.placement-overview__media, .placement-industry__media,
.placement-entrepreneurship__visual,
.achievement-student__item, .campus-gallery figure,
[class*="-gallery"] figure {
  overflow: hidden;
}
.about-image-card img, .split-image img, .about__media img,
.dept-image img, .achievement-academic__media img, .achievement-competitions__media img,
.approval-government__media img, .approval-affiliation__media img,
.club-initiative__media img, .club-overview__visual img,
.facilities-campus__media img, .facilities-library__media img,
.facilities-labs__feature-media img, .facilities-lab-row__media img,
.facilities-learning__item figure img, .facilities-amenity__media img,
.grievance-about__media img, .grievance-policies__image img,
.management-founder__visual img,
.management-principal__visual img, .student-life-gallery__item img,
.student-life-campus__media img, .student-life-culture__media img,
.student-life-leadership__media img,
.placement-overview__media img, .placement-industry__media img,
.placement-entrepreneurship__visual img,
.achievement-student__item img, .campus-gallery figure img,
[class*="-gallery"] figure img {
  transition: transform .55s cubic-bezier(.25,.46,.45,.94) !important;
  will-change: transform;
}
.about-image-card:hover img, .split-image:hover img, .about__media:hover img,
.dept-image:hover img, .achievement-academic__media:hover img,
.achievement-competitions__media:hover img,
.approval-government__media:hover img, .approval-affiliation__media:hover img,
.club-initiative__media:hover img, .club-overview__visual:hover img,
.facilities-campus__media:hover img,
.facilities-library__media:hover img, .facilities-labs__feature-media:hover img,
.facilities-lab-row__media:hover img, .facilities-learning__item figure:hover img,
.facilities-amenity__media:hover img,
.grievance-about__media:hover img, .grievance-policies__image:hover img,
.management-founder__visual:hover img, .management-principal__visual:hover img,
.student-life-gallery__item:hover img,
.student-life-campus__media:hover img, .student-life-culture__media:hover img,
.student-life-leadership__media:hover img,
.placement-overview__media:hover img, .placement-industry__media:hover img,
.placement-entrepreneurship__visual:hover img,
.achievement-student__item:hover img,
.campus-gallery figure:hover img, [class*="-gallery"] figure:hover img {
  transform: scale(1.05) !important;
}

/* ── Button ──────────────────────────────────────────────── */
.btn {
  transition:
    transform .2s cubic-bezier(.25,.46,.45,.94),
    box-shadow .2s ease,
    background .2s ease,
    filter .2s ease !important;
}
.btn:hover  { transform: translateY(-3px) scale(1.02) !important; }
.btn:active { transform: translateY(-1px) scale(.99) !important; }

/* ── Form fields ─────────────────────────────────────────── */
input, select, textarea {
  transition: border-color .22s ease, box-shadow .22s ease, transform .18s ease !important;
}
input:focus, select:focus, textarea:focus {
  transform: translateY(-1px);
  box-shadow: 0 0 0 3px rgba(22,184,166,.16) !important;
}

/* ── Table row hover ─────────────────────────────────────── */
table tbody tr { transition: background .18s ease; }
table tbody tr:hover { background: rgba(245,166,35,.06); }

/* ── Logo hover ──────────────────────────────────────────── */
[class*="__logos"] img,
.achievement-placement__logos img,
.achievement-industry__logos img,
.placement-recruiters__logos img {
  transition: transform .25s cubic-bezier(.25,.46,.45,.94), filter .25s ease !important;
}
[class*="__logos"] img:hover,
.achievement-placement__logos img:hover,
.achievement-industry__logos img:hover,
.placement-recruiters__logos img:hover {
  transform: scale(1.08) !important;
  filter: saturate(1.1) !important;
}

/* ── Reduced motion ──────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body.inner-page main, body[class*="-page"] main,
  [class*="-hero__media"], [class*="-hero__bg"],
  [class*="-hero__content"], .inner-hero__bg, .inner-hero__content {
    animation: none !important;
  }
  .a-fade-up, .a-fade-down, .a-fade-left, .a-fade-right,
  .a-fade-in, .a-zoom-in, .a-zoom-up, .a-bounce-in {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
  .a-delay-1,.a-delay-2,.a-delay-3,.a-delay-4,
  .a-delay-5,.a-delay-6,.a-delay-7 { transition-delay: 0s !important; }
  #scroll-progress-bar { display: none; }
}