/* =====================================================================
   VIV | COSMO & SOUL · pagina "Sito in arrivo" (soulflowguide.com)
   Stesso design system del sito demo (galassia + oro starlight)
   ===================================================================== */

:root {
  --space-900: #05010f;
  --space-800: #0a0618;
  --violet-500:#8b5cf6;
  --violet-400:#a78bfa;
  --magenta:   #d946ef;
  --sky:       #38bdf8;
  --gold:      #f5d67b;
  --gold-2:    #e8b84b;
  --text:      #ece9ff;
  --muted:     #aba3d4;
  --muted-2:   #837aa8;
  --line:      rgba(167,139,250,.18);
  --glass-brd: rgba(167,139,250,.22);
  --grad-cta:    linear-gradient(135deg, #f5d67b 0%, #e8b84b 100%);
  --grad-text:   linear-gradient(120deg, #f5d67b, #ffe9b0 30%, #f5d67b 70%);
  --grad-heading:linear-gradient(120deg, #ffffff 0%, #d7ccff 60%, #a78bfa 100%);
  --glow-gold:   0 0 30px rgba(245,214,123,.35);
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-mark:    "Cinzel", var(--font-display);
  --font-body:    "Inter", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100svh;
  display: flex; flex-direction: column;
  font-family: var(--font-body); font-size: 17px; line-height: 1.65; letter-spacing: .1px;
  color: var(--text); background: var(--space-800);
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
h1 { margin: 0; font-weight: 500; line-height: 1.12; }
::selection { background: rgba(217,70,239,.4); color: #fff; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px; }

/* ------------------------ Cosmic background ------------------------ */
#starfield {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: -3; display: block;
  background: radial-gradient(120% 80% at 50% -10%, #1a1246 0%, #0a0618 45%, #05010f 100%);
}
.nebula-layer { position: fixed; inset: 0; z-index: -2; overflow: hidden; pointer-events: none; }
.nebula {
  position: absolute; border-radius: 50%; filter: blur(70px); opacity: .5;
  mix-blend-mode: screen; animation: drift 26s ease-in-out infinite alternate;
}
.nebula--violet { width: 46vw; height: 46vw; top: -8vw; left: -6vw;
  background: radial-gradient(circle, rgba(124,58,237,.85), transparent 68%); }
.nebula--magenta { width: 40vw; height: 40vw; top: 32%; right: -10vw;
  background: radial-gradient(circle, rgba(217,70,239,.7), transparent 68%); animation-delay: -8s; }
.nebula--blue { width: 44vw; height: 44vw; bottom: -12vw; left: 18%;
  background: radial-gradient(circle, rgba(56,132,246,.65), transparent 68%); animation-delay: -14s; }
@keyframes drift {
  0%   { transform: translate3d(0,0,0) scale(1); }
  100% { transform: translate3d(4vw,3vw,0) scale(1.12); }
}

/* ------------------------------ Top bar ---------------------------- */
.topbar {
  width: min(1160px, 100% - 44px); margin-inline: auto;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 20px 0;
}
.status {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mark); font-size: .7rem; font-weight: 600;
  text-transform: uppercase; letter-spacing: .28em; color: var(--muted);
}
.status__dot {
  width: 8px; height: 8px; border-radius: 50%; background: var(--gold);
  box-shadow: 0 0 0 0 rgba(245,214,123,.6); animation: pulse 2.2s ease-out infinite;
}
@keyframes pulse {
  0%   { box-shadow: 0 0 0 0 rgba(245,214,123,.55); }
  100% { box-shadow: 0 0 0 12px rgba(245,214,123,0); }
}
.lang-toggle {
  background: rgba(167,139,250,.08); border: 1px solid var(--glass-brd); color: var(--text);
  border-radius: 999px; padding: 7px 14px; font-size: .78rem; font-weight: 600; letter-spacing: .1em;
  transition: background .2s, border-color .2s, color .2s;
}
.lang-toggle:hover { border-color: var(--violet-400); color: var(--gold); background: rgba(167,139,250,.16); }

/* ------------------------------- Main ------------------------------ */
.uc {
  flex: 1; width: min(760px, 100% - 44px); margin-inline: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; padding: 0 0 44px;
}

.uc__logo-wrap { position: relative; display: grid; place-items: center; margin: 46px 0 54px; }
.uc__logo {
  position: relative; z-index: 1;
  width: 196px; max-width: 56vw; height: auto;
  filter: drop-shadow(0 0 16px rgba(167,139,250,.45));
}
/* thin orbit ring with a small gold planet behind the logo */
.uc__orbit {
  position: absolute; left: 50%; top: 50%;
  width: 264px; height: 264px; max-width: 76vw; max-height: 76vw;
  translate: -50% -50%; border-radius: 50%;
  border: 1px solid rgba(167,139,250,.2);
  animation: spin 40s linear infinite;
}
.uc__orbit::before {
  content: ""; position: absolute; inset: 22px; border-radius: 50%;
  border: 1px dashed rgba(245,214,123,.14);
}
.uc__planet {
  position: absolute; top: -5px; left: 50%; translate: -50% 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--gold); box-shadow: 0 0 14px rgba(245,214,123,.8);
}
@keyframes spin { to { transform: rotate(360deg); } }

.eyebrow {
  font-family: var(--font-mark); text-transform: uppercase; letter-spacing: .32em;
  font-size: .72rem; color: var(--gold); margin: 0 0 18px; font-weight: 600;
}
.uc__title {
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(2.5rem, 6.2vw, 4.1rem); letter-spacing: .5px;
  background: var(--grad-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  margin-bottom: 20px;
}
.uc__title em {
  font-style: italic; display: inline-block; padding-right: .06em;
  background: var(--grad-text);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.uc__lead { color: var(--muted); font-size: clamp(1.02rem, 2vw, 1.14rem); max-width: 600px; margin: 0 auto 24px; }
.uc__lead strong { color: var(--text); font-weight: 500; }

.uc__services {
  list-style: none; margin: 0 0 30px; padding: 0;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px;
}
.uc__services li {
  padding: 7px 16px; border-radius: 999px; font-size: .86rem; color: var(--text);
  background: rgba(20,14,46,.55); border: 1px solid var(--glass-brd);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}

.uc__actions { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap; }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  padding: 15px 30px; border-radius: 999px; font-weight: 600; font-size: .96rem;
  letter-spacing: .02em; border: 1px solid transparent; white-space: nowrap;
  transition: transform .25s ease, box-shadow .25s ease, background .25s, border-color .25s;
}
.btn--gold { background: var(--grad-cta); color: #241a05; box-shadow: var(--glow-gold); }
.btn--gold:hover { transform: translateY(-3px); box-shadow: 0 12px 34px rgba(245,214,123,.4); }
.btn--ghost { background: rgba(167,139,250,.06); color: var(--text); border-color: var(--glass-brd); }
.btn--ghost:hover { transform: translateY(-3px); border-color: var(--violet-400); background: rgba(167,139,250,.14); }

.uc__cite {
  margin: 24px 0 0; font-family: var(--font-display); font-style: italic;
  font-size: clamp(1rem, 2vw, 1.2rem); color: var(--gold); letter-spacing: .02em;
}
.uc__cite span { color: var(--muted-2); font-style: normal; font-size: .85em; }

/* ------------------------------- 404 ------------------------------- */
.topbar__home {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-mark); font-size: .8rem; font-weight: 600; letter-spacing: .14em; color: #fff;
  white-space: nowrap;
}
.topbar__home img { width: 32px; height: 32px; border-radius: 8px; }
.uc__code {
  margin: 0 0 22px; line-height: 1;
  font-family: var(--font-display); font-weight: 500;
  font-size: clamp(6rem, 22vw, 11rem); letter-spacing: .04em;
  background: var(--grad-heading);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  display: inline-flex; align-items: center;
}
.uc__code-star {
  width: .6em; height: .6em; margin: 0 .06em;
  filter: drop-shadow(0 0 14px rgba(245,214,123,.75));
  animation: twinkle 3.2s ease-in-out infinite;
}
@keyframes twinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(.82) rotate(45deg); opacity: .8; }
}
.is-404 .uc { padding-top: 20px; }

/* ------------------------------ Footer ----------------------------- */
.foot {
  border-top: 1px solid var(--line); background: rgba(6,3,16,.6);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 20px 22px 26px; text-align: center;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 28px;
}
.foot p { margin: 0; color: var(--muted-2); font-size: .82rem; }
.foot a { transition: color .2s; }
.foot a:hover { color: var(--gold); }

/* --------------------------- Entrance anim ------------------------- */
/* Gated behind .js: without JavaScript the content stays fully visible. */
.js .rise { opacity: 0; animation: rise 1s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0s); }
@keyframes rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------- Responsive --------------------------- */
@media (max-width: 560px) {
  body { font-size: 16px; }
  .topbar { padding: 16px 0; }
  .status { letter-spacing: .2em; font-size: .64rem; }
  .uc__logo-wrap { margin: 48px 0 52px; }
  .uc__logo { width: 180px; }
  .uc__orbit { width: 244px; height: 244px; }
  .uc__actions { flex-direction: column; width: 100%; }
  .uc__actions .btn { width: 100%; }
  .eyebrow { letter-spacing: .22em; font-size: .66rem; }
  .topbar__home span { font-size: .7rem; letter-spacing: .08em; }
}

@media (prefers-reduced-motion: reduce) {
  .uc__orbit, .nebula, .status__dot, .uc__code-star { animation: none; }
  .js .rise { animation-duration: .001ms; animation-delay: 0s; }
  .btn { transition: none; }
}