/* =======================================================
   TrueMatch — Global Animations
   One file shared by all pages (landing, auth, dashboard, etc.)
   ======================================================= */

:root {
  --tm-anim-fast: 150ms;
  --tm-anim-normal: 280ms;
  --tm-anim-slow: 760ms;
  --tm-anim-ease-soft: cubic-bezier(0.22, 0.61, 0.36, 1);
  --tm-anim-ease-lift: cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---------------- PAGE FADE-IN (global) ---------------- */

@keyframes pageFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
    filter: blur(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.page-enter {
  animation: pageFadeIn var(--tm-anim-slow) var(--tm-anim-ease-soft) both;
}

/* ---------------- FADE-UP FOR HEADERS / BLOCKS ---------------- */

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

.animate-fade-up {
  animation: fadeUp 0.78s var(--tm-anim-ease-soft) both;
}

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

.animate-fade-slow {
  animation: slowFade 0.92s ease-out both;
}

/* Delay helpers for staggered elements */
.delay-1 { animation-delay: 0.12s; }
.delay-2 { animation-delay: 0.22s; }
.delay-3 { animation-delay: 0.34s; }
.delay-4 { animation-delay: 0.46s; }

/* ---------------- HOVER HELPERS ---------------- */

.anim-smooth {
  transition:
    opacity var(--tm-anim-normal) var(--tm-anim-ease-soft),
    transform var(--tm-anim-normal) var(--tm-anim-ease-soft),
    box-shadow var(--tm-anim-normal) var(--tm-anim-ease-soft),
    background-color var(--tm-anim-normal) var(--tm-anim-ease-soft),
    border-color var(--tm-anim-normal) var(--tm-anim-ease-soft),
    filter var(--tm-anim-normal) var(--tm-anim-ease-soft);
}

.hover-lift {
  transform: translateY(0);
}
.hover-lift:hover {
  transform: translateY(-3px);
}

.hover-pop {
  transform: translateY(0) scale(1);
}
.hover-pop:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 0 0 1px rgba(100, 233, 238, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.34);
}

/* ---------------- REDUCED MOTION SUPPORT ---------------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
/* =========================================================
   PHASE 1 FINAL WAVE — SHARED MOTION NORMALIZATION
   Append-only final tuning
   ========================================================= */

/* Shared motion tokens extension */
:root {
  --tm-anim-ease-snappy: cubic-bezier(0.22, 1, 0.36, 1);
}

/* Make helper classes slightly calmer and more premium */
.anim-smooth {
  transition:
    opacity var(--tm-anim-normal) var(--tm-anim-ease-soft),
    transform var(--tm-anim-normal) var(--tm-anim-ease-snappy),
    box-shadow var(--tm-anim-normal) var(--tm-anim-ease-soft),
    background-color var(--tm-anim-normal) var(--tm-anim-ease-soft),
    border-color var(--tm-anim-normal) var(--tm-anim-ease-soft),
    filter var(--tm-anim-normal) var(--tm-anim-ease-soft);
}

.hover-lift:hover {
  transform: translateY(-3px);
}

.hover-pop:hover {
  transform: translateY(-2px) scale(1.015);
  box-shadow:
    0 0 0 1px rgba(100, 233, 238, 0.16),
    0 12px 28px rgba(0, 0, 0, 0.34);
}

/* Shared entrance helpers for cards/panels if needed later */
@keyframes tmSoftRise {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.tm-soft-rise {
  animation: tmSoftRise 0.56s var(--tm-anim-ease-soft) both;
}

/* Prevent hover-heavy feel on touch devices */
@media (hover: none) and (pointer: coarse) {
  .hover-lift:hover,
  .hover-pop:hover {
    transform: none;
    box-shadow: none;
  }
}