/*
 * Vantage motion.css — pure CSS counterpart to MyMeridi/Command's
 * lib/motion.ts. Same easings, same durations. Loaded site-wide so any
 * EJS view can sprinkle in classes like .hover-lift or .scroll-reveal.
 *
 * Stripe-inspired: small, deliberate, never showy.
 *
 * Add `<link rel="stylesheet" href="/css/motion.css?v=1">` to layout.ejs
 * (or any view that wants the polish) to enable.
 */

/* ─── Easings + durations ─────────────────────────────────────────── */
:root {
  --m-ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --m-ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --m-dur-fast: 150ms;
  --m-dur-base: 250ms;
  --m-dur-slow: 400ms;
}

/* ─── Hover lift — apply to interactive cards/tiles ──────────────── */
.hover-lift {
  transition:
    transform var(--m-dur-base) var(--m-ease-out-expo),
    box-shadow var(--m-dur-base) var(--m-ease-out-expo),
    border-color var(--m-dur-base) var(--m-ease-out-expo);
}
.hover-lift:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}

/* ─── Tap feedback for primary buttons ──────────────────────────── */
.tap-press {
  transition: transform var(--m-dur-fast) var(--m-ease-out-quart);
}
.tap-press:active {
  transform: scale(0.98);
}

/* ─── Scroll-reveal: pure CSS, fires on page load ──────────────── */
@keyframes m-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
.scroll-reveal {
  opacity: 0;
  animation: m-fade-up var(--m-dur-slow) var(--m-ease-out-expo) forwards;
}
.scroll-reveal-d1 { animation-delay: 80ms; }
.scroll-reveal-d2 { animation-delay: 160ms; }
.scroll-reveal-d3 { animation-delay: 240ms; }
.scroll-reveal-d4 { animation-delay: 320ms; }
.scroll-reveal-d5 { animation-delay: 400ms; }

/* ─── Reduced motion respect ─────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .hover-lift, .tap-press, .scroll-reveal { animation: none !important; transition: none !important; transform: none !important; }
}

/* v2.6.0 — smooth focus transition on every form input */
input, textarea, select {
  transition: border-color 200ms var(--m-ease-out-expo),
              box-shadow 200ms var(--m-ease-out-expo);
}
input:focus, textarea:focus, select:focus {
  box-shadow: 0 0 0 3px rgba(46, 61, 74, 0.10);
}

/* ─── v2.5.0 Tier 4: gradient mesh + geo grid in navy/steel ─── */
@keyframes mesh-drift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33%      { transform: translate(3%, -4%) scale(1.08); }
  66%      { transform: translate(-2%, 3%) scale(0.95); }
}
.mesh-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  pointer-events: none;
  will-change: transform;
  animation: mesh-drift 18s var(--m-ease-out-expo) infinite;
}
.geo-grid {
  background-image: radial-gradient(circle, #E5E9EC 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Splash overlay — dot-fill + pulsing icon for login→main transition */
.splash-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  pointer-events: none;
  overflow: hidden;
  background: transparent;
  animation: splash-fadeout 1.4s linear forwards;
}
.splash-overlay .splash-dot {
  position: absolute;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: #2E3D4A;
  transform: scale(0);
  animation: splash-grow 0.55s var(--m-ease-out-expo) forwards;
}
.splash-overlay .splash-icon {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  animation: splash-icon-in 0.5s var(--m-ease-out-expo) 0.4s forwards;
}
.splash-overlay .splash-icon img {
  width: 64px; height: 64px;
  filter: brightness(0) invert(1);
  animation: splash-pulse 1.6s ease-in-out 0.5s infinite;
}
@keyframes splash-grow {
  to { transform: scale(30); }
}
@keyframes splash-icon-in {
  to { opacity: 1; }
}
@keyframes splash-pulse {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50%      { transform: scale(1.08); opacity: 1; }
}
@keyframes splash-fadeout {
  0%, 75% { opacity: 1; }
  100%    { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .splash-overlay { display: none; }
}