/* ONMAKE — grafica in movimento che reagisce al mouse (assets/movimento.css)
   Vanilla, nessuna libreria esterna. Vedi assets/movimento.js. */

.om-net-wrap { position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.om-net-wrap canvas { position:absolute; inset:0; width:100%; height:100%; display:block; }

.om-net-tip {
  position:absolute; left:0; top:0; z-index:2; pointer-events:none;
  transform:translate(-50%,-100%); margin-top:-10px;
  background:#0f172a; color:#fff; padding:.5rem .7rem; border-radius:.6rem;
  font-size:12px; line-height:1.4; max-width:210px; box-shadow:0 14px 30px -12px rgba(15,23,42,.45);
  opacity:0; transition:opacity .14s ease; white-space:normal;
}
.om-net-tip b { display:block; font-size:12.5px; font-weight:800; margin-bottom:.15rem; letter-spacing:-.01em; }
.om-net-tip.is-on { opacity:1; }

.om-net-sr { position:absolute; margin:0; padding:0; list-style:none; }
.om-net-sr a {
  position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}
.om-net-sr a:focus {
  position:fixed !important; width:auto; height:auto; overflow:visible; clip:auto;
  left:1rem; top:1rem; z-index:99999; background:#0f172a; color:#fff; padding:.6rem .9rem;
  border-radius:.5rem; font-size:13px; font-weight:700; box-shadow:0 10px 30px rgba(0,0,0,.35);
}

#hero { isolation:isolate; }

/* ---- card reveal ---- */
.om-reveal { opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; will-change:opacity,transform; }
.om-reveal.om-in { opacity:1; transform:translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .om-reveal { opacity:1; transform:none; transition:none; }
}

/* ---- card tilt ---- */
.om-tilt { transform-style:preserve-3d; }
.om-tilt-inner {
  transform: perspective(900px) rotateX(var(--om-rx,0deg)) rotateY(var(--om-ry,0deg)) translateZ(0);
  transition: transform .12s ease-out;
  position:relative;
}
.om-tilt.om-tilt-active .om-tilt-inner { transition:none; }
.om-tilt-sheen {
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background: radial-gradient(240px circle at var(--om-mx,50%) var(--om-my,50%), rgba(255,255,255,.55), transparent 62%);
  opacity:0; transition:opacity .25s ease; mix-blend-mode:soft-light;
}
.om-tilt.om-tilt-active .om-tilt-sheen { opacity:1; }
@media (prefers-reduced-motion: reduce), (hover:none) {
  .om-tilt-inner { transform:none !important; }
  .om-tilt-sheen { display:none; }
}

/* ---- mini demo animations inside cards ---- */
.om-demo { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .3s ease; pointer-events:none; }
.om-demo svg { width:100%; height:100%; max-height:96px; }
.om-tilt:hover .om-demo, .om-tilt:focus-within .om-demo { opacity:1; }
.om-demo .om-run { animation-play-state:paused; }
.om-tilt:hover .om-run, .om-tilt:focus-within .om-run { animation-play-state:running; }
@media (prefers-reduced-motion: reduce) { .om-demo { display:none; } }

/* ---- OnFirma story block ---- */
.om-onfirma-story { position:relative; margin-top:.9rem; border-radius:.85rem; background:#fbfaf7; border:1px solid #f0e4d6; padding:.85rem .9rem; overflow:hidden; }
.om-of-stage { position:relative; height:150px; }
.om-of-person { position:absolute; inset:0; opacity:0; transition:opacity .5s ease; }
.om-of-person.om-of-active { opacity:1; }
.om-of-avatar { width:52px; height:52px; border-radius:50%; flex:none; }
.om-of-row { display:flex; gap:.8rem; align-items:flex-start; height:100%; }
.om-of-sig { flex:1; min-width:0; }
.om-of-sig-line { height:8px; border-radius:4px; background:#e7ecf5; margin-bottom:6px; overflow:hidden; position:relative; }
.om-of-sig-line i { position:absolute; inset:0; background:var(--om-of-c,#d64d1e); transform:scaleX(0); transform-origin:left; display:block; }
.om-of-active .om-of-sig-line i { animation:om-of-grow 1.4s ease forwards; }
.om-of-sig-line:nth-child(2) i { animation-delay:.15s !important; }
.om-of-sig-line:nth-child(3) i { animation-delay:.3s !important; }
.om-of-sig-line:nth-child(4) i { animation-delay:.45s !important; }
@keyframes om-of-grow { to { transform:scaleX(1); } }
.om-of-phone { width:46px; height:88px; border-radius:9px; border:2px solid #0f172a; background:#fff; flex:none; position:relative; box-shadow:0 10px 22px -12px rgba(15,23,42,.4); cursor:pointer; }
.om-of-phone-card { position:absolute; left:4px; right:4px; top:6px; bottom:6px; border-radius:4px; background:#f8fafc; opacity:0; transition:opacity .4s ease .5s; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; padding:3px; }
.om-of-active .om-of-phone-card { opacity:1; }
.om-of-qr { width:22px; height:22px; display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(4,1fr); gap:1px; }
.om-of-qr span { background:#0f172a; }
.om-of-qr span:nth-child(odd) { background:transparent; }
.om-of-name { font-size:5px; font-weight:800; color:#0f172a; text-align:center; }
.om-of-note { margin-top:.55rem; font-size:10.5px; color:#94a3b8; line-height:1.4; }
@media (prefers-reduced-motion: reduce) {
  .om-of-person { transition:none; }
  .om-of-sig-line i { animation:none !important; transform:scaleX(1); }
  .om-of-phone-card { transition:none; opacity:1; }
}

/* ---- ambient section background ---- */
.om-amb-host { position:relative; }
.om-amb-host > .onmake-container, .om-amb-host > .om-amb-above { position:relative; z-index:1; }
.om-amb { position:absolute; inset:0; z-index:0; pointer-events:none; }