:root {
  color-scheme: dark;
}

html {
  scroll-behavior: smooth;
}

body {
  background:
    radial-gradient(circle at top, rgba(0, 191, 255, 0.08), transparent 28%),
    radial-gradient(circle at bottom right, rgba(230, 57, 70, 0.09), transparent 22%),
    #0a0a14;
}

.temple-panel {
  background: rgba(10, 10, 20, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
  backdrop-filter: blur(14px);
}

.portal-card,
.symptom-button,
button,
a {
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
}

.portal-card:hover,
.symptom-button:hover,
button:hover {
  transform: translateY(-1px);
}

#practice-card.is-visible {
  animation: rise 220ms ease-out;
}

@keyframes rise {
  from {
    opacity: 0.65;
    transform: translateY(6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}