/* ============================================================================
   animations.css — Global micro-animation layer (layered over portal.css +
   aurora-theme.css). Makes buttons, icons, badges, emojis and cards feel alive.
   Everything is wrapped in prefers-reduced-motion so it stays accessible.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

/* ---------------------------------------------------------------- BUTTONS -- */
/* Existing portal.css already gives .btn a transition + active press.
   We add a hover lift (only when the button isn't already a .lift-hover),
   a light-sweep sheen, and an icon "pop". */
.btn:not(.lift-hover):not([disabled]):hover {
    transform: translateY(-4px) scale(1.05);
    box-shadow: 0 14px 28px -8px rgba(0, 0, 0, 0.4);
    filter: brightness(1.06) saturate(1.08);
    z-index: 2;
}
/* While hovered, the whole button keeps a gentle springy bob going */
.btn:not([disabled]):hover { animation: anim-btn-breathe 1.1s ease-in-out infinite; }
@keyframes anim-btn-breathe {
    0%, 100% { transform: translateY(-4px) scale(1.05); }
    50%      { transform: translateY(-6px) scale(1.07); }
}
.btn { position: relative; overflow: hidden; }

/* Sheen sweep across filled buttons on hover */
.btn-primary, .btn-success, .btn-danger, .btn-info, .btn-warning, .btn-dark,
.btn-outline-primary:hover, .btn-outline-success:hover, .btn-outline-danger:hover {
    --has-sheen: 1;
}
.btn[class*="btn-"]::after {
    content: "";
    position: absolute;
    top: 0; left: -130%;
    width: 55%; height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform: skewX(-22deg);
    pointer-events: none;
    opacity: 0;
}
/* Sheen sweeps again and again while the mouse stays on the button */
.btn[class*="btn-"]:hover::after {
    animation: anim-btn-sheen 1.1s ease-in-out infinite;
}
@keyframes anim-btn-sheen {
    0%   { left: -130%; opacity: 1; }
    60%  { left: 150%;  opacity: 1; }
    100% { left: 150%;  opacity: 0; }
}

/* Icon inside a button keeps dancing the whole time it's hovered */
.btn i, .btn svg { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
.btn:hover i, .btn:hover svg { animation: anim-btn-icon-dance 0.7s ease-in-out infinite; }
@keyframes anim-btn-icon-dance {
    0%, 100% { transform: scale(1.18) translateY(0); }
    50%      { transform: scale(1.34) translateY(-3px); }
}
/* Direction-aware icons get their own continuous personality on hover */
.btn:hover i.fa-arrow-right, .btn:hover i.fa-chevron-right, .btn:hover i.fa-long-arrow-alt-right { animation: anim-slide-r 0.6s ease-in-out infinite; }
.btn:hover i.fa-arrow-left,  .btn:hover i.fa-chevron-left  { animation: anim-slide-l 0.6s ease-in-out infinite; }
.btn:hover i.fa-sync-alt, .btn:hover i.fa-redo, .btn:hover i.fa-circle-notch, .btn:hover i.fa-sync { animation: anim-spin 0.9s linear infinite; }
.btn:hover i.fa-plus, .btn:hover i.fa-plus-circle { animation: anim-plus-spin 0.8s ease-in-out infinite; }
.btn:hover i.fa-trash, .btn:hover i.fa-trash-alt { animation: anim-trash-shake 0.5s ease-in-out infinite; }
.btn:hover i.fa-paper-plane { animation: anim-fly 0.7s ease-in-out infinite; }
.btn:hover i.fa-bell { animation: anim-ring 0.6s ease-in-out infinite; transform-origin: 50% 0; }
.btn:hover i.fa-download, .btn:hover i.fa-file-pdf, .btn:hover i.fa-file-export, .btn:hover i.fa-save { animation: anim-bounce-y 0.6s ease-in-out infinite; }
.btn:hover i.fa-heart, .btn:hover i.fa-star { animation: anim-beat 0.55s ease-in-out infinite; }
@keyframes anim-slide-r { 0%,100%{transform:translateX(0) scale(1.15)} 50%{transform:translateX(6px) scale(1.15)} }
@keyframes anim-slide-l { 0%,100%{transform:translateX(0) scale(1.15)} 50%{transform:translateX(-6px) scale(1.15)} }
@keyframes anim-spin { from{transform:rotate(0) scale(1.15)} to{transform:rotate(360deg) scale(1.15)} }
@keyframes anim-plus-spin { 0%,100%{transform:rotate(0) scale(1.2)} 50%{transform:rotate(90deg) scale(1.35)} }
@keyframes anim-trash-shake { 0%,100%{transform:rotate(-10deg) scale(1.2)} 50%{transform:rotate(10deg) scale(1.2)} }
@keyframes anim-fly { 0%,100%{transform:translate(0,0) rotate(0) scale(1.15)} 50%{transform:translate(5px,-5px) rotate(12deg) scale(1.25)} }
@keyframes anim-ring { 0%,100%{transform:rotate(-12deg)} 50%{transform:rotate(12deg)} }
@keyframes anim-bounce-y { 0%,100%{transform:translateY(0) scale(1.15)} 50%{transform:translateY(4px) scale(1.25)} }
@keyframes anim-beat { 0%,100%{transform:scale(1.15)} 30%{transform:scale(1.4)} 60%{transform:scale(1.2)} }

/* ------------------------------------------------------------------ ICONS -- */
/* General FontAwesome icons get a smooth transition and a hover pop. */
.fas, .far, .fab, .fa { transition: transform 0.22s cubic-bezier(0.34, 1.56, 0.64, 1), color 0.2s ease, filter 0.2s ease; }

/* Clickable / link / list icons keep pulsing while their row is hovered */
a:hover > .fas, a:hover > .far, a:hover > .fab,
.nav-link:hover > .fas, .nav-link:hover > .far,
.lift-hover:hover .stat-icon i,
td:hover > .fas, .list-group-item:hover > .fas { animation: anim-icon-pulse 0.7s ease-in-out infinite; }
@keyframes anim-icon-pulse {
    0%, 100% { transform: scale(1.15); }
    50%      { transform: scale(1.35); }
}

/* Decorative stat icons gently float + sway forever; spin on hover */
.stat-icon { animation: anim-float-soft 3s ease-in-out infinite; will-change: transform; }
.stat-icon:hover { animation: anim-wiggle 0.45s ease-in-out infinite; }
@keyframes anim-float-soft {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    33%      { transform: translateY(-6px) rotate(-3deg); }
    66%      { transform: translateY(-3px) rotate(3deg); }
}
@keyframes anim-wiggle {
    0%, 100% { transform: rotate(-10deg) scale(1.1); }
    50%      { transform: rotate(10deg)  scale(1.1); }
}

/* Sidebar nav: icon nudges right + keeps bouncing on hover */
.nav-link { transition: transform 0.2s var(--ease-premium, ease), background 0.2s ease, color 0.2s ease; }
.nav-link:hover { transform: translateX(6px); }
.nav-link i { transition: transform 0.2s ease; }
.nav-link:hover i { animation: anim-nav-bounce 0.6s ease-in-out infinite; }
@keyframes anim-nav-bounce {
    0%, 100% { transform: scale(1.18) translateX(0); }
    50%      { transform: scale(1.28) translateX(3px); }
}

/* ----------------------------------------------------------------- BADGES -- */
.badge { transition: transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1); display: inline-block; }
.badge:hover { transform: scale(1.12); }
/* Attention badges softly pulse so alerts catch the eye */
.badge-danger, .badge-warning { animation: anim-badge-pulse 2.2s ease-in-out infinite; }
@keyframes anim-badge-pulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.0); }
    50%      { box-shadow: 0 0 0 4px rgba(220, 38, 38, 0.18); }
}

/* ------------------------------------------------------------------ CARDS -- */
/* Cards rise & lift a touch on hover even without .lift-hover */
.glass-card, .card { transition: transform 0.28s var(--ease-premium, ease), box-shadow 0.28s ease; }
.glass-card:not(.lift-hover):hover { transform: translateY(-3px); box-shadow: 0 18px 34px -16px rgba(15, 23, 42, 0.28); }

/* KPI / pill values get a gentle entrance pop when (re)rendered */
.kpi-pill { transition: transform 0.2s ease, box-shadow 0.2s ease; }
.kpi-pill:hover { transform: translateY(-2px) scale(1.02); }

/* Table rows highlight smoothly */
table.table tbody tr { transition: background-color 0.18s ease, transform 0.18s ease; }
table.table.table-hover tbody tr:hover { transform: scale(1.004); }

/* Inputs gently lift focus */
.form-control, .custom-select { transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease; }
.form-control:focus, .custom-select:focus { transform: translateY(-1px); }

/* Floating action button (FAB) breathes */
.fab, .mmg-fab, [class*="fab-"] { transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.25s ease; }
.fab:hover, .mmg-fab:hover, [class*="fab-"]:hover { transform: translateY(-3px) scale(1.08) rotate(6deg); }

/* ----------------------------------------------------------------- EMOJIS -- */
/* Auto-wrapped by window.animateEmojis(): every emoji bobs softly and
   spins on hover, giving the portal a playful, premium feel. */
.emoji-anim {
    display: inline-block;
    animation: anim-emoji-bob 2.4s ease-in-out infinite;
    transition: transform 0.2s ease;
    transform-origin: 50% 85%;
    will-change: transform;
}
/* While the mouse is on the emoji (or on a button/link/card containing it),
   it keeps partying — spinning & bouncing continuously, not just once. */
.emoji-anim:hover,
.btn:hover .emoji-anim,
a:hover .emoji-anim,
.lift-hover:hover .emoji-anim,
.nav-link:hover .emoji-anim,
.badge:hover .emoji-anim {
    animation: anim-emoji-party 0.6s ease-in-out infinite;
}
@keyframes anim-emoji-bob {
    0%, 100% { transform: translateY(0) rotate(0deg) scale(1); }
    20%      { transform: translateY(-4px) rotate(-10deg) scale(1.06); }
    50%      { transform: translateY(0) rotate(0deg) scale(1); }
    80%      { transform: translateY(-3px) rotate(10deg) scale(1.06); }
}
@keyframes anim-emoji-party {
    0%   { transform: scale(1.3) rotate(0deg) translateY(0); }
    25%  { transform: scale(1.5) rotate(-18deg) translateY(-3px); }
    50%  { transform: scale(1.4) rotate(0deg) translateY(-5px); }
    75%  { transform: scale(1.5) rotate(18deg) translateY(-3px); }
    100% { transform: scale(1.3) rotate(0deg) translateY(0); }
}

/* Stagger emoji phases a little so a row of emojis doesn't bob in lockstep */
.emoji-anim:nth-child(3n)   { animation-delay: 0.3s; }
.emoji-anim:nth-child(3n+1) { animation-delay: 0.6s; }

/* Smoother view transition for page changes (enhances existing class) */
.view-transition-in { animation: anim-view-in 0.4s var(--ease-premium, cubic-bezier(0.22, 1, 0.36, 1)); }
@keyframes anim-view-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* -------------------------------------------------- STAGGERED ENTRANCE -- */
/* window.animateView() tags top-level cards/sections of each rendered view
   with .anim-rise + an incremental animation-delay, so every module reveals
   itself with the same rise+fade cascade as the Finance dashboard. */
.anim-rise {
    animation: anim-rise-in 0.6s cubic-bezier(0.22, 1, 0.36, 1) both;
    will-change: transform, opacity;
}
@keyframes anim-rise-in {
    0%   { opacity: 0; transform: translateY(22px) scale(0.985); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* KPI numbers being counted up get a subtle scale "tick" so the rolling
   number feels alive (paired with window.animateCounters). */
[data-cnt] { display: inline-block; }

} /* end prefers-reduced-motion */