/* === School Dashboard — Disney Animation Principles === */
/* Squash & Stretch, Anticipation, Follow Through, Stagger, Organic Easing */

/* === EASING FUNCTIONS (Golden Sets) === */
/* appear: fast start, smooth decelerate */
/* spring: overshoot then settle */
/* soft: gentle throughout */

:root {
  --ease-appear: cubic-bezier(0.43, 0.13, 0.23, 0.96);
  --ease-spring: cubic-bezier(0.68, -0.6, 0.32, 1.6);
  --ease-soft: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* === SCROLL REVEAL with Stagger === */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.5s var(--ease-appear), transform 0.5s var(--ease-appear);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Stagger cascade — каждый следующий позже */
.reveal:nth-child(1) { transition-delay: 0s; }
.reveal:nth-child(2) { transition-delay: 0.06s; }
.reveal:nth-child(3) { transition-delay: 0.12s; }
.reveal:nth-child(4) { transition-delay: 0.18s; }
.reveal:nth-child(5) { transition-delay: 0.24s; }
.reveal:nth-child(6) { transition-delay: 0.3s; }
.reveal:nth-child(7) { transition-delay: 0.36s; }
.reveal:nth-child(8) { transition-delay: 0.42s; }

/* === PAGE ENTER — fast in, soft land === */
.page-enter {
  animation: pageEnter 0.6s var(--ease-appear) forwards;
}
@keyframes pageEnter {
  from { opacity: 0; transform: translateY(10px) scale(0.99); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* === SQUASH AND STRETCH BUTTONS === */
/* Disney principle: objects deform on impact */
.spring-btn {
  transition: transform 0.25s var(--ease-spring);
  will-change: transform;
}
.spring-btn:hover {
  /* Anticipation: slight stretch up before action */
  transform: scaleX(0.98) scaleY(1.03);
}
.spring-btn:active {
  /* Squash: flatten on press, like soft material */
  transform: scaleX(1.08) scaleY(0.92);
  transition-duration: 0.08s;
  transition-timing-function: ease-out;
}

/* === CARD INTERACTIONS === */
/* Follow Through: card settles after hover */
.glow-hover {
  transition: transform 0.4s var(--ease-soft), box-shadow 0.4s var(--ease-soft), border-color 0.4s ease;
}
.glow-hover:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
  border-color: rgba(99, 102, 241, 0.1);
}

/* Card lift with anticipation */
.card-lift {
  transition: transform 0.35s var(--ease-bounce), box-shadow 0.35s var(--ease-soft);
}
.card-lift:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px rgba(0, 0, 0, 0.2);
}

/* === HEARTBEAT PULSE (for notifications, impulse) === */
@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  15% { transform: scale(1.08); }
  30% { transform: scale(0.97); }
  45% { transform: scale(1.04); }
  60% { transform: scale(1); }
}
.pulse-heart {
  animation: heartbeat 1.8s var(--ease-soft) infinite;
}

/* === SOFT BREATHE (for ambient elements) === */
@keyframes breathe {
  0%, 100% { transform: scale(1); opacity: 0.7; }
  50% { transform: scale(1.02); opacity: 1; }
}
.breathe {
  animation: breathe 3.5s var(--ease-soft) infinite;
}

/* === LEVITATION (for artifacts, badges) === */
@keyframes levitate {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}
.levitate {
  animation: levitate 3s var(--ease-soft) infinite;
}

/* === ARTIFACT HOVER — spring with glow === */
.artifact-card {
  transition: transform 0.3s var(--ease-spring), box-shadow 0.3s var(--ease-soft);
}
.artifact-card:hover {
  transform: translateY(-4px) scale(1.06);
  box-shadow: 0 8px 20px rgba(99, 102, 241, 0.15);
}
.artifact-card:active {
  transform: scaleX(1.06) scaleY(0.94);
  transition-duration: 0.1s;
}

/* === TAB SWITCH — slide + fade === */
.tab-content {
  animation: tabSlide 0.35s var(--ease-appear) forwards;
}
@keyframes tabSlide {
  from { opacity: 0; transform: translateX(6px); }
  to { opacity: 1; transform: translateX(0); }
}

/* === COUNTER POP (numbers appearing) === */
.counter-enter {
  animation: counterPop 0.4s var(--ease-spring) forwards;
}
@keyframes counterPop {
  from { opacity: 0; transform: scale(0.6); }
  70% { transform: scale(1.08); }
  to { opacity: 1; transform: scale(1); }
}

/* === IMPULSE WAVE (from parent's support) === */
@keyframes impulseWave {
  0% { opacity: 0.8; transform: scale(0.8); }
  100% { opacity: 0; transform: scale(1.6); }
}
@keyframes impulsePulse {
  0%, 100% { opacity: 0.6; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.05); }
}

/* === SMOOTH SCROLLBAR === */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.15); }

/* === FOCUS GLOW (inputs) === */
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.15);
  transition: box-shadow 0.2s var(--ease-soft);
}