/* =========================================================
   Tenute Katiù — Coming Soon
   Stili custom che affiancano le utility Tailwind (definite
   inline in index.html). Qui vive solo ciò che Tailwind non
   fa bene da solo: scala tipografica fluida, decorazioni,
   dettagli del form.
   ========================================================= */

:root {
  --olive: #68704A;
  --olive-light: #7C8458;
  --sage: #9EAA82;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100svh;
  overflow-x: hidden;
}

/* ——— Tipografia fluida —————————————————————————————
   I token del design system (tailwind.config.js) definiscono
   le dimensioni "desktop" esatte. Per una pagina full-screen
   come questa, i valori vengono scalati in modo fluido con
   clamp(), usando lo stesso valore massimo del token. */

.text-hero-fluid {
  font-size: clamp(2.75rem, 6vw + 1.5rem, 8.544rem); /* → 136.7px */
  line-height: 1.03;
  letter-spacing: 0;
}

.text-subheading-fluid {
  font-size: clamp(1.25rem, 1.6vw + 1rem, 2.53125rem); /* → 40.5px */
  line-height: 1.3;
  letter-spacing: 0.04em;
}

.text-body-fluid {
  font-size: clamp(1rem, 0.4vw + 0.9rem, 1.125rem); /* → 18px */
  line-height: 1.7;
  letter-spacing: 0.04em;
}

.text-overline-fluid {
  font-size: clamp(0.8rem, 0.3vw + 0.75rem, 0.875rem); /* → 14px, token Caption */
  letter-spacing: 0.28em;
}

/* ——— Segno di virgolette decorativo (Agbalumo) ——— */
.quote-mark {
  position: absolute;
  font-family: 'Agbalumo', cursive;
  font-size: clamp(6rem, 14vw, 8.544rem); /* → 136.7px, token Quote mark */
  line-height: 1;
  color: var(--sage);
  opacity: 0.35;
  user-select: none;
  pointer-events: none;
}

/* ——— Sfondo decorativo —————————————————————————————
   Due masse morbide in cream-warm / sage, sfocate, dietro al
   contenuto: richiamano un paesaggio di vigne senza usare
   immagini reali (ancora da fornire). */
.bg-decor {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.bg-decor span {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
}

.bg-decor .blob-1 {
  width: 42vw;
  height: 42vw;
  max-width: 620px;
  max-height: 620px;
  top: -12%;
  right: -10%;
  background: #F7F1E7; /* cream-warm */
  opacity: 0.9;
}

.bg-decor .blob-2 {
  width: 30vw;
  height: 30vw;
  max-width: 460px;
  max-height: 460px;
  bottom: -10%;
  left: -8%;
  background: rgba(158, 170, 130, 0.35); /* sage */
}

/* ——— Divisore a foglia (dettaglio grafico) ——— */
.leaf-divider {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
}

.leaf-divider::before,
.leaf-divider::after {
  content: '';
  width: 2.5rem;
  height: 1px;
  background: var(--olive);
  opacity: 0.5;
}

/* ——— Form ——— */
.notify-form input[type='email']::placeholder {
  color: #393735;
  opacity: 0.45;
}

.notify-form input[type='email']:focus-visible,
.notify-form button:focus-visible {
  outline: 2px solid var(--olive-light);
  outline-offset: 2px;
}

/* ——— Stato di invio riuscito/errore ——— */
.form-message {
  min-height: 1.25rem;
}

/* ——— Accessibilità: rispetta le preferenze di movimento ridotto ——— */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  * {
    transition-duration: 0.01ms !important;
  }
}

/* ——— Breakpoint piccoli: riduci le decorazioni di sfondo ——— */
@media (max-width: 640px) {
  .bg-decor .blob-1,
  .bg-decor .blob-2 {
    filter: blur(40px);
  }
}