/**
 * Snow Settled Effect on Buttons and Pill Areas
 * Creates a visual effect of snow having settled on top of buttons and pill-styled elements
 */

/* Snow effect for all buttons */
.cd-btn,
.cd-nav-login,
.cd-icon-button,
.cd-user-menu-item,
.cd-nav-dropdown-item {
  position: relative;
  overflow: visible;
}

.cd-btn::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 40%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  z-index: 1;
  filter: blur(0.5px);
  box-shadow: 
    0 -1px 2px rgba(255, 255, 255, 0.8),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
}

/* More prominent snow for primary buttons and login button */
.cd-btn-primary::before,
.cd-nav-login::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.75) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 999px 999px 0 0;
  pointer-events: none;
  z-index: 1;
  filter: blur(0.5px);
  box-shadow: 
    0 -1px 2px rgba(255, 255, 255, 0.8),
    inset 0 1px 1px rgba(255, 255, 255, 0.4);
  animation: snowShimmer 4s ease-in-out infinite;
}

/* Snow effect for pill-style KPI rows */
.cd-kpi-row {
  position: relative;
  overflow: visible;
}

.cd-kpi-row::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  right: 0;
  height: 8px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 0.9rem 0.9rem 0 0;
  pointer-events: none;
  z-index: 1;
  filter: blur(0.8px);
  box-shadow: 
    0 -1px 3px rgba(255, 255, 255, 0.6),
    inset 0 1px 2px rgba(255, 255, 255, 0.5);
}

/* Add subtle sparkle effect with multiple pseudo-elements */
.cd-kpi-row::after {
  content: '';
  position: absolute;
  top: -2px;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.9) 20%,
    rgba(255, 255, 255, 0.9) 80%,
    transparent 100%
  );
  pointer-events: none;
  z-index: 2;
  filter: blur(0.3px);
}

/* Snow effect for cards */
.cd-card {
  position: relative;
  overflow: visible;
}

.cd-card::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.85) 0%,
    rgba(255, 255, 255, 0.65) 40%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 0.9rem 0.9rem 0 0;
  pointer-events: none;
  z-index: 1;
  filter: blur(0.6px);
  box-shadow: 
    0 -1px 2px rgba(255, 255, 255, 0.5),
    inset 0 1px 1px rgba(255, 255, 255, 0.3);
}

/* Snow effect for nav dropdowns (consolidated) */
.cd-user-dropdown,
.cd-nav-dropdown {
  position: relative;
  overflow: visible;
}

.cd-user-dropdown::before,
.cd-nav-dropdown::before {
  content: '';
  position: absolute;
  top: -2px;
  left: 0;
  right: 0;
  height: 5px;
  background: linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.9) 0%,
    rgba(255, 255, 255, 0.7) 40%,
    rgba(255, 255, 255, 0) 100%
  );
  border-radius: 0.75rem 0.75rem 0 0;
  pointer-events: none;
  z-index: 1;
  filter: blur(0.5px);
}

/* Subtle snow drift variations for visual interest */
@keyframes snowShimmer {
  0%, 100% {
    opacity: 0.9;
  }
  50% {
    opacity: 1;
  }
}

.cd-kpi-row::before {
  animation: snowShimmer 6s ease-in-out infinite;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {
  .cd-btn::before,
  .cd-nav-login::before,
  .cd-kpi-row::before,
  .cd-kpi-row::after,
  .cd-card::before,
  .cd-user-dropdown::before,
  .cd-nav-dropdown::before {
    animation: none;
  }
}

/* Ensure snow effect works on hover states */
.cd-btn:hover::before,
.cd-nav-login:hover::before {
  opacity: 0.95;
}