/* ============================================================
   Maverix Academy Portal — motion layer
   A small, reusable set of keyframes + utility classes used across
   the whole app (auth screens, dashboard, cards, buttons, lists).
   Everything respects prefers-reduced-motion.
   ============================================================ */

@keyframes mvxFadeInUp   { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } }
@keyframes mvxFadeIn     { from { opacity: 0; } to { opacity: 1; } }
@keyframes mvxScaleIn    { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: scale(1); } }
@keyframes mvxPopIn      { 0% { opacity: 0; transform: scale(.7); } 60% { opacity: 1; transform: scale(1.06); } 100% { transform: scale(1); } }
@keyframes mvxShake      { 10%,90% { transform: translateX(-1px); } 20%,80% { transform: translateX(2px); } 30%,50%,70% { transform: translateX(-4px); } 40%,60% { transform: translateX(4px); } }
@keyframes mvxPulseRing  { 0% { box-shadow: 0 0 0 0 rgba(200,243,29,.45); } 100% { box-shadow: 0 0 0 10px rgba(200,243,29,0); } }
@keyframes mvxSpin       { to { transform: rotate(360deg); } }
@keyframes mvxShimmer    { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
@keyframes mvxProgress   { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mvxFloat      { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes mvxCheckDraw  { from { stroke-dashoffset: 24; } to { stroke-dashoffset: 0; } }

/* Page / card entrance */
.reveal-in { animation: mvxFadeInUp .5s cubic-bezier(.2,.7,.3,1) both; }
.reveal-item { animation: mvxFadeInUp .45s cubic-bezier(.2,.7,.3,1) both; animation-delay: var(--d, 0ms); }
.pop-in { animation: mvxPopIn .35s cubic-bezier(.3,1.4,.4,1) both; }
.fade-in { animation: mvxFadeIn .4s ease both; }
.scale-in { animation: mvxScaleIn .3s ease both; }

/* Feedback */
.shake-in { animation: mvxShake .4s cubic-bezier(.36,.07,.19,.97) both; }
.brand-pulse { animation: mvxPulseRing 2.4s ease-out infinite; border-radius: 50%; }

/* Field error text (used on login/register/forgot/onboarding) */
.field-error {
  display: flex; align-items: center; gap: .35rem;
  color: #d64545; font-size: .74rem; font-weight: 500;
  margin-top: .3rem; animation: mvxFadeIn .2s ease both;
}
.field-error svg { width: 13px; height: 13px; flex-shrink: 0; }
.field.has-error input, .field.has-error textarea, .field.has-error select {
  border-color: #d64545 !important;
}

/* Buttons: press feedback + loading spinner */
.btn-anim { transition: transform .12s ease, box-shadow .12s ease, filter .15s ease; }
.btn-anim:hover { transform: translateY(-1px); filter: brightness(1.04); }
.btn-anim:active { transform: translateY(0) scale(.97); }
.btn.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-loading::after {
  content: ''; position: absolute; top: 50%; left: 50%; width: 16px; height: 16px;
  margin: -8px 0 0 -8px; border-radius: 50%;
  border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor;
  animation: mvxSpin .6s linear infinite; color: inherit;
}

/* Cards & rows: lift on hover throughout the app */
.card, .interest-card, .badge-tile, .list-row {
  transition: transform .18s cubic-bezier(.2,.7,.3,1), box-shadow .18s ease, border-color .18s ease;
}
.card:hover { box-shadow: 0 10px 28px -12px rgba(4,23,21,.18); }
.interest-card:hover, .badge-tile.earned:hover { transform: translateY(-3px); }

/* Course/gift thumbnails: subtle zoom on hover */
.course-thumb, .gift-cover, .interest-card .thumb {
  overflow: hidden;
}
.course-thumb img, .gift-cover, .interest-card .thumb {
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.card:hover .course-thumb img,
.interest-card:hover .thumb,
.card:hover .gift-cover { transform: scale(1.05); }

/* Onboarding step transitions */
.onboard-step { animation: none; }
.onboard-step.active { animation: mvxFadeInUp .35s cubic-bezier(.2,.7,.3,1) both; }
.onboard-steps-track .seg { transition: background-color .3s ease, transform .3s ease; }
.onboard-steps-track .seg.done { animation: mvxScaleIn .3s ease both; }

/* Progress bars (course progress, attendance, etc.) animate in on load */
.progress-bar > span { transform-origin: left; animation: mvxProgress .8s cubic-bezier(.2,.7,.3,1) both; }
.bar-fill, .progress-fill { transform-origin: left; animation: mvxProgress .8s cubic-bezier(.2,.7,.3,1) both; }

/* Badge tiles: earned ones get a soft float */
.badge-tile.earned .badge-icon-wrap { animation: mvxFloat 3s ease-in-out infinite; }

/* Sidebar nav active-state slide */
.sidebar-link { transition: background-color .18s ease, color .18s ease, padding-left .18s ease; }
.sidebar-link:hover { padding-left: 4px; }

/* Alerts slide/fade in */
.alert { animation: mvxFadeInUp .35s cubic-bezier(.2,.7,.3,1) both; }

/* Loading skeleton shimmer, available for any element with .skeleton */
.skeleton {
  background: linear-gradient(90deg, var(--border) 25%, var(--card) 37%, var(--border) 63%);
  background-size: 400px 100%;
  animation: mvxShimmer 1.4s ease-in-out infinite;
}

/* Staggered reveal for grids/lists - JS adds .in-view when scrolled into frame */
.reveal-on-scroll { opacity: 0; transform: translateY(16px); transition: opacity .5s cubic-bezier(.2,.7,.3,1), transform .5s cubic-bezier(.2,.7,.3,1); }
.reveal-on-scroll.in-view { opacity: 1; transform: translateY(0); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}