/* =========================================================
   VARIABILI GLOBALI
   ---------------------------------------------------------
   Palette, ombre, raggi e tempi di animazione centralizzati
   per rendere il layout più facile da mantenere.
========================================================== */
:root {
  --green: #1E6428;
  --slate: #333E4A;
  --white: #ffffff;
  --overlay: rgba(20, 29, 26, 0.34);
  --panel-bg: rgba(255, 255, 255, 0.85);
  --panel-border: rgba(51, 62, 74, 0.08);
  --text: #333E4A;
  --text-soft: rgba(51, 62, 74, 0.74);
  --shadow: 0 24px 80px rgba(13, 20, 27, 0.20);
  --radius: 70px;
  --ease: 700ms cubic-bezier(.2,.8,.2,1);

  /* Dimensioni chiave dell'interfaccia */
  --panel-width: min(30vw, 460px);
  --panel-min-height: 520px;
  --orb-size: 150px;
}

/* Reset base */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Raleway", sans-serif;
  background: var(--slate);
}

/* =========================================================
   BODY
   ---------------------------------------------------------
   Il body occupa l'intera viewport e ospita il background.
   Usiamo overflow hidden per evitare scroll durante il morph.
========================================================== */
body {
  min-height: 100vh;
  overflow: hidden;
  position: relative;
  background-image:
	linear-gradient(var(--overlay), var(--overlay)),
	url('/img/sostenibilità-Community.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* Velo luminoso sopra il background */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  background:
	radial-gradient(circle at center, rgba(255,255,255,0.08), transparent 30%),
	linear-gradient(180deg, rgba(255,255,255,0.02), rgba(0,0,0,0.08));
  pointer-events: none;
}

/* =========================================================
   STAGE
   ---------------------------------------------------------
   Questo contenitore ora copre SEMPRE tutta la viewport.
   In questo modo sia il cerchio iniziale sia il pannello
   risultano perfettamente centrati rispetto alla finestra
   del browser, non rispetto alla larghezza del contenitore.
========================================================== */
.stage {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
  z-index: 1;
}

/* =========================================================
   CERCHIO INTRODUTTIVO
   ---------------------------------------------------------
   Viene posizionato esattamente al centro della viewport.
========================================================== */
.intro-orb {
  position: fixed;
  left: 50%;
  top: 50%;
  width: var(--orb-size);
  height: var(--orb-size);
  transform: translate(-50%, -50%);
  display: grid;
  place-items: center;
  animation: orbExit 1.1s ease 2.15s forwards;
  z-index: 3;
  pointer-events: none;
}

.intro-orb svg {
  width: var(--orb-size);
  height: var(--orb-size);
  overflow: visible;
}

.orb-stroke {
  fill: none;
  stroke: var(--white);
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-dasharray: 410;
  stroke-dashoffset: 410;
  opacity: 0.95;
  animation: drawCircle 1.5s ease forwards;
}

.orb-fill {
  fill: var(--white);
  opacity: 0;
  transform-origin: center;
  animation: fillOrb 0.42s ease 1.35s forwards;
}

.orb-core {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0;
  transform: scale(0.5);
  animation: pulseCore 0.45s ease 1.55s forwards;
  box-shadow: 0 0 0 0 rgba(30, 100, 40, 0.25);
}

/* =========================================================
   PANNELLO
   ---------------------------------------------------------
   Anche il pannello è centrato rispetto alla viewport.
   transform-origin: center garantisce che l'apertura parta
   dal centro esatto dello schermo.
========================================================== */
.panel {
  position: relative;
  width: var(--panel-width);
  min-width: 320px;
  min-height: var(--panel-min-height);
  background: var(--panel-bg);
  border: 1px solid var(--panel-border);
  border-radius: 999px;
  box-shadow: var(--shadow);
  overflow: hidden;
  opacity: 0;
  transform: scale(0.78);
  transform-origin: center center;
  animation: morphPanel 1.15s cubic-bezier(.18,.82,.18,1) 1.75s forwards;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 2;
}

.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
	radial-gradient(circle at 0% 0%, rgba(30,100,40,0.08), transparent 34%),
	radial-gradient(circle at 100% 100%, rgba(51,62,74,0.08), transparent 34%);
  pointer-events: none;
}

.panel__inner {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: var(--panel-min-height);
  padding: 50px !important;
  display: flex;
  flex-direction: column;
  justify-content: center;
  opacity: 0;
  animation: fadeUp 0.7s ease 2.45s forwards;
}

/* =========================================================
   BRAND
========================================================== */
.brand {
  text-align: center;
  margin-bottom: 28px;
}

.brand__dot {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 0 auto 12px;
  background-image: url("/img/TUNAP_RGB.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 0 0 8px rgba(30, 100, 40, 0.08);
}

.brand h1 {
  color: var(--text);
  font-size: clamp(1.5rem, 2vw, 1.9rem);
  letter-spacing: -0.04em;
  font-weight: 700;
}

.brand p {
  color: var(--text-soft);
  font-size: 0.95rem;
  line-height: 1.55;
  margin-top: 8px;
}

/* =========================================================
   SWITCH LOGIN / RECUPERO
========================================================== */
.switch {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 6px;
  background: rgba(51, 62, 74, 0.06);
  border-radius: 18px;
  margin-bottom: 22px;
}

.switch__pill {
  position: absolute;
  top: 6px;
  left: 6px;
  width: calc(50% - 10px);
  height: calc(100% - 12px);
  border-radius: 14px;
  background: var(--white);
  box-shadow: 0 8px 24px rgba(51, 62, 74, 0.10);
  transition: transform 420ms cubic-bezier(.2,.8,.2,1);
}

.panel[data-view="recovery"] .switch__pill {
  transform: translateX(calc(100% + 8px));
}

.switch button {
  position: relative;
  z-index: 1;
  height: 48px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--text-soft);
  font-weight: 700;
  cursor: pointer;
  transition: color .25s ease;
}

.switch button.is-active {
  color: var(--text);
}

/* =========================================================
   VISTE E FORM
========================================================== */
.views {
  position: relative;
  min-height: 280px;
}

.view {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transform: translateY(14px);
  transition: opacity var(--ease), transform var(--ease);
}

.view.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

form {
  display: grid;
  gap: 14px;
}

.field {
  display: grid;
  gap: 8px;
}

.field label {
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 600;
}

.input-wrap {
  position: relative;
}

input {
  width: 100%;
  height: 54px;
  border: 1px solid rgba(51, 62, 74, 0.12);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.82);
  color: var(--text);
  padding: 0 16px;
  font-size: 0.98rem;
  outline: none;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

input::placeholder {
  color: rgba(51, 62, 74, 0.44);
}

input:focus {
  border-color: rgba(30, 100, 40, 0.36);
  box-shadow: 0 0 0 4px rgba(30, 100, 40, 0.12);
  transform: translateY(-1px);
}

.toggle-password {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  border: 0;
  background: transparent;
  color: var(--green);
  font-size: 0.86rem;
  font-weight: 700;
  cursor: pointer;
}

.form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 2px;
}

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--green);
}

.link {
  color: var(--green);
  text-decoration: none;
  font-weight: 700;
  font-size: 0.92rem;
}

.link:hover {
  text-decoration: underline;
}

.btn {
  width: 100%;
  height: 56px;
  border: 0;
  border-radius: 28px;
  background: var(--green);
  color: var(--white);
  font-size: 0.98rem;
  font-weight: 700;
  cursor: pointer;
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 14px 30px rgba(30, 100, 40, 0.22);
}

.btn:hover,
.btn:focus-visible {
  transform: translateY(-1px);
  background: #185420;
  outline: none;
}

.subtle-btn {
  width: 100%;
  height: 52px;
  border-radius: 26px;
  border: 1px solid rgba(51, 62, 74, 0.12);
  background: transparent;
  color: var(--slate);
  font-weight: 700;
  cursor: pointer;
  transition: background .2s ease, transform .2s ease;
}

.subtle-btn:hover,
.subtle-btn:focus-visible {
  background: rgba(51, 62, 74, 0.04);
  transform: translateY(-1px);
  outline: none;
}

.message {
  display: none;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.5;
}

.message.is-visible {
  display: block;
}

.message.is-error {
  background: rgba(51, 62, 74, 0.08);
  color: var(--slate);
  border: 1px solid rgba(51, 62, 74, 0.08);
}

.message.is-success {
  background: rgba(30, 100, 40, 0.10);
  color: var(--green);
  border: 1px solid rgba(30, 100, 40, 0.10);
}

.helper {
  color: var(--text-soft);
  font-size: 0.92rem;
  line-height: 1.55;
  margin-bottom: 18px;
}

/* =========================================================
   ANIMAZIONI
========================================================== */
@keyframes drawCircle {
  from { stroke-dashoffset: 410; }
  to { stroke-dashoffset: 0; }
}

@keyframes fillOrb {
  0% { opacity: 0; transform: scale(0.9); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes pulseCore {
  0% { opacity: 0; transform: scale(0.5); box-shadow: 0 0 0 0 rgba(30, 100, 40, 0.22); }
  100% { opacity: 1; transform: scale(1); box-shadow: 0 0 0 14px rgba(30, 100, 40, 0); }
}

/* Il pannello nasce dal centro e rimane centrato durante tutto il morph. */
@keyframes morphPanel {
  0% {
	opacity: 0;
	border-radius: 999px;
	transform: scale(0.78);
	min-height: var(--orb-size);
  }
  40% {
	opacity: 1;
	border-radius: 80px 80px 42px 42px;
  }
  100% {
	opacity: 1;
	border-radius: var(--radius);
	transform: scale(1);
	min-height: var(--panel-min-height);
  }
}

@keyframes orbExit {
  to {
	opacity: 0;
	transform: translate(-50%, -50%) scale(1.18);
  }
}

@keyframes fadeUp {
  from {
	opacity: 0;
	transform: translateY(18px);
  }
  to {
	opacity: 1;
	transform: translateY(0);
  }
}

/* =========================================================
   RESPONSIVE
========================================================== */
@media (max-width: 1200px) {
  :root {
	--panel-width: min(38vw, 460px);
  }
}

@media (max-width: 900px) {
  :root {
	--panel-width: min(54vw, 460px);
  }
}

@media (max-width: 640px) {
  :root {
	--panel-width: min(100vw - 32px, 420px);
	--panel-min-height: 500px;
  }

  .panel {
	min-width: 0;
  }

  .panel__inner {
	min-height: var(--panel-min-height);
	padding: 22px;
  }

  .form-row {
	flex-direction: column;
	align-items: flex-start;
  }
}

/* Accessibilità: disattiva animazioni per utenti che preferiscono meno movimento. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
	animation: none !important;
	transition: none !important;
	scroll-behavior: auto !important;
  }

  .panel,
  .panel__inner {
	opacity: 1;
	transform: none;
  }

  .intro-orb {
	display: none;
  }
}