/* =========================================
   CAREER OS — MOTION LAYER
   Purely additive: animation/transition rules only.
   Does not alter markup structure, JS logic, or any
   button/function behavior — only how things move & look.
   ========================================= */

:root{
  --ease-out: cubic-bezier(.16,1,.3,1);
  --ease-standard: cubic-bezier(.4,0,.2,1);
  --dur-fast: .15s;
  --dur-med: .28s;
  --dur-slow: .5s;
}

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

/* ---------- Page load: one orchestrated entrance ---------- */
@keyframes app-rise{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}
@keyframes sidebar-slide{
  from{ opacity:0; transform:translateX(-14px); }
  to{ opacity:1; transform:translateX(0); }
}
.sidebar{ animation: sidebar-slide var(--dur-slow) var(--ease-out) both; }
.main{ animation: app-rise var(--dur-slow) var(--ease-out) both; animation-delay:.06s; }

/* ---------- Section / page switching ---------- */
@keyframes page-in{
  from{ opacity:0; transform:translateY(8px) scale(.997); }
  to{ opacity:1; transform:translateY(0) scale(1); }
}
.page{ animation: page-in var(--dur-med) var(--ease-out) both; }
.page.hidden{ display:none !important; }

/* ---------- Sidebar navigation ---------- */
.navitem{
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              padding-left var(--dur-fast) var(--ease-standard),
              transform var(--dur-fast) var(--ease-standard);
}
.navitem:hover{ padding-left:14px; }
.navitem:active{ transform:scale(.985); }
.navitem.active::before{
  transition: background var(--dur-fast) var(--ease-standard);
}
.brandmark{ transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }
.brandmark:hover{ transform: rotate(-4deg) scale(1.06); }

/* ---------- Buttons ---------- */
.btn, button{
  transition: transform var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard),
              opacity var(--dur-fast) var(--ease-standard),
              filter var(--dur-fast) var(--ease-standard);
}
.btn:hover{ filter:brightness(1.06); }
.btn:active, button:active{ transform:translateY(0) scale(.97); }

/* Ripple-free press feedback ring, keyboard accessible */
.btn:focus-visible, button:focus-visible, .navitem:focus-visible, .tabbtn:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:2px;
  transition: outline-offset var(--dur-fast) var(--ease-standard);
}

/* ---------- Tabs ---------- */
.tabbtn{
  position:relative;
  transition: color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard),
              background var(--dur-fast) var(--ease-standard);
}
.tabbtn.active{ animation: tab-pop var(--dur-fast) var(--ease-out); }
@keyframes tab-pop{
  from{ transform:scale(.96); }
  to{ transform:scale(1); }
}

/* ---------- Cards, panels, stats ---------- */
.card, .panel, .stat{
  transition: transform var(--dur-med) var(--ease-out),
              border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-med) var(--ease-out);
}
.card:hover{ transform:translateY(-3px); }
.stat:hover{ transform:translateY(-3px); }

/* Staggered reveal for grids of cards/stats when a page becomes visible */
.grid > *{
  animation: card-in var(--dur-med) var(--ease-out) both;
}
@keyframes card-in{
  from{ opacity:0; transform:translateY(6px); }
  to{ opacity:1; transform:translateY(0); }
}
.grid > *:nth-child(1){ animation-delay:.02s; }
.grid > *:nth-child(2){ animation-delay:.05s; }
.grid > *:nth-child(3){ animation-delay:.08s; }
.grid > *:nth-child(4){ animation-delay:.11s; }
.grid > *:nth-child(5){ animation-delay:.14s; }
.grid > *:nth-child(6){ animation-delay:.17s; }
.grid > *:nth-child(n+7){ animation-delay:.2s; }

/* ---------- Progress bars ---------- */
.progress-fill{
  transition: width var(--dur-slow) var(--ease-out);
  position:relative;
  overflow:hidden;
}
.progress-fill::after{
  content:"";
  position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.22), transparent);
  transform:translateX(-100%);
  animation: progress-sheen 2.2s var(--ease-standard) infinite;
}
@keyframes progress-sheen{
  to{ transform:translateX(100%); }
}

/* ---------- Pills ---------- */
.pill{
  transition: transform var(--dur-fast) var(--ease-standard), filter var(--dur-fast) var(--ease-standard);
}
.pill:hover{ transform:translateY(-1px); filter:brightness(1.1); }

/* ---------- Table rows ---------- */
tr{ transition: background var(--dur-fast) var(--ease-standard); }

/* ---------- Inputs ---------- */
select, input[type=text], input[type=number], input[type=date], textarea{
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
select:focus, input:focus, textarea:focus{
  outline:none;
  border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(61,220,151,.15);
}

/* ---------- Streak chip: subtle living accent ---------- */
@keyframes streak-glow{
  0%,100%{ box-shadow:0 0 0 0 rgba(242,184,75,0); }
  50%{ box-shadow:0 0 0 4px rgba(242,184,75,.12); }
}
.streak-chip{ animation: streak-glow 2.6s ease-in-out infinite; }

/* ---------- Avatar ---------- */
.avatar{ transition: transform var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
.avatar:hover{ transform:scale(1.07); border-color:var(--accent-dim); }

/* ---------- Mobile sidebar drawer ---------- */
.sidebar{ transition: transform var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out); }

/* ---------- Toasts ---------- */
.toast{ transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out); }

/* ---------- Copy-success feedback on buttons ---------- */
.copy-success{
  animation: copy-flash .6s var(--ease-out);
}
@keyframes copy-flash{
  0%{ background:var(--accent); color:#04150F; }
  100%{ background:inherit; color:inherit; }
}

/* ---------- Hero (dashboard) ---------- */
.hero{
  animation: app-rise var(--dur-slow) var(--ease-out) both;
  animation-delay:.1s;
}

/* ---------- Empty state ---------- */
.empty-state{
  transition: border-color var(--dur-med) var(--ease-standard), opacity var(--dur-med) var(--ease-standard);
}

/* ---------- Scrollbar hover polish ---------- */
::-webkit-scrollbar-thumb{ transition: background var(--dur-fast) var(--ease-standard); }
::-webkit-scrollbar-thumb:hover{ background:#3a4759; }