/* ============================================================
   unna — design system
   Colori, tipografia e primitive estratti dal Figma del brand
   ============================================================ */
:root {
  /* Palette */
  --viola: #6A00FF;
  --viola-700: #5200c4;
  --viola-300: #8833FF;
  --viola-100: #E1CCFF;
  --viola-050: #F1E9FF;
  --arancio: #FF710C;
  --arancio-100: #FFE8D8;
  --crema: #F6F6F6;
  --bianco: #FFFFFF;
  --inchiostro: #1B2026;
  --grigio-700: #2E363E;
  --grigio-500: #6A6A6A;
  --grigio-300: #ADAFB1;
  --grigio-150: #DBDBDC;

  /* Accento dinamico (tweakable) */
  --accent: var(--arancio);
  --accent-soft: var(--arancio-100);

  /* Tipografia */
  --font-display: "Poppins", system-ui, sans-serif;
  --font-body: "Open Sans", system-ui, sans-serif;

  /* Raggi */
  --r-sm: 12px;
  --r: 16px;
  --r-lg: 24px;
  --r-xl: 32px;
  --r-pill: 999px;

  /* Spazi */
  --gutter: clamp(20px, 5vw, 80px);
  --section-y: clamp(64px, 10vw, 140px);

  /* Ombre */
  --shadow-sm: 0 2px 8px rgba(27,32,38,0.06);
  --shadow: 0 12px 32px rgba(27,32,38,0.10);
  --shadow-lg: 0 28px 64px rgba(82,0,196,0.18);

  /* Motion */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --motion: 1; /* moltiplicatore intensità, tweakable */
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--inchiostro);
  background: var(--crema);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; margin: 0; line-height: 1.02; letter-spacing: -0.02em; text-wrap: balance; }
p { margin: 0; line-height: 1.6; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

:focus-visible { outline: 3px solid var(--viola-300); outline-offset: 3px; border-radius: 4px; }

.wrap { width: min(1280px, 100% - var(--gutter) * 2); margin-inline: auto; }

.eyebrow {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(0.75rem, 1.1vw, 0.9rem);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--viola);
  display: inline-flex;
  align-items: center;
  gap: 0.6em;
}
.eyebrow::before {
  content: "";
  width: 28px; height: 2px;
  background: currentColor;
  display: inline-block;
}

/* Bottoni ------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font-display); font-weight: 700;
  font-size: 1rem; letter-spacing: -0.01em;
  padding: 15px 26px;
  border-radius: var(--r);
  transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s;
  will-change: transform;
  min-height: 52px;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn-primary { background: var(--viola); color: var(--crema); box-shadow: var(--shadow); }
.btn-primary:hover { box-shadow: var(--shadow-lg); }
.btn-accent { background: var(--accent); color: var(--bianco); box-shadow: var(--shadow); }
.btn-light { background: var(--crema); color: var(--viola); box-shadow: var(--shadow-sm); }
.btn-ghost { background: transparent; color: var(--inchiostro); border: 2px solid var(--grigio-150); }
.btn-ghost:hover { border-color: var(--viola); color: var(--viola); }

/* Pill / tag --------------------------------------------- */
.tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-display); font-weight: 600;
  font-size: 0.85rem;
  padding: 8px 16px;
  border-radius: var(--r-pill);
  background: var(--accent-soft);
  color: var(--accent);
}

/* Reveal on scroll --------------------------------------- */
.reveal { opacity: 0; transform: translateY(calc(28px * var(--motion))); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; } }

/* Onda decorativa che scorre ----------------------------- */
.onda-band { position: relative; width: 100%; overflow: hidden; line-height: 0; pointer-events: none; }
.onda-track { display: flex; width: max-content; animation: ondaScroll calc(38s / var(--motion)) linear infinite; }
.onda-track img { height: 100%; width: auto; }
@keyframes ondaScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

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