/* ================================================================
   Home v5 · movimento "pagina prodotto Apple" (js/apple-motion.js).
   Solo stile di supporto: nulla qui nasconde contenuti. Ogni regola
   vale solo con le classi che aggiunge il JS (.am-js, .am-*), quindi
   senza JS o con prefers-reduced-motion la pagina resta quella della v4.
   ================================================================ */

/* parole della frase di #problema: si accendono una alla volta */
.am-js .am-w{display:inline;will-change:opacity}

/* i tre passi pinnati li guida lo scroll: niente transizione CSS che rincorre GSAP */
.am-pin-steps .pa-step.pa-rv{transition:none!important}

/* la dashboard arriva inclinata: il bordo resta pulito durante la rotazione */
.am-js #dx{transform-origin:50% 0;backface-visibility:hidden}

/* sotto la hero fissa, le fasce che salgono la coprono senza buchi */
.am-js #hero .hx-bg{will-change:opacity}
.am-js #hero h1{transform-origin:50% 60%}

/* v5: dashboard più piccola su schermi larghi e alta quanto lo schermo meno l'header,
   così scorrendo si vede intera (in v4 è 1240px × 610-660px). 300px = header + schede, didascalie e cornice della dashboard */
@media(min-width:1080px){
  #sistema .dx,#sistema .dx-intro{width:min(1080px,90vw)}
  #sistema .dx-app{height:clamp(500px,calc(100vh - 300px),610px)}
  #sistema .dx-panel{padding-top:18px;padding-bottom:14px}
  #sistema .dx .dx-cap{margin:10px auto 12px}
  #sistema .dx .dx-foot{margin-top:10px}
}
/* schermi bassi: barra laterale della dashboard più compatta, così non si taglia */
@media(min-width:1080px) and (max-height:920px){
  #sistema .dx-si{height:24px}
  #sistema .dx-side small{margin:9px 10px 4px}
  #sistema .dx-ws{height:46px;margin-bottom:6px}
}