/* ===== Hero "GTA6 reveal" — port fedele del template Elementor (mdw-gta6-effect) ===== */

/* Struttura (equivalenti dei settings dei container Elementor) */
.mdw-gta6-effect{position:relative;width:100%;display:flex;flex-direction:column;gap:0;min-height:calc(100vh + 2500px);background:#121212;padding:0}
.mdw-gta6-effect > *{width:100%}
.mdw-gta6-banner{display:flex;flex-direction:column;justify-content:center;align-items:center;min-height:100vh;overflow:hidden;background:#000}
.mdw-gta6-banner::before{display:none}
/* Video di sfondo + maschera "torcia" (il canvas nero viene bucato attorno al mouse da hero-reveal.js) */
.gta-video{position:absolute;inset:0;overflow:hidden;background:#000;transform:scale(var(--banner-zoom,1));transform-origin:center;pointer-events:none}
.gta-video video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.gta-video-mask{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
/* Con mouse: il video resta nascosto finché il canvas nero non è stato dipinto (classe messa da hero-reveal.js) */
@media (hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){.mdw-gta6-banner:not(.reveal-ready) .gta-video{visibility:hidden}}
@media (hover:none),(pointer:coarse),(prefers-reduced-motion:reduce){.gta-video-mask{display:none}}
/* Claim al posto dell'artwork: stessa resa (zoom + fade legati allo scroll, entrata sfocata) */
.gta-banner-claim{position:relative;margin:0;text-align:center;padding:0 5vw;font:600 clamp(28px,3.8vw,62px)/1.08 'Syne','Poppins',system-ui,sans-serif;letter-spacing:-.03em;color:#fff;text-wrap:balance;transform:scale(var(--banner-zoom,1));transform-origin:center;opacity:0;filter:blur(calc(var(--banner-initial-zoom,0px)/4));transition:opacity var(--banner-entrance-transition,0s) ease-in-out,filter var(--banner-entrance-transition,0s) ease-in-out;pointer-events:none}
.mdw-gta6-banner.loaded .gta-banner-claim{opacity:var(--banner-value,1)}
.gta-banner-logo,.gta-scroll-text,.gta-banner-claim{z-index:1}
.mdw-gta6-effect .elementor-widget{position:relative}
.gta-banner-logo{display:none}
.gta-banner-logo img{width:300px;height:auto;display:block}
.mdw-gta6-effect .elementor-widget.gta-scroll-text{margin:44px 0 0;position:relative;text-align:center}
.gta-scroll-text p{font:600 15px/1.65 'Inter',sans-serif;letter-spacing:-.05em;color:#FFFFFF;margin:0}
.mdw-gta6-container{display:flex;flex-direction:column;align-items:center;min-height:100vh;overflow:hidden;padding:0}
.mdw-gta6-container::before{content:"";position:absolute;inset:0;background:#FFFFFF}
.mdw-gta6-svg{display:none}
.mdw-gta6-text{display:flex;flex-direction:column;gap:40px;width:500px;position:absolute;left:50%;transform:translateX(-50%);bottom:0}
.mdw-gta6-heading-1 h2{text-align:center;font:800 72px/1.12 'Inter',sans-serif;letter-spacing:-.05em;color:#6EC1E400;margin:0}
.mdw-gta6-heading-2 h2{text-align:center;font:500 26px/1.25 'Inter',sans-serif;letter-spacing:-.03em;color:#FFFFFF;margin:0;text-wrap:balance}
@media (max-width:1024px){
.gta-banner-logo img{width:200px}
.mdw-gta6-text{width:300px;gap:30px}
.mdw-gta6-heading-1 h2{font-size:44px}
.mdw-gta6-heading-2 h2{font-size:20px}
}

/* ===== CSS del template, verbatim (origini zoom ricalibrate sulla sagoma iTrend 1476x2048) ===== */

/* For Desktop */
.mdw-gta6-effect{
    --svg-image-zoom-origin-x: 0px;
    --svg-image-zoom-origin-y: -17px;
    --gradient-heading-color-1: #ff3214;
    --gradient-heading-color-2: #c50086;
    --gradient-heading-color-3: #5147ff;
    /* Refresh Required */
    /*--banner-hd-url: url('HD_IMAGE_URL');*/
    --banner-maximum-zoom: 1.3;
    --banner-initial-zoom: 200px;
    --banner-entrance-transition: 1.5s;
    --svg-image-height: 120px;
    --svg-image-bottom-gap: 50px;
    --svg-image-maximum-zoom: 400;
    --svg-image-background: #121212;
}

/* For Tablet */
@media (max-width:1024px){
.mdw-gta6-effect{
    --svg-image-zoom-origin-x: 0px;
    --svg-image-zoom-origin-y: -15px;
    --svg-image-height: 105px;
    --svg-image-bottom-gap: 15px;
}
}

.mdw-gta6-effect > *{
    position: absolute;
    top: 0;
}
.mdw-gta6-effect > *.sticky{
    position: fixed;
    top: 0;
}
.mdw-gta6-effect > *.sticky-end{
    position: absolute;
    bottom: 0;
    top: auto !important;
}
.mdw-gta6-effect p{
    margin-bottom: 0;
}
html.elementor-html .mdw-gta6-banner,
.mdw-gta6-banner.loaded{
    --banner-initial-zoom: 0px;
}
.mdw-gta6-banner:before,
.mdw-gta6-banner .elementor-widget  > *{
    opacity: 0;
}
.mdw-gta6-banner:before{
    transform: scale(var(--banner-zoom,1));
    background-size: cover;
    background-position: center center;
    top: calc(-1*var(--banner-initial-zoom,0px));
    left: calc(-1*var(--banner-initial-zoom,0px));
    height: calc(100% + var(--banner-initial-zoom,0px) * 2);
    width: calc(100% + var(--banner-initial-zoom,0px) * 2);
    filter: blur(calc(var(--banner-initial-zoom,0px)/4));
    transition: opacity var(--banner-entrance-transition,0s) ease-in-out, top var(--banner-entrance-transition,0s) ease-in-out, left var(--banner-entrance-transition,0s) ease-in-out, height var(--banner-entrance-transition,0s) ease-in-out, width var(--banner-entrance-transition,0s) ease-in-out, filter var(--banner-entrance-transition,0s) ease-in-out;
}
.mdw-gta6-banner.hd-bg:before{
    background-image: var(--banner-hd-url) !important;
}
.mdw-gta6-banner .elementor-widget > *{
    filter: blur(calc(var(--banner-initial-zoom,0px)/4));
    transition: all calc(var(--banner-entrance-transition,0s)/2) linear calc(var(--banner-entrance-transition,0s)/2) !important;
}
.mdw-gta6-banner.loaded:before,
html.elementor-html .mdw-gta6-banner:before,
.mdw-gta6-banner.loaded .elementor-widget > *,
html.elementor-html .mdw-gta6-banner .elementor-widget > *{
    opacity: 1;
}
.mdw-gta6-container{
    --svg-image-top-gap: 0px;
    position: relative;
}
.mdw-gta6-container:before{
    opacity: var(--overlay-opacity-2,0);
    transition: none;
}
html:not(.elementor-html) .mdw-gta6-container,
html:not(.elementor-html) .mdw-gta6-container > *{
    pointer-events: none;
}
html:not(.elementor-html) .mdw-gta6-container.clickable,
html:not(.elementor-html) .mdw-gta6-container.clickable > *{
    pointer-events: auto;
}
html:not(.elementor-html) .mdw-gta6-container > .elementor-element{
    opacity: 0;
}
html:not(.elementor-html) .mdw-gta6-container.clickable > .elementor-element{
    opacity: 1;
}
.mdw-gta6-container svg{
    min-height: var(--min-height,100vh);
    width: 100%;
    transform: scale(var(--svg-image-maximum-zoom,400));
    transform-origin: calc(50% + var(--svg-image-zoom-origin-x,0px)) calc(var(--svg-image-top-gap) + var(--svg-image-height)/2 + var(--svg-image-zoom-origin-y,0px));
    opacity: 0;
}
.mdw-gta6-container svg path{
    transform: scale(var(--svg-image-size,1)) translateX(calc(50%/var(--svg-image-size,1) - var(--svg-image-natural-width,0px)/2)) translateY(calc(var(--svg-image-top-gap,0px)/var(--svg-image-size,1)));
}
.mdw-gta6-text{
    bottom: var(--svg-image-top-gap,0px) !important;
}
.mdw-gta6-heading-1 > *{
    background: linear-gradient(to bottom, var(--svg-image-background,#000) calc(var(--gradient-heading-start, 0)*1%), var(--gradient-heading-color-1,#fff) calc(var(--gradient-heading-start, 0)*1% + 70%), var(--gradient-heading-color-2,#fff) calc(var(--gradient-heading-start, 0)*1% + 120%), var(--gradient-heading-color-3,#fff) calc(var(--gradient-heading-start, 0)*1% + 170%));
    background-clip: text;
    -webkit-background-clip: text;
}
@media (min-width:768px){
.mdw-gta6-banner,
.mdw-gta6-container,
.mdw-gta6-container svg{
    height: 500px;
}
}
@media (min-width:1025px){
.mdw-gta6-banner,
.mdw-gta6-container,
.mdw-gta6-container svg{
    height: 600px;
}
}
/* Telefono (21 ottobre 2026, su richiesta del cliente): stesso effetto legato allo scroll del desktop
   (video che si ingrandisce, claim che sfuma, sagoma iTrend che si stringe, titoli che compaiono), con percorso
   più corto (1800px invece di 2500px) e misure ridotte. Prima il template qui spegneva tutto: sezione ferma,
   niente "Scorri in giù". Sta in fondo al file perché deve vincere sulle variabili del template. */
@media (max-width:767px){
.mdw-gta6-effect{
    min-height: calc(100vh + 1800px);
    --svg-image-height: 92px;
    --svg-image-bottom-gap: 14px;
    --svg-image-zoom-origin-y: -13px;
}
.gta-banner-claim{padding:0 6vw}
.mdw-gta6-effect .elementor-widget.gta-scroll-text{margin-top:32px}
.gta-scroll-text p{font-size:13px}
.mdw-gta6-text{width:min(320px,88vw);gap:22px}
.mdw-gta6-heading-1 h2{font-size:clamp(34px,10.5vw,44px)}
.mdw-gta6-heading-2 h2{font-size:18px}
}

/* Touch (23 ottobre 2026): banner e sagoma restano fermi con position:sticky invece che con il fixed messo e tolto dallo
   script a ogni scroll (classe gta-sticky, la mette gta-hero.js solo su (hover:none),(pointer:coarse)). Lo sticky lo muove il
   browser durante lo scroll: su iPhone e Android niente salto di un fotogramma all'inizio e alla fine del tratto fermo. Le due
   schede si sovrappongono come prima (la seconda risale di 100vh); l'aspetto e le fasi dell'animazione non cambiano. */
.mdw-gta6-effect.gta-sticky > *,
.mdw-gta6-effect.gta-sticky > *.sticky,
.mdw-gta6-effect.gta-sticky > *.sticky-end{position:sticky;top:0 !important;bottom:auto;flex:none}
.mdw-gta6-effect.gta-sticky > .mdw-gta6-container{margin-top:-100vh}
/* Touch (24 ottobre 2026): lastra su canvas al posto dell'SVG ingrandito (gta-hero.js), stessa misura e stesso ordine; video,
   claim e velo bianco sui loro livelli (lo zoom e le dissolvenze non ridisegnano la pagina); claim e scritta centrati nella
   parte di schermo che si vede sempre, sopra la barra del browser (100svh). */
.mdw-gta6-container .mdw-gta6-plate{position:absolute;left:0;top:0;width:100%;height:100%;display:block;opacity:0;pointer-events:none !important;will-change:opacity}
.mdw-gta6-effect.gta-sticky .gta-video,.mdw-gta6-effect.gta-sticky .gta-banner-claim{will-change:transform}
.mdw-gta6-effect.gta-sticky .mdw-gta6-container::before{will-change:opacity}
@supports(height:1svh){.mdw-gta6-effect.gta-sticky .mdw-gta6-banner{padding-bottom:calc(100vh - 100svh)}}

/* Lenis Smooth Scroll */
html.lenis{scroll-behavior:auto !important}
html.lenis, html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}
.lenis.lenis-smooth iframe{pointer-events:none}