/*
  Liquid Motion layer
  - adds blur/animations
  - DOES NOT override the color system (all colors stay controlled via CCM variables)
*/

.ccm-modal .ccm-card{
  backdrop-filter: blur(var(--ccm-lm-blur)) saturate(150%) !important;
  -webkit-backdrop-filter: blur(var(--ccm-lm-blur)) saturate(150%) !important;
  animation: ccmLiquidFade .6s ease both;
}

.ccm-fab{
  backdrop-filter: blur(var(--ccm-lm-fab-blur)) !important;
  -webkit-backdrop-filter: blur(var(--ccm-lm-fab-blur)) !important;
  animation: ccmFabBreath 3.2s ease-in-out infinite;
}
.ccm-fab:hover{ transform: scale(1.05) !important; }

/* Subtle glassy feel for interactive elements without changing their colors */
.ccm-btn,
.ccm-acc summary{
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

@keyframes ccmLiquidFade{
  0%{opacity:0;transform:translateY(8px) scale(.97);filter:blur(4px);}
  100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);}
}

@keyframes ccmFabBreath{
  0%,100%{transform:scale(1);} 
  50%{transform:scale(1.03);} 
}