/* =============================================================================
   Farm Manager — Motion Layer
   Wow-factor animations & micro-interactions.
   Loaded AFTER style.css and shell-v3.css so it wins on tie.
   All effects respect `prefers-reduced-motion` and pause while
   `body.fm-initializing` is set.
   ============================================================================= */

:root {
    --fm-ease-out-back: cubic-bezier(0.34, 1.56, 0.64, 1);
    --fm-ease-spring: cubic-bezier(0.22, 1, 0.36, 1);
    --fm-ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}

/* ─────────────────────────────────────────────────────────────
   0. Global keyframes
   ───────────────────────────────────────────────────────────── */

@keyframes fmFadeUp {
    from { opacity: 0; transform: translate3d(0, 14px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fmFadeDown {
    from { opacity: 0; transform: translate3d(0, -10px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fmFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fmScaleIn {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}
@keyframes fmPopIn {
    0%   { opacity: 0; transform: scale(0.85); }
    60%  { opacity: 1; transform: scale(1.04); }
    100% { transform: scale(1); }
}
@keyframes fmFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50%      { transform: translate3d(0, -6px, 0); }
}
@keyframes fmFloatRotate {
    0%   { transform: translateY(0) rotate(-4deg); }
    50%  { transform: translateY(-8px) rotate(4deg); }
    100% { transform: translateY(0) rotate(-4deg); }
}
@keyframes fmSpinSlow {
    to { transform: rotate(360deg); }
}
@keyframes fmGradientShift {
    0%   { background-position: 0% 50%; }
    50%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}
@keyframes fmShine {
    0%   { transform: translateX(-120%) skewX(-20deg); }
    100% { transform: translateX(220%) skewX(-20deg); }
}
@keyframes fmPulseRing {
    0%   { box-shadow: 0 0 0 0 rgba(5,150,105,0.45); }
    70%  { box-shadow: 0 0 0 18px rgba(5,150,105,0); }
    100% { box-shadow: 0 0 0 0 rgba(5,150,105,0); }
}
@keyframes fmRipple {
    to { transform: scale(2.4); opacity: 0; }
}
@keyframes fmSparkle {
    0%   { opacity: 0; transform: translate(0,0) scale(0.4); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: translate(var(--sx,0), var(--sy,-40px)) scale(1); }
}
@keyframes fmBlobDrift {
    0%   { transform: translate(0, 0) scale(1); }
    33%  { transform: translate(30px, -40px) scale(1.08); }
    66%  { transform: translate(-25px, 30px) scale(0.94); }
    100% { transform: translate(0, 0) scale(1); }
}
@keyframes fmIconWiggle {
    0%, 100% { transform: rotate(0); }
    25%      { transform: rotate(-9deg); }
    75%      { transform: rotate(9deg); }
}
@keyframes fmBounceIn {
    0%   { opacity: 0; transform: scale(0.3); }
    50%  { opacity: 1; transform: scale(1.08); }
    70%  { transform: scale(0.96); }
    100% { transform: scale(1); }
}
@keyframes fmSlideInLeft {
    from { opacity: 0; transform: translate3d(-24px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fmSlideInRight {
    from { opacity: 0; transform: translate3d(24px, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fmValuePop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.14); color: var(--fm-primary); }
    100% { transform: scale(1); }
}
@keyframes fmProgressStripes {
    from { background-position: 0 0; }
    to   { background-position: 40px 0; }
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
    }
}

/* While initializing, disable heavy entry animations */
body.fm-initializing .fm-reveal,
body.fm-initializing [class*="anim-"],
body.fm-initializing .home-hero,
body.fm-initializing .home-section {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
}

/* ─────────────────────────────────────────────────────────────
   1. Login view — aurora + entry choreography
   ───────────────────────────────────────────────────────────── */

#login-view {
    position: relative;
    overflow: hidden;
    background: linear-gradient(135deg, #ecfdf5 0%, #ffffff 40%, #eff6ff 100%) !important;
}
#login-view::before,
#login-view::after {
    content: "";
    position: absolute;
    z-index: 0;
    border-radius: 50%;
    filter: blur(60px);
    pointer-events: none;
    will-change: transform;
}
#login-view::before {
    width: 460px; height: 460px;
    background: radial-gradient(circle, rgba(5,150,105,0.35), transparent 70%);
    top: -140px; left: -120px;
    animation: fmBlobDrift 18s ease-in-out infinite;
}
#login-view::after {
    width: 520px; height: 520px;
    background: radial-gradient(circle, rgba(8,145,178,0.28), transparent 70%);
    bottom: -180px; right: -160px;
    animation: fmBlobDrift 22s ease-in-out infinite reverse;
}
#login-view > * { position: relative; z-index: 1; }

.login-card {
    animation: fmScaleIn 0.55s var(--fm-ease-out-back) both !important;
    backdrop-filter: blur(10px);
    background: rgba(255,255,255,0.85) !important;
}
.login-brand-icon {
    background: var(--fm-gradient) !important;
    background-size: 200% 200% !important;
    animation: fmFloatRotate 5s ease-in-out infinite, fmGradientShift 8s ease infinite;
    box-shadow: 0 10px 30px rgba(5,150,105,0.35), 0 0 0 0 rgba(5,150,105,0.4);
    position: relative;
}
.login-brand-icon::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: fmPulseRing 2.4s ease-out infinite;
}
#login-form input {
    transition: border-color 0.2s var(--fm-ease-smooth),
                box-shadow 0.25s var(--fm-ease-smooth),
                transform 0.2s var(--fm-ease-smooth);
}
#login-form input:focus {
    transform: translateY(-1px);
    box-shadow: 0 0 0 4px rgba(37,99,235,0.15), 0 4px 12px rgba(37,99,235,0.15);
}
#login-form button[type="submit"] {
    position: relative;
    overflow: hidden;
    background-size: 200% 100% !important;
    transition: transform 0.2s var(--fm-ease-out-back),
                box-shadow 0.25s var(--fm-ease-smooth),
                background-position 0.6s var(--fm-ease-smooth) !important;
}
#login-form button[type="submit"]:hover {
    transform: translateY(-2px);
    background-position: 100% 0 !important;
    box-shadow: 0 10px 24px rgba(37,99,235,0.35) !important;
}
#login-form button[type="submit"]::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 40%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.5), transparent);
    transform: translateX(-120%) skewX(-20deg);
    pointer-events: none;
}
#login-form button[type="submit"]:hover::before {
    animation: fmShine 0.9s ease-out;
}

/* ─────────────────────────────────────────────────────────────
   2. View transitions — animate children of the active view
   ───────────────────────────────────────────────────────────── */

.view.active > *,
.view.active > section,
.view.active > nav,
.view.active > header,
.view.active > div {
    animation: fmFadeUp 0.45s var(--fm-ease-spring) both;
}
.view.active > *:nth-child(1) { animation-delay: 0.02s; }
.view.active > *:nth-child(2) { animation-delay: 0.08s; }
.view.active > *:nth-child(3) { animation-delay: 0.14s; }
.view.active > *:nth-child(4) { animation-delay: 0.2s; }
.view.active > *:nth-child(5) { animation-delay: 0.26s; }
.view.active > *:nth-child(6) { animation-delay: 0.32s; }
.view.active > *:nth-child(7) { animation-delay: 0.38s; }
.view.active > *:nth-child(n+8) { animation-delay: 0.44s; }

body.fm-initializing .view.active > * {
    animation: none !important;
}

.page-chrome:not(.hidden) {
    animation: fmSlideInLeft 0.4s var(--fm-ease-spring) both;
}
.page-chrome-icon-wrap {
    animation: fmPopIn 0.5s var(--fm-ease-out-back) both;
    animation-delay: 0.12s;
}

/* ─────────────────────────────────────────────────────────────
   3. Dashboard hero — living gradient
   ───────────────────────────────────────────────────────────── */

.home-hero {
    position: relative;
}
.home-greeting {
    background: linear-gradient(90deg, var(--fm-primary), #0d9488, #0891b2, var(--fm-primary));
    background-size: 300% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: fmGradientShift 10s ease infinite;
}
.home-status-card,
.home-weather-card {
    transition: transform 0.25s var(--fm-ease-spring),
                box-shadow 0.25s var(--fm-ease-smooth);
}
.home-status-card:hover,
.home-weather-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(5,150,105,0.18);
}
.home-weather-icon {
    display: inline-block;
    animation: fmFloat 4s ease-in-out infinite;
    transform-origin: center;
}
.home-status-val {
    display: inline-block;
    transition: transform 0.2s var(--fm-ease-out-back);
}
.home-status-card:hover .home-status-val {
    transform: scale(1.08);
}

/* ─────────────────────────────────────────────────────────────
   4. Cards — hover lift with subtle glow
   ───────────────────────────────────────────────────────────── */

.fm-card,
.dashboard-hero-card,
.dashboard-secondary-card,
.dashboard-summary-list,
.mandi-card,
.crop-pnl-card,
.field-card,
.blog-card,
.journey-step-card,
.work-task-card {
    transition: transform 0.25s var(--fm-ease-spring),
                box-shadow 0.3s var(--fm-ease-smooth),
                border-color 0.2s var(--fm-ease-smooth);
    will-change: transform;
}
.fm-card:hover,
.dashboard-secondary-card:hover,
.dashboard-summary-list:hover,
.mandi-card:hover,
.crop-pnl-card:hover,
.field-card:hover,
.blog-card:hover,
.work-task-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 32px rgba(15,23,42,0.10);
}
.dashboard-hero-card {
    position: relative;
    overflow: hidden;
}
.dashboard-hero-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
    transform: translateX(-120%) skewX(-20deg);
    pointer-events: none;
}
.dashboard-hero-card:hover::before {
    animation: fmShine 1s ease-out;
}
.dashboard-hero-card:hover {
    transform: translateY(-4px) scale(1.005);
}

/* Priority cards — already have anim-slide-up; enhance hover */
.priority-card {
    transition: transform 0.25s var(--fm-ease-spring),
                box-shadow 0.25s var(--fm-ease-smooth);
}
.priority-card:hover {
    transform: translateY(-3px) scale(1.01);
    box-shadow: 0 10px 24px rgba(15,23,42,0.10);
}
.priority-card-cta i {
    transition: transform 0.2s var(--fm-ease-out-back);
}
.priority-card:hover .priority-card-cta i {
    transform: translateX(4px);
}

/* ─────────────────────────────────────────────────────────────
   5. Quick actions — pop icon + shine sweep
   ───────────────────────────────────────────────────────────── */

.home-quick-btn,
.quick-action-btn {
    position: relative;
    overflow: hidden;
    transition: transform 0.2s var(--fm-ease-out-back),
                border-color 0.2s var(--fm-ease-smooth),
                box-shadow 0.25s var(--fm-ease-smooth);
}
.home-quick-btn i,
.quick-action-btn i {
    transition: transform 0.3s var(--fm-ease-out-back);
    display: inline-block;
}
.home-quick-btn:hover,
.quick-action-btn:hover {
    transform: translateY(-4px);
    border-color: var(--fm-primary);
    box-shadow: 0 10px 22px rgba(5,150,105,0.18);
}
.home-quick-btn:hover i,
.quick-action-btn:hover i {
    transform: scale(1.2) translateY(-2px);
    animation: fmIconWiggle 0.6s var(--fm-ease-smooth);
}
.home-quick-btn::after,
.quick-action-btn::after {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 60%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(5,150,105,0.18), transparent);
    transform: translateX(-140%) skewX(-25deg);
    pointer-events: none;
}
.home-quick-btn:hover::after,
.quick-action-btn:hover::after {
    animation: fmShine 0.8s ease-out;
}

/* Stat tiles */
.stat-tile,
.home-finance-card {
    position: relative;
    overflow: hidden;
    transition: transform 0.25s var(--fm-ease-spring),
                box-shadow 0.25s var(--fm-ease-smooth),
                border-color 0.2s var(--fm-ease-smooth);
}
.stat-tile:hover,
.home-finance-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 26px rgba(15,23,42,0.10);
    border-color: var(--fm-primary);
}
.stat-tile-icon {
    display: inline-flex;
    transition: transform 0.3s var(--fm-ease-out-back);
}
.stat-tile:hover .stat-tile-icon {
    transform: scale(1.25) rotate(-8deg);
}
.stat-tile-value,
.home-finance-val,
.home-status-val {
    display: inline-block;
    transition: transform 0.2s var(--fm-ease-out-back);
}
.stat-tile-value.fm-value-changed,
.home-finance-val.fm-value-changed,
.home-status-val.fm-value-changed {
    animation: fmValuePop 0.6s var(--fm-ease-spring);
}

/* Finance snapshot: subtle color accent hover */
.home-finance-expense:hover { box-shadow: 0 12px 26px rgba(220,38,38,0.16); }
.home-finance-income:hover  { box-shadow: 0 12px 26px rgba(22,163,74,0.18); }

/* ─────────────────────────────────────────────────────────────
   6. Buttons — press + ripple + shine
   ───────────────────────────────────────────────────────────── */

.btn-primary,
.btn-secondary,
button[type="submit"] {
    position: relative;
    overflow: hidden;
    transition: transform 0.18s var(--fm-ease-out-back),
                box-shadow 0.2s var(--fm-ease-smooth),
                background-position 0.4s var(--fm-ease-smooth) !important;
}
.btn-primary { background-size: 200% 100% !important; }
.btn-primary:hover {
    transform: translateY(-2px);
    background-position: 100% 0 !important;
}
.btn-primary:active { transform: scale(0.96); }
.btn-secondary:hover { transform: translateY(-1px); }
.btn-secondary:active { transform: scale(0.97); }

/* JS-driven ripple */
.fm-ripple {
    position: absolute;
    border-radius: 50%;
    transform: scale(0);
    background: rgba(255,255,255,0.55);
    pointer-events: none;
    animation: fmRipple 0.65s var(--fm-ease-smooth);
    mix-blend-mode: screen;
}
.btn-secondary .fm-ripple,
.home-quick-btn .fm-ripple,
.quick-action-btn .fm-ripple,
.stat-tile .fm-ripple,
.home-finance-card .fm-ripple {
    background: rgba(5,150,105,0.28);
    mix-blend-mode: multiply;
}

/* Small icon buttons */
.btn-icon,
.app-bar-btn {
    transition: transform 0.15s var(--fm-ease-out-back),
                background 0.15s var(--fm-ease-smooth),
                color 0.15s var(--fm-ease-smooth);
}
.btn-icon:hover,
.app-bar-btn:hover {
    transform: translateY(-1px) rotate(-2deg);
}
.btn-icon:active,
.app-bar-btn:active { transform: scale(0.92); }

/* ─────────────────────────────────────────────────────────────
   7. Navigation — sidebar & bottom nav
   ───────────────────────────────────────────────────────────── */

.shell-nav-primary,
.shell-nav-child {
    position: relative;
    transition: background 0.2s var(--fm-ease-smooth),
                color 0.2s var(--fm-ease-smooth),
                transform 0.2s var(--fm-ease-out-back),
                padding-left 0.2s var(--fm-ease-smooth) !important;
}
.shell-nav-primary::before,
.shell-nav-child::before {
    content: "";
    position: absolute;
    left: 0; top: 12%; bottom: 12%;
    width: 3px; border-radius: 0 3px 3px 0;
    background: var(--fm-gradient);
    transform: scaleY(0);
    transform-origin: center;
    transition: transform 0.28s var(--fm-ease-out-back);
}
.shell-nav-primary.nav-link-active::before,
.shell-nav-child.nav-link-active::before {
    transform: scaleY(1);
}
.shell-nav-primary:hover,
.shell-nav-child:hover {
    transform: translateX(3px);
}
.shell-nav-primary i:first-child,
.shell-nav-child i:first-child {
    transition: transform 0.25s var(--fm-ease-out-back);
}
.shell-nav-primary:hover i:first-child,
.shell-nav-child:hover i:first-child {
    transform: scale(1.15) rotate(-6deg);
}
.shell-nav-primary.nav-link-active i:first-child,
.shell-nav-child.nav-link-active i:first-child {
    transform: scale(1.08);
}

/* Bottom nav — active dot indicator + icon pop */
.shell-bottom-item {
    position: relative;
    overflow: hidden;
}
.shell-bottom-item i {
    transition: transform 0.3s var(--fm-ease-out-back) !important;
}
.shell-bottom-item:hover i {
    transform: translateY(-2px) scale(1.08);
}
.shell-bottom-item::after {
    content: "";
    position: absolute;
    bottom: 6px; left: 50%;
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--fm-primary);
    transform: translateX(-50%) scale(0);
    transition: transform 0.28s var(--fm-ease-out-back);
}
.shell-bottom-item.nav-link-active::after {
    transform: translateX(-50%) scale(1);
}
.shell-bottom-item.nav-link-active i {
    animation: fmBounceIn 0.5s var(--fm-ease-out-back);
}

/* Mobile farm pill press */
.mobile-farm-pill {
    transition: transform 0.15s var(--fm-ease-out-back), background 0.2s var(--fm-ease-smooth);
}
.mobile-farm-pill:active { transform: scale(0.96); }

/* ─────────────────────────────────────────────────────────────
   8. Modals — smoother entrance
   ───────────────────────────────────────────────────────────── */

.modal-overlay:not(.hidden) {
    animation: fmFadeIn 0.25s var(--fm-ease-smooth);
}
.modal-overlay:not(.hidden) .modal-content {
    animation: fmScaleIn 0.35s var(--fm-ease-out-back) !important;
    transform-origin: center bottom;
}
.more-menu-modal:not(.hidden) .modal-content,
.fm-sheet:not(.hidden) .modal-content {
    animation: fmSheetUp 0.35s var(--fm-ease-spring) !important;
}
@keyframes fmSheetUp {
    from { transform: translateY(100%); opacity: 0.6; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ─────────────────────────────────────────────────────────────
   9. FAB — pulsing halo
   ───────────────────────────────────────────────────────────── */

.contextual-fab:not(.hidden):not(.scale-0) {
    animation: fmPopIn 0.4s var(--fm-ease-out-back);
    transition: transform 0.25s var(--fm-ease-out-back), box-shadow 0.25s var(--fm-ease-smooth);
}
.contextual-fab:not(.hidden):not(.scale-0)::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    animation: fmPulseRing 2.4s ease-out infinite;
    pointer-events: none;
}
.contextual-fab:hover {
    transform: translateY(-3px) scale(1.04);
    box-shadow: 0 16px 32px rgba(5,150,105,0.4);
}
.contextual-fab:active { transform: scale(0.94); }
.contextual-fab i { transition: transform 0.3s var(--fm-ease-out-back); }
.contextual-fab:hover i { transform: rotate(90deg); }

.filter-fab {
    transition: transform 0.25s var(--fm-ease-out-back), box-shadow 0.25s var(--fm-ease-smooth);
}
.filter-fab:hover {
    transform: translateY(-3px) scale(1.05) rotate(-8deg);
    box-shadow: 0 14px 30px rgba(99,102,241,0.45);
}

/* ─────────────────────────────────────────────────────────────
   10. Loading — spinner + skeleton improvements
   ───────────────────────────────────────────────────────────── */

.spinner {
    position: relative;
    border: 3px solid transparent !important;
    background:
        linear-gradient(var(--fm-surface), var(--fm-surface)) padding-box,
        conic-gradient(from 0deg, var(--fm-primary), #0891b2, #0d9488, var(--fm-primary)) border-box !important;
    animation: fmSpinSlow 0.9s linear infinite !important;
}

/* ─────────────────────────────────────────────────────────────
   11. Toast — bouncy slide with soft glow
   ───────────────────────────────────────────────────────────── */

.toast {
    box-shadow: var(--fm-shadow-lg), 0 0 0 4px rgba(255,255,255,0.08) inset !important;
}
.toast.show { animation: fmFadeDown 0.35s var(--fm-ease-out-back); }
.toast.success { box-shadow: var(--fm-shadow-lg), 0 0 24px rgba(22,163,74,0.35) !important; }
.toast.error   { box-shadow: var(--fm-shadow-lg), 0 0 24px rgba(220,38,38,0.35) !important; }

/* ─────────────────────────────────────────────────────────────
   12. Insights — attention pulse
   ───────────────────────────────────────────────────────────── */

.insight-card.alert,
.needs-attention-section {
    animation: fmAttentionPulse 2.6s ease-in-out infinite;
}
@keyframes fmAttentionPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220,38,38,0.0); }
    50%      { box-shadow: 0 0 0 6px rgba(220,38,38,0.14); }
}
.insight-card {
    transition: transform 0.2s var(--fm-ease-out-back),
                box-shadow 0.2s var(--fm-ease-smooth);
}
.insight-card:hover {
    transform: translateX(4px) translateY(-1px);
}

/* Attention items */
.attention-item {
    transition: transform 0.2s var(--fm-ease-out-back), background 0.2s var(--fm-ease-smooth);
}
.attention-item:hover { transform: translateX(3px); }
.attention-dot.critical {
    animation: fmAttentionPulse 1.6s ease-in-out infinite;
    box-shadow: 0 0 0 0 rgba(220,38,38,0.6);
}

/* ─────────────────────────────────────────────────────────────
   13. Progress bars — flowing stripes
   ───────────────────────────────────────────────────────────── */

.journey-progress-fill,
.micro-fill {
    position: relative;
    overflow: hidden;
    background: var(--fm-gradient) !important;
    background-size: 200% 100%;
    animation: fmGradientShift 6s ease infinite;
}
.journey-progress-fill::after,
.micro-fill::after {
    content: "";
    position: absolute; inset: 0;
    background-image: linear-gradient(
        45deg,
        rgba(255,255,255,0.18) 25%, transparent 25%,
        transparent 50%, rgba(255,255,255,0.18) 50%,
        rgba(255,255,255,0.18) 75%, transparent 75%
    );
    background-size: 20px 20px;
    animation: fmProgressStripes 1.2s linear infinite;
    opacity: 0.7;
}

/* ─────────────────────────────────────────────────────────────
   14. Scroll-reveal utility
   ───────────────────────────────────────────────────────────── */

.fm-reveal {
    opacity: 0;
    transform: translate3d(0, 18px, 0);
    transition: opacity 0.55s var(--fm-ease-smooth),
                transform 0.55s var(--fm-ease-spring);
    transition-delay: calc(var(--fm-i, 0) * 60ms);
    will-change: opacity, transform;
}
.fm-reveal.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}
body.fm-initializing .fm-reveal {
    opacity: 1;
    transform: none;
    transition: none;
}

/* ─────────────────────────────────────────────────────────────
   15. Sparkle burst (JS spawns .fm-sparkle spans)
   ───────────────────────────────────────────────────────────── */

.fm-sparkle {
    position: absolute;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: radial-gradient(circle, #fef3c7 0%, #f59e0b 50%, transparent 70%);
    pointer-events: none;
    animation: fmSparkle 0.9s var(--fm-ease-smooth) forwards;
}

/* ─────────────────────────────────────────────────────────────
   16. Form inputs — focus glow
   ───────────────────────────────────────────────────────────── */

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
    transition: border-color 0.2s var(--fm-ease-smooth),
                box-shadow 0.2s var(--fm-ease-smooth),
                background 0.2s var(--fm-ease-smooth);
}
input:not([type="checkbox"]):not([type="radio"]):focus,
select:focus,
textarea:focus {
    box-shadow: 0 0 0 4px rgba(5,150,105,0.15);
}

/* ─────────────────────────────────────────────────────────────
   17. Nav chevron expand animation
   ───────────────────────────────────────────────────────────── */

.shell-nav-group.expanded > .shell-nav-primary .shell-nav-chevron {
    transform: rotate(180deg);
}

/* ─────────────────────────────────────────────────────────────
   18. Chart & data cards — softly float on hover
   ───────────────────────────────────────────────────────────── */

.chart-container {
    transition: transform 0.25s var(--fm-ease-spring);
}
.fm-card:hover .chart-container {
    transform: scale(1.005);
}

/* ─────────────────────────────────────────────────────────────
   19. Hub pills — active pill glow
   ───────────────────────────────────────────────────────────── */

.hub-pill {
    transition: transform 0.2s var(--fm-ease-out-back),
                background 0.2s var(--fm-ease-smooth),
                color 0.2s var(--fm-ease-smooth),
                box-shadow 0.2s var(--fm-ease-smooth);
}
.hub-pill:hover { transform: translateY(-1px); }
.hub-pill.active {
    background: var(--fm-gradient) !important;
    color: white !important;
    border-color: transparent !important;
    box-shadow: 0 6px 16px rgba(5,150,105,0.28);
}

/* ─────────────────────────────────────────────────────────────
   20. Onboarding steps — subtle hover
   ───────────────────────────────────────────────────────────── */

.onboard-step {
    transition: transform 0.2s var(--fm-ease-out-back),
                box-shadow 0.25s var(--fm-ease-smooth),
                border-color 0.2s var(--fm-ease-smooth);
}
.onboard-step:hover {
    transform: translateX(4px);
    border-color: var(--fm-primary);
    box-shadow: 0 8px 18px rgba(5,150,105,0.12);
}
.onboard-step-icon { transition: transform 0.3s var(--fm-ease-out-back); }
.onboard-step:hover .onboard-step-icon {
    transform: rotate(-8deg) scale(1.08);
}