/* Il font DM Sans è caricato (non bloccante) dall'HTML; niente @import qui:
   un @import remoto blocca il rendering finché Google Fonts non risponde. */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  min-width: 0;
}

:root {
  --h: 255;
  --bg: #06030f;
  --text: #dde6f5;
  --text-dim: #7a8fad;
  --accent: hsl(var(--h), 72%, 64%);
  --accent-mid: hsl(var(--h), 60%, 50%);
  --accent-deep: hsl(var(--h), 55%, 38%);
  --success: #34d399;
  --warning: #f59e0b;
  --error: #f87171;
  --sidebar-w: 255px;
  --r: 22px;
}

html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Scorrimento fluido sugli ancoraggi (disattivato se l'utente preferisce meno animazioni) */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* Selezione del testo in tema */
::selection {
  background: hsla(var(--h), 72%, 64%, 0.35);
  color: #fff;
}

/* Scrollbar scura coerente col tema */
* { scrollbar-width: thin; scrollbar-color: hsla(var(--h), 30%, 40%, .5) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background: hsla(var(--h), 30%, 42%, .45);
  border-radius: 999px;
  border: 2px solid var(--bg);
}
::-webkit-scrollbar-thumb:hover { background: hsla(var(--h), 45%, 52%, .6); }

body {
  min-height: 100vh;
  background: var(--bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--text);
  font-weight: 400;
}

.page {
  display: none;
}

.page.page-active {
  display: block;
}

.twarn {
  background: rgba(245, 158, 11, 0.08);
  color: var(--warning);
  border: 1px solid rgba(245, 158, 11, 0.14);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

@keyframes float {
  0% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(20px, 30px) scale(1.05); }
  100% { transform: translate(40px, 55px) scale(1.1); }
}

.orb {
  position: fixed;
  border-radius: 50%;
  filter: blur(90px);
  pointer-events: none;
  z-index: 0;
  animation: float 20s ease-in-out infinite alternate;
  will-change: transform;
}

.orb1 {
  width: 700px;
  height: 700px;
  top: -220px;
  left: -160px;
  background: radial-gradient(circle at 35% 25%, hsla(var(--h), 65%, 38%, 0.45), hsla(var(--h), 55%, 28%, 0.2) 45%, transparent 65%);
  animation-duration: 18s;
}

.orb2 {
  width: 560px;
  height: 560px;
  top: 15%;
  right: -80px;
  background: radial-gradient(circle at 65% 35%, hsla(var(--h), 60%, 44%, 0.3), hsla(var(--h), 50%, 30%, 0.1) 50%, transparent 70%);
  animation-delay: -6s;
  animation-duration: 22s;
}

.orb3 {
  width: 480px;
  height: 480px;
  bottom: -80px;
  left: 18%;
  background: radial-gradient(circle at 25% 55%, hsla(var(--h), 68%, 40%, 0.28), transparent 65%);
  animation-delay: -12s;
  animation-duration: 16s;
}

@keyframes breathe {
  0%, 100% {
    opacity: 1;
    box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.4);
  }
  50% {
    opacity: 0.7;
    box-shadow: 0 0 0 5px rgba(52, 211, 153, 0);
  }
}

@keyframes pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

@keyframes pulse-orange {
  0% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0.6); }
  70% { box-shadow: 0 0 0 6px rgba(249, 115, 22, 0); }
  100% { box-shadow: 0 0 0 0 rgba(249, 115, 22, 0); }
}