/* Home: apertura scura con la console dal vivo, nastro delle fonti e le visualizzazioni delle funzioni.
   Tutto parte visibile; con JavaScript (classe ps-js su <html>) le sezioni compaiono quando entrano nello schermo.
   Con «riduci movimento» niente animazioni: si vede subito lo stato finale. */

/* ---------- apertura ---------- */
.ps-hero { position: relative; isolation: isolate; overflow: hidden; background: #0b0d0c; color: #fff; }
.ps-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 44px 44px,
              linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) 0 0 / 44px 44px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 60% 35%, #000 20%, transparent 75%);
          mask-image: radial-gradient(ellipse 70% 60% at 60% 35%, #000 20%, transparent 75%); }
.ps-aurora { position: absolute; inset: -30% -20% -10% -20%; z-index: -2; pointer-events: none;
  background: radial-gradient(36% 32% at 72% 32%, rgba(111,227,184,.30), transparent 70%),
              radial-gradient(28% 28% at 22% 12%, rgba(147,197,253,.18), transparent 70%),
              radial-gradient(30% 26% at 50% 95%, rgba(15,159,110,.22), transparent 70%); }
/* Solo l'aurora dell'apertura si muove: le altre restano ferme (meno lavoro per la scheda grafica). */
.ps-aurora.vivo { will-change: transform; animation: ps-drift 16s ease-in-out infinite alternate; }
@keyframes ps-drift { to { transform: translate3d(-5%, 4%, 0) scale(1.08); } }
.ps-grad { background: linear-gradient(90deg, #6fe3b8 0%, #c8f7e4 50%, #93c5fd 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.ps-pill { display: inline-flex; align-items: center; gap: .5rem; border-radius: 999px; border: 1px solid rgba(255,255,255,.14);
  background: rgba(255,255,255,.05); padding: .3rem .8rem; font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; color: rgba(255,255,255,.75); }

/* ---------- console dal vivo ---------- */
.ps-console { border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.025));
  box-shadow: 0 50px 90px -40px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.ps-bubble { position: relative; }
.ps-bubble [data-scrivi] { position: absolute; inset: 0; padding: inherit; }
.ps-caret::after { content: ""; display: inline-block; width: 2px; height: 1em; margin-left: 2px; vertical-align: -2px; background: currentColor; animation: ps-blink 1s steps(1) infinite; }
@keyframes ps-blink { 50% { opacity: 0; } }
.ps-js [data-console] [data-passo] { opacity: .14; transform: translateY(6px); transition: opacity .45s ease, transform .45s ease; }
.ps-js [data-console] [data-passo].on { opacity: 1; transform: none; }
.ps-call .ps-ok { display: none; }
.ps-js .ps-call:not(.done) .ps-ok { display: none; }
.ps-call.done .ps-ok, html:not(.ps-js) .ps-call .ps-ok { display: inline-flex; }
.ps-call.done .ps-spin, html:not(.ps-js) .ps-call .ps-spin { display: none; }
.ps-spin { width: 12px; height: 12px; border-radius: 50%; border: 2px solid rgba(111,227,184,.25); border-top-color: #6fe3b8; animation: ps-rot .8s linear infinite; }
@keyframes ps-rot { to { transform: rotate(360deg); } }
.ps-call .ps-loghi svg { opacity: .35; transition: opacity .3s ease; }
.ps-call.on .ps-loghi svg { opacity: 1; }
.ps-call.on .ps-loghi svg:nth-child(2) { transition-delay: .15s; } .ps-call.on .ps-loghi svg:nth-child(3) { transition-delay: .3s; }
.ps-call.on .ps-loghi svg:nth-child(4) { transition-delay: .45s; } .ps-call.on .ps-loghi svg:nth-child(5) { transition-delay: .6s; }
.ps-call.on .ps-loghi svg:nth-child(6) { transition-delay: .75s; } .ps-call.on .ps-loghi svg:nth-child(7) { transition-delay: .9s; }

/* ---------- nastro delle fonti ---------- */
.ps-marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); }
.ps-track { display: flex; width: max-content; animation: ps-scroll 55s linear infinite; }
.ps-marquee:hover .ps-track { animation-play-state: paused; }
@keyframes ps-scroll { to { transform: translateX(-50%); } }

/* ---------- comparsa delle sezioni ---------- */
.ps-js .ps-rv { opacity: 0; transform: translateY(18px); transition: opacity .7s ease var(--d, 0s), transform .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s); }
.ps-js .ps-rv.in { opacity: 1; transform: none; }
.ps-bar { position: relative; height: 8px; border-radius: 999px; background: rgba(26,26,26,.07); overflow: hidden; }
.ps-bar > i { position: absolute; inset: 0 auto 0 0; width: var(--w); border-radius: inherit; background: #c9c9c6; transition: width 1.2s cubic-bezier(.2,.7,.2,1) var(--d, .15s); }
.ps-bar.brand > i, .ps-bar > i.brand { background: #0f9f6e; }
.ps-dark .ps-bar { background: rgba(255,255,255,.08); }
.ps-dark .ps-bar > i { background: rgba(255,255,255,.28); }
.ps-dark .ps-bar > i.brand { background: linear-gradient(90deg, #0f9f6e, #6fe3b8); }
.ps-js .ps-rv:not(.in) .ps-bar > i { width: 0; }
.ps-tick { position: absolute; top: -3px; bottom: -3px; left: var(--t); width: 2px; border-radius: 2px; background: #1a1a1a; }

/* ---------- 01 social listening: feed che scorre ---------- */
.ps-feed { height: 372px; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); mask-image: linear-gradient(transparent, #000 10%, #000 88%, transparent); }
.ps-feed-track { animation: ps-up 34s linear infinite; }
.ps-feed:hover .ps-feed-track { animation-play-state: paused; }
@keyframes ps-up { to { transform: translateY(-50%); } }

/* ---------- 02 umore: arco e andamento ---------- */
.ps-arc { fill: none; stroke-width: 18; stroke-linecap: butt; stroke-dasharray: var(--len) 100; stroke-dashoffset: calc(var(--off) * -1);
  transition: stroke-dasharray 1.3s cubic-bezier(.2,.7,.2,1) var(--d, .2s); }
.ps-js .ps-rv:not(.in) .ps-arc { stroke-dasharray: 0 100; }
.ps-draw { stroke-dasharray: 1; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s ease .3s; }
.ps-js .ps-rv:not(.in) .ps-draw { stroke-dashoffset: 1; }
.ps-area { transition: opacity 1s ease 1.4s; }
.ps-js .ps-rv:not(.in) .ps-area { opacity: 0; }

/* ---------- 03 giornalisti: email che si trova ---------- */
.ps-mail { position: relative; overflow: hidden; }
.ps-mail::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(111,227,184,.35), transparent); transform: translateX(-100%); animation: ps-shine 3.2s ease-in-out infinite var(--d, 0s); }
@keyframes ps-shine { 60%, 100% { transform: translateX(100%); } }
.ps-avatar { background: linear-gradient(135deg, #0f9f6e, #93c5fd); }

/* ---------- 04 donatori ---------- */
.ps-dark { background: #0b0d0c; color: #fff; }
.ps-glow-card { position: relative; isolation: isolate; }
.ps-glow-card::before { content: ""; position: absolute; inset: -1px; z-index: -1; border-radius: inherit; padding: 1px;
  background: linear-gradient(140deg, rgba(111,227,184,.55), rgba(255,255,255,.06) 40%, rgba(147,197,253,.35));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }

/* ---------- carte delle funzioni ---------- */
.ps-card { transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; }
.ps-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(16,24,20,.28); border-color: rgba(15,159,110,.35); }
.ps-num { font-family: "DM Mono", ui-monospace, monospace; font-size: 11.5px; letter-spacing: .12em; }

@media (prefers-reduced-motion: reduce) {
  .ps-aurora, .ps-track, .ps-feed-track, .ps-mail::after, .ps-caret::after, .ps-spin { animation: none !important; }
  .ps-js .ps-rv, .ps-js [data-console] [data-passo], .ps-bar > i, .ps-arc, .ps-draw, .ps-area { transition: none !important; }
  .ps-card:hover { transform: none; }
}