/* Atelier Finmark: marchio e scritta comuni a tutte le pagine */
@font-face {
  font-family: "Atelier Script";
  src: url("/fonts/PinyonScript-Regular.ttf") format("truetype");   /* Pinyon Script, licenza SIL OFL */
  font-display: swap;
}
:root { --brand: #3c519d; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --brand: #d6e0f0; } }
:root[data-theme="dark"] { --brand: #d6e0f0; }

/* in testa a ogni pagina: marchio rotondo + Atelier, porta alla home */
.marchio-atelier { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--brand);
  border-radius: 8px; padding: 2px 6px 2px 2px; flex: none; }
.marchio-atelier:hover { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.marchio-atelier img { height: 34px; width: 34px; display: block; }
.scritta-atelier { font-family: "Atelier Script", "Edwardian Script ITC", "Segoe Script", cursive; font-weight: 400;
  font-size: 34px; line-height: 1; color: var(--brand); letter-spacing: .01em; padding-top: 4px; white-space: nowrap; }
.sep-testata { width: 1px; align-self: stretch; background: var(--line); margin: 4px 4px; }

/* attesa: marchio con un anello che gira, "Atelier" che si scrive, passi del lavoro e una barra che scorre */
.attesa { display: grid; justify-items: center; gap: 14px; padding: 72px 16px 56px; color: var(--brand); text-align: center; }
.attesa-segno { position: relative; width: 92px; height: 92px; display: grid; place-items: center; }
.attesa-segno img { width: 58px; height: 58px; animation: attesa-respiro 2.4s ease-in-out infinite; }
.attesa-segno svg { position: absolute; inset: 0; width: 100%; height: 100%; animation: attesa-giro 1.8s linear infinite; }
.attesa-segno circle { fill: none; stroke: var(--brand); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 70 220; opacity: .85; }
.attesa-segno circle.fondo { stroke-dasharray: none; opacity: .12; }
.attesa-scritta { font-family: "Atelier Script", "Edwardian Script ITC", "Segoe Script", cursive; font-size: 46px; line-height: 1.1;
  padding: 0 8px; clip-path: inset(0 100% 0 0); animation: attesa-scrivi 3.6s cubic-bezier(.45, .05, .35, 1) infinite; }
.attesa-passo { font-size: 14px; color: var(--muted, #5a6a72); min-height: 1.4em; margin: 0; transition: opacity .35s; }
.attesa-passo.via { opacity: 0; }
.attesa-barra { width: min(260px, 70vw); height: 3px; border-radius: 3px; overflow: hidden; background: color-mix(in srgb, var(--brand) 14%, transparent); }
.attesa-barra span { display: block; width: 35%; height: 100%; border-radius: 3px; background: var(--brand); animation: attesa-scorri 1.6s ease-in-out infinite; }
.attesa-tempo { font-size: 12px; color: var(--muted, #5a6a72); opacity: .8; min-height: 1.2em; margin: 0; }
@keyframes attesa-giro { to { transform: rotate(360deg); } }
@keyframes attesa-respiro { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.06); } }
@keyframes attesa-scrivi { 0% { clip-path: inset(0 100% 0 0); opacity: 1; } 45%, 80% { clip-path: inset(0 0 0 0); opacity: 1; }
  95% { clip-path: inset(0 0 0 0); opacity: 0; } 100% { clip-path: inset(0 100% 0 0); opacity: 0; } }
@keyframes attesa-scorri { 0% { transform: translateX(-110%); } 100% { transform: translateX(300%); } }
@media (prefers-reduced-motion: reduce) {
  .attesa-segno img, .attesa-segno svg, .attesa-barra span { animation: none; }
  .attesa-scritta { animation: none; clip-path: none; }
  .attesa-barra span { width: 100%; opacity: .4; }
}