/* =========================================================================
   Bio Dental Hygiene, site.css
   Design tokens taken verbatim from the approved BRAND BOARD (05.09.2026).
   Do not invent new colours here: add them to the brand board first.
   ========================================================================= */

:root {
  /* --- Ground ------------------------------------------------------- */
  --paper:      #F7F6F2;   /* ground primario , ~60% delle superfici   */
  --cream:      #EDE9E1;   /* ground secondario, alternanza, citazioni */

  /* --- Ink & accents ------------------------------------------------ */
  --ink:        #2B2B2B;   /* testo                                     */
  --forest:     #2F4F3E;   /* accento forte, titoli chiave, dati       */
  --sage:       #A7B39A;   /* accento tenue, filetti (mai testo)       */

  /* --- Derivati, per accessibilità e per il grigio cemento del brief -- */
  /* Sage scurito fino a superare WCAG AA come TESTO su Paper.
     Misurato: #A7B39A = 2.03 (insufficiente) · #6E7D62 = 4.07 (insufficiente)
     · #647358 = 4.70 ok, è il più chiaro che passa, quindi il più vicino al Sage. */
  --sage-deep:  #647358;
  --sand:       #E8DFC9;   /* testo sopra la fotografia, beige, non bianco */
  --concrete:   #8E8D87;   /* grigio cemento, cornice foto, didascalie */
  --clinical:   #7A858B;   /* PROPOSTA: il "grigio clinico freddo"      */
                           /* ancora aperto in BRAND BOARD §10, da approvare */

  /* --- Tipografia ---------------------------------------------------- */
  /* ATTENZIONE: CAMBIO rispetto a BRAND BOARD §3 (che fissava Playfair + Montserrat).
     Su tua indicazione (21.09) adottiamo la coppia di Sama Oral Health,
     estratta dal loro CSS: Cormorant Garamond + Source Sans.
     Entrambi open source (SIL OFL), quindi usabili senza licenza a pagamento.
     → il BRAND BOARD va aggiornato di conseguenza. */
  --font-display: "Cormorant Garamond", "EB Garamond", "Iowan Old Style",
                  "Palatino Linotype", Palatino, Georgia, serif;
  --font-body:    "Source Sans 3", "Source Sans Pro", -apple-system,
                  BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif;

  /* --- Ritmo --------------------------------------------------------- */
  --gutter:      clamp(1.5rem, 6vw, 5rem);   /* margini generosi, 8-10% */
  --rule:        1px solid var(--sage);
  --tracking-label: 0.17em;   /* ≈2px a 12px, come le micro-etichette Sama */

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* =========================================================================
   Reset, minimo, niente framework
   ========================================================================= */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-weight: 300;
  font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { display: block; max-width: 100%; height: auto; }

a { color: inherit; }

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 300;          /* Cormorant vive nei pesi leggeri, a corpo grande */
  line-height: 1.08;
  letter-spacing: 0;
  margin: 0;
  text-transform: none;
}

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

/* =========================================================================
   Elementi ricorrenti
   ========================================================================= */

/* Etichetta in maiuscoletto spaziato, lo stile "fonte/didascalia" del brand.
   Colore: sage-deep, non Sage: Sage su Paper non raggiunge il contrasto. */
.label {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  color: var(--sage-deep);
  margin: 0;
}

.rule {
  border: 0;
  border-top: var(--rule);
  width: 3.5rem;
  margin: 0;
}

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

:where(a, button, [tabindex]):focus-visible {
  outline: 2px solid var(--forest);
  outline-offset: 3px;
  border-radius: 2px;
}

/* =========================================================================
   Coming soon, la homepage
   ========================================================================= */

.hero {
  min-height: 100svh;
  display: block;
}

.hero__panel {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(1.25rem, 3.2vh, 2.25rem);
  padding: clamp(2.25rem, 7vh, 4.5rem) var(--gutter);

  /* Il titolo deve scalare sulla larghezza DELLA COLONNA, non della finestra:
     in due colonne la colonna è metà schermo e il testo andava a capo 4 volte. */
  container-type: inline-size;
}

/* --- Marchio: solo il dente + il nome composto in tipografia --- */

.hero__brand {
  display: flex;
  align-items: center;
  gap: clamp(0.85rem, 3cqi, 1.4rem);
}

.hero__brand picture { display: block; flex: none; }

.hero__mark {
  width: clamp(58px, 13cqi, 86px);
  height: auto;
  margin: 0;
}

.hero__wordmark {
  margin: 0;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: clamp(0.8rem, 2.6cqi, 1rem);
  line-height: 1.25;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: var(--ink);
  max-width: 7ch;      /* manda "Hygiene" a capo, come nel logo originale */
}

.hero__title {
  /* Cormorant regge corpi grandi: è lì che diventa editoriale */
  font-size: clamp(2.4rem, 11.5cqi, 4.35rem);
  max-width: 14ch;
}

/* la seconda riga del titolo, in Forest: è lì che il verde fa l'accento */
.hero__title em {
  font-style: normal;
  color: var(--forest);
  display: block;
}

.hero__sub {
  font-family: var(--font-display);
  font-size: clamp(1.2rem, 1rem + 0.8vw, 1.75rem);
  font-weight: 300;
  color: var(--sage-deep);
  margin: 0.85rem 0 0;   /* respiro sotto il titolo, non incollato */
}


.hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.75rem 1.75rem;
  margin-top: auto;
  padding-top: clamp(1.5rem, 4vh, 2.5rem);
}

/* --- Icone: Instagram, mail, luogo. Disegnate in SVG dentro l'HTML,
       nessuna icon-font e nessuna richiesta esterna. ---------------------- */

.hero__icons {
  display: flex;
  align-items: center;
  gap: 1.15rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hero__icons li { display: flex; }

.hero__icons svg {
  width: 20px;
  height: 20px;
  display: block;
  fill: none;
  stroke: var(--forest);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* il puntino dell'icona Instagram è pieno, non contornato */
.hero__icons svg .fill { fill: var(--forest); stroke: none; }

.hero__icons a {
  display: block;
  color: var(--forest);
  /* area di tocco da 44px sul telefono, senza allargare il disegno:
     icona 20px + 12px di padding per lato = 44px esatti */
  padding: 0.75rem;
  margin: -0.75rem;
  border-radius: 4px;
  transition: opacity 0.3s var(--ease);
}

.hero__icons a:hover svg { stroke: var(--ink); }
.hero__icons a:hover svg .fill { fill: var(--ink); }

/* Zurigo: solo il segnaposto, senza la parola.
   Con la scritta il blocco restava centrato ma le tre icone finivano
   otticamente a sinistra del centro. La città resta leggibile dagli
   screen reader tramite aria-label. */
.hero__place { align-items: center; }






/* =========================================================================
   Layout adottato 21.09.2026, impaginazione Sama Oral Health:
   fotografia a tutta pagina, velo scuro, titolo maiuscolo centrato sopra,
   wordmark centrato in alto, icone in alto a sinistra.
   Il velo NON è estetico: senza, il testo avorio non raggiunge il contrasto
   minimo sulle zone chiare della foto. Valori misurati, non scelti a occhio.
   ========================================================================= */

.hero {
  position: relative;
  min-height: 100svh;
  display: block;
}

/* --- La fotografia, a tutta pagina --------------------------------------- */

.hero__figure {
  position: absolute;
  inset: 0;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
  z-index: 0;
}

.hero__figure picture,
.hero__figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 42%;
}

/* "tipo video": zoom lentissimo, 28s per ciclo, avanti e indietro */
.hero__figure img {
  animation: heroDrift 28s ease-in-out infinite alternate;
  will-change: transform;
}

@keyframes heroDrift {
  from { transform: scale(1.03) translate3d(0, 0, 0); }
  to   { transform: scale(1.14) translate3d(-1.5%, -2%, 0); }
}

/* Velo scuro, tarato sulla fotografia REALE, non a occhio.
   Misurato sulla banda dove cade il testo: mediana 139/255, 99° percentile 212.
   velo 0.50 -> contrasto 4.28 (sotto il minimo)
   velo 0.55 -> contrasto 4.90 ok
   velo 0.62 -> contrasto 5.9  ok
   Alzato a 0.62/0.68 quando il testo è passato da bianco a BEIGE: il beige
   #E8DFC9 ha meno luminanza del bianco, quindi serve un fondo più scuro.
   Misurato sul pixel più chiaro della fascia del testo, rgb(243,207,172):
   beige su velo 0.56 -> 4.12 (sotto il minimo)
   beige su velo 0.62 -> 4.89 ok
   beige su velo 0.68 -> 5.85 ok */
.hero__figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
              rgba(20, 22, 19, 0.62) 0%,
              rgba(20, 22, 19, 0.68) 100%);
}

/* --- Il testo, sopra la foto --------------------------------------------- */

.hero__panel {
  position: relative;
  z-index: 1;
  min-height: 100svh;
  max-width: 54rem;
  margin-inline: auto;
  text-align: center;
  align-items: center;
  justify-content: center;
}

.hero__title {
  font-size: clamp(1.9rem, 6.2cqi, 3.4rem);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  line-height: 1.3;
  max-width: 20ch;
  margin-inline: auto;
  color: var(--sand);
}

.hero__title em { display: inline; color: var(--sand); }

.hero__sub {
  font-size: clamp(1.05rem, 2.6cqi, 1.5rem);
  text-transform: capitalize;
  margin-top: 1.1rem;
  color: #D8CEB9;
}

/* marchio centrato in alto */
.hero__brand {
  position: absolute;
  top: clamp(1.5rem, 4vh, 2.75rem);
  left: 50%;
  transform: translateX(-50%);
  flex-direction: column;
  gap: 0.5rem;
  text-align: center;
}

/* Il marchio è già beige nel file (#E8DFC9, lo stesso del testo):
   niente filtri CSS, che davano solo un bianco appena sporcato. */
.hero__mark { opacity: 0.96; }

.hero__wordmark {
  max-width: none;
  letter-spacing: 0.3em;
  font-size: 0.7rem;
  color: var(--sand);
  white-space: nowrap;
}

/* icone in alto a sinistra */
.hero__icons {
  position: absolute;
  bottom: clamp(1.75rem, 5vh, 3rem);
  left: 50%;
  transform: translateX(-50%);
  gap: 1.1rem;
}

.hero__icons svg { stroke: var(--sand); }
.hero__icons svg .fill { fill: var(--sand); }
.hero__icons a:hover svg { stroke: #C8D4BC; }
.hero__icons a:hover svg .fill { fill: #C8D4BC; }


.hero__foot { padding-top: 0; margin-top: 0; }
.rule { display: none; }

/* Il marchio resta SEMPRE in alto al centro, anche sul telefono.
   Le icone stanno sempre in basso al centro: non si incontrano mai. */
@media (max-width: 30rem) {
  .hero__wordmark { font-size: 0.6rem; letter-spacing: 0.22em; }
  .hero__icons    { gap: 0.9rem; }
}


/* =========================================================================
   Link Privacy, piccolo, discreto, angolo in basso a destra.
   Non tocca .hero__icons: resta un elemento a parte, posizionato indipendente.
   ========================================================================= */

.hero__legal {
  position: absolute;
  z-index: 1;
  bottom: clamp(1.1rem, 3vh, 1.75rem);
  right: clamp(1rem, 4vw, 2rem);
  font-size: 0.65rem;
  letter-spacing: 0.04em;
  color: var(--sand);
  opacity: 0.55;
  text-decoration: none;
  transition: opacity 0.3s var(--ease);
}

.hero__legal:hover { opacity: 0.85; text-decoration: underline; }


/* =========================================================================
   Sfondo: solo la piantina (23.10.2026)
   Fuori la fotografia con radiografia e strumento. Resta il germoglio che
   cresce dal buio, con ombra portata, luce che si sposta e un leggero
   ondeggiare. Il testo avorio resta sul fondo scuro: contrasto invariato.
   ========================================================================= */

.hero__figure {
  background: radial-gradient(ellipse 75% 65% at 76% 32%, #4b4135 0%, #2b2823 55%, #1c1b18 100%);
}

.hero__figure::after {
  background: linear-gradient(180deg, rgba(20, 22, 19, 0.30) 0%, rgba(20, 22, 19, 0.38) 100%);
  z-index: 4;
}

/* luce calda che si muove piano, come il sole tra le foglie */
.light {
  position: absolute;
  inset: -10%;
  z-index: 0;
  background:
    radial-gradient(ellipse 28% 40% at 82% 22%, rgba(246, 214, 160, 0.38), transparent 70%),
    radial-gradient(ellipse 20% 30% at 66% 12%, rgba(246, 214, 160, 0.20), transparent 70%);
  filter: blur(18px);
  animation: lightDrift 18s ease-in-out infinite alternate;
}

@keyframes lightDrift {
  from { transform: translate3d(0, 0, 0) scale(1); opacity: 0.85; }
  to   { transform: translate3d(-5%, 3%, 0) scale(1.08); opacity: 1; }
}

/* il piano su cui poggia il germoglio, appena più chiaro del fondo */
.ground {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 46%;
  z-index: 1;
  background: linear-gradient(180deg, transparent 0%, rgba(150, 128, 98, 0.30) 100%);
}

.plant {
  position: absolute;
  z-index: 2;
  right: 15%;
  bottom: 15%;
  height: min(58svh, 540px);
  aspect-ratio: 520 / 468;
}

.plant__sway,
.plant__shadow {
  position: absolute;
  inset: 0;
  transform-origin: 50% 97.6%;
}

.plant__sway { animation: plantSway 7s ease-in-out 5.7s infinite alternate; }

/* ombra portata: la stessa piantina, nera, sfocata e stesa sul piano */
.plant__shadow {
  transform: scaleY(0.3) skewX(-52deg);
  z-index: -1;
}

.hero__figure .plant img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: 50% 100%;
  transform-origin: 50% 97.6%;
  animation: plantGrow 5.2s cubic-bezier(0.22, 0.8, 0.24, 1) 0.5s both;
  will-change: transform;
}

.hero__figure .plant__shadow img {
  filter: brightness(0) blur(7px);
  opacity: 0.5;
}

.plant__contact {
  position: absolute;
  left: 28%;
  width: 44%;
  bottom: -2%;
  height: 7%;
  background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.55), transparent 70%);
  filter: blur(4px);
  z-index: -1;
  animation: contactIn 4s ease-out 0.8s both;
}

@keyframes plantGrow {
  0%   { transform: scale(0.02, 0.01) rotate(-4deg); opacity: 0; }
  8%   { opacity: 1; }
  55%  { transform: scale(0.62, 0.7) rotate(2deg); }
  100% { transform: scale(1) rotate(0); }
}

@keyframes plantSway {
  from { transform: rotate(-0.9deg); }
  to   { transform: rotate(1.1deg); }
}

@keyframes contactIn {
  from { opacity: 0; transform: scaleX(0.2); }
  to   { opacity: 1; transform: scaleX(1); }
}

@media (max-width: 48rem) {
  .plant { right: -4%; bottom: 11%; height: 36svh; }
}



/* =========================================================================
   Il logo sulla piantina (27.10.2026, movimento della versione "dentino-solo")
   All'apertura il logo non c'è: quando la piantina ha finito di crescere,
   dalla punta esce uno stelo, ci sboccia sopra il logo, e poi il logo sale
   e si ferma in alto al centro (il viaggio lo fa assets/js/logo.js).
   ========================================================================= */

.plant .fl { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(246, 228, 190, 0.6)) drop-shadow(0 0 18px rgba(246, 214, 160, 0.4)); }
.plant .stalk { stroke-dasharray: 100; stroke-dashoffset: 100; animation: stalkDraw 1.6s ease-out 5.2s both; }
.plant .bloom { transform-box: fill-box; transform-origin: 50% 100%; opacity: 0; animation: toothBloom 1.6s cubic-bezier(0.2, 1.3, 0.4, 1) 6.7s both; }
@keyframes stalkDraw { to { stroke-dashoffset: 0; } }
@keyframes toothBloom { 0% { opacity: 0; transform: scale(0.05); } 25% { opacity: 1; } 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .plant .stalk { animation: none; stroke-dashoffset: 0; } .plant .bloom { animation: none; opacity: 1; } }

/* il logo in alto resta nascosto finché non arriva dalla piantina;
   senza JavaScript compare comunque, con una dissolvenza, alla fine */
.hero__mark { animation: markShow 0.8s ease 8.9s both; }
@keyframes markShow { from { opacity: 0; } to { opacity: 0.96; } }
@media (prefers-reduced-motion: reduce) {
  .hero__mark { animation: none; }
  .plant .fl { display: none; }
}