/* Custom styles for Mode VC (modevc.com) */

html {
  scroll-behavior: smooth;
}

/* Glassmorphism utility */
.backdrop-blur-xl {
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
}

/* Base custom styling for input boxes */
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus {
  -webkit-text-fill-color: #e2e8f0;
  -webkit-box-shadow: 0 0 0px 1000px #040d0a inset;
  transition: background-color 5000s ease-in-out 0s;
}

/* Canvas styling for smooth performance */
#interactive-canvas {
  will-change: transform;
  transform: translateZ(0);
}

/* Input Focus Ring */
input:focus {
  box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.2);
}

/* Layout fade-in effects */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

main > div > div {
  animation: fadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Custom form message states */
.message-success {
  background-color: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.3);
  color: #34d399;
}

.message-error {
  background-color: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.3);
  color: #f87171;
}