/* Folio Motion – animazioni allo scroll. Attive solo con html.folio-motion (impostata dallo script nell'head
   se il livello non è "off" e l'utente non ha chiesto di ridurre il movimento).
   I selettori degli elementi che compaiono (R) e dei titoli a parole (S) vanno tenuti allineati a folio-motion.js. */

html.folio-motion{scroll-behavior:smooth}

/* ---------- comparsa allo scroll (R) ---------- */
html.folio-motion :where(
	.folio-card,.folio-quote,.folio-timeline__item,.folio-stat,.folio-gallery li,.project-cover,.folio-contact,
	.folio-filter,.folio-hero__text,.folio-hero__actions,.folio-marquee,.project-head>:not(.entry-title),.project-facts>div,
	.post-card,.archive-header>:not(h1),.entry-content:not(.is-elementor)>:is(figure,blockquote),
	.elementor-widget-text-editor,.elementor-widget-image,.elementor-widget-button
){
	transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .95s cubic-bezier(.2,.7,.2,1);
	transition-delay:var(--fm-d,0ms);
}
html.folio-motion :where(
	.folio-card,.folio-quote,.folio-timeline__item,.folio-stat,.folio-gallery li,.project-cover,.folio-contact,
	.folio-filter,.folio-hero__text,.folio-hero__actions,.folio-marquee,.project-head>:not(.entry-title),.project-facts>div,
	.post-card,.archive-header>:not(h1),.entry-content:not(.is-elementor)>:is(figure,blockquote),
	.elementor-widget-text-editor,.elementor-widget-image,.elementor-widget-button
):not(.elementor-invisible):not(.is-in){
	opacity:0;
	transform:translate3d(0,var(--fm-y,28px),0);
}
html.folio-motion .is-above{--fm-y:-22px}

/* varianti (devono stare dopo la regola generale) */
html.folio-motion .folio-timeline__item:not(.is-in){transform:translate3d(-40px,0,0)}
html.folio-motion .folio-quote:nth-child(even):not(.is-in){transform:translate3d(0,44px,0)}
html.folio-motion .folio-gallery li:not(.is-in),
html.folio-motion .folio-stat:not(.is-in){transform:translate3d(0,22px,0) scale(.94)}
html.folio-motion .project-cover:not(.is-in),
html.folio-motion .folio-marquee:not(.is-in){transform:none}

/* ---------- immagini che si scoprono ---------- */
html.folio-motion :is(.folio-card__media,.folio-gallery a,.elementor-widget-image .elementor-widget-container){
	clip-path:inset(0 0 0 0);
	transition:clip-path 1.2s cubic-bezier(.7,0,.2,1) var(--fm-d,0ms);
}
html.folio-motion :is(.folio-card:not(.is-in) .folio-card__media,.folio-gallery li:not(.is-in) a,.elementor-widget-image:not(.is-in) .elementor-widget-container){
	clip-path:inset(0 0 100% 0);
}
html.folio-motion .project-cover{clip-path:inset(0 0 0 0);transition-property:opacity,transform,clip-path}
html.folio-motion .project-cover:not(.is-in){clip-path:inset(0 0 100% 0)}
html.folio-motion .elementor-widget-image .elementor-widget-container{overflow:hidden}

/* immagini con parallasse interno e zoom d'ingresso */
[data-parallax-img]{translate:0 var(--py,0px);scale:var(--fm-s,1.14);--fm-s:1.14;will-change:translate,scale;transition:scale 1.4s cubic-bezier(.2,.7,.2,1)}
.folio-card__link:hover [data-parallax-img]{--fm-s:1.22}
html.folio-motion :is(.folio-card,.folio-gallery li,.project-cover,.elementor-widget-image):not(.is-in) [data-parallax-img]{--fm-s:1.5}
.project-cover,.entry-thumb{overflow:hidden}

/* ---------- titoli a parole (S) ---------- */
html.folio-motion :where(
	.folio-hero__title,.elementor-heading-title,.entry-title,.archive-header>h1,.entry-content:not(.is-elementor)>:is(h2,h3)
):not(.fm-split){visibility:hidden}
.fm-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.14em;margin-bottom:-.14em}
.fm-wi{display:inline-block;transform:translate3d(0,112%,0) rotate(3deg);transform-origin:0 100%;transition:transform 1.05s cubic-bezier(.16,.84,.24,1);transition-delay:calc(var(--wi,0) * 70ms + 80ms)}
.fm-split.is-in .fm-wi{transform:none}

/* ---------- forme fluttuanti nell'intro ---------- */
.folio-hero{position:relative;isolation:isolate}
.folio-hero__shapes{position:absolute;inset:-2rem 0;z-index:-1;pointer-events:none}
.folio-shape{position:absolute;transform:translate3d(var(--px,0px),calc(var(--py,0px) + var(--my,0px)),0);will-change:transform}
.folio-shape__in{display:block;width:100%;aspect-ratio:1}
.folio-shape--1{top:0;right:0;width:clamp(120px,22vw,300px)}
.folio-shape--1 .folio-shape__in{border:2px solid var(--folio-accent,#3a2fe0);border-radius:50%}
.folio-shape--2{top:48%;right:22%;width:clamp(44px,6vw,92px)}
.folio-shape--2 .folio-shape__in{border-radius:50%;background:var(--folio-accent,#3a2fe0)}
.folio-shape--3{top:70%;right:3%;width:clamp(70px,10vw,140px)}
.folio-shape--3 .folio-shape__in{border:2px solid var(--folio-text,#0f1722);border-radius:24%;transform:rotate(12deg)}
.folio-shape--4{top:4%;right:32%;width:clamp(80px,12vw,160px)}
.folio-shape--4 .folio-shape__in{background:radial-gradient(circle,var(--folio-text,#0f1722) 2px,transparent 2.6px) 0 0/16px 16px;opacity:.3}
.folio-shape--5{top:86%;right:38%;width:clamp(60px,8vw,110px)}
.folio-shape--5 .folio-shape__in{aspect-ratio:3.2;border-radius:99px;background:color-mix(in srgb,var(--folio-accent,#3a2fe0) 30%,transparent)}
@media (max-width:700px){.folio-shape--4,.folio-shape--5{display:none}.folio-shape--1{opacity:.5}}

@keyframes fm-float-a{0%,100%{transform:translate3d(0,0,0) rotate(0)}50%{transform:translate3d(0,-24px,0) rotate(7deg)}}
@keyframes fm-float-b{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(16px,20px,0) scale(1.1)}}
@keyframes fm-float-c{0%,100%{transform:rotate(12deg) translate3d(0,0,0)}50%{transform:rotate(-8deg) translate3d(-12px,-18px,0)}}
html.folio-motion .folio-shape--1 .folio-shape__in{animation:fm-float-a 9s ease-in-out infinite}
html.folio-motion .folio-shape--2 .folio-shape__in{animation:fm-float-b 6s ease-in-out infinite}
html.folio-motion .folio-shape--3 .folio-shape__in{animation:fm-float-c 11s ease-in-out infinite}
html.folio-motion .folio-shape--4 .folio-shape__in{animation:fm-float-b 13s ease-in-out infinite reverse}
html.folio-motion .folio-shape--5 .folio-shape__in{animation:fm-float-a 8s ease-in-out infinite reverse}

/* ---------- testo scorrevole ---------- */
.folio-marquee{--fm-speed:35s;overflow:hidden;padding-block:.4em;font-family:var(--folio-font-heading,inherit);font-weight:700;line-height:1.05;letter-spacing:-.03em;font-size:clamp(2.4rem,8vw,6.5rem)}
.folio-marquee--m{font-size:clamp(1.8rem,5vw,3.8rem)}
.folio-marquee--xl{font-size:clamp(3.2rem,12vw,10rem)}
.folio-marquee__track{display:flex;width:max-content;max-width:100%}
.folio-marquee__group{display:flex;flex-wrap:wrap;flex:none;gap:0 1.2em;margin:0;padding:0 1.2em 0 0;list-style:none}
.folio-marquee__group[aria-hidden="true"]{display:none}
.folio-marquee__item{display:flex;align-items:center;gap:1.2em;white-space:nowrap}
.folio-marquee__item::after{content:"";flex:none;width:.28em;height:.28em;background:var(--folio-accent,#3a2fe0);border-radius:50%}
.folio-marquee__item:nth-child(even){color:transparent;-webkit-text-stroke:.025em var(--folio-text,#0f1722)}
html.folio-motion .folio-marquee__track{max-width:none;animation:fm-marquee var(--fm-speed) linear infinite}
html.folio-motion .folio-marquee[data-dir="right"] .folio-marquee__track{animation-direction:reverse}
html.folio-motion .folio-marquee__group{flex-wrap:nowrap}
html.folio-motion .folio-marquee__group[aria-hidden="true"]{display:flex}
html.folio-motion .folio-marquee[data-pause]:hover .folio-marquee__track{animation-play-state:paused}
@keyframes fm-marquee{to{transform:translate3d(-50%,0,0)}}

/* ---------- numeri ---------- */
.folio-stats{display:grid;gap:1.6rem 2rem;grid-template-columns:repeat(auto-fit,minmax(10rem,1fr));margin:0;padding:0;list-style:none}
.folio-stat{padding-top:1rem;border-top:2px solid var(--folio-text,#0f1722)}
.folio-stat__num{display:block;font-family:var(--folio-font-heading,inherit);font-size:clamp(2.8rem,6vw,4.8rem);font-weight:700;line-height:1;letter-spacing:-.04em;font-variant-numeric:tabular-nums}
.folio-stat__suffix{color:var(--folio-accent,#3a2fe0)}
.folio-stat__label{display:block;margin-top:.5rem;color:color-mix(in srgb,var(--folio-text,#0f1722) 62%,var(--folio-bg,#f1f3f6))}

/* ---------- progresso, header, inclinazione ---------- */
.folio-progress{position:fixed;top:0;left:0;right:0;z-index:100001;height:3px;background:var(--folio-accent,#3a2fe0);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
html.folio-motion .site-header{transition:transform .4s cubic-bezier(.2,.7,.2,1),background-color .3s}
html.folio-motion .site-header.is-hidden:not(:focus-within){transform:translate3d(0,-101%,0)}
html[data-motion="lively"] .folio-card__media{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));will-change:transform}
html[data-motion="lively"].folio-motion .folio-card__media{transition:transform .35s ease-out,clip-path 1.2s cubic-bezier(.7,0,.2,1) var(--fm-d,0ms)}
html[data-motion="lively"] :is(.folio-btn,.theme-toggle,.menu-toggle,.folio-carousel__bar button,.wp-block-button__link,.elementor-button){transition:translate .3s cubic-bezier(.2,.7,.2,1),background-color .15s,color .15s,border-color .15s}

@media print{
	html.folio-motion *{opacity:1!important;transform:none!important;clip-path:none!important;visibility:visible!important}
	.folio-progress,.folio-cursor,.folio-pt{display:none!important}
}
