/* =========================================================
   motion.css — stili per mill.js, delayed-reveal.js, in-view.js, SVG animati e header con foto
   Neutro: i colori vengono da variabili (--mo-*).
   ========================================================= */
:root {
  --mo-deep: #0c2a1c;                /* verde/blu scuro dell'overlay sulle foto: cambia con il brand */
  --mo-ease: cubic-bezier(.2, .8, .2, 1);
}

/* ---- mill.js: pulsante tornito ---- */
.is-milling { pointer-events: none; }
.is-gone { visibility: hidden; pointer-events: none; }
.mill-fx { position: fixed; z-index: 400; pointer-events: none; }
.mill-fx__tool { position: absolute; top: -7px; bottom: -7px; left: 0; width: 3px; margin-left: -1px;
  background: linear-gradient(#fff, #cfd8d3 50%, #fff); box-shadow: 0 0 10px 2px rgba(207,235,219,.85); }
.mill-fx__chip { position: absolute; height: 2px; border-radius: 1px; }

/* ---- delayed-reveal.js: entrata dal lato, in basso a destra ---- */
[data-reveal-after] { position: fixed; right: 24px; bottom: 24px; z-index: 90; width: min(380px, calc(100vw - 32px)); }
[data-reveal-after][hidden] { display: none; }
[data-reveal-after]:not([hidden]) { animation: mo-slide-in .5s var(--mo-ease) both; }
@keyframes mo-slide-in { from { opacity: 0; transform: translateX(32px); } to { opacity: 1; transform: none; } }
@media (max-width: 600px) { [data-reveal-after] { right: 16px; bottom: 16px; } }

/* ---- in-view.js: entrata una tantum ---- */
[data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--mo-ease), transform .6s var(--mo-ease); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* ---- Libreria di movimenti per SVG (classe .anim sul contenitore; si ferma fuori dallo schermo) ----
   Usare solo transform e opacity (compositing GPU) e stroke-dashoffset per "disegnare" una linea. */
.anim:not(.is-visible) * { animation-play-state: paused !important; }
@keyframes mo-spin-bands { from { transform: translateY(0); } to { transform: translateY(20px); } }      /* righe che scorrono: rotazione "finta" */
@keyframes mo-feed { 0% { transform: translateX(0); } 100% { transform: translateX(-140px); } }          /* avanzamento avanti/indietro */
@keyframes mo-chip { 0% { transform: translate(0,0) rotate(0); opacity: 1; } 100% { transform: translate(70px,-110px) rotate(260deg); opacity: 0; } }
@keyframes mo-draw { 0% { stroke-dashoffset: 900; } 60%, 100% { stroke-dashoffset: 0; } } /* linea che si disegna */
@keyframes mo-fadein { 0%, 40% { opacity: 0; } 70%, 100% { opacity: 1; } }
@keyframes mo-scan { 0% { transform: translateX(0); opacity: 0; } 10%, 90% { opacity: 1; } 100% { transform: translateX(470px); opacity: 0; } }
.anim .mo-bands { animation: mo-spin-bands .22s linear infinite; }
.anim .mo-feed { animation: mo-feed 6s ease-in-out infinite alternate; }
.anim .mo-chip { transform-box: fill-box; transform-origin: center; animation: mo-chip 1.3s cubic-bezier(.2,.7,.3,1) infinite; }
.anim .mo-chip.d2 { animation-delay: .33s; } .anim .mo-chip.d3 { animation-delay: .66s; } .anim .mo-chip.d4 { animation-delay: .99s; }
.anim .mo-draw { stroke-dasharray: 900; animation: mo-draw 5s ease-out infinite; }
.anim .mo-fade { animation: mo-fadein 5s ease-out infinite; }
.anim .mo-scan { animation: mo-scan 3.2s linear infinite; }

/* ---- Header con foto dietro (le pagine interne) ----
   <section class="page-hero page-hero--photo">
     <div class="page-hero__bg" style="--pos: 50% 40%"><img src="…" alt="" width="1600" height="1067" fetchpriority="high" decoding="async"></div>
     <div class="container"> … titolo … </div>
   </section>
   La foto è decorativa (alt vuoto). La sfumatura tiene leggibile il testo: forte a sinistra, più leggera a destra. */
.page-hero--photo { position: relative; isolation: isolate; overflow: hidden; background: var(--mo-deep); color: #fff; }
.page-hero__bg { position: absolute; inset: 0; z-index: -1; }
.page-hero__bg img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); }
.page-hero__bg::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, color-mix(in srgb, var(--mo-deep) 94%, transparent) 0%, color-mix(in srgb, var(--mo-deep) 80%, transparent) 42%, color-mix(in srgb, var(--mo-deep) 38%, transparent) 100%),
              linear-gradient(0deg, color-mix(in srgb, var(--mo-deep) 60%, transparent) 0%, transparent 45%); }
@media (max-width: 760px) {   /* il testo occupa tutta la larghezza: sfumatura più uniforme e più scura */
  .page-hero__bg::after { background: linear-gradient(90deg, color-mix(in srgb, var(--mo-deep) 90%, transparent), color-mix(in srgb, var(--mo-deep) 72%, transparent)); }
}

/* ---- Riduci movimento: nessuna animazione decorativa ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal-after]:not([hidden]) { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .anim * { animation: none !important; }
}