/* filandliz.com — stili condivisi.
   I valori (colori, font, tracking) NON stanno qui: arrivano da tokens.css.
   Qui c'è solo come sono composti. */

/* Fallback con metriche allineate a Cormorant Garamond: quando il webfont
   arriva, il testo non cambia ingombro. Valori misurati, non stimati:
   90.4% è il rapporto fra la larghezza di Cormorant e quella di Georgia. */
@font-face {
  font-family: 'Cormorant Fallback';
  src: local('Georgia'), local('Times New Roman'), local('Times');
  size-adjust: 90.4%;
  ascent-override: 105%;
  descent-override: 28%;
  line-gap-override: 0%;
}

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

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

body {
  margin: 0;
  min-height: 100svh;
  background: var(--paper);
  color: var(--ink);
  font-family: 'Cormorant Garamond', 'Cormorant Fallback', Georgia, 'Times New Roman', serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  display: flex;
  flex-direction: column;
  overflow-x: hidden;
}

/* Grana della carta — 3.5% di rumore, non intercetta il puntatore */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---- Selettore lingua, in testa a ogni pagina ------------------------- */
.langbar {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  padding: 14px 12px 0;
  font-size: 11px;
  letter-spacing: .22em;
  text-transform: uppercase;
}
.langbar a {
  color: var(--ink-light);
  text-decoration: none;
  /* target touch comodo senza gonfiare la barra */
  padding: 10px 12px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  text-indent: .22em;
  transition: color .2s ease;
}
.langbar a:hover,
.langbar a:focus-visible { color: var(--coral); }
.langbar a[aria-current="true"] { color: var(--ink); }
.langbar span { color: var(--rule); user-select: none; }

/* ---- Foglio ------------------------------------------------------------ */
.sheet {
  position: relative;
  z-index: 1;
  flex: 1;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  padding: 26px 24px 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  /* I fiori sono ancorati mezzi fuori dal foglio (motivo firma 3): è il
     foglio a ritagliarli, come il fustellato dell'invito. Senza questo
     allargano il documento e su mobile compare lo scroll orizzontale.
     `hidden` prima per i browser che non conoscono ancora `clip`. */
  overflow: hidden;
  overflow: clip;
}

/* I fiori SVG prendono il colore dai token, non da hex negli attributi:
   `fill`/`stroke` come proprietà CSS accettano var(). */
.f-olive    { fill: var(--olive); }
.f-dahlia   { fill: var(--dahlia); }
.f-coral    { fill: var(--coral); }
.f-blush    { fill: var(--blush); }
.s-olive    { stroke: var(--olive); }
.s-ornament { stroke: var(--ornament); }

/* ---- Fiori che sanguinano dal bordo (motivo firma 3) ------------------ */
.bleed {
  position: absolute;
  z-index: 0;
  pointer-events: none;
  opacity: .9;
}
.bleed--tl { top: -26px;    left: -74px;  width: 190px; }
.bleed--br { bottom: -34px; right: -78px; width: 210px; }

/* ---- Occhiello -------------------------------------------------------- */
.eyebrow {
  font-size: 11px;
  letter-spacing: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-light);
  margin: 0 0 34px;
  /* il tracking largo aggiunge spazio dopo l'ultima lettera: lo tolgo */
  text-indent: var(--track-eyebrow);
}

/* ---- Monogramma nella cornice a binario ------------------------------- */
.crest {
  position: relative;
  width: 236px;
  max-width: 72vw;
  margin: 0 0 34px;
}
.crest__frame { display: block; width: 100%; height: auto; }
.crest__mark {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.crest__letter {
  font-size: clamp(40px, 13vw, 54px);
  line-height: 1;
  letter-spacing: .08em;
  text-indent: .08em;
}
.crest__rule {
  width: 34px;
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0;
}

/* ---- Nomi e data ------------------------------------------------------- */
.names {
  font-size: clamp(23px, 6.4vw, 29px);
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  text-indent: var(--track-title);
  margin: 0 0 18px;
  font-weight: 400;
}
.names__amp {
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
  color: var(--coral);
}

.date {
  font-size: 16px;
  letter-spacing: var(--track-date);
  text-indent: var(--track-date);
  color: var(--ink-light);
  margin: 0 0 34px;
}

/* ---- Messaggio coming soon --------------------------------------------- */
.soon {
  max-width: 34ch;
  margin: 0 0 10px;
  font-size: 19px;
  line-height: 1.75;
}
.soon em { font-style: italic; color: var(--ink-light); }

.place {
  margin: 26px 0 0;
  font-size: 13px;
  font-style: italic;
  color: var(--ink-light);
}

/* ---- Coming soon: monogramma nella cornice ovale ----------------------- */
/* Il binario smerlato (motivo firma 5) su tracciato ellittico invece che
   ondulato: tre anelli concentrici, quello di mezzo con tratteggio corto su
   stroke spesso — sono i pioli. I due acquerelli sono spillati agli angoli
   opposti, come sull'invito: giallo in alto a destra, dalia in basso a
   sinistra. Qui i fiori sono PNG e non SVG: e' l'unico punto della pagina in
   cui serve la resa botanica vera, e sono due sole immagini. */
.oval {
  position: relative;
  width: 340px;
  max-width: 86vw;
  /* le proporzioni dell'invito: tutto il resto e' in percentuale su queste */
  aspect-ratio: 340 / 440;
  margin: 0 0 46px;
}
.oval__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.oval__bloom {
  position: absolute;
  height: auto;
  /* moltiplica sulla carta: l'acquerello si posa sul foglio invece di
     galleggiarci sopra, e il binario resta visibile sotto i petali */
  mix-blend-mode: multiply;
}
/* Percentuali, non px: le posizioni dell'invito scalano con la cornice. */
.oval__bloom--tr { top: 3.64%;    left: 60.88%; width: 37.06%; }
.oval__bloom--bl { bottom: 7.73%; left: 2.35%;  width: 35.29%; }

/* ---- Frase e conto alla rovescia --------------------------------------- */
.tagline {
  /* Nessun max-width: la frase e' pensata su una riga sola, e la misura la
     da' gia' .sheet (512px interni). Italiano e inglese ci stanno anche a
     375px; il tedesco e' piu' lungo e va a capo solo sul telefono.
     `balance` fa cadere quel ritorno a meta' frase invece di lasciare
     l'ultima parola orfana; chi non lo conosce va a capo come sempre. */
  margin: 22px 0 46px;
  font-size: 19px;
  font-style: italic;
  line-height: 1.7;
  text-wrap: balance;
}

.countdown {
  display: flex;
  justify-content: center;
  gap: clamp(26px, 9vw, 44px);
  margin: 0 0 46px;
}
/* Senza JS le cifre non arrivano mai: meglio niente che tre caselle vuote.
   Serve la regola esplicita perche' `display:flex` batte l'attributo hidden. */
.countdown[hidden] { display: none; }
.countdown__n {
  font-size: clamp(28px, 8vw, 34px);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.countdown__l {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: var(--track-title);
  text-indent: var(--track-title);
  text-transform: uppercase;
  color: var(--ink-light);
}

.divider {
  width: 36px;
  height: 1px;
  background: var(--rule);
  border: 0;
  margin: 0 auto 24px;
}

/* "about love" — la firma dell'invito, uguale in tutte e tre le lingue */
.about {
  margin: 0;
  font-size: 13px;
  letter-spacing: var(--track-eyebrow);
  text-indent: var(--track-eyebrow);
  text-transform: uppercase;
  color: var(--ink-light);
}

/* ---- Bottoni (regola del design system) -------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  padding: 12px 20px;
  border: 1px solid var(--ink);
  border-radius: 0;
  background: transparent;
  color: var(--ink);
  text-decoration: none;
  font-family: inherit;
  font-size: 14px;
  letter-spacing: var(--track-title);
  text-transform: uppercase;
  text-indent: var(--track-title);
  transition: background-color .25s ease, border-color .25s ease, color .25s ease;
}
.btn:hover,
.btn:focus-visible {
  background: var(--coral);
  border-color: var(--coral);
  color: var(--paper);
}
.btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }

/* ---- Ingresso scaglionato ---------------------------------------------- */
/* Definito solo dentro no-preference. Nessun `opacity:0` come regola fissa:
   lo stato nascosto arriva solo dal fill-mode. Se il browser ignora le
   animazioni, il contenuto resta semplicemente visibile — mai invisibile. */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rise {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: none; }
  }
  .anim {
    animation: rise .85s cubic-bezier(.22,.61,.36,1) both;
    animation-delay: var(--d, 0ms);
  }
  .bleed { animation: rise 1.4s ease both; animation-delay: 500ms; }
  .bleed--br { animation-delay: 640ms; }
}

@media (max-width: 380px) {
  .sheet { padding: 20px 18px 28px; }
  .oval { max-width: 78vw; margin-bottom: 34px; }
  .tagline { font-size: 18px; margin: 18px 0 34px; }
  .countdown { margin-bottom: 34px; }
  .bleed--tl { width: 150px; left: -60px; }
  .bleed--br { width: 165px; right: -62px; }
  /* A 375px il tracking pieno manda a capo lasciando un separatore appeso */
  .eyebrow { margin-bottom: 26px; font-size: 10px; letter-spacing: .28em; text-indent: .28em; }
  .crest { width: 196px; margin-bottom: 22px; }
  .names { margin-bottom: 14px; }
  .date { margin-bottom: 26px; }
  .soon { font-size: 18px; }
  .place { margin-top: 22px; }
  .langbar { font-size: 10px; letter-spacing: .18em; }
  .langbar a { padding: 10px 9px; text-indent: .18em; }
}