/* Non-Critical CSS - Hover effects, transitions, and decorative elements */
/* Cards: hover effects and transitions */
#main-content .rounded-xl.border,
#main-content .rounded-lg.border,
#main-content .rounded-md.border {
  transition: transform 300ms ease, box-shadow 300ms ease, border-color 300ms ease;
  will-change: transform;
}

/* Scale ONLY individual card-sized elements (rounded-xl). Do not scale lg/md wrappers */
#main-content .rounded-xl.border:hover {
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
  border-color: rgba(255, 255, 255, 0.12);
}

#main-content .rounded-lg.border:hover,
#main-content .rounded-md.border:hover {
  transform: none;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Optional gradient border hint via pseudo */
#main-content .rounded-xl.border,
#main-content .rounded-lg.border,
#main-content .rounded-md.border { 
  position: relative; 
}

#main-content .rounded-xl.border::after,
#main-content .rounded-lg.border::after,
#main-content .rounded-md.border::after {
  content: ""; 
  position: absolute; 
  inset: 0; 
  border-radius: inherit; 
  pointer-events: none;
  padding: 1px; 
  background: linear-gradient(90deg, rgba(30,64,175,0) 0%, rgba(30,64,175,0.45) 50%, rgba(30,64,175,0) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; 
  mask-composite: exclude; 
  opacity: 0; 
  transition: opacity 300ms ease;
}

#main-content .rounded-xl.border:hover::after,
#main-content .rounded-lg.border:hover::after,
#main-content .rounded-md.border:hover::after { 
  opacity: 1; 
}

/* Buttons: hover effects and transitions */
#main-content button,
#main-content a[role="button"] {
  transition: transform 300ms ease, box-shadow 300ms ease, background 300ms ease, border-color 300ms ease;
}

#main-content button:hover,
#main-content a[role="button"]:hover {
  transform: translateY(-2px);
  background-image: linear-gradient(180deg, rgba(30,64,175,0.22), rgba(30,64,175,0.12));
  box-shadow: 0 6px 16px rgba(0,0,0,0.25);
  border-color: rgba(255,255,255,0.12) !important;
}

/* Do not scale entire sections on hover */
#crypto-overview .border:hover,
#crypto-movers .border:hover,
#crypto-news .border:hover { /* keep subtle highlight only */
  transform: none !important;
  box-shadow: 0 6px 18px rgba(0,0,0,0.28);
  border-color: rgba(255, 255, 255, 0.12);
}

/* Typography + transitions */
#main-content, #main-content * { 
  transition: all 300ms ease-in-out; 
}