/* v49.0.34 — Engagement & motion polish
   Subtle, accessible micro-interactions for dashboards and learning surfaces. */

:root{
  --motion-fast:160ms;
  --motion-base:260ms;
  --motion-slow:520ms;
  --motion-ease:cubic-bezier(.22,.61,.36,1);
  --motion-ease-spring:cubic-bezier(.2,.8,.2,1);
}

/* Keep motion progressive: content is only staged after JS marks it. */
.motion-reveal{
  opacity:0;
  transform:translateY(12px);
  transition:opacity var(--motion-slow) var(--motion-ease),transform var(--motion-slow) var(--motion-ease);
  transition-delay:var(--reveal-delay,0ms);
}
.motion-reveal.is-visible{opacity:1;transform:none}

/* Dashboard atmosphere — calm, product-like, never decorative enough to distract. */
.dashboard-content{position:relative;isolation:isolate}
.dashboard-content:before{
  content:'';
  position:absolute;
  width:270px;
  height:270px;
  inset-inline-end:-80px;
  top:8px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(24,166,154,.075) 0 2px,transparent 2.5px) 0 0/18px 18px;
  opacity:.55;
  pointer-events:none;
  z-index:-1;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.9),transparent 78%);
}

/* Hero surfaces feel alive without constant large movement. */
.dashboard-hero-surface,.v42-portal-hero,.v49-trainee-hero,.v4925-trainee-exam-hero,.v4926-assignment-hero,.training-profile-hero{
  position:relative;
  isolation:isolate;
}
.dashboard-hero-surface:before,.v42-portal-hero:before,.v49-trainee-hero:before,.v4925-trainee-exam-hero:before,.v4926-assignment-hero:before,.training-profile-hero:before{
  content:'';
  position:absolute;
  width:150px;
  height:150px;
  inset-inline-end:6%;
  bottom:-92px;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  pointer-events:none;
  z-index:-1;
}
.v49-trainee-hero{
  background-image:
    radial-gradient(circle at 18% 22%,rgba(255,255,255,.16) 0 2px,transparent 3px),
    radial-gradient(circle at 78% 32%,rgba(216,170,40,.28) 0 2px,transparent 3px),
    linear-gradient(125deg,#087b73 0%,#18a79c 62%,#34baad 100%)!important;
  background-size:110px 110px,150px 150px,auto;
}

/* Cards & actions — tactile, but not jumpy. */
@media (hover:hover) and (pointer:fine){
  .dashboard-content .panel:not(.v4925-taking-question-card):not(.v4925-exam-side-panel),
  .v41-kpi-card,.v42-kpi-card,.v4925-assessment-kpis article,
  .v4925-trainee-course-exam-card,.v4926-assignment-card,.v4926-trainee-course-card,
  .mini-certificate,.progress-course-row,.v42-people-list>a,.v42-report-list>a{
    transition:transform var(--motion-base) var(--motion-ease),box-shadow var(--motion-base) var(--motion-ease),border-color var(--motion-base) ease;
  }
  .dashboard-content .panel:not(.v4925-taking-question-card):not(.v4925-exam-side-panel):hover,
  .v41-kpi-card:hover,.v42-kpi-card:hover,.v4925-assessment-kpis article:hover,
  .v4925-trainee-course-exam-card:hover,.v4926-assignment-card:hover,.v4926-trainee-course-card:hover,
  .mini-certificate:hover,.progress-course-row:hover,.v42-people-list>a:hover,.v42-report-list>a:hover{
    transform:translateY(-3px);
    border-color:rgba(24,166,154,.22);
    box-shadow:0 14px 34px rgba(28,57,82,.08);
  }
  .mobile-function-grid a,.v42-action-grid a,.quick-grid.polished>a{
    transition:transform var(--motion-fast) var(--motion-ease-spring),background var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease;
  }
  .mobile-function-grid a:hover,.v42-action-grid a:hover,.quick-grid.polished>a:hover{
    transform:translateY(-2px);
    box-shadow:0 9px 22px rgba(23,74,78,.07);
  }
  .mobile-function-grid a:hover i,.v42-action-grid a:hover i,.quick-grid.polished>a:hover .ui-icon{
    transform:scale(1.08) rotate(-2deg);
  }
}
.mobile-function-grid a i,.v42-action-grid a i,.quick-grid.polished>a .ui-icon{
  transition:transform var(--motion-base) var(--motion-ease-spring);
}

/* Buttons: small press response, stronger focus, no layout shift. */
.btn,.icon-btn,.sidebar-nav>a{
  will-change:transform;
  transition:transform var(--motion-fast) var(--motion-ease),background-color var(--motion-fast) ease,border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,color var(--motion-fast) ease;
}
.btn:active,.icon-btn:active{transform:translateY(1px) scale(.985)}
.btn.is-pressed,.icon-btn.is-pressed{transform:scale(.975)}
.btn:focus-visible,.icon-btn:focus-visible,.mobile-function-grid a:focus-visible,.v42-action-grid a:focus-visible{
  outline:3px solid rgba(24,166,154,.2);
  outline-offset:2px;
}

/* KPI icon response and number emphasis. */
.v41-kpi-card .kpi-icon,.v42-kpi-icon,.v4925-assessment-kpis article>span,.v4926-type-icon{
  transition:transform var(--motion-base) var(--motion-ease-spring),box-shadow var(--motion-base) ease;
}
@media (hover:hover) and (pointer:fine){
  .v41-kpi-card:hover .kpi-icon,.v42-kpi-card:hover .v42-kpi-icon,.v4925-assessment-kpis article:hover>span{
    transform:scale(1.08) rotate(2deg);
    box-shadow:0 7px 18px rgba(24,166,154,.12);
  }
}

/* Progress bars animate once the section enters the viewport. */
progress{overflow:hidden}
progress::-webkit-progress-value{transition:width 800ms var(--motion-ease)}
progress::-moz-progress-bar{transition:width 800ms var(--motion-ease)}
.progress-course-row progress,.role-bar progress,.v4925-course-exam-progress progress{accent-color:var(--teal)}

/* Live states get one restrained pulse. */
@keyframes softPulse{0%,100%{box-shadow:0 0 0 0 rgba(24,166,154,.20)}50%{box-shadow:0 0 0 7px rgba(24,166,154,0)}}
@keyframes badgeBreath{0%,100%{transform:scale(1)}50%{transform:scale(1.08)}}
@keyframes iconFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.live-dot,.session-dot.live-dot{animation:softPulse 2.4s ease-in-out infinite}
.notification-btn .badge{animation:badgeBreath 2.8s ease-in-out infinite;transform-origin:center}
.empty-state .empty-icon{animation:iconFloat 4.2s ease-in-out infinite}


/* Tables and forms get clarity-focused interaction instead of movement. */
.data-table tbody tr,.table-wrap>table tbody tr{transition:background-color var(--motion-fast) ease}
@media (hover:hover) and (pointer:fine){.data-table tbody tr:hover,.table-wrap>table tbody tr:hover{background:#f7fcfb}}
.dashboard-content :where(input:not([type=checkbox]):not([type=radio]),select,textarea){transition:border-color var(--motion-fast) ease,box-shadow var(--motion-fast) ease,background-color var(--motion-fast) ease}
.dashboard-content :where(input:not([type=checkbox]):not([type=radio]),select,textarea):focus{border-color:rgba(24,166,154,.65);box-shadow:0 0 0 3px rgba(24,166,154,.08);background:#fff;outline:none}
.timeline-list p:first-child i{animation:softPulse 2.8s ease-in-out 2}
details.panel>summary .ui-icon{transition:transform var(--motion-base) var(--motion-ease)}
details.panel[open]>summary .ui-icon:last-child{transform:rotate(180deg)}

/* Learning dashboard: make progress feel rewarding. */
.v49-continue-learning{
  transition:transform var(--motion-base) var(--motion-ease-spring),box-shadow var(--motion-base) ease,background var(--motion-base) ease;
}
@media (hover:hover) and (pointer:fine){
  .v49-continue-learning:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(0,0,0,.10)}
  .progress-course-row:hover .course-initial{transform:scale(1.07)}
}
.course-initial{transition:transform var(--motion-base) var(--motion-ease-spring)}
.score-pill,.soft-badge,.status,.tag{transition:transform var(--motion-fast) ease,background-color var(--motion-fast) ease}
@media (hover:hover) and (pointer:fine){.mini-row:hover .score-pill{transform:scale(1.05)}}

/* Exam mode stays calm: only make time pressure clearer when the existing warning state is active. */
@keyframes timerWarning{0%,100%{opacity:1}50%{opacity:.72}}
.v4925-exam-timer.warning{animation:timerWarning 1.2s ease-in-out infinite}
.v4925-question-nav a{transition:transform var(--motion-fast) ease,background-color var(--motion-fast) ease,color var(--motion-fast) ease,border-color var(--motion-fast) ease}
.v4925-question-nav a.active{transform:scale(1.05)}
.v4925-answer-options label>span{transition:border-color var(--motion-fast) ease,background-color var(--motion-fast) ease,transform var(--motion-fast) ease}
@media (hover:hover) and (pointer:fine){.v4925-answer-options label:hover>span{transform:translateX(var(--answer-hover-shift,2px))}}
.rtl .v4925-answer-options label:hover>span{--answer-hover-shift:-2px}

/* Forms: communicate work without overlays or blocking motion. */
.form-is-submitting button[type="submit"]{position:relative;padding-inline-start:42px!important}
.form-is-submitting button[type="submit"]:before{
  content:'';
  position:absolute;
  inset-inline-start:16px;
  width:15px;
  height:15px;
  border:2px solid currentColor;
  border-inline-end-color:transparent;
  border-radius:50%;
  animation:submitSpin .7s linear infinite;
}
@keyframes submitSpin{to{transform:rotate(360deg)}}

/* Sidebar active item: a quiet visual anchor. */
.sidebar-nav>a.active:after{box-shadow:0 0 0 3px rgba(24,166,154,.08)}
.sidebar-nav>a .ui-icon{transition:transform var(--motion-fast) var(--motion-ease-spring),color var(--motion-fast) ease}
@media (hover:hover) and (pointer:fine){.sidebar-nav>a:hover .ui-icon{transform:translateY(-1px) scale(1.04)}}

/* Mobile: retain personality without spending animation budget. */
@media(max-width:700px){
  .dashboard-content:before{width:180px;height:180px;opacity:.35}
  .motion-reveal{transform:translateY(7px)}
  .mobile-function-grid a,.v42-action-grid a{min-height:72px}
}

/* Accessibility and power saving. */
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto!important}
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important}
  .motion-reveal{opacity:1!important;transform:none!important}
}