/* ===========================================================
   footer.css — the site footer (all pages). Loaded after style.css.
   Self-contained: works on pages that do not load home.css (privacy, cookie, 404).
   Same width as the rest of the site: var(--site-max) and var(--site-pad) (style.css).
   Motion starts only when the footer is on screen (js/modules/footerFx.js
   adds .is-on / .is-in) and stops with prefers-reduced-motion.
   =========================================================== */
.ft {
  --ft-ink: #f2f5fa; --ft-soft: #c9d3e1; --ft-mute: #9eabbf;
  --ft-line: rgba(231, 237, 247, .13);
  --ft-display: 'Sora', 'Inter', system-ui, sans-serif;
  --ft-ease: cubic-bezier(.2, .8, .2, 1);
  position: relative; z-index: 10; margin-top: 4rem; overflow: hidden;
  background: linear-gradient(180deg, rgba(8, 18, 38, 0), #060d1b 9rem);
  color: var(--ft-soft); text-align: left; font-size: 1rem; line-height: 1.5;
}
.ft a:not(.cdf) { color: inherit; text-decoration: none; }
.ft a:focus-visible, .ft button:focus-visible { outline: 3px solid var(--accent-400, #ffab5c); outline-offset: 3px; border-radius: 6px; }

/* services strip */
.ft-tick { border-top: 1px solid var(--ft-line); border-bottom: 1px solid var(--ft-line); padding: .9rem 0; overflow: hidden; white-space: nowrap; }
.ft-track { display: inline-flex; align-items: center; gap: 1.4rem; padding-right: 1.4rem; will-change: transform; animation: ft-slide 46s linear infinite; animation-play-state: paused; }
.ft.is-on .ft-track { animation-play-state: running; }
.ft-track span { font-family: var(--ft-display); font-weight: 600; font-size: 1.05rem; letter-spacing: -.01em; color: var(--ft-mute); }
.ft-track i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--accent-500, #f5872e); flex: none; }
@keyframes ft-slide { to { transform: translate3d(-50%, 0, 0); } }

.ft-in { max-width: var(--site-max, 96rem); margin: 0 auto; padding: 0 var(--site-pad, clamp(1.25rem, 4vw, 4rem)); }
.ft-main { display: grid; gap: 3rem; padding: clamp(3rem, 6vw, 5rem) 0 clamp(2rem, 4vw, 3rem); }
@media (min-width: 1024px) { .ft-main { grid-template-columns: 1.1fr 1.3fr .6fr; gap: clamp(2.5rem, 4vw, 5rem); } }
.ft-h { margin: 0 0 1.1rem; font-size: .72rem; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--accent-300, #ffc27a); }

/* me */
.ft-brand { display: flex; align-items: center; gap: 1.1rem; }
.ft-brand img { width: 5.5rem; height: 5.5rem; object-fit: contain; flex: none; filter: drop-shadow(0 10px 22px rgba(245, 135, 46, .25)); }
.ft-brand p { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.ft-brand b { font-family: var(--ft-display); font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -.03em; color: var(--ft-ink); }
.ft-brand span { font-size: .75rem; font-weight: 600; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-400, #ffab5c); }
.ft-bio { max-width: 30rem; margin: 1.5rem 0 0; font-size: 1.05rem; line-height: 1.65; }
.ft-where { margin-top: 2rem; }
.ft-places { display: flex; flex-wrap: wrap; gap: .3rem .65rem; margin: 0; padding: 0; list-style: none; font-family: var(--ft-display); font-weight: 600; font-size: .95rem; line-height: 1.35; color: var(--ft-ink); }
.ft-places li { display: inline-flex; align-items: center; gap: .65rem; margin: 0; }
.ft-places li + li::before { content: ""; width: .25rem; height: .25rem; border-radius: 50%; background: var(--accent-500, #f5872e); }
.ft-places .soft { color: var(--ft-mute); font-weight: 500; }
.ft-places-note { margin: .8rem 0 0; max-width: 30rem; font-size: .9rem; line-height: 1.5; color: var(--ft-mute); }

/* contacts */
.ft-wa {
  position: relative; display: flex; align-items: center; gap: 1rem;
  padding: 1rem 1.1rem; margin-bottom: .6rem; border-radius: 1.1rem;
  background: linear-gradient(120deg, rgba(37, 211, 102, .14), rgba(37, 211, 102, .04));
  box-shadow: inset 0 0 0 1px rgba(37, 211, 102, .28);
  transition: background-color .4s ease, transform .4s var(--ft-ease);
}
.ft-wa:hover { transform: translateY(-2px); background-color: rgba(37, 211, 102, .08); }
.ft-wa-ico { position: relative; display: grid; place-items: center; width: 3rem; height: 3rem; border-radius: 50%; background: #25d366; color: #fff; flex: none; }
.ft-wa-ico::before, .ft-wa-ico::after { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: ft-ping 2.8s ease-out infinite; animation-play-state: paused; }
.ft-wa-ico::after { animation-delay: 1.4s; }
.ft.is-on .ft-wa-ico::before, .ft.is-on .ft-wa-ico::after { animation-play-state: running; }
@keyframes ft-ping { from { transform: scale(1); opacity: .7; } to { transform: scale(1.9); opacity: 0; } }
.ft-wa-t { display: flex; flex-direction: column; gap: .2rem; }
.ft-wa-t b { font-family: var(--ft-display); font-size: 1.2rem; color: var(--ft-ink); letter-spacing: -.015em; }
.ft-wa-t small { font-size: .85rem; color: var(--ft-soft); }
.ft-wa-arrow { margin-left: auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: rgba(255, 255, 255, .06); color: var(--ft-ink); flex: none; transition: transform .5s var(--ft-ease), background-color .3s ease; }
.ft-wa:hover .ft-wa-arrow { transform: rotate(-45deg); background: #25d366; }

.ft-rows { list-style: none; margin: 0; padding: 0; }
.ft-rows li { margin: 0; }
.ft-row { display: flex; align-items: center; gap: .9rem; padding: .85rem .2rem; border-bottom: 1px solid var(--ft-line); font-size: .98rem; transition: color .3s ease, padding .4s var(--ft-ease); }
.ft-row:hover { color: var(--accent-300, #ffc27a); padding-left: .6rem; }
.ft-row svg { flex: none; color: var(--accent-400, #ffab5c); }
.ft-row .k { min-width: 4.6rem; font-size: .74rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--ft-mute); }
.ft-row .v { overflow-wrap: anywhere; color: var(--ft-ink); }
.ft-row--txt:hover { color: inherit; padding-left: .2rem; } /* riga di solo testo (numero WhatsApp): non e' un collegamento */

/* services */
.ft-svc { list-style: none; margin: 0; padding: 0; }
.ft-svc li { margin: 0; }
.ft-svc a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .55rem 0; font-size: 1rem; color: var(--ft-soft); transition: color .3s ease; }
.ft-svc .ar { color: var(--accent-400, #ffab5c); opacity: 0; transform: translateX(-.4rem); transition: opacity .3s ease, transform .4s var(--ft-ease); }
.ft-svc a:hover { color: var(--ft-ink); }
.ft-svc a:hover .ar, .ft-svc a:focus-visible .ar { opacity: 1; transform: none; }
.ft .ft-svc-all { margin-top: .6rem; display: inline-block; font-size: .9rem; font-weight: 600; color: var(--accent-400, #ffab5c); }

/* huge wordmark + round seal in its corner */
.ft-big { position: relative; }
.ft-word {
  margin: 0; padding: 0 clamp(1rem, 3vw, 3rem); overflow: hidden; white-space: nowrap; text-align: center;
  font-family: var(--ft-display); font-weight: 700;
  font-size: clamp(2.6rem, 10.4vw, 11rem); line-height: 1.02; letter-spacing: -.055em;
  color: rgba(242, 245, 250, .07); user-select: none;
}
.ft-word .l { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ft-ease); transition-delay: calc(var(--i) * 40ms); }
.ft-word.is-in .l { transform: none; animation: ft-wave 7s calc(var(--i) * .11s + 1.2s) ease-in-out infinite; }
.ft-word.is-out .l { animation-play-state: paused; }
@keyframes ft-wave { 0%, 70%, 100% { color: rgba(242, 245, 250, .07); } 80% { color: rgba(245, 135, 46, .55); } }
.ft-big .cdf--seal { position: absolute; right: var(--site-pad, clamp(1.25rem, 4vw, 4rem)); top: 0; transform: translateY(-62%); width: 7.5rem; height: 7.5rem; z-index: 2; }
@media (max-width: 639px) { .ft-big .cdf--seal { width: 5.75rem; height: 5.75rem; transform: translateY(-70%); } }

/* bottom: legal + signatures */
.ft-bot { display: grid; gap: .9rem 2rem; padding: 1.4rem 0 5.5rem; border-top: 1px solid var(--ft-line); font-size: .82rem; color: var(--ft-mute); }
.ft-bot p { margin: 0; }
.ft-line { display: flex; flex-wrap: wrap; gap: .3rem 1.4rem; align-items: center; }
.ft-legal { display: flex; flex-wrap: wrap; gap: .1rem 1.4rem; }
.ft-legal a, .ft-legal button { color: var(--ft-soft); font: inherit; background: none; border: 0; padding: .3rem 0; cursor: pointer; }
.ft-legal a:hover, .ft-legal button:hover { color: var(--accent-300, #ffc27a); }
.ft-sign { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem 1.6rem; }
.ft-sign .cdf--pill { margin-left: auto; }
@media (min-width: 1024px) { .ft-bot { padding-right: 5.5rem; } } /* room for the floating WhatsApp/chat buttons */
@media (max-width: 767px) { .ft-sign .cdf--pill { margin-left: 0; } }

/* phones: label above the address, so long emails do not break in the middle */
@media (max-width: 639px) {
  .ft-row { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; row-gap: .15rem; align-items: center; }
  .ft-row svg { grid-row: 1 / span 2; }
  .ft-row .k { min-width: 0; font-size: .68rem; }
  .ft-row .v { font-size: .95rem; overflow-wrap: anywhere; }
  .ft-word { font-size: 13.5vw; white-space: normal; line-height: .95; }
  .ft-big .cdf--seal { top: 0; }
  .ft-word { padding-top: 1.2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .ft-track { animation: none; }
  .ft-wa-ico::before, .ft-wa-ico::after { animation: none; }
  .ft-word .l { transform: none; transition: none; animation: none !important; }
}

/* very narrow phones: the pill text goes on two lines instead of running off the screen */
@media (max-width: 480px) {
  .ft .cdf--pill { max-width: 100%; align-items: center; }
  .ft .cdf-swap { height: auto; min-width: 0; }
  .ft .cdf-swap > span { white-space: normal; }
}

/* very narrow phones: slightly smaller address; the line may break only before the @ */
@media (max-width: 379px) {
  .ft-row .v { font-size: .88rem; overflow-wrap: normal; }
}
