/* ── Theme Variables ──────────────────────────── */
:root {
  --accent: #ed524e;
  --bg: #ffffff;
  --text: #333333;
  --meta: #777777;
  --blob1: #ed524e;
  --blob2: #6ea8fe;
  --blob3: #a78bfa;
  --blob-opacity: 0.55;
}

[data-theme="dark"] {
  --bg: #0d0d0d;
  --text: #e0e0e0;
  --meta: #aaaaaa;
  --blob-opacity: 0.45;
}

/* ── Apply theme ────────────────────────────── */
html {
  background: var(--bg) !important;
  transition: background 0.45s ease;
}
body {
  background: transparent !important;
  color: var(--text) !important;
  transition: color 0.45s ease;
}

/* Dark mode: fallback CSS (il JS inietta lo style dinamico che vince sempre) */
[data-theme="dark"] body {
  color: #e0e0e0 !important;
}

.uk-text-meta {
  color: var(--meta) !important;
  transition: color 0.45s ease;
}

/* ── Content above blobs ────────────────────── */
.uk-section {
  position: relative;
  z-index: 1;
}

/* ── Background blobs (iniettati via JS) ─────── */
.bg-blob-1,
.bg-blob-2,
.bg-blob-3 {
  position: fixed;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
}

.bg-blob-1 {
  width: clamp(340px, 55vw, 660px);
  height: clamp(340px, 55vw, 660px);
  background: radial-gradient(circle, var(--blob1) 0%, transparent 65%);
  filter: blur(75px);
  opacity: var(--blob-opacity);
  top: -10%;
  right: -6%;
  animation: blobA 7s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.bg-blob-2 {
  width: clamp(280px, 46vw, 560px);
  height: clamp(280px, 46vw, 560px);
  background: radial-gradient(circle, var(--blob2) 0%, transparent 65%);
  filter: blur(70px);
  opacity: var(--blob-opacity);
  bottom: -10%;
  left: -6%;
  animation: blobB 9s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

.bg-blob-3 {
  width: clamp(220px, 38vw, 460px);
  height: clamp(220px, 38vw, 460px);
  background: radial-gradient(circle, var(--blob3) 0%, transparent 65%);
  filter: blur(65px);
  opacity: calc(var(--blob-opacity) * 0.8);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: blobC 12s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}

@keyframes blobA {
  0%, 100% { transform: translate(0,     0)     scale(1);    }
  25%       { transform: translate(-45px,  35px)  scale(1.12); }
  50%       { transform: translate( 30px, -28px)  scale(0.88); }
  75%       { transform: translate(-20px, -35px)  scale(1.08); }
}

@keyframes blobB {
  0%, 100% { transform: translate(0,     0)     scale(1);    }
  33%       { transform: translate( 55px, -38px)  scale(1.14); }
  66%       { transform: translate(-28px,  45px)  scale(0.86); }
}

@keyframes blobC {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    }
  40%       { transform: translate(-50%, -50%) scale(1.28); }
  70%       { transform: translate(-50%, -50%) scale(0.78); }
}

/* ── Toggle button ──────────────────────────── */
#theme-toggle {
  position: fixed;
  top: 18px;
  right: 18px;
  z-index: 200;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(128,128,128,0.25);
  background: rgba(255,255,255,0.12);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.2s ease, border-color 0.3s ease, background 0.3s ease;
  color: var(--text);
}

#theme-toggle:hover {
  transform: scale(1.12);
  border-color: var(--accent);
}

#theme-toggle:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 4px;
}

[data-theme="dark"] #theme-toggle {
  background: rgba(0,0,0,0.18);
  border-color: rgba(220,220,220,0.18);
}

.t-sun,
.t-moon {
  position: absolute;
  transition: opacity 0.35s ease, transform 0.4s ease;
}

.t-sun  { opacity: 0; transform: rotate(-80deg) scale(0.5); }
.t-moon { opacity: 1; transform: rotate(0deg)   scale(1);   }

[data-theme="dark"] .t-sun  { opacity: 1; transform: rotate(0deg)  scale(1);   }
[data-theme="dark"] .t-moon { opacity: 0; transform: rotate(80deg) scale(0.5); }