/* Motion delle home di astraai.it (18/10/2026).
 * Un solo segno forte: l'AI che lavora, mostrata dentro le schede «Cosa fa».
 * Intorno: ingresso dell'hero, rivelazioni allo scorrimento, molla sui bottoni, linea dei passi.
 * Solo transform e opacity. Senza JS (classe .mo assente) tutto è visibile e fermo.
 * prefers-reduced-motion: stato finale composto, nessuna animazione. */

:root { --molla: cubic-bezier(.34, 1.56, .64, 1); --uscita: cubic-bezier(.22, 1, .36, 1); --rosso: #D92D58; }

/* ── Hero: parole che entrano una alla volta ── */
.mo .hero-tagline .w { display: inline-block; opacity: 0; transform: translateY(.45em); filter: blur(6px);
  animation: mo-parola .8s var(--uscita) forwards; animation-delay: calc(var(--i) * 70ms + 150ms); }
@keyframes mo-parola { to { opacity: 1; transform: none; filter: blur(0); } }
.mo .hero-sub, .mo .hero-actions, .mo .cta-subtext { opacity: 0; transform: translateY(14px); animation: mo-su .8s var(--uscita) forwards; }
.mo .hero-sub { animation-delay: .65s; } .mo .hero-actions { animation-delay: .8s; } .mo .cta-subtext { animation-delay: .95s; }
@keyframes mo-su { to { opacity: 1; transform: none; } }
/* il Polpo si adatta all'altezza dello schermo, così il bottone resta sopra la piega */
.hero-polpo { width: clamp(200px, min(40vw, 32vh), 420px); }

/* ── Bottoni: molla al tocco ── */
.btn { transition: transform .35s var(--molla), box-shadow .3s ease, background .3s ease; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: scale(.96); transition-duration: .12s; }

/* ── Rivelazioni allo scorrimento ── */
.mo [data-mo] { opacity: 0; transform: translateY(26px); transition: opacity .7s var(--uscita), transform .7s var(--uscita); transition-delay: calc(var(--d, 0) * 90ms); }
.mo [data-mo].in { opacity: 1; transform: none; }

/* ── Ti riconosci: le frasi arrivano come messaggi ── */
.mo-chat { max-width: 720px; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 1rem; }
.mo-msg { max-width: 82%; padding: 1rem 1.25rem; border-radius: 20px 20px 20px 6px; background: var(--bg-card);
  border: 1px solid var(--border-subtle); }
.mo-msg:nth-child(even) { align-self: flex-end; border-radius: 20px 20px 6px 20px; }
.mo-msg b { display: block; color: var(--text-primary); font-family: var(--font-display); font-size: 1.05rem; margin-bottom: .3rem; }
.mo-msg span { color: var(--text-secondary); line-height: 1.55; }
.mo .mo-msg { opacity: 0; transform: translateY(18px) scale(.97); transform-origin: left bottom;
  transition: opacity .55s var(--uscita), transform .55s var(--molla); transition-delay: calc(var(--d, 0) * 260ms); }
.mo .mo-msg:nth-child(even) { transform-origin: right bottom; }
.mo .mo-chat.in .mo-msg { opacity: 1; transform: none; }

/* ── Cosa fa: bento con le scene dell'AI al lavoro ── */
.mo-bento { display: grid; gap: 1.25rem; margin-top: 2.5rem; grid-template-columns: repeat(6, 1fr); }
.mo-bento > :nth-child(1) { grid-column: span 4; } .mo-bento > :nth-child(2) { grid-column: span 2; }
.mo-bento > :nth-child(3) { grid-column: span 3; } .mo-bento > :nth-child(4) { grid-column: span 3; }
@media (max-width: 860px) { .mo-bento { grid-template-columns: 1fr; } .mo-bento > * { grid-column: auto !important; } }
.mo-tile { position: relative; overflow: hidden; background: var(--bg-card); border: 1px solid var(--border-subtle);
  border-radius: 20px; padding: 1.5rem; transition: border-color .3s ease, transform .4s var(--molla); }
.mo-tile:hover { border-color: rgba(217, 45, 88, .5); transform: translateY(-3px); }
.mo-tile::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .3s;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(217, 45, 88, .14), transparent 60%); }
.mo-tile:hover::before { opacity: 1; }
.mo-tile h3 { font-family: var(--font-display); color: var(--text-primary); font-size: 1.15rem; margin: 1.1rem 0 .35rem; }
.mo-tile p { color: var(--text-secondary); line-height: 1.6; margin: 0; }
.mo-scena { position: relative; min-height: 132px; border-radius: 14px; padding: 1rem; background: rgba(255, 255, 255, .03);
  border: 1px solid rgba(255, 255, 255, .06); font-size: .9rem; }

/* scena 1: domanda e risposta */
.mo-q, .mo-a { padding: .6rem .9rem; border-radius: 14px; max-width: 85%; line-height: 1.45; }
.mo-q { margin-left: auto; width: fit-content; background: rgba(217, 45, 88, .16); color: var(--text-primary); border-bottom-right-radius: 4px; }
.mo-a { margin-top: .6rem; background: rgba(255, 255, 255, .06); color: var(--text-secondary); border-bottom-left-radius: 4px; min-height: 2.6em; }
.mo-a .caret { display: inline-block; width: 2px; height: 1em; background: var(--rosso); vertical-align: -2px; margin-left: 2px; animation: mo-caret 1s steps(1) infinite; }
@keyframes mo-caret { 50% { opacity: 0; } }
.mo-puntini { display: inline-flex; gap: 4px; } .mo-puntini i { width: 6px; height: 6px; border-radius: 50%; background: var(--text-muted); animation: mo-punto 1s infinite; }
.mo-puntini i:nth-child(2) { animation-delay: .15s; } .mo-puntini i:nth-child(3) { animation-delay: .3s; }
@keyframes mo-punto { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } }

/* scena 2: il documento che si compila */
.mo-doc { display: flex; flex-direction: column; gap: .5rem; }
.mo-riga { height: 8px; border-radius: 4px; background: rgba(255, 255, 255, .12); transform-origin: left; }
.mo .mo-riga { transform: scaleX(0); }
.mo-doc .mo-riga:nth-child(1) { width: 55%; background: rgba(217, 45, 88, .55); } .mo-doc .mo-riga:nth-child(2) { width: 92%; }
.mo-doc .mo-riga:nth-child(3) { width: 78%; } .mo-doc .mo-riga:nth-child(4) { width: 86%; } .mo-doc .mo-riga:nth-child(5) { width: 40%; }
.mo-pronto { position: absolute; right: 1rem; bottom: 1rem; padding: .3rem .7rem; border-radius: 999px; font-size: .8rem; font-weight: 600;
  background: rgba(34, 197, 94, .16); color: #4ade80; }
.mo .mo-pronto { opacity: 0; transform: scale(.6); }
.in .mo-riga { animation: mo-scrive .7s var(--uscita) forwards; animation-delay: calc(var(--r) * 280ms + 200ms); }
@keyframes mo-scrive { to { transform: scaleX(1); } }
.in .mo-pronto { animation: mo-pop .5s var(--molla) forwards 1.9s; }
@keyframes mo-pop { to { opacity: 1; transform: scale(1); } }

/* scena 3: il punto del mattino che si spunta */
.mo-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .55rem; color: var(--text-secondary); }
.mo-lista li { display: flex; align-items: center; gap: .6rem; }
.mo-check { flex: none; width: 18px; height: 18px; border-radius: 6px; border: 1.5px solid var(--text-muted); display: grid; place-items: center;
  transition: background .3s ease, border-color .3s ease; }
.mo-check::after { content: ""; width: 5px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg) scale(0); margin-top: -2px; transition: transform .35s var(--molla); }
.mo-lista li.ok .mo-check { background: var(--rosso); border-color: var(--rosso); }
.mo-lista li.ok .mo-check::after { transform: rotate(45deg) scale(1); }

/* scena 4: il contatto da richiamare */
.mo-cont { display: flex; flex-direction: column; gap: .5rem; }
.mo-cont div { display: flex; justify-content: space-between; align-items: center; padding: .45rem .7rem; border-radius: 10px;
  background: rgba(255, 255, 255, .04); color: var(--text-secondary); }
.mo-cont .mo-alert { position: relative; color: var(--text-primary); }
.mo-cont .mo-alert em { font-style: normal; font-size: .75rem; font-weight: 600; color: var(--rosso); transition: opacity .4s, transform .4s var(--molla); }
.mo .mo-cont .mo-alert em { opacity: 0; transform: translateX(8px); }
.mo .in .mo-cont .mo-alert em { opacity: 1; transform: none; transition-delay: .8s; }
.in .mo-cont .mo-alert { animation: mo-ping 2.4s ease-out 1s infinite; }
@keyframes mo-ping { 0% { box-shadow: 0 0 0 0 rgba(217, 45, 88, .45); } 70%, 100% { box-shadow: 0 0 0 10px rgba(217, 45, 88, 0); } }

/* ── Come lavoriamo: la linea dei passi ── */
.mo-passi { position: relative; max-width: 760px; margin: 2.5rem auto 0; display: flex; flex-direction: column; gap: 2rem; padding-left: 3.25rem; }
.mo-passi::before, .mo-passi::after { content: ""; position: absolute; left: 1rem; top: .5rem; bottom: .5rem; width: 2px; border-radius: 2px; }
.mo-passi::before { background: var(--border-subtle); }
.mo-passi::after { background: linear-gradient(var(--rosso), #8b5cf6); transform-origin: top; transition: transform 1.6s var(--uscita); }
.mo .mo-passi::after { transform: scaleY(0); }
.mo .mo-passi.in::after { transform: scaleY(1); }
.mo-passo { position: relative; }
.mo-passo::before { counter-increment: passo; content: counter(passo); position: absolute; left: -3.25rem; top: 0; width: 2.1rem; height: 2.1rem; border-radius: 50%;
  display: grid; place-items: center; font: 700 .95rem/1 var(--font-body, Inter, sans-serif); color: #fff; background: #1a2338; border: 2px solid var(--border-subtle); transition: background .4s, border-color .4s, transform .5s var(--molla); }
.mo-passi.in .mo-passo::before { background: var(--rosso); border-color: var(--rosso); }
.mo-passi.in .mo-passo:nth-child(2)::before { transition-delay: .55s; } .mo-passi.in .mo-passo:nth-child(3)::before { transition-delay: 1.1s; }
.mo-passi { counter-reset: passo; }
.mo-passo h3 { font-family: var(--font-display); color: var(--text-primary); font-size: 1.2rem; margin: .15rem 0 .35rem; }
.mo-passo p { color: var(--text-secondary); line-height: 1.6; margin: 0; }
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .mo .mo-passi::after { transition: none; animation: mo-linea linear both; animation-timeline: view(); animation-range: entry 30% cover 60%; }
    @keyframes mo-linea { from { transform: scaleY(0); } to { transform: scaleY(1); } }
  }
}

/* ── L'ultima parola: affermazione + elenco ── */
.mo-patto { display: grid; grid-template-columns: 1.1fr 1fr; gap: 2.5rem; align-items: center; margin-top: 1rem; }
@media (max-width: 860px) { .mo-patto { grid-template-columns: 1fr; gap: 1.5rem; } }
.mo-patto .mo-grande { font-family: var(--font-display); font-size: clamp(1.8rem, 3.6vw, 2.8rem); line-height: 1.15; color: var(--text-primary); margin: 0; }
.mo-patto ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1.1rem; }
.mo-patto li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; }
.mo-patto li .ico { width: 2.4rem; height: 2.4rem; border-radius: 12px; display: grid; place-items: center; background: rgba(217, 45, 88, .14); font-size: 1.1rem; }
.mo-patto li b { display: block; color: var(--text-primary); margin-bottom: .2rem; }
.mo-patto li span { color: var(--text-secondary); line-height: 1.55; }

/* ── Settori: molla sulle pillole ── */
.ap-settori a { transition: border-color .2s, transform .35s var(--molla), background .25s; }
.ap-settori a:hover { transform: translateY(-3px); background: rgba(217, 45, 88, .1); }

/* ── Movimento ridotto: tutto fermo, tutto visibile ── */
@media (prefers-reduced-motion: reduce) {
  .mo *, .mo *::before, .mo *::after { animation: none !important; transition: none !important; }
  .mo [data-mo], .mo .mo-msg, .mo .hero-tagline .w, .mo .hero-sub, .mo .hero-actions, .mo .cta-subtext { opacity: 1 !important; transform: none !important; filter: none !important; }
  .mo-riga { transform: none; } .mo-pronto { opacity: 1; transform: none; } .mo-passi::after { transform: none; }
  .mo-cont .mo-alert em { opacity: 1; transform: none; }
  /* Corsa del Polpo 19/10/2026: titolo e Polpo partivano da opacità 0 con un'animazione che qui è spenta: restavano invisibili */
  .hero-polpo, .hero-tagline { opacity: 1 !important; transform: none !important; }
}

/* i numeri dei passi sopra la linea */
.mo-passi::before, .mo-passi::after { z-index: 0; }
.mo-passo::before { z-index: 1; }

/* ── FAQ a fisarmonica (pagina agenzia) ── */
.mo-faqs { display: flex; flex-direction: column; gap: .75rem; margin-top: 2rem; }
.mo-faq { background: var(--bg-card); border: 1px solid var(--border-subtle); border-radius: 16px; padding: 1.1rem 1.3rem; transition: border-color .3s; }
.mo-faq[open] { border-color: rgba(217, 45, 88, .45); }
.mo-faq summary { cursor: pointer; list-style: none; font-family: var(--font-display); color: var(--text-primary); font-size: 1.05rem; display: flex; justify-content: space-between; gap: 1rem; }
.mo-faq summary::-webkit-details-marker { display: none; }
.mo-faq summary::after { content: "+"; color: var(--rosso); font-size: 1.4rem; line-height: 1; transition: transform .35s var(--molla); }
.mo-faq[open] summary::after { transform: rotate(45deg); }
.mo-faq p { color: var(--text-secondary); line-height: 1.65; margin: .8rem 0 0; }