/* Sito DRIP Studio · lo stile e il moto delle sezioni scelti nell'editor (Design Mode, style.js): classi e preset del
   sistema (docs/brand-system/motion-system.md), gli stessi token del sito. */

/* stile della sezione */
.zs.sp-compact { padding-block: var(--s6); }
.zs.sp-wide { padding-block: calc(var(--s8) * 1.6); }
.zs.al-center { text-align: center; }
.zs.al-center :is(.zs-split, .zs-head, .zs-feature) { grid-template-columns: 1fr; justify-items: center; }
.zs.al-center .zs-act { justify-content: center; }
.zs.al-end { text-align: end; }
.zs.w-narrow > * { max-width: 46em; margin-inline: auto; }
.zs.w-wide { padding-inline: calc(var(--zp) / 2); }
.zs.w-full { padding-inline: 0; }
@media (max-width: 768px) { .zs.hide-mobile { display: none; } }
@media (min-width: 769px) and (max-width: 1024px) { .zs.hide-tablet { display: none; } }
@media (min-width: 1025px) { .zs.hide-desktop { display: none; } }

/* entrata: la sezione intera sale (L2) o arriva dalla profondità (L3) */
.zr-rise { transition: opacity var(--motion-l2) var(--ease-out), transform var(--motion-l2) var(--ease-sport); }
.zr-rise.zr-pend { opacity: 0; transform: translate3d(0, var(--s6), 0); }
.zr-depth { perspective: var(--persp); }
.zr-depth > * { transform-origin: 50% 0; transition: opacity var(--motion-l3) var(--ease-out), transform var(--motion-l3) var(--ease-sport); }
.zr-depth.zr-pend > * { opacity: 0; transform: translate3d(0, var(--s5), var(--z-2)) rotateX(8deg); }

/* scroll: tenuta (il titolo resta mentre il contenuto scorre) */
.zr-pin :is(.zs-split, .zs-feature) > :first-child, .zr-pin > .zs-head { position: sticky; top: calc(var(--shell-h) + var(--s5)); align-self: start; }

/* hover: inclinazione e sollevamento delle card e delle figure (L0) */
.zr-hover-tilt :is(li, .zf) { transform: perspective(var(--persp-near)) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform var(--motion-l0) var(--ease-out); }
.zr-hover-lift :is(li, .zf) { transition: transform var(--motion-l0) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .zr-hover-lift :is(li, .zf):hover { transform: translate3d(0, -6px, 0); } }
[data-mo-hover='none'] .zs-works a { transform: none !important; }

@media (prefers-reduced-motion: reduce) {
  .zr-rise.zr-pend, .zr-depth.zr-pend > * { opacity: 1; transform: none; }
}