/* ============================================================================
   scroll-reveal.css — load assembly (Opzione B) + mount-on-scroll (sess.47b)
   LOAD: hero (fade) + sezioni d'apertura in CASCATA lenta. SCROLL: il resto si
   rivela scrollando (più veloce). GPU-only (opacity/transform).

   NB SPECIFICITÀ: alcune sezioni (#specs-card, #downloads-widget, …) hanno
   regole CSS con selettore ID (specificità > classe) che sovrascrivono un
   semplice `.ds-reveal`. Per vincere SENZA `!important` scopo le regole agli id
   con :is(#…)  → specificità (1,1,0) > id widget (1,0,0). Le classi vengono
   RIMOSSE a fine reveal (scroll-reveal.js) → transition native ripristinate.

   EASING: transform con "settle" (decelera + micro-overshoot) → la sezione
   "atterra e si assesta" invece di muoversi a velocità costante.
   prefers-reduced-motion → statico.
   ============================================================================ */

/* base reveal (stato nascosto + transizione) — scoping id per battere i widget */
:is(#hero-gallery, #key-features, #specs-card, #dmx-widget,
    #downloads-widget, #accessories-widget, #portfolio-hero, #rfq-cta):is(.ds-reveal, .ds-reveal--fade){
  opacity: 0 !important;   /* !important: alcuni widget settano opacity/transform INLINE al render */
  transition:
    opacity   650ms var(--ds-ease-out, cubic-bezier(0, 0, .2, 1)),
    transform 650ms cubic-bezier(.16, .84, .3, 1.04) !important;   /* settle: decelera + micro-overshoot */
}
:is(#hero-gallery, #key-features, #specs-card, #dmx-widget,
    #downloads-widget, #accessories-widget, #portfolio-hero, #rfq-cta).ds-reveal{
  transform: translateY(56px) !important;                 /* widget: salgono dal basso */
}
:is(#hero-gallery).ds-reveal--fade{ transform: none !important; }    /* hero/F7: solo fade */

/* stato rivelato */
:is(#hero-gallery, #key-features, #specs-card, #dmx-widget,
    #downloads-widget, #accessories-widget, #portfolio-hero, #rfq-cta).ds-reveal-in{
  opacity: 1 !important;
  transform: none !important;
}

/* LOAD: durata più lenta + stagger a cascata */
:is(#hero-gallery, #key-features, #specs-card, #dmx-widget,
    #downloads-widget, #accessories-widget, #portfolio-hero, #rfq-cta).ds-reveal--load{
  transition-duration: 1200ms;
}
:is(#hero-gallery, #key-features, #specs-card, #dmx-widget).ds-reveal--d0{ transition-delay: 0ms; }
:is(#hero-gallery, #key-features, #specs-card, #dmx-widget).ds-reveal--d1{ transition-delay: 360ms; }
:is(#hero-gallery, #key-features, #specs-card, #dmx-widget).ds-reveal--d2{ transition-delay: 720ms; }
:is(#hero-gallery, #key-features, #specs-card, #dmx-widget).ds-reveal--d3{ transition-delay: 1080ms; }

@media (prefers-reduced-motion: reduce){
  :is(#hero-gallery, #key-features, #specs-card, #dmx-widget,
      #downloads-widget, #accessories-widget, #portfolio-hero, #rfq-cta):is(.ds-reveal, .ds-reveal--fade){
    opacity: 1; transform: none; transition: none;
  }
}

/* ============================================================================
   sess.49 — REVEAL GENERICO sezioni (family/range). Classe `.ds-sreveal`
   distinta dai widget product (sopra, id-scoped) → zero conflitti. GPU-only,
   "settle" (decelera + micro-overshoot). reduced-motion → statico.
   ============================================================================ */
.ds-sreveal{
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity   700ms var(--ds-ease-out, cubic-bezier(0, 0, .2, 1)),
    transform 700ms cubic-bezier(.16, .84, .3, 1.04);
  will-change: opacity, transform;
}
.ds-sreveal.ds-sreveal-in{
  opacity: 1;
  transform: none;
}
@media (prefers-reduced-motion: reduce){
  .ds-sreveal,
  .ds-sreveal.ds-sreveal-in{ opacity: 1; transform: none; transition: none; }
}