@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}

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

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

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

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

@keyframes scaleIn {
  from { opacity: 0; transform: scale(0.90); }
  to   { opacity: 1; transform: scale(1); }
}

@keyframes scaleOut {
  from { opacity: 1; transform: scale(1); }
  to   { opacity: 0; transform: scale(0.90); }
}

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

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

@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-100%); }
  to   { opacity: 1; transform: translateX(0); }
}

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

/* ─── Shake (Error State) ─────────────────────────────────────────────────────── */

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  15%       { transform: translateX(-8px); }
  30%       { transform: translateX(7px); }
  45%       { transform: translateX(-6px); }
  60%       { transform: translateX(5px); }
  75%       { transform: translateX(-4px); }
  90%       { transform: translateX(3px); }
}

/* ─── Pulse ────────────────────────────────────────────────────────────────────── */

@keyframes pulse {
  0%, 100% { transform: scale(1); opacity: 1; }
  50%       { transform: scale(1.05); opacity: 0.85; }
}

@keyframes pulseSlow {
  0%, 100% { transform: scale(1); }
  50%       { transform: scale(1.03); }
}

/* ─── Spin ─────────────────────────────────────────────────────────────────────── */

@keyframes spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* ─── Float ────────────────────────────────────────────────────────────────────── */

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

@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  33%       { transform: translateY(-8px) rotate(3deg); }
  66%       { transform: translateY(-4px) rotate(-2deg); }
}

/* ─── Shimmer (Skeleton) ──────────────────────────────────────────────────────── */

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

/* ─── Gradient Shift ──────────────────────────────────────────────────────────── */

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

/* ─── Marquee Scroll ──────────────────────────────────────────────────────────── */

@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── Typewriter Cursor ───────────────────────────────────────────────────────── */

@keyframes blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ─── Number Counter ──────────────────────────────────────────────────────────── */

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

/* ─── Hero Particle / Geometric ──────────────────────────────────────────────── */

@keyframes heroFloat1 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  25%       { transform: translate(10px, -15px) rotate(5deg); }
  50%       { transform: translate(20px, -5px) rotate(10deg); }
  75%       { transform: translate(5px, -20px) rotate(3deg); }
}

@keyframes heroFloat2 {
  0%, 100% { transform: translate(0, 0) rotate(0deg); }
  33%       { transform: translate(-12px, 10px) rotate(-8deg); }
  66%       { transform: translate(8px, 15px) rotate(4deg); }
}

@keyframes heroFloat3 {
  0%, 100% { transform: translate(0, 0) scale(1); }
  40%       { transform: translate(15px, -10px) scale(1.05); }
  80%       { transform: translate(-8px, 12px) scale(0.97); }
}

/* ─── Loader Progress ─────────────────────────────────────────────────────────── */

@keyframes loaderProgress {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(200%); }
}

/* ─── Flip Card ────────────────────────────────────────────────────────────────── */

@keyframes flipIn {
  from { transform: rotateY(-90deg); opacity: 0; }
  to   { transform: rotateY(0deg);   opacity: 1; }
}

@keyframes flipOut {
  from { transform: rotateY(0deg);   opacity: 1; }
  to   { transform: rotateY(90deg);  opacity: 0; }
}

/* ─── Ripple ────────────────────────────────────────────────────────────────────── */

@keyframes ripple {
  from { transform: scale(0); opacity: 0.5; }
  to   { transform: scale(2.5); opacity: 0; }
}

/* ─── Wave ──────────────────────────────────────────────────────────────────────── */

@keyframes wave {
  0%, 100% { transform: scaleY(1); }
  50%       { transform: scaleY(0.5); }
}

/* ─── Bounce ────────────────────────────────────────────────────────────────────── */

@keyframes bounce {
  0%, 100% { transform: translateY(0); animation-timing-function: ease-in; }
  50%       { transform: translateY(-16px); animation-timing-function: ease-out; }
}

/* ─── Calendar Highlight ─────────────────────────────────────────────────────── */

@keyframes highlightPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* ─── Particle Network (Canvas) ───────────────────────────────────────────────── */

@keyframes particleDrift {
  0%, 100% { opacity: 0.3; }
  50%       { opacity: 0.8; }
}

/* ─── Attention Seekers ───────────────────────────────────────────────────────── */

@keyframes tada {
  0%   { transform: scale(1) rotate(0); }
  10%  { transform: scale(0.9) rotate(-3deg); }
  20%  { transform: scale(0.9) rotate(-3deg); }
  30%  { transform: scale(1.1) rotate(3deg); }
  40%  { transform: scale(1.1) rotate(-3deg); }
  50%  { transform: scale(1.1) rotate(3deg); }
  60%  { transform: scale(1.1) rotate(-3deg); }
  70%  { transform: scale(1.1) rotate(3deg); }
  80%  { transform: scale(1.1) rotate(-3deg); }
  90%  { transform: scale(1.1) rotate(3deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ─── Page Transition ─────────────────────────────────────────────────────────── */

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

/* ─── Utility Animation Classes ───────────────────────────────────────────────── */

/* Fade */
.fade-in       { animation: fadeIn      0.4s ease both; }
.fade-out      { animation: fadeOut     0.2s ease both; }
.fade-in-up    { animation: fadeInUp    0.5s ease both; }
.fade-in-down  { animation: fadeInDown  0.5s ease both; }
.fade-in-left  { animation: fadeInLeft  0.5s ease both; }
.fade-in-right { animation: fadeInRight 0.5s ease both; }

/* Scale */
.scale-in  { animation: scaleIn  0.3s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.scale-out { animation: scaleOut 0.2s ease both; }

/* Slide */
.slide-in-right { animation: slideInRight 0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide-in-left  { animation: slideInLeft  0.35s cubic-bezier(0.22, 1, 0.36, 1) both; }
.slide-out-right{ animation: slideOutRight 0.25s ease both; }

/* Rotating */
.spin          { animation: spin 1s linear infinite; }
.spin-slow     { animation: spin 3s linear infinite; }

/* Float */
.float         { animation: float 3s ease-in-out infinite; }
.float-slow    { animation: floatSlow 5s ease-in-out infinite; }
.float-delay-1 { animation-delay: 0.5s; }
.float-delay-2 { animation-delay: 1.0s; }
.float-delay-3 { animation-delay: 1.5s; }

/* Pulse */
.pulse         { animation: pulse     2s ease-in-out infinite; }
.pulse-slow    { animation: pulseSlow 4s ease-in-out infinite; }

/* Shake */
.shake         { animation: shake 0.5s ease; }

/* Toast */
.toast-exit    { animation: slideOutRight 0.3s ease both; }

/* Page Enter */
.page-enter    { animation: pageEnter 0.5s ease both; }

/* Bounce */
.bounce        { animation: bounce 1s ease infinite; }

/* ─── Stagger Delays ──────────────────────────────────────────────────────────── */
.stagger-1 { animation-delay: 0.05s; }
.stagger-2 { animation-delay: 0.10s; }
.stagger-3 { animation-delay: 0.15s; }
.stagger-4 { animation-delay: 0.20s; }
.stagger-5 { animation-delay: 0.25s; }
.stagger-6 { animation-delay: 0.30s; }
.stagger-7 { animation-delay: 0.35s; }
.stagger-8 { animation-delay: 0.40s; }

/* ─── Hero Section Specifics ──────────────────────────────────────────────────── */
.hero-geo-1 { animation: heroFloat1 8s ease-in-out infinite; }
.hero-geo-2 { animation: heroFloat2 11s ease-in-out infinite; }
.hero-geo-3 { animation: heroFloat3 9s ease-in-out infinite; }
.hero-geo-4 { animation: heroFloat1 13s ease-in-out infinite reverse; }
.hero-geo-5 { animation: heroFloat2 7s ease-in-out infinite reverse; }

/* ─── Card Hover Effects (Enhanced) ──────────────────────────────────────────── */
.card-hover-lift {
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
}
.card-hover-lift:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-xl);
}

/* Flip Card */
.flip-card {
  perspective: 1000px;
  height: 280px;
}

.flip-card-inner {
  width: 100%;
  height: 100%;
  position: relative;
  transform-style: preserve-3d;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  border-radius: var(--radius-xl);
  overflow: hidden;
}

.flip-card-back {
  transform: rotateY(180deg);
  background: linear-gradient(135deg, var(--accent-primary), var(--accent-dark));
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--space-xl);
  text-align: center;
}

/* ─── Lightbox Animation ──────────────────────────────────────────────────────── */
@keyframes lightboxOpen {
  from {
    opacity: 0;
    transform: scale(0.85) translateY(20px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.lightbox-img-enter {
  animation: lightboxOpen 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* ─── Calendar Pop ────────────────────────────────────────────────────────────── */
.calendar-event-dot {
  animation: pulse 2s ease-in-out infinite;
}

.calendar-day.has-event:not(.selected):hover {
  animation: highlightPop 0.3s ease;
}

/* ─── Notice Bar Marquee ──────────────────────────────────────────────────────── */
.marquee-track {
  animation: marquee 40s linear infinite;
}

.marquee-wrapper:hover .marquee-track {
  animation-play-state: paused;
}

/* ─── Stats Counter Pop ───────────────────────────────────────────────────────── */
.stat-number {
  animation: countUp 0.5s ease;
}

/* ─── Reduced Motion ──────────────────────────────────────────────────────────── */
@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 {
    opacity: 1;
    transform: none;
    transition: none;
  }

  .marquee-track {
    animation: none;
    transform: none;
  }
}

/* ─── Print Styles ────────────────────────────────────────────────────────────── */
@media print {
  .navbar, .sidebar, .panel-topbar, .btn, .modal-overlay,
  #toast-container, #back-to-top, .no-print {
    display: none !important;
  }

  body {
    background: #fff;
    color: #000;
    font-size: 12pt;
  }

  .print-only { display: block !important; }

  /* Student ID Card Print */
  .id-card-print {
    border: 2px solid #1B4332;
    border-radius: 12px;
    padding: 24px;
    max-width: 340px;
    margin: 0 auto;
    font-family: Arial, sans-serif;
  }

  /* Result Sheet Print */
  .result-sheet {
    max-width: 600px;
    margin: 0 auto;
  }

  .result-table th,
  .result-table td {
    border: 1px solid #333;
    padding: 6px 10px;
  }
}