/* =============================================================================
   ANIMATIONS.CSS — Smooth scroll-triggered reveals + UI transitions
   Ilahia Polytechnic College
============================================================================= */

/* ── Easing tokens ──────────────────────────────────────────────────────────── */
:root {
  --ease-out-expo:   cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out-quart:  cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-back:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out:     cubic-bezier(0.4, 0, 0.2, 1);
  --ease-spring:     cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── Keyframes ──────────────────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

@keyframes fadeLeft {
  from { opacity: 0; transform: translateX(48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes fadeRight {
  from { opacity: 0; transform: translateX(-48px); }
  to   { opacity: 1; transform: translateX(0); }
}

@keyframes scaleUp {
  from { opacity: 0; transform: scale(0.85); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleDown {
  from { opacity: 0; transform: scale(1.1); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50%       { transform: translateY(-10px); }
}

@keyframes pulseRing {
  0%   { transform: scale(0.85); opacity: 0.7; }
  100% { transform: scale(1.7);  opacity: 0; }
}

@keyframes shimmer {
  0%   { background-position: -600px 0; }
  100% { background-position:  600px 0; }
}

@keyframes counterPop {
  from { transform: translateY(8px) scale(0.95); opacity: 0; }
  to   { transform: translateY(0)   scale(1);    opacity: 1; }
}

@keyframes heroEntrance {
  0%   { opacity: 0; transform: translateY(24px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0)    scale(1); }
}

@keyframes scrollBounce {
  0%, 100% { transform: translateY(0); opacity: 0.6; }
  50%       { transform: translateY(8px); opacity: 1; }
}

@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

@keyframes borderGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(201, 162, 39, 0); }
  50%       { box-shadow: 0 0 0 6px rgba(201, 162, 39, 0.15); }
}

/* ═══════════════════════════════════════════════════════════════════════════════
   REVEAL SYSTEM
   Elements start invisible. JS adds .visible when they enter the viewport.
   This is scroll-triggered via IntersectionObserver — no scroll listeners.
═══════════════════════════════════════════════════════════════════════════════ */

/* ── Initial hidden state ───────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  will-change: opacity, transform;
  transition:
    opacity  0.7s var(--ease-out-expo),
    transform 0.7s var(--ease-out-expo);
}

/* Direction variants — starting positions */
.reveal.fade-up    { transform: translateY(44px); }
.reveal.fade-down  { transform: translateY(-24px); }
.reveal.fade-left  { transform: translateX(52px); }
.reveal.fade-right { transform: translateX(-52px); }
.reveal.scale-in   { transform: scale(0.88); }
.reveal.scale-up   { transform: scale(0.92) translateY(20px); }
.reveal.fade-in    { transform: none; }
.reveal.fade-up-sm { transform: translateY(24px); }

/* Speed modifiers */
.reveal.reveal--fast  { transition-duration: 0.45s; }
.reveal.reveal--slow  { transition-duration: 1s; }
.reveal.reveal--xslow { transition-duration: 1.4s; }

/* Delay utilities */
.reveal.delay-1 { transition-delay: 0.1s; }
.reveal.delay-2 { transition-delay: 0.2s; }
.reveal.delay-3 { transition-delay: 0.3s; }
.reveal.delay-4 { transition-delay: 0.45s; }
.reveal.delay-5 { transition-delay: 0.6s; }

/* ── Visible (triggered) state ──────────────────────────────────────────────── */
.reveal.visible {
  opacity: 1;
  transform: none !important;
}

/* ── Stagger container ──────────────────────────────────────────────────────── */
.stagger-children > * {
  opacity: 0;
  transform: translateY(28px);
  will-change: opacity, transform;
  transition:
    opacity   0.55s var(--ease-out-expo),
    transform 0.55s var(--ease-out-expo);
}

/* Staggered delays for up to 8 children */
.stagger-children.visible > *:nth-child(1) { transition-delay: 0.04s; }
.stagger-children.visible > *:nth-child(2) { transition-delay: 0.10s; }
.stagger-children.visible > *:nth-child(3) { transition-delay: 0.16s; }
.stagger-children.visible > *:nth-child(4) { transition-delay: 0.22s; }
.stagger-children.visible > *:nth-child(5) { transition-delay: 0.28s; }
.stagger-children.visible > *:nth-child(6) { transition-delay: 0.34s; }
.stagger-children.visible > *:nth-child(7) { transition-delay: 0.40s; }
.stagger-children.visible > *:nth-child(8) { transition-delay: 0.46s; }

.stagger-children.visible > * {
  opacity: 1;
  transform: none;
}

/* Stagger from sides */
.stagger-children.stagger--left > *  { transform: translateX(-32px); }
.stagger-children.stagger--right > * { transform: translateX(32px); }
.stagger-children.stagger--scale > * { transform: scale(0.88); }

/* ═══════════════════════════════════════════════════════════════════════════════
   HERO ENTRANCE ANIMATIONS (CSS keyframes, fire on page load)
═══════════════════════════════════════════════════════════════════════════════ */
.hero__eyebrow { animation: fadeDown  0.6s var(--ease-out-expo) 0.2s  both; }
.hero__title   { animation: heroEntrance 0.75s var(--ease-out-expo) 0.35s both; }
.hero__subtitle{ animation: heroEntrance 0.75s var(--ease-out-expo) 0.50s both; }
.hero__actions { animation: heroEntrance 0.75s var(--ease-out-expo) 0.65s both; }
.hero__badges  { animation: heroEntrance 0.75s var(--ease-out-expo) 0.80s both; }
.hero__side    { animation: fadeLeft    0.85s var(--ease-out-expo) 1.0s  both; }

.hero__scroll-line {
  animation: scrollBounce 2s var(--ease-in-out) infinite;
}

/* ═══════════════════════════════════════════════════════════════════════════════
   HOVER MICRO-INTERACTIONS
═══════════════════════════════════════════════════════════════════════════════ */

/* Cards lift smoothly */
.card,
.mv-card,
.dept-card,
.facility-card,
.faculty-card,
.mgmt-card,
.contact-card {
  transition:
    transform    0.35s var(--ease-out-back),
    box-shadow   0.35s var(--ease-out-quart);
}

.card:hover,
.mv-card:hover,
.facility-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12), 0 6px 12px rgba(0,0,0,0.06);
}

.dept-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 20px 48px rgba(0,0,0,0.14), 0 8px 16px rgba(0,0,0,0.07);
}

.faculty-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.10);
}

.mgmt-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 40px rgba(0,0,0,0.12);
}

/* Image zoom inside cards */
.card-img-zoom { overflow: hidden; }
.card-img-zoom img {
  transition: transform 0.55s var(--ease-out-quart);
}
.card-img-zoom:hover img {
  transform: scale(1.07);
}

/* Gallery item hover */
.gallery-item {
  transition:
    transform  0.35s var(--ease-out-back),
    box-shadow 0.35s var(--ease-out-quart);
}
.gallery-item:hover {
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 12px 32px rgba(0,0,0,0.18);
}

/* Nav link underline slide-in */
.nav-link {
  position: relative;
  overflow: hidden;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--color-primary);
  border-radius: var(--radius-full);
  transition: width 0.25s var(--ease-out-quart), left 0.25s var(--ease-out-quart);
}
.nav-link:hover::after,
.nav-link.active::after {
  width: 60%;
  left: 20%;
}

/* Button press effect */
.btn {
  transition:
    background-color 0.25s var(--ease-out-quart),
    color            0.25s var(--ease-out-quart),
    border-color     0.25s var(--ease-out-quart),
    transform        0.2s  var(--ease-out-back),
    box-shadow       0.25s var(--ease-out-quart);
}
.btn:hover  { transform: translateY(-3px); }
.btn:active { transform: translateY(0) scale(0.97); }

/* Icon box pulse on parent hover */
.card:hover .icon-box,
.mv-card:hover .icon-box {
  animation: borderGlow 1.5s ease infinite;
}

/* Social links */
.social-link {
  transition:
    background-color 0.25s var(--ease-out-quart),
    transform        0.25s var(--ease-out-back);
}
.social-link:hover {
  transform: translateY(-3px) scale(1.1);
}

/* Footer links */
.footer-links a {
  transition: color 0.2s ease, padding-left 0.2s var(--ease-out-quart);
}
.footer-links a:hover {
  padding-left: var(--space-2);
}

/* ── Floating decoration ────────────────────────────────────────────────────── */
.float-badge {
  animation: float 3.5s var(--ease-in-out) infinite;
}

/* ── Page load fade-in ──────────────────────────────────────────────────────── */
.page-enter {
  animation: fadeIn 0.4s ease forwards;
}

/* ── Skeleton loading ───────────────────────────────────────────────────────── */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--color-light-grey) 25%,
    var(--color-mid-grey)   50%,
    var(--color-light-grey) 75%
  );
  background-size: 600px 100%;
  animation: shimmer 1.6s ease-in-out infinite;
  border-radius: var(--radius-md);
}

/* ── Header scroll transition ───────────────────────────────────────────────── */
.site-header {
  transition:
    border-color 0.3s ease,
    box-shadow   0.3s ease,
    background   0.3s ease;
}

/* ── Stats number pop ───────────────────────────────────────────────────────── */
.stat-item__number {
  animation: counterPop 0.4s var(--ease-out-back) both;
}

/* ── Accent line underline on section titles ────────────────────────────────── */
.section-header h2::after {
  width: 0;
  transition: width 0.7s var(--ease-out-expo) 0.25s;
}
.section-header h2.underline-visible::after,
.section-header.visible h2::after {
  width: 56px;
}

/* ── Reduce motion: honour user preference ──────────────────────────────────── */
@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,
  .stagger-children > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .hero__eyebrow,
  .hero__title,
  .hero__subtitle,
  .hero__actions,
  .hero__badges,
  .hero__side {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}