/* ============================================================
   Dimostrazione "iscrizione alla newsletter" della sezione #funzioni di
   /ristoranti/. Riusa la finestra generica (.rt-win*, definita in menu.css:
   questo file va DOPO) e ne cambia solo le proporzioni.

   La busta è quella dell'intro di /agency (assets/agency/intro.css) rifatta
   con la palette pop della pagina: stessa meccanica — sigillo che salta,
   aletta che ruota su rotateX, carta che si solleva dalla tasca — ma la
   lettera resta dov'è invece di espandersi a riempire il viewport.

   ⚠️ Le parti della busta sono SVG con `vector-effect: non-scaling-stroke`:
   il contorno spesso deve restare uniforme, e un `border` CSS su un elemento
   ritagliato con clip-path (come faceva /agency, che però non ha contorni)
   verrebbe tagliato lungo la diagonale.
   ⚠️ Prospettiva LOCALE all'aletta (funzione `perspective()` dentro la sua
   transform), mai come proprietà su un antenato: creerebbe un contesto di
   ordinamento 3D e su Blink i pezzi verrebbero ordinati per profondità invece
   che per z-index (gotcha in CLAUDE.md).
   ============================================================ */

/* ⚠️ Larghezza e altezza esplicite, non `aspect-ratio` + `max-width: 100%`:
   `.rt-win` è una griglia, e una traccia con `min-width: auto` si allarga fino
   al contenuto — il `100%` del riquadro finiva per essere il 100% di una
   traccia già più larga del viewport, e su telefono la finestra sporgeva.
   Il tetto in larghezza è quindi in vw meno il padding di `.rt-win`. */
.rt-win--news .rt-win__frame {
  --nw-fh: min(84dvh, 660px);
  height: var(--nw-fh);
  width: min(calc(var(--nw-fh) / 1.16), calc(100vw - 2 * clamp(1.4rem, 3vh, 2rem)));
  border-radius: 30px;
  background: var(--nw-bg);
}

.nw {
  --nw-bg: #fdf8f0;
  --nw-ink: #14120e;
  /* palette pop della busta: rosa per il corpo, rosso della pagina per
     l'aletta, azzurro per il sigillo (lo stesso famiglia del pulsante), giallo
     per la lettera. Contorni ink come tutto il resto della pagina. */
  --nw-env-back: #ffe1ea;
  --nw-env-a: #ff9fb9;
  --nw-env-b: #f7789e;
  --nw-env-flap: #ff4433;
  --nw-seal: #58b9f7;
  --nw-paper: #ffcf3f;
  --nw-blue: #2f7dff;
  --nw-green: #00c853;
  --nw-h: clamp(50px, 12%, 62px);        /* altezza della pill = diametro del pulsante */
  --nw-ew: min(74%, 300px);              /* larghezza della busta */
  --e-spring: cubic-bezier(0.34, 1.28, 0.42, 1);
  --e-inout: cubic-bezier(0.6, 0, 0.3, 1);

  position: absolute; inset: 0;
  background: var(--nw-bg); color: var(--nw-ink);
  font-family: var(--ff-sans);
  display: flex; flex-direction: column; align-items: center;
  padding: clamp(1.2rem, 4%, 2rem) clamp(1.2rem, 6%, 2.4rem) clamp(1rem, 3%, 1.6rem);
  overflow: hidden;
}

/* ---------------- il palco della busta ----------------
   La busta è centrata nel palco, ma il palco ha in cima lo spazio che serve
   alla lettera per uscire: sale di ~0.3 volte la larghezza della busta (vedi
   la trasformazione di `.nw.is-out .nw-letter`). Senza quel padding la busta
   starebbe al centro esatto e la lettera finirebbe sotto il bordo. */
.nw-stage {
  position: relative; width: 100%;
  flex: 1 1 auto; min-height: 0;
  display: flex; align-items: center; justify-content: center;
  padding-top: calc(var(--nw-ew) * 0.35);
  padding-bottom: 2%;
}
.nw-env {
  position: relative;
  width: var(--nw-ew);
  aspect-ratio: 100 / 62;
  transform-style: flat;
}
.nw-env > svg { position: absolute; left: 0; width: 100%; overflow: visible; }
.nw-env__back { top: 0; height: 100%; z-index: 0; }
.nw-env__pocket { top: 0; height: 100%; z-index: 3; }
.nw-env__flap {
  top: 0; height: 59.7%; z-index: 6;   /* 37/62 del riquadro: il viewBox dell'aletta */
  transform-origin: 50% 0;
  transform: perspective(1150px) rotateX(0deg);
  transition: transform 0.85s var(--e-inout);
}
.nw-p { stroke: var(--ink); stroke-width: 3; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.nw-p--back { fill: var(--nw-env-back); }
.nw-p--pa { fill: var(--nw-env-a); }
.nw-p--pb { fill: var(--nw-env-b); }
.nw-p--flap { fill: var(--nw-env-flap); }

/* ---- la lettera: sotto la tasca (z2 < z3), si solleva all'apertura ---- */
.nw-letter {
  position: absolute; left: 50%; top: 50%;
  width: 84%; min-height: 74%;
  z-index: 2;
  transform: translate(-50%, -46%);
  transform-origin: 50% 50%;
  transition: transform 0.9s var(--e-spring);
  background: var(--nw-paper);
  border: var(--ow) solid var(--ink);
  border-radius: 12px;
  box-shadow: 4px 5px 0 rgba(13, 13, 13, 0.22);
  padding: 0.9rem 1rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.35rem; text-align: center;
}
.nw-letter__t {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(0.95rem, 2.2vh, 1.22rem); line-height: 1.1; letter-spacing: -0.02em;
  color: var(--ink);
}
.nw-letter__f {
  font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em;
  color: rgba(13, 13, 13, 0.62);
}
/* il testo della lettera si legge solo quando è fuori: dentro la busta se ne
   vede il bordo superiore nella V, non il messaggio */
.nw-letter > * { opacity: 0; transition: opacity 0.3s ease; }
.nw.is-out .nw-letter > * { opacity: 1; transition-delay: 0.35s; }
.nw.is-out .nw-letter { transform: translate(-50%, -128%) rotate(-1.2deg); }
/* l'aletta aperta passa DIETRO la lettera che sale */
.nw.is-out .nw-env__flap { z-index: 1; }

/* ---- sigillo di ceralacca: salta all'apertura (pop, schegge, lampo) ---- */
/* ⚠️ Il centro del sigillo cade sulla PUNTA DELL'ALETTA, non sulla V della
   tasca: a busta chiusa i tre segmenti che si vedono convergere sotto di lui
   sono i due lati dell'aletta e la cucitura verticale della tasca, e si
   incontrano lì. `top` è 36.5/62 = la y della punta nel path dell'aletta
   rapportata all'altezza della busta; il margine negativo (percentuale =
   larghezza del contenitore) è metà del diametro. Se cambiano i path, cambia
   anche questo numero. */
.nw-env__seal {
  position: absolute; left: 50%; top: 58.87%;
  width: 15%; aspect-ratio: 1; margin: -7.5% 0 0 -7.5%;
  z-index: 7; border-radius: 50%;
  background: var(--nw-seal);
  border: var(--ow) solid var(--ink);
  display: grid; place-items: center;
  transition: opacity 0.4s var(--e-inout), transform 0.5s var(--e-inout);
}
.nw-env__seal b {
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(0.7rem, 1.5vw, 0.95rem); color: var(--ink); line-height: 1;
}
.nw-shard {
  position: absolute; left: 50%; top: 50%;
  width: 42%; height: 42%; margin: -21% 0 0 -21%;
  background: var(--nw-seal);
  clip-path: polygon(50% 0, 100% 75%, 12% 100%);
  opacity: 0;
}
.nw-flash {
  position: absolute; left: 50%; top: 50%;
  width: 340%; height: 340%; transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(88, 185, 247, 0.85), transparent 55%);
  opacity: 0; pointer-events: none;
}

.nw.is-open .nw-env__seal { opacity: 0; transform: translateY(22px) scale(0.5) rotate(24deg); }
/* ⚠️ Al riavvio del giro il sigillo NON deve ricomparire mentre l'aletta si sta
   ancora richiudendo: torna quando la busta è di nuovo chiusa (0.85s è la
   durata della rotazione dell'aletta). */
.nw:not(.is-open) .nw-env__seal { transition-delay: 0.6s; }
.nw.is-open .nw-shard { animation: nw-shard 0.55s cubic-bezier(0.16, 1, 0.3, 1) both; }
.nw.is-open .nw-shard.s2 { animation-delay: 0.07s; }
.nw.is-open .nw-shard.s3 { animation-delay: 0.11s; }
.nw.is-open .nw-flash { animation: nw-flash 0.34s ease both; }
.nw.is-open .nw-env__flap { transform: perspective(1150px) rotateX(168deg); }
.s1 { --sx: -140%; --sy: 120%; --sr: -50deg; }
.s2 { --sx: 130%;  --sy: 150%; --sr: 60deg; }
.s3 { --sx: -20%;  --sy: 190%; --sr: 12deg; }
@keyframes nw-shard {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.8); }
  100% { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 40px)) rotate(var(--sr, 40deg)) scale(1); }
}
@keyframes nw-flash { 0% { opacity: 0; } 35% { opacity: 0.8; } 100% { opacity: 0; } }

/* ---------------- invito ---------------- */
.nw-title {
  margin-top: clamp(0.8rem, 2.5%, 1.4rem);
  font-family: var(--ff-display); font-weight: 900;
  font-size: clamp(1.35rem, 4.6vh, 1.9rem); line-height: 1.05; letter-spacing: -0.03em;
  text-align: center; color: var(--ink);
}
.nw-text {
  margin-top: 0.55rem; max-width: 34ch;
  font-size: clamp(0.85rem, 1.9vh, 0.98rem); line-height: 1.45;
  text-align: center; color: rgba(20, 18, 14, 0.74);
}

/* ---------------- pill + pulsante ---------------- */
.nw-form {
  position: relative;   /* riferimento del finto puntatore, vedi in fondo */
  margin-top: clamp(0.9rem, 3%, 1.4rem);
  width: 100%; display: flex; align-items: center; gap: 0.6rem;
}
.nw-field {
  position: relative; flex: 1 1 auto; min-width: 0;
  height: var(--nw-h);
  display: flex; align-items: center;
  background: #fff;
  border: var(--ow) solid var(--ink);
  border-radius: 999px;
  padding: 0 1.1rem;
}
.nw-field__lab {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* ⚠️ Il campo è readonly e la regia gli scrive dentro: i default UA
   (sfondo, bordo, font) non arrivano da nessun reset della pagina, quindi
   vanno dichiarati qui. */
.nw-field__in {
  flex: 1 1 auto; min-width: 0;
  font: inherit; font-size: clamp(0.9rem, 2vh, 1rem); font-weight: 500;
  color: var(--ink); background: none; border: 0; outline: 0;
  padding: 0; cursor: default;
}
.nw-field__in::placeholder { color: rgba(20, 18, 14, 0.38); }
/* cursore di scrittura: lampeggia solo mentre la regia sta digitando */
.nw-field__caret {
  position: absolute; left: var(--nw-caret-x, 1.1rem); top: 50%;
  width: 2px; height: 1.15em; margin-top: -0.575em;
  background: var(--ink); opacity: 0;
}
.nw.is-typing .nw-field__caret { animation: nw-blink 1s steps(1, end) infinite; }
@keyframes nw-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

.nw-send {
  position: relative; flex: none;
  width: var(--nw-h); height: var(--nw-h); border-radius: 50%;
  background: var(--nw-blue); color: #fff;
  border: var(--ow) solid var(--ink);
  cursor: pointer;
  display: grid; place-items: center;
  transition: background-color 0.35s var(--e-inout), transform 0.2s var(--e-spring);
}
.nw-send__ico {
  grid-area: 1 / 1; width: 54%; height: 54%;
  transition: opacity 0.22s ease, transform 0.32s var(--e-spring);
}
.nw-send__ico--ok { opacity: 0; transform: scale(0.5) rotate(-18deg); }
.nw.is-sent .nw-send { background: var(--nw-green); }
.nw.is-sent .nw-send__ico--up { opacity: 0; transform: translateY(-26%) scale(0.6); }
.nw.is-sent .nw-send__ico--ok { opacity: 1; transform: none; }
/* la spunta si disegna invece di comparire: è la freccia che diventa spunta */
.nw.is-sent .nw-send__ico--ok path {
  stroke-dasharray: 24; stroke-dashoffset: 24;
  animation: nw-draw 0.36s cubic-bezier(0.16, 1, 0.3, 1) 0.06s forwards;
}
@keyframes nw-draw { to { stroke-dashoffset: 0; } }
/* pressione del finto cursore (e del dito vero: il pulsante manda avanti la scena) */
.nw.is-press .nw-send { transform: scale(0.88); }

.nw-note {
  margin-top: auto; padding-top: 0.8rem;
  font-size: 0.66rem; letter-spacing: 0.04em; text-transform: uppercase;
  font-weight: 700; color: rgba(20, 18, 14, 0.42); text-align: center;
}

/* ---------------- finto puntatore ----------------
   ⚠️ La posizione è ANCORATA IN CSS al pulsante, non misurata dal JS: il
   riquadro della finestra arriva con una FLIP (per mezzo secondo porta addosso
   una scala) e una misura presa in quell'istante darebbe coordinate prese in
   uno spazio scalato. Qui il puntatore è figlio del form, e il pulsante è
   l'ultimo elemento della riga: il suo centro sta a mezzo diametro dal bordo
   destro e a metà altezza, sempre — comunque cambino le dimensioni.
   `transform-origin` sulla punta del glifo, così la pressione (scale) non la
   sposta dal centro del pulsante. */
.nw-cursor {
  position: absolute; z-index: 20;
  right: calc(var(--nw-h) / 2 - 5.4px);
  top: 50%; margin-top: -2.7px;
  width: 26px; height: 26px; pointer-events: none;
  opacity: 0;
  transform: translate(calc(var(--nw-h) * 0.32), calc(var(--nw-h) * -1.35));
  transform-origin: 5.4px 2.7px;
  transition: transform 0.62s cubic-bezier(0.5, 0, 0.2, 1), opacity 0.25s ease;
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}
.nw-cursor svg { width: 100%; height: 100%; display: block; }
.nw.is-pointing .nw-cursor { opacity: 1; }
/* is-aiming = la punta è sul centro del pulsante */
.nw.is-aiming .nw-cursor { transform: none; }
.nw.is-press .nw-cursor { transform: scale(0.86); }
.nw-cursor__ring {
  position: absolute; left: 0; top: 0;
  width: 34px; height: 34px; margin: -6px 0 0 -6px;
  border: 2px solid var(--nw-blue); border-radius: 50%;
  opacity: 0; transform: scale(0.3);
}
.nw.is-press .nw-cursor__ring { animation: nw-ring 0.5s ease-out both; }
@keyframes nw-ring {
  0%   { opacity: 0.9; transform: scale(0.3); }
  100% { opacity: 0; transform: scale(1.4); }
}

/* ---------------- reduced motion ----------------
   Niente scena che si recita: la funzione si mostra al suo stato finale
   (iscritto, lettera fuori) e resta ferma. */
@media (prefers-reduced-motion: reduce) {
  .nw-letter, .nw-env__flap, .nw-env__seal, .nw-send, .nw-send__ico, .nw-cursor { transition: none; }
  .nw-cursor { display: none; }
  .nw.is-open .nw-shard, .nw.is-open .nw-flash, .nw.is-sent .nw-send__ico--ok path { animation: none; }
  .nw.is-sent .nw-send__ico--ok path { stroke-dashoffset: 0; }
}

/* ============================================================
   Anteprima nel box della griglia: la stessa busta in piccolo e la pill,
   così il box promette esattamente quello che apre.
   (Le altre anteprime stanno in main.css; questa vive qui insieme al resto
   della funzione.)
   ============================================================ */
.rt-feature__preview--news {
  background: #fdf8f0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.85rem; padding: 1.1rem;
}
.rt-nw-mini {
  position: relative; width: 46%; aspect-ratio: 100 / 62;
}
.rt-nw-mini svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; overflow: visible; }
.rt-nw-mini .nw-p { stroke-width: 2.4; }
.rt-nw-mini .nw-p--back { fill: #ffe1ea; }
.rt-nw-mini .nw-p--pa { fill: #ff9fb9; }
.rt-nw-mini .nw-p--pb { fill: #f7789e; }
.rt-nw-mini .nw-p--flap { fill: #ff4433; }
/* ⚠️ selettore composto: `.rt-nw-mini svg` qui sopra vincerebbe per specificità
   e l'aletta sarebbe alta quanto tutta la busta */
.rt-nw-mini svg.rt-nw-mini__flap { height: 59.7%; }
.rt-nw-row { display: flex; align-items: center; gap: 0.4rem; width: 82%; }
.rt-nw-pill {
  flex: 1 1 auto; min-width: 0; height: 26px;
  display: flex; align-items: center; padding: 0 0.6rem;
  background: #fff; border: 2px solid var(--ink); border-radius: 999px;
  font-size: 0.66rem; font-weight: 600; color: rgba(20, 18, 14, 0.55);
  overflow: hidden; white-space: nowrap;
}
.rt-nw-dot {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: #2f7dff; color: #fff;
  border: 2px solid var(--ink);
  display: grid; place-items: center;
}
.rt-nw-dot svg { width: 14px; height: 14px; }