/* ══════════════════════════════════════════════════════════
   AutoLinker Motion System
   Spring-based, purposeful, respects prefers-reduced-motion.
   ══════════════════════════════════════════════════════════ */

:root {
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 0.15s;
  --dur: 0.3s;
  --dur-slow: 0.6s;
}

@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;
  }
}
html.motion-reduce *, html.motion-reduce *::before, html.motion-reduce *::after {
  animation-duration: 0.01ms !important;
  transition-duration: 0.01ms !important;
}

/* ── Buttons: gentle scale + ripple + loading/success states ── */
.btn { position: relative; overflow: hidden; transition: transform var(--dur-fast) var(--ease-out), background var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), opacity var(--dur) var(--ease-out); }
.btn:active { transform: scale(0.97); }
.btn:hover { transform: translateY(-1px); }
.btn .al-ripple { position: absolute; border-radius: 50%; background: rgba(255,255,255,0.55); transform: scale(0); animation: alRipple 0.6s var(--ease-out); pointer-events: none; }
.btn-outline .al-ripple, .btn-ghost .al-ripple { background: rgba(26,39,68,0.15); }
@keyframes alRipple { to { transform: scale(3); opacity: 0; } }
.btn.is-loading { pointer-events: none; opacity: 0.85; }
.btn-spinner { display: inline-block; width: 13px; height: 13px; border: 2px solid rgba(255,255,255,0.4); border-top-color: currentColor; border-radius: 50%; animation: alSpin 0.7s linear infinite; margin-right: 6px; vertical-align: -2px; }
@keyframes alSpin { to { transform: rotate(360deg); } }
.pulse-cta { animation: alPulse 2.6s var(--ease-in-out) infinite; }
@keyframes alPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(200,155,60,0.45); } 50% { box-shadow: 0 0 0 9px rgba(200,155,60,0); } }

/* ── Cards: lift on hover ── */
.card-hover, .job-card, .pick-card, .feat-card, .role-card, .doc-item, .onboard-step, .person-row {
  transition: transform var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
.card-hover:hover, .job-card:hover { transform: translateY(-4px); box-shadow: 0 14px 34px rgba(26,39,68,0.12); }

/* ── Scroll reveal ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease-out), transform 0.7s var(--ease-out); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-scale { opacity: 0; transform: scale(0.94); transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out); }
.reveal-scale.visible { opacity: 1; transform: scale(1); }

/* ── Nav ── */
.nav-underline { position: relative; }
.nav-underline::after { content:''; position:absolute; left:0; bottom:-4px; width:0; height:2px; background: var(--gold, #c89b3c); transition: width var(--dur) var(--ease-out); }
.nav-underline:hover::after, .nav-underline.active::after { width: 100%; }

/* ── Skeleton shimmer ── */
.skeleton { position: relative; overflow: hidden; background: #eef1f5; border-radius: 6px; color: transparent !important; }
.skeleton::after { content:''; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent); animation: alShimmer 1.4s infinite; }
@keyframes alShimmer { 100% { transform: translateX(100%); } }
.skeleton-fade-out { animation: alFadeOut 0.3s var(--ease-out) forwards; }
.skeleton-fade-in { animation: alFadeIn 0.4s var(--ease-out); }
@keyframes alFadeOut { to { opacity: 0; } }
@keyframes alFadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }

/* ── Toggle switch ── */
.al-switch { position:relative; width:42px; height:24px; border-radius:12px; background: #d8dde6; transition: background var(--dur) var(--ease-out); cursor:pointer; display:inline-block; flex-shrink:0; }
.al-switch::after { content:''; position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,0.2); transition: transform var(--dur) var(--ease-spring); }
.al-switch.on { background: var(--navy, #1a2744); }
.al-switch.on::after { transform: translateX(18px); }

/* ── Floating gradient blobs ── */
.al-blob { position:absolute; border-radius:50%; filter:blur(60px); opacity:0.32; animation: alFloatBlob 18s ease-in-out infinite; pointer-events:none; z-index:0; }
@keyframes alFloatBlob { 0%,100% { transform: translate(0,0) scale(1); } 33% { transform: translate(30px,-40px) scale(1.08); } 66% { transform: translate(-25px,25px) scale(0.95); } }

/* ── Waves ── */
.al-wave-wrap { position:absolute; bottom:0; left:0; width:100%; overflow:hidden; line-height:0; z-index:0; pointer-events:none; }
.al-wave-svg { width:200%; animation: alWaveDrift 16s linear infinite; }
@keyframes alWaveDrift { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ── Progress rings / bars ── */
.progress-ring__fg { transition: stroke-dashoffset 1.3s var(--ease-out); }
.al-progress-bar { height: 8px; border-radius: 4px; background: #e4e8f0; overflow: hidden; }
.al-progress-bar__fill { height: 100%; border-radius: 4px; width: 0%; transition: width 1.1s var(--ease-out); }

/* ── Tilt ── */
.tilt-card { transition: transform 0.15s var(--ease-out); transform-style: preserve-3d; will-change: transform; }

/* ── Checkmark draw ── */
.al-check-draw { stroke-dasharray: 40; stroke-dashoffset: 40; animation: alCheckDraw 0.5s var(--ease-out) forwards; }
@keyframes alCheckDraw { to { stroke-dashoffset: 0; } }

/* ── Expiry pulse ── */
.expiry-pulse { animation: alExpiryPulse 1.8s var(--ease-in-out) infinite; }
@keyframes alExpiryPulse { 0%,100% { opacity: 1; } 50% { opacity: 0.45; } }

/* ── Badge bounce ── */
.al-badge-bounce { animation: alBadgeBounce 0.5s var(--ease-spring); }
@keyframes alBadgeBounce { 0% { transform: scale(0); } 60% { transform: scale(1.2); } 100% { transform: scale(1); } }

/* ── Page fade-in ── */
.al-page-enter { animation: alPageEnter 0.45s var(--ease-out); }
@keyframes alPageEnter { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* ── Section-view swap (dashboards) ── */
.section-view { animation: none; }
.section-view.active { animation: alPageEnter 0.4s var(--ease-out); }

/* ── Mobile menu ── */
.al-mobile-menu { transform: translateY(-12px); opacity:0; pointer-events:none; transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.al-mobile-menu.open { transform: translateY(0); opacity:1; pointer-events:auto; }

/* ── Table row stagger ── */
tbody tr { animation: alFadeIn 0.35s var(--ease-out) backwards; }

/* ── Form focus glow ── */
.form-control, input[type=text], input[type=email], input[type=password], textarea, select {
  transition: border-color var(--dur) var(--ease-out), box-shadow var(--dur) var(--ease-out);
}
.form-control:focus, input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--navy, #1a2744) !important;
  box-shadow: 0 0 0 3px rgba(26,39,68,0.1);
}
.al-field-error { animation: alFadeIn 0.3s var(--ease-out); color: #ef4444; font-size: 12px; margin-top: 4px; }

/* ── Inline emoji-replacement icons ── */
.emoji-icon { display: inline-flex; align-items: center; justify-content: center; width: 1em; height: 1em; vertical-align: -0.15em; }
.emoji-icon svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.emoji-icon.filled svg { fill: currentColor; stroke: none; }