/* =========================================================
   Website Solutions Australia — Shared Site Stylesheet
   Neumorphic "Clay" Design System
   Used across all pages. Edit here to update site-wide.
   ========================================================= */

:root {
  --bg-clay: #E0E5EC;
  --shadow-light: rgba(255, 255, 255, 0.6);
  --shadow-dark: rgba(163, 177, 198, 0.65);
  --shadow-dark-deep: rgba(163, 177, 198, 0.8);
}

body {
  background-color: var(--bg-clay);
  color: #3D4852;
  font-family: 'Inter', sans-serif;
}

/* Neumorphic Shadows System */
.neu-extruded {
  background-color: #E0E5EC;
  box-shadow: 9px 9px 16px var(--shadow-dark), -9px -9px 16px var(--shadow-light);
}

.neu-extruded-hover {
  transition: all 0.3s ease-out;
}
.neu-extruded-hover:hover {
  transform: translateY(-2px);
  box-shadow: 12px 12px 20px var(--shadow-dark), -12px -12px 20px var(--shadow-light);
}

.neu-extruded-sm {
  background-color: #E0E5EC;
  box-shadow: 5px 5px 10px var(--shadow-dark), -5px -5px 10px var(--shadow-light);
}

.neu-inset {
  background-color: #E0E5EC;
  box-shadow: inset 6px 6px 10px var(--shadow-dark), inset -6px -6px 10px var(--shadow-light);
}

.neu-inset-deep {
  background-color: #E0E5EC;
  box-shadow: inset 10px 10px 20px var(--shadow-dark-deep), inset -10px -10px 20px var(--shadow-light);
}

.neu-inset-sm {
  background-color: #E0E5EC;
  box-shadow: inset 3px 3px 6px var(--shadow-dark), inset -3px -3px 6px var(--shadow-light);
}

.neu-button-primary {
  background-color: #4cbfa6;
  color: #ffffff;
  box-shadow: 6px 6px 12px rgba(76, 191, 166, 0.4), -6px -6px 12px rgba(255, 255, 255, 0.6);
  transition: all 0.2s ease-out;
}
.neu-button-primary:hover {
  background-color: #3ea891;
  transform: translateY(-1px);
  box-shadow: 8px 8px 16px rgba(76, 191, 166, 0.5), -8px -8px 16px rgba(255, 255, 255, 0.7);
}
.neu-button-primary:active {
  transform: translateY(1px);
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.2), inset -3px -3px 6px rgba(255, 255, 255, 0.3);
}

/* Floating Ambient Motion */
@keyframes float {
  0%, 100% { transform: translateY(0px); }
  50% { transform: translateY(-10px); }
}
.animate-float {
  animation: float 4s ease-in-out infinite;
}

/* Scroll Reveal Initial States */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}
.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Custom Focus Indicator */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: none;
  ring: 2px;
  box-shadow: 0 0 0 3px #E0E5EC, 0 0 0 5px #4cbfa6;
}