/* firma-crescita.css — "realizzato da" signature for Thomas's site and his clients' sites.
   Self-contained: no libraries, no fonts of its own (uses the page font), ~3 KB.
   Needs one image next to it: cd-logo.webp (copy of assets/logo-icon.webp, 20 KB;
   a 96 px copy would be ~4 KB).
   Three styles: .cdf--pill  .cdf--seal  .cdf--text
   Light client sites: add .cdf--light to the link.
   Motion stops with prefers-reduced-motion. */

.cdf {
  --cdf-bg: #0b1527;
  --cdf-ink: #eef2f8;
  --cdf-mute: #9eabbf;
  --cdf-accent: #f5872e;
  --cdf-ring: rgba(245, 135, 46, .35);
  position: relative;
  display: inline-flex;
  align-items: center;
  color: var(--cdf-ink);
  text-decoration: none;
  font-size: 13px;
  line-height: 1.2;
  -webkit-tap-highlight-color: transparent;
}
.cdf--light { --cdf-bg: #ffffff; --cdf-ink: #0b1527; --cdf-mute: #5b6678; --cdf-ring: rgba(221, 112, 23, .35); --cdf-accent: #c85f0c; }
.cdf:focus-visible { outline: 3px solid var(--cdf-accent); outline-offset: 4px; border-radius: 999px; }
.cdf-logo { display: block; flex: none; object-fit: contain; }
.cdf b { font-weight: 700; }

/* (a) dark pill: "Sito realizzato da Crescita Digitale" -> on hover/focus "Vuoi un sito così? Scrivimi" */
.cdf--pill {
  gap: .6em;
  min-height: 44px;
  padding: 6px 16px 6px 7px;
  border-radius: 999px;
  background: var(--cdf-bg);
  box-shadow: 0 0 0 1px var(--cdf-ring), 0 10px 26px -14px rgba(0, 0, 0, .6);
  transition: box-shadow .35s ease, transform .35s cubic-bezier(.2, .8, .2, 1);
}
.cdf--pill .cdf-logo { width: 30px; height: 30px; padding: 2px; border-radius: 50%; background: rgba(255, 255, 255, .06); transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.cdf-swap { display: grid; overflow: hidden; height: 1.25em; }
.cdf-swap > span { grid-area: 1 / 1; white-space: nowrap; transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s ease; }
.cdf-swap .cdf-b { transform: translateY(110%); opacity: 0; color: var(--cdf-accent); }
.cdf--pill:hover, .cdf--pill:focus-visible { transform: translateY(-2px); box-shadow: 0 0 0 1.5px var(--cdf-accent), 0 16px 30px -14px rgba(0, 0, 0, .65); }
.cdf--pill:hover .cdf-a, .cdf--pill:focus-visible .cdf-a { transform: translateY(-110%); opacity: 0; }
.cdf--pill:hover .cdf-b, .cdf--pill:focus-visible .cdf-b { transform: translateY(0); opacity: 1; }
.cdf--pill:hover .cdf-logo, .cdf--pill:focus-visible .cdf-logo { transform: rotate(-12deg) scale(1.08); }

/* (b) round seal: logo in the middle, the text turns slowly around it */
.cdf--seal { width: 92px; height: 92px; justify-content: center; border-radius: 50%; background: var(--cdf-bg); box-shadow: 0 0 0 1px var(--cdf-ring); }
.cdf--seal .cdf-logo { width: 38%; height: 38%; transition: transform .6s cubic-bezier(.2, .8, .2, 1); }
.cdf-ring { position: absolute; inset: 3px; width: calc(100% - 6px); height: calc(100% - 6px); animation: cdf-spin 26s linear infinite; }
.cdf-ring text { font-size: 6.4px; font-weight: 600; letter-spacing: .04em; fill: var(--cdf-ink); }
.cdf-ring .cdf-dot { fill: var(--cdf-accent); }
.cdf--seal:hover .cdf-ring, .cdf--seal:focus-visible .cdf-ring { animation-duration: 8s; }
.cdf--seal:hover .cdf-logo, .cdf--seal:focus-visible .cdf-logo { transform: scale(1.12); }
.cdf--seal:focus-visible { border-radius: 50%; }
@keyframes cdf-spin { to { transform: rotate(360deg); } }

/* (c) text only: "Realizzato da" + name in orange, the underline draws itself */
.cdf--text { gap: .45em; padding: 10px 2px; font-size: 14px; color: var(--cdf-mute); }
.cdf-name { position: relative; color: var(--cdf-accent); font-weight: 700; letter-spacing: -.005em; }
.cdf-u { position: absolute; left: -2%; bottom: -7px; width: 104%; height: 9px; overflow: visible; }
.cdf-u path { fill: none; stroke: var(--cdf-accent); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 220; stroke-dashoffset: 0; }
@keyframes cdf-draw { from { stroke-dashoffset: 220; } to { stroke-dashoffset: 0; } }
/* draws when it scrolls into view (browsers that know scroll timelines), stays drawn elsewhere */
@supports (animation-timeline: view()) {
  .cdf--text .cdf-u path { animation: cdf-draw linear both; animation-timeline: view(); animation-range: entry 10% cover 35%; }
}
.cdf--text:hover .cdf-u path, .cdf--text:focus-visible .cdf-u path { animation: cdf-draw .7s cubic-bezier(.2, .8, .2, 1) both; }
.cdf--text:focus-visible { border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
  .cdf, .cdf *, .cdf-swap > span { transition: none !important; }
  .cdf-ring { animation: none; }
  .cdf--text .cdf-u path, .cdf--text:hover .cdf-u path { animation: none !important; stroke-dashoffset: 0; }
}