/* Animations and effects (inspired by web_old, simplified) */
/* Removed @layer utilities wrapper to fix cascade issues */

.fx{will-change:opacity,transform}
@keyframes fx-fade-in{from{opacity:0}to{opacity:1}}
@keyframes fx-fade-out{from{opacity:1}to{opacity:0}}
.fx-fade-in{animation:fx-fade-in .25s ease-out both}
.fx-fade-out{animation:fx-fade-out .25s ease-out both}

@keyframes fx-slide-in-left{from{transform:translateX(-16px);opacity:.01}to{transform:none;opacity:1}}
.fx-slide-in-left{animation:fx-slide-in-left .25s ease-out both}

@keyframes fx-appear{from{opacity:0;transform:scale(.98)}to{opacity:1;transform:scale(1)}}
.fx-appear{animation:fx-appear .25s ease-out both}

/* Loading and splash animations */
@keyframes spin{to{transform:rotate(360deg)}}
.spinner-ring{animation:spin 1s linear infinite}
.animate-spin{animation:spin 1s linear infinite}

@keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
.loading-container{animation:fadeInUp 0.8s ease-out}
.splash-container{animation:fadeInUp 0.8s ease-out}

@keyframes float{
  0%,100%{transform:translateY(0px) rotate(0deg) scale(1)}
  33%{transform:translateY(-10px) rotate(120deg) scale(1.05)}
  66%{transform:translateY(5px) rotate(240deg) scale(0.95)}
}
.loading-page::before{animation:float 20s ease-in-out infinite}
.splash-page::before{animation:float 30s ease-in-out infinite}

@keyframes pulse{0%,100%{opacity:0.8}50%{opacity:0.5}}
.splash-status{animation:pulse 2s ease-in-out infinite}

/* Progress bar animation */
@keyframes gradient-shift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
.progress-bar{animation:gradient-shift 2s ease-in-out infinite}

/* Success checkmark */
@keyframes checkmark{from{opacity:0;transform:translate(-50%,-50%) scale(0.3)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.spinner-ring.success::after{content:'✓';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:var(--color-success);font-weight:bold;font-size:20px;animation:checkmark 0.4s ease-in-out}

/* Additional utility animations */
@keyframes fx-shimmer{0%{background-position:-200px 0}100%{background-position:calc(200px + 100%) 0}}
.fx-shimmer{
  background:linear-gradient(90deg,var(--color-surface),var(--color-text),var(--color-surface));
  background-size:200px 100%;
  animation:fx-shimmer 1.5s linear infinite;
  animation-direction:reverse;
  opacity:0.1;
}

/* Reverse direction helpers */
/* Direction helpers: base is LTR (reverse); helpers flip back to RTL (normal) */
.fx-shimmer-reverse{animation-direction:normal}
.fx-area-shimmer-reverse{animation-direction:normal}
.fx-shimmer-container-rtl .fx-shimmer{animation-direction:normal}

/* Full-area loading shimmer */
@keyframes fx-area-shimmer{
  0%{background-position:-100% 0}
  100%{background-position:100% 0}
}
.fx-area-shimmer{
  background:linear-gradient(90deg,var(--color-surface) 25%,var(--color-text) 50%,var(--color-surface) 75%);
  background-size:200% 100%;
  animation:fx-area-shimmer 1.5s ease-in-out infinite;
  animation-direction:reverse;
  border-radius:var(--radius-md);
  min-height:200px;
  position:relative;
  overflow:hidden;
  opacity:0.1;
}
.fx-area-shimmer::before{
  content:'';
  position:absolute;
  top:50%;
  left:50%;
  transform:translate(-50%,-50%);
  color:var(--color-text-muted);
  font-size:0.875rem;
  opacity:0.6;
}

@keyframes fx-bounce{0%,20%,53%,80%,100%{transform:translate3d(0,0,0)}40%,43%{transform:translate3d(0,-30px,0)}70%{transform:translate3d(0,-15px,0)}90%{transform:translate3d(0,-4px,0)}}
.fx-bounce{animation:fx-bounce 1s ease-in-out}

@keyframes fx-slide-in-right{from{transform:translateX(16px);opacity:.01}to{transform:none;opacity:1}}
.fx-slide-in-right{animation:fx-slide-in-right .25s ease-out both}

@keyframes fx-slide-in-up{from{transform:translateY(16px);opacity:.01}to{transform:none;opacity:1}}
.fx-slide-in-up{animation:fx-slide-in-up .25s ease-out both}

@keyframes fx-slide-in-down{from{transform:translateY(-16px);opacity:.01}to{transform:none;opacity:1}}
.fx-slide-in-down{animation:fx-slide-in-down .25s ease-out both}

@keyframes fx-shake{0%,100%{transform:translateX(0)}10%,30%,50%,70%,90%{transform:translateX(-4px)}20%,40%,60%,80%{transform:translateX(4px)}}
.fx-shake{animation:fx-shake 0.6s ease-in-out}

@keyframes fx-heartbeat{0%{transform:scale(1)}14%{transform:scale(1.1)}28%{transform:scale(1)}42%{transform:scale(1.1)}70%,100%{transform:scale(1)}}
.fx-heartbeat{animation:fx-heartbeat 1.5s ease-in-out infinite}

/* One-shot animation triggers */
.trigger-fx-fade-in{animation:fx-fade-in .25s ease-out both}
.trigger-fx-fade-out{animation:fx-fade-out .25s ease-out both}
.trigger-fx-slide-in-left{animation:fx-slide-in-left .25s ease-out both}
.trigger-fx-slide-in-right{animation:fx-slide-in-right .25s ease-out both}
.trigger-fx-slide-in-up{animation:fx-slide-in-up .25s ease-out both}
.trigger-fx-slide-in-down{animation:fx-slide-in-down .25s ease-out both}
.trigger-fx-appear{animation:fx-appear .25s ease-out both}
.trigger-fx-bounce{animation:fx-bounce 1s ease-in-out}
.trigger-fx-shake{animation:fx-shake 0.6s ease-in-out}

/* Subtle pop animations (for menu show/hide) */
@keyframes fx-pop-in{from{transform:scale(.98);opacity:.96}to{transform:scale(1);opacity:1}}
@keyframes fx-pop-out{from{transform:scale(1);opacity:1}to{transform:scale(.98);opacity:.96}}
.fx-pop-in{animation:fx-pop-in .12s ease-out both}
.fx-pop-out{animation:fx-pop-out .12s ease-in both}

/* Elastic slide from left for sidebar show/hide */
@keyframes fx-bounce-in-left{
  0%{transform:translateX(-16px);opacity:.98}
  60%{transform:translateX(3px)}
  80%{transform:translateX(-1px)}
  100%{transform:translateX(0);opacity:1}
}
@keyframes fx-bounce-out-left{
  0%{transform:translateX(0);opacity:1}
  20%{transform:translateX(2px)}
  100%{transform:translateX(-16px);opacity:.98}
}
.fx-bounce-in-left{animation:fx-bounce-in-left .28s cubic-bezier(.22,1.02,.36,1) both}
.fx-bounce-out-left{animation:fx-bounce-out-left .22s cubic-bezier(.55,.06,.68,.19) both}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .loading-page::before,.splash-page::before,.progress-bar,.spinner-ring,.splash-status,.loading-container,.splash-container,.fx-shimmer,.fx-area-shimmer,.fx-bounce,.fx-heartbeat,[class*="trigger-fx-"],[class*="fx-"]{animation:none !important;transition:none !important}
  .fx-morph,.fx-morph-fast,.fx-morph-content,.fx-height-transition,.fx-width-transition,.fx-layout-shift,.fx-view-selector-transition{transition:none !important}
  .fx-slide-in-left-subtle,.fx-slide-in-right-subtle,.fx-slide-in-up-subtle,.fx-slide-in-down-subtle{animation:none !important}
  .fx-appear-contextual,.fx-slide-contextual-left,.fx-slide-contextual-right,.fx-slide-contextual-down,.fx-slide-contextual-up{animation:none !important}
  .fx-view-content-transition,.fx-view-content-enter,.fx-view-content-exit{animation:none !important;transition:none !important}
}

/* Reusable transition utilities for size and flex changes */
.fx-size-transition{transition:width .2s ease,height .2s ease,max-width .2s ease,max-height .2s ease,flex-basis .2s ease}
.fx-flex-transition{transition:flex .2s ease,flex-grow .2s ease,flex-shrink .2s ease,flex-basis .2s ease}

/* View selector responsive transitions */
.fx-view-selector-transition{transition:all .25s cubic-bezier(.4,0,.2,1)}
.fx-view-selector-transition > *{transition:all .2s ease}
.fx-view-selector-transition .btn{transition:all .15s cubic-bezier(.4,0,.2,1),transform .1s ease}
.fx-view-selector-transition .btn:hover{transform:translateY(-1px)}
.fx-view-selector-transition .btn:active{transform:scale(0.95);transition:transform .08s ease}
.fx-view-selector-transition .btn.btn-outline-brand{transform:scale(1.05)}

/* Morphing hamburger to close icon */
@keyframes fx-hamburger-to-close{from{transform:rotate(0deg)}to{transform:rotate(180deg)}}
@keyframes fx-close-to-hamburger{from{transform:rotate(180deg)}to{transform:rotate(0deg)}}
.fx-hamburger-to-close{animation:fx-hamburger-to-close .2s ease-out both}
.fx-close-to-hamburger{animation:fx-close-to-hamburger .2s ease-out both}

/* Smart content morphing for dynamic UI changes */
.fx-morph{transition:all .25s cubic-bezier(.4,0,.2,1)}
.fx-morph-fast{transition:all .15s cubic-bezier(.4,0,.2,1)}
.fx-morph-content{transition:opacity .2s ease,transform .2s ease,max-height .25s ease,padding .2s ease,margin .2s ease}

/* Height transitions for expanding/collapsing content */
.fx-height-transition{transition:height .25s ease,max-height .25s ease,padding-top .2s ease,padding-bottom .2s ease}
.fx-height-transition.collapsing{max-height:0;padding-top:0;padding-bottom:0;overflow:hidden}

/* Width transitions for responsive layout changes */
.fx-width-transition{transition:width .25s ease,max-width .25s ease,min-width .2s ease,padding-left .2s ease,padding-right .2s ease}
.fx-width-transition.collapsing{max-width:0;padding-left:0;padding-right:0;overflow:hidden}

/* Smart appear/disappear with scale and fade */
@keyframes fx-appear-smart{from{opacity:0;transform:scale(.96) translateY(-8px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes fx-disappear-smart{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(.96) translateY(-8px)}}
.fx-appear-smart{animation:fx-appear-smart .2s cubic-bezier(.4,0,.2,1) both}
.fx-disappear-smart{animation:fx-disappear-smart .15s cubic-bezier(.4,0,.2,1) both}

/* Context-aware micro animations for subtle movements */
@keyframes fx-slide-in-left-subtle{from{opacity:0;transform:translateX(-6px)}to{opacity:1;transform:translateX(0)}}
@keyframes fx-slide-in-right-subtle{from{opacity:0;transform:translateX(6px)}to{opacity:1;transform:translateX(0)}}
@keyframes fx-slide-in-up-subtle{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes fx-slide-in-down-subtle{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}

.fx-slide-in-left-subtle{animation:fx-slide-in-left-subtle .12s cubic-bezier(.4,0,.2,1) both}
.fx-slide-in-right-subtle{animation:fx-slide-in-right-subtle .12s cubic-bezier(.4,0,.2,1) both}
.fx-slide-in-up-subtle{animation:fx-slide-in-up-subtle .12s cubic-bezier(.4,0,.2,1) both}
.fx-slide-in-down-subtle{animation:fx-slide-in-down-subtle .12s cubic-bezier(.4,0,.2,1) both}

/* Enhanced contextual animations with rotation for dynamic elements */
@keyframes fx-appear-contextual{from{opacity:0;transform:scale(.94) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0deg)}}
@keyframes fx-slide-contextual-left{from{opacity:0;transform:translateX(-20px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes fx-slide-contextual-right{from{opacity:0;transform:translateX(20px) scale(.96)}to{opacity:1;transform:translateX(0) scale(1)}}
@keyframes fx-slide-contextual-down{from{opacity:0;transform:translateY(-16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fx-slide-contextual-up{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}

.fx-appear-contextual{animation:fx-appear-contextual .22s cubic-bezier(.34,1.56,.64,1) both}
.fx-slide-contextual-left{animation:fx-slide-contextual-left .24s cubic-bezier(.34,1.56,.64,1) both}
.fx-slide-contextual-right{animation:fx-slide-contextual-right .24s cubic-bezier(.34,1.56,.64,1) both}
.fx-slide-contextual-down{animation:fx-slide-contextual-down .22s cubic-bezier(.34,1.56,.64,1) both}
.fx-slide-contextual-up{animation:fx-slide-contextual-up .22s cubic-bezier(.34,1.56,.64,1) both}

/* Layout shift animations for responsive breakpoint changes */
.fx-layout-shift{transition:all .3s cubic-bezier(.4,0,.2,1)}
.fx-layout-shift > *{transition:opacity .25s ease,transform .25s cubic-bezier(.4,0,.2,1)}

/* View content transition animations */
.fx-view-content-transition{transition:opacity .2s ease,transform .25s cubic-bezier(.4,0,.2,1)}
.fx-view-content-enter{animation:fx-view-content-enter .3s cubic-bezier(.4,0,.2,1) both}
.fx-view-content-exit{animation:fx-view-content-exit .2s cubic-bezier(.4,0,.2,1) both}

@keyframes fx-view-content-enter{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes fx-view-content-exit{from{opacity:1;transform:translateY(0) scale(1)}to{opacity:0;transform:translateY(-8px) scale(.98)}}

/* Card highlight/flash animation for temporary emphasis */
@keyframes fx-card-highlight{
  0%{box-shadow:0 0 0 0 rgba(var(--color-brand-rgb),0.8),0 0 20px 0 rgba(var(--color-brand-rgb),0.4);transform:scale(1)}
  25%{box-shadow:0 0 0 6px rgba(var(--color-brand-rgb),0.4),0 0 30px 6px rgba(var(--color-brand-rgb),0.2);transform:scale(1.01)}
  50%{box-shadow:0 0 0 8px rgba(var(--color-brand-rgb),0.2),0 0 40px 8px rgba(var(--color-brand-rgb),0.1);transform:scale(1.015)}
  75%{box-shadow:0 0 0 6px rgba(var(--color-brand-rgb),0.1),0 0 30px 6px rgba(var(--color-brand-rgb),0.05);transform:scale(1.01)}
  100%{box-shadow:0 0 0 0 transparent,0 0 0 0 transparent;transform:scale(1)}
}

@keyframes fx-card-glow{
  0%{box-shadow:0 0 0 0 rgba(var(--color-brand-rgb),0.6)}
  50%{box-shadow:0 0 30px 4px rgba(var(--color-brand-rgb),0.4)}
  100%{box-shadow:0 0 0 0 transparent}
}

.fx-card-highlight{animation:fx-card-highlight 0.8s cubic-bezier(.4,0,.2,1) both}
.fx-card-glow{animation:fx-card-glow 0.6s ease-out both}
.trigger-fx-card-highlight{animation:fx-card-highlight 0.8s cubic-bezier(.4,0,.2,1) both}
.trigger-fx-card-glow{animation:fx-card-glow 0.6s ease-out both}

/* Image fade-in: prevents progressive line-by-line render flicker */
.img-fade-in{opacity:0;transition:opacity .2s ease-out}
.img-fade-in.loaded{opacity:1}