/* TalentOS — Animations v7 · Google Material Motion · Purposeful & Smooth */

/* ══════════════════════════════════════════════
   KEYFRAMES
══════════════════════════════════════════════ */
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes fadeInUp {
  from { opacity:0; transform:translateY(16px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeInDown {
  from { opacity:0; transform:translateY(-12px); }
  to   { opacity:1; transform:none; }
}
@keyframes fadeInScale {
  from { opacity:0; transform:scale(.94) translateY(6px); }
  to   { opacity:1; transform:scale(1) translateY(0); }
}
@keyframes fadeInLeft {
  from { opacity:0; transform:translateX(-20px); }
  to   { opacity:1; transform:none; }
}
@keyframes fadeInRight {
  from { opacity:0; transform:translateX(20px); }
  to   { opacity:1; transform:none; }
}
@keyframes slideInRight {
  from { opacity:0; transform:translateX(32px); }
  to   { opacity:1; transform:none; }
}
@keyframes slideInUp {
  from { opacity:0; transform:translateY(24px); }
  to   { opacity:1; transform:none; }
}
@keyframes slideInDown {
  from { opacity:0; transform:translateY(-16px); }
  to   { opacity:1; transform:none; }
}
@keyframes popIn {
  0%   { transform:scale(.82); opacity:0; }
  60%  { transform:scale(1.04); opacity:1; }
  100% { transform:scale(1); }
}
@keyframes popInSmall {
  0%   { transform:scale(.90); opacity:0; }
  65%  { transform:scale(1.03); opacity:1; }
  100% { transform:scale(1); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(.96); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes shimmer {
  0%   { background-position:-200% 0; }
  100% { background-position: 200% 0; }
}
@keyframes shimmerFull {
  0%   { transform:translateX(-100%); }
  100% { transform:translateX(100%); }
}
@keyframes pulse-soft {
  0%,100% { opacity:1; }
  50%     { opacity:.35; }
}
@keyframes pulse-ring {
  0%   { box-shadow:0 0 0 0 rgba(0,112,173,.40); }
  70%  { box-shadow:0 0 0 12px rgba(0,112,173,0); }
  100% { box-shadow:0 0 0 0 rgba(0,112,173,0); }
}
@keyframes pulse-glow {
  0%,100% { box-shadow:0 0 0 0 rgba(0,112,173,0); }
  50%     { box-shadow:0 0 20px 4px rgba(0,112,173,.18); }
}
@keyframes spin {
  to { transform:rotate(360deg); }
}
@keyframes spin-slow {
  to { transform:rotate(360deg); }
}
@keyframes breathe {
  0%,100% { transform:scale(1);    box-shadow:0 0 16px rgba(0,112,173,.24); }
  50%     { transform:scale(1.06); box-shadow:0 0 32px rgba(0,112,173,.50); }
}
@keyframes float {
  0%,100% { transform:translateY(0); }
  50%     { transform:translateY(-7px); }
}
@keyframes float-slow {
  0%,100% { transform:translateY(0) rotate(0deg); }
  50%     { transform:translateY(-10px) rotate(2deg); }
}
@keyframes card-enter {
  from { opacity:0; transform:translateY(10px); }
  to   { opacity:1; transform:none; }
}
@keyframes count-up {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:none; }
}
@keyframes bar-fill {
  from { transform:scaleX(0); transform-origin:left; }
  to   { transform:scaleX(1); }
}
@keyframes ripple {
  from { transform:scale(0); opacity:.35; }
  to   { transform:scale(4); opacity:0; }
}
@keyframes skeleton-wave {
  0%   { background-position:-200% 0; }
  100% { background-position: 200% 0; }
}


/* ══════════════════════════════════════════════
   UTILITY CLASSES
══════════════════════════════════════════════ */

/* Page entry */
.animate-fadein       { animation: fadeIn        .24s var(--ease-out) both; }
.animate-fadein-up    { animation: fadeInUp       .30s var(--ease-out) both; }
.animate-fadein-down  { animation: fadeInDown     .22s var(--ease-out) both; }
.animate-fadein-left  { animation: fadeInLeft     .28s var(--ease-out) both; }
.animate-fadein-right { animation: fadeInRight    .28s var(--ease-out) both; }
.animate-fadein-scale { animation: fadeInScale    .28s var(--ease-out) both; }
.animate-scale-in     { animation: scaleIn        .20s var(--ease-out) both; }
.animate-pop-in       { animation: popIn          .32s var(--ease-spring) both; }
.animate-slide-up     { animation: slideInUp      .28s var(--ease-out) both; }
.animate-slide-down   { animation: slideInDown    .22s var(--ease-out) both; }
.animate-slide-right  { animation: slideInRight   .28s var(--ease-out) both; }

/* Continuous */
.animate-pulse-soft   { animation: pulse-soft 2.8s ease-in-out infinite; }
.animate-pulse-ring   { animation: pulse-ring 2.0s ease-out infinite; }
.animate-pulse-glow   { animation: pulse-glow 2.5s ease-in-out infinite; }
.animate-breathe      { animation: breathe    3.5s ease-in-out infinite; }
.animate-float        { animation: float      4.0s ease-in-out infinite; }
.animate-float-slow   { animation: float-slow 6.0s ease-in-out infinite; }
.animate-spin         { animation: spin       0.8s linear infinite; }
.animate-spin-slow    { animation: spin-slow  3.0s linear infinite; }

/* Delay helpers */
.delay-50   { animation-delay: .05s !important; }
.delay-100  { animation-delay: .10s !important; }
.delay-150  { animation-delay: .15s !important; }
.delay-200  { animation-delay: .20s !important; }
.delay-300  { animation-delay: .30s !important; }
.delay-400  { animation-delay: .40s !important; }
.delay-500  { animation-delay: .50s !important; }
.delay-600  { animation-delay: .60s !important; }

/* Stagger grid children */
.stagger > * { animation: fadeInUp .38s var(--ease-out) both; }
.stagger > *:nth-child(1) { animation-delay: .04s }
.stagger > *:nth-child(2) { animation-delay: .09s }
.stagger > *:nth-child(3) { animation-delay: .14s }
.stagger > *:nth-child(4) { animation-delay: .19s }
.stagger > *:nth-child(5) { animation-delay: .24s }
.stagger > *:nth-child(6) { animation-delay: .29s }
.stagger > *:nth-child(7) { animation-delay: .34s }
.stagger > *:nth-child(8) { animation-delay: .39s }

.num-animate { animation: count-up .45s var(--ease-out) both; }


/* ══════════════════════════════════════════════
   SKELETON LOADER
══════════════════════════════════════════════ */
.skeleton {
  background: linear-gradient(
    90deg,
    var(--c-border) 25%,
    var(--c-surface2) 37%,
    var(--c-border) 63%
  );
  background-size: 400% 100%;
  animation: skeleton-wave 1.4s ease-in-out infinite;
  border-radius: var(--r-md);
  pointer-events: none;
  user-select: none;
}
.skeleton * { opacity: 0; }

.skeleton-text { height: 14px; border-radius: 4px; }
.skeleton-text.short  { width: 40%; }
.skeleton-text.medium { width: 65%; }
.skeleton-text.full   { width: 100%; }
.skeleton-avatar { width: 36px; height: 36px; border-radius: 50%; flex-shrink: 0; }
.skeleton-badge  { width: 56px; height: 20px; border-radius: 99px; }
.skeleton-btn    { width: 90px; height: 34px; border-radius: var(--r-md); }


/* ══════════════════════════════════════════════
   HOVER & MICRO-INTERACTIONS
══════════════════════════════════════════════ */

/* Card lift */
.hover-lift {
  transition: transform var(--dur-base) var(--ease),
              box-shadow var(--dur-base) var(--ease) !important;
}
.hover-lift:hover {
  transform: translateY(-3px) !important;
  box-shadow: var(--sh-md) !important;
}

/* Subtle scale */
.hover-scale {
  transition: transform var(--dur-fast) var(--ease-spring) !important;
}
.hover-scale:hover { transform: scale(1.04) !important; }

/* Icon rotate on hover */
.hover-rotate:hover svg { transform: rotate(15deg); }
.hover-rotate svg { transition: transform var(--dur-base) var(--ease-spring); }

/* Link underline grow */
.hover-underline { position: relative; }
.hover-underline::after {
  content: '';
  position: absolute; left: 0; bottom: -1px; right: 0;
  height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--dur-base) var(--ease);
}
.hover-underline:hover::after { transform: scaleX(1); }

/* Button press feedback */
.press-feedback:active { transform: scale(.96) !important; }

/* Glow on focus/hover for primary actions */
.btn-action.primary:focus,
.btn-primary:focus {
  box-shadow: 0 0 0 4px rgba(0,112,173,.22) !important;
}


/* ══════════════════════════════════════════════
   LOADING STATES
══════════════════════════════════════════════ */
.btn-loading {
  position: relative;
  pointer-events: none;
  color: transparent !important;
}
.btn-loading::after {
  content: '';
  position: absolute;
  width: 14px; height: 14px;
  border: 2px solid rgba(255,255,255,.35);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  top: 50%; left: 50%;
  margin: -7px 0 0 -7px;
}
.btn-loading.btn-outline-primary::after,
.btn-loading.btn-action::after {
  border-color: rgba(0,112,173,.25);
  border-top-color: var(--c-blue);
}

/* Spinner */
.spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2px solid var(--c-border);
  border-top-color: var(--c-blue);
  border-radius: 50%;
  animation: spin .75s linear infinite;
  flex-shrink: 0;
}
.spinner-sm { width: 14px; height: 14px; border-width: 1.5px; }
.spinner-lg { width: 28px; height: 28px; border-width: 3px; }
.spinner-white { border-color: rgba(255,255,255,.30); border-top-color: #fff; }


/* ══════════════════════════════════════════════
   PAGE TRANSITION
══════════════════════════════════════════════ */
.app-shell-content {
  animation: fadeInUp .22s var(--ease-out) both;
}


/* ══════════════════════════════════════════════
   RIPPLE EFFECT (JS-triggered)
══════════════════════════════════════════════ */
.ripple-host { position: relative; overflow: hidden; }
.ripple-wave {
  position: absolute;
  border-radius: 50%;
  background: rgba(0,112,173,.18);
  pointer-events: none;
  transform: scale(0);
  animation: ripple .55s var(--ease-out) forwards;
}


/* ══════════════════════════════════════════════
   TOAST / NOTIFICATIONS
══════════════════════════════════════════════ */
.toast-enter { animation: slideInRight .22s var(--ease-out) both; }
.toast-exit  { animation: fadeInRight  .18s var(--ease-in) reverse both; }


/* ══════════════════════════════════════════════
   REDUCED MOTION
══════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}