/* mnemoi v4 · strato di movimento. Tutto è disattivato con prefers-reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  /* 1. Scena dell'hero: si "apre" scorrendo e segue il puntatore. */
  /* La scena resta piatta: con preserve-3d le notifiche venivano tagliate in diagonale da computer e telefono inclinati. */
  .scene { transform-style: flat; }
  .scene .float { z-index: 8; }
  .scene .browser, .scene .iphone { transition: transform .6s var(--ease); will-change: transform; }
  .scene .browser {
    transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px), 0)
      rotateY(calc(10deg + var(--ry, 0deg))) rotateX(calc(2deg + var(--rx, 0deg))) scale(var(--sc, 1));
  }
  .scene:hover .browser {
    transform: translate3d(calc(var(--mx, 0) * -8px), calc(var(--my, 0) * -6px), 0)
      rotateY(calc(4deg + var(--ry, 0deg))) rotateX(calc(1deg + var(--rx, 0deg))) scale(var(--sc, 1));
  }
  .scene .iphone {
    transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 10px), 0)
      rotateY(calc(-8deg + var(--ry, 0deg))) rotateX(calc(3deg + var(--rx, 0deg))) scale(var(--sc, 1));
  }
  .scene:hover .iphone {
    transform: translate3d(calc(var(--mx, 0) * 14px), calc(var(--my, 0) * 10px - 6px), 0)
      rotateY(calc(-3deg + var(--ry, 0deg))) rotateX(calc(1deg + var(--rx, 0deg))) scale(var(--sc, 1));
  }
  @media (max-width: 860px) {
    .scene .iphone, .scene:hover .iphone { transform: rotateX(var(--rx, 0deg)) scale(var(--sc, 1)); }
  }

  /* 2. Notifiche "dal vivo": entrano una dopo l'altra, poi oscillano. */
  .m-live .scene .float {
    opacity: 0;
    animation: liveIn .8s var(--ease) forwards, bob 7s ease-in-out infinite;
  }
  .m-live .scene .f1 { animation-delay: 1.4s, 2.2s; }
  .m-live .scene .f2 { animation-delay: 2.4s, 3.2s; }
  .m-live .scene .f3 { animation-delay: 3.4s, 4.2s; }

  /* 3. Titoli di sezione: parola per parola quando entrano nello schermo. */
  .m-words .mw {
    display: inline-block;
    opacity: 0;
    transform: translateY(.5em);
    filter: blur(6px);
    transition: opacity .7s var(--ease), transform .7s var(--ease), filter .7s var(--ease);
    transition-delay: calc(var(--i) * 45ms);
  }
  .m-words.on .mw { opacity: 1; transform: none; filter: none; }

  /* 4. Chat: i messaggi arrivano uno alla volta, con "sta scrivendo". */
  .m-chat .msg { opacity: 0; transform: translateY(10px) scale(.98); transition: opacity .45s var(--ease), transform .45s var(--ease); }
  .m-chat .msg.on { opacity: 1; transform: none; }
  .typing { align-self: flex-start; display: inline-flex; gap: 4px; padding: .6rem .7rem; border-radius: 10px; border-top-left-radius: 2px; background: var(--wa-in); box-shadow: 0 1px 1px rgba(0,0,0,.08); }
  .typing i { width: 6px; height: 6px; border-radius: 50%; background: var(--wa-meta); animation: dots 1s infinite; }
  .typing i:nth-child(2) { animation-delay: .15s; }
  .typing i:nth-child(3) { animation-delay: .3s; }

  /* 5. Riflesso che segue il puntatore su card e lavori. */
  .m-spot { position: relative; isolation: isolate; }
  .m-spot::before {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
    opacity: 0; transition: opacity .35s;
    background: radial-gradient(420px circle at var(--sx, 50%) var(--sy, 50%), color-mix(in srgb, var(--gold) 22%, transparent), transparent 60%);
  }
  .m-spot:hover::before { opacity: 1; }

  /* 6. Bottoni principali "magnetici". */
  .m-mag { transition: transform .35s var(--ease); }

  /* 7. Lavori: l'immagine si svela dal basso. */
  .m-unveil .wk-shot img { clip-path: inset(18% 0 0 0 round 0); transform: scale(1.08); transition: clip-path 1.1s var(--ease), transform 1.4s var(--ease); }
  .m-unveil.on .wk-shot img { clip-path: inset(0 0 0 0 round 0); transform: none; }
}

@keyframes liveIn {
  from { opacity: 0; transform: translateY(14px) scale(.92); filter: blur(8px); }
  to { opacity: 1; transform: none; filter: none; }
}
@keyframes dots { 0%, 60%, 100% { opacity: .35; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }