/* MELIX — a bold stage for the logo, surrounded by six analog stickers. */
.home-page{margin:0}
.hero{position:relative;isolation:isolate;overflow:hidden;height:100svh;min-height:760px;max-height:1120px;color:#fff9e9}
.hero::before{content:'';position:absolute;z-index:-1;inset:0;background:radial-gradient(ellipse at 50% 47%,#100917ad 0%,#1710204d 43%,#0807090d 74%),radial-gradient(ellipse at 22% 24%,#8e00af38,transparent 46%),radial-gradient(ellipse at 79% 69%,#367fff30,transparent 44%),linear-gradient(180deg,#09070c38,transparent 72%,#08070947);pointer-events:none}




.hero-center{position:absolute;z-index:4;top:clamp(52px,11vh,120px);left:clamp(38px,12vw,210px);display:flex;align-items:center;flex-direction:column;width:clamp(250px,24vw,350px);text-align:center}
.hero-logo{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 18px 22px #000b);user-select:none}

.hero a:focus-visible{outline:2px solid #ffdf39;outline-offset:7px}
.hero-sticker{position:absolute;z-index:2;left:var(--x);top:var(--y);width:var(--size);pointer-events:none;will-change:transform;transition:opacity .3s;contain:layout style}
.sticker-inner{display:block;width:100%;transform:translate(-50%,-50%) rotate(var(--angle));animation:sticker-drift var(--period,12s) ease-in-out infinite alternate;animation-delay:var(--delay,0s)}
.hero-sticker img{display:block;width:100%;height:auto;filter:drop-shadow(4px 10px 8px #0006);user-select:none}
@keyframes sticker-drift{from{transform:translate(-50%,-50%) rotate(var(--angle))}to{transform:translate(-50%,calc(-50% - 14px)) rotate(calc(var(--angle) + 4deg))}}
.sticker-cassetta{--x:52%;--y:51%;--size:clamp(110px,10vw,150px);--angle:-9deg;--period:13s;--delay:-4s}
.sticker-fotocamera{--x:70%;--y:21%;--size:clamp(90px,8vw,120px);--angle:8deg;--period:15s;--delay:-9s}
.sticker-megafono{--x:23%;--y:79%;--size:clamp(125px,11vw,165px);--angle:-12deg;--period:12s;--delay:-2s}
.sticker-bomboletta{--x:48%;--y:53%;--size:clamp(65px,6vw,90px);--angle:12deg;--period:14s;--delay:-6s}
.sticker-cuffie{--x:52%;--y:82%;--size:clamp(95px,10vw,145px);--angle:9deg;--period:16s;--delay:-11s}
.sticker-statua{--x:33%;--y:88%;--size:clamp(90px,9vw,130px);--angle:-7deg;--period:14s;--delay:-7s}


/* Keep three secondary stickers arranged around the two main subjects. */
.sticker-bomboletta,.sticker-cuffie,.sticker-statua{display:none}
/* Fade only the hero lighting into the shared continuous collage background. */
.hero::before{-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - clamp(160px,28vh,300px)),rgba(0,0,0,.65) calc(100% - 110px),rgba(0,0,0,.18) calc(100% - 35px),transparent 100%);mask-image:linear-gradient(to bottom,#000 0%,#000 calc(100% - clamp(160px,28vh,300px)),rgba(0,0,0,.65) calc(100% - 110px),rgba(0,0,0,.18) calc(100% - 35px),transparent 100%)}
#opere{scroll-margin-top:12px;padding-top:55px}
.hero[data-visible="false"] .sticker-inner{animation-play-state:paused}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
/* Decorative preloader: real loading progress; dismisses even if JavaScript fails. */
.site-loader{position:fixed;inset:0;z-index:100;background:#100e12;display:grid;place-items:center;pointer-events:none;transition:opacity .42s ease,visibility .42s;animation:loader-failsafe 3.5s forwards}
.loader-core{width:min(330px,70vw);text-align:center}
.loader-word{position:relative;width:100%}.loader-word img{display:block;width:100%;height:auto}.loader-word .loader-ghost{opacity:.16;filter:grayscale(.4)}
.loader-ink{position:absolute;inset:0;clip-path:inset(0 100% 0 0);transition:clip-path .26s ease}
.loader-line{height:2px;background:#ffffff15;margin:24px 0 17px;overflow:hidden}.loader-line i{display:block;height:100%;background:#d598ef;transform-origin:left;transform:scaleX(0);transition:transform .26s ease}
.loader-caption{font:9px/1.5 Arial,sans-serif;letter-spacing:.24em;color:#dfd4e5}
.site-loader.is-done{opacity:0;visibility:hidden}.site-loader[hidden]{display:none!important}
@keyframes loader-failsafe{0%,86%{opacity:1;visibility:visible}100%{opacity:0;visibility:hidden}}
/* The figure uses its own coordinate system, so POW stays on the muzzle. */
.hero-figure{position:absolute;z-index:3;right:-14px;bottom:-12px;width:min(40vw,calc(68svh * 1040 / 1130));max-width:700px;pointer-events:none;--girl-lift:-4px;--girl-turn:.35deg}
.girl-sway{transform:translateY(calc(var(--girl-lift) * var(--girl-phase,0))) rotate(calc(var(--girl-turn) * var(--girl-phase,0)));transform-origin:66% 100%}
.girl-recoil{position:relative;transform:translate(var(--recoil-x,0px),var(--recoil-y,0px)) rotate(var(--recoil-turn,0deg));transform-origin:68% 85%}
.hero-girl{display:block;width:100%;height:auto;user-select:none;filter:drop-shadow(0 0 7px #dc7eff55) drop-shadow(0 0 24px #a400c32e) drop-shadow(-12px 18px 22px #0008)}
/* Stationary mask: only its children move; POW has a separate synchronized layer. */
.girl-fade{display:block;-webkit-mask-image:linear-gradient(to bottom,#000 0%,#000 90%,rgba(0,0,0,.85) calc(94% - 8px),rgba(0,0,0,.35) calc(97% - 14px),transparent calc(100% - 18px));mask-image:linear-gradient(to bottom,#000 0%,#000 90%,rgba(0,0,0,.85) calc(94% - 8px),rgba(0,0,0,.35) calc(97% - 14px),transparent calc(100% - 18px));-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}
.girl-effects{position:absolute;inset:0;pointer-events:none}
.girl-effects .girl-sway,.girl-effects .girl-recoil{width:100%;height:100%}
.pow-anchor{position:absolute;left:46.5385%;top:86.5487%;width:34%;transform:translate(-67%,-84%) rotate(-10deg)}
.pow-sticker{display:block;width:100%;height:auto;opacity:var(--pow-opacity,0);transform:scale(var(--pow-scale,.45)) rotate(var(--pow-turn,-5deg));transform-origin:67% 84%;filter:drop-shadow(3px 6px 3px #0009);}
@media(min-width:701px) and (max-width:1000px){.hero-center{left:8vw;width:clamp(235px,28vw,290px)}.hero-figure{width:46vw}.sticker-cassetta{--x:53%;--y:51%;--size:105px}.sticker-fotocamera{--x:78%;--y:23%;--size:92px}.sticker-megafono{--x:24%;--y:80%;--size:130px}}
@media(max-width:700px){
 .hero{height:clamp(700px,88svh,860px);min-height:700px;max-height:none}
 .hero-center{top:42px;left:50%;width:clamp(205px,56vw,250px);transform:translateX(-50%)}
 .hero-logo{width:100%}
 .hero-figure{right:-3%;bottom:-12px;width:88%;max-width:530px;--girl-lift:-2px;--girl-turn:.2deg}
 .pow-anchor{width:35%}
 .sticker-cassetta{--x:79%;--y:43%;--size:76px;--mobile-delay:0s!important}
 .sticker-megafono{--x:15%;--y:66%;--size:86px;--mobile-delay:-10s!important}
 .sticker-fotocamera{display:none}
 #opere{padding-top:35px}
}
@media(hover:none),(pointer:coarse){.hero-sticker .sticker-inner{animation:mobile-sticker 20s ease-in-out infinite;animation-delay:var(--mobile-delay);opacity:0}@keyframes mobile-sticker{0%,8%,48%,100%{opacity:0;transform:translate(-50%,calc(-50% + 7px)) rotate(var(--angle)) scale(.96)}17%,35%{opacity:.84;transform:translate(-50%,calc(-50% - 6px)) rotate(calc(var(--angle) + 2deg)) scale(1)}}}
@media(prefers-reduced-motion:reduce){.hero-sticker .sticker-inner{animation:none!important}.hero-sticker{will-change:auto}.sticker-inner{opacity:.72!important}.sticker-megafono,.sticker-bomboletta,.sticker-statua{display:none}.loader-ink,.loader-line i{transition:none}.site-loader{animation:loader-failsafe .7s forwards}}

@media(prefers-reduced-motion:reduce){.girl-sway,.girl-recoil{transform:none!important}.pow-sticker{opacity:0!important}.hero-girl{filter:drop-shadow(0 0 12px #bc53d65c)}}

/* Composition from the supplied MELIX ARTS reference. */
.hero-wordmark{position:absolute;z-index:2;left:21%;top:8%;width:54%;pointer-events:none;filter:drop-shadow(0 10px 12px #0007)}
.hero-wordmark img{display:block;width:100%;height:auto}
@media(min-width:701px){
 .hero{height:clamp(640px,48vw,920px);min-height:640px;max-height:920px}
 .hero-center{left:5%;top:3%;width:22%;max-width:340px;transform:none}
 .hero-figure{right:-3%;bottom:-12px;width:27%;max-width:540px}
 .sticker-cassetta{--x:10%;--y:63%;--size:17vw;--angle:-12deg}
 .sticker-megafono{--x:18%;--y:84%;--size:16vw;--angle:-9deg}
 .sticker-fotocamera{--x:69%;--y:9%;--size:10vw;--angle:-5deg}
}
@media(max-width:700px){
 .hero{height:clamp(760px,100svh,960px)}
 .hero-center{top:22px;left:6%;width:36%;max-width:175px;transform:none}
 .hero-wordmark{left:5%;top:24%;width:90%}
 .hero-figure{right:-7%;width:66%;max-width:390px}
 .sticker-cassetta{--x:15%;--y:67%;--size:95px}
 .sticker-megafono{--x:19%;--y:83%;--size:104px}
 .sticker-fotocamera{display:block;--x:80%;--y:12%;--size:78px}
}

/* Larger hero subjects, with room for the central graffiti lettering. */
@media(min-width:701px){
 .hero{height:clamp(740px,56vw,1080px);min-height:740px;max-height:1080px}
 .hero-center{left:2%;top:2%;width:29%;max-width:460px}
 .hero-wordmark{left:19%;top:15%;width:58%}
 .hero-figure{right:-5%;width:36%;max-width:720px}
 .sticker-cassetta{--x:9%;--y:69%;--size:15vw}
 .sticker-megafono{--x:18%;--y:87%;--size:14vw}
 .sticker-fotocamera{--x:70%;--y:9%}
}
@media(max-width:700px){
 .hero{height:clamp(930px,122svh,1150px)}
 .hero-center{left:3%;top:18px;width:48%;max-width:230px}
 .hero-wordmark{left:2%;top:29%;width:96%}
 .hero-figure{right:-8%;width:85%;max-width:490px}
 .sticker-cassetta{--x:13%;--y:66%;--size:85px}
 .sticker-megafono{--x:15%;--y:84%;--size:95px}
}
.loader-caption{font:400 19px/1.4 Graffonti,sans-serif;letter-spacing:.03em}

/* Smaller secondary stickers and a more prominent figure. */
@media(min-width:701px){
 .hero-figure{width:43%;max-width:860px;right:-5%}
 .sticker-cassetta{--size:10.5vw}
 .sticker-megafono{--size:9.8vw}
 .sticker-fotocamera{--size:7vw}
}
@media(max-width:700px){
 .hero-figure{width:98%;max-width:570px;right:-10%}
 .sticker-cassetta{--size:60px}
 .sticker-megafono{--size:67px}
 .sticker-fotocamera{--size:55px}
}

/* Balanced composition: scale against viewport height as well as width. */
@media(min-width:701px){
 .hero{height:100svh;min-height:600px;max-height:1000px}
 .hero-center{left:4%;top:4%;width:min(22vw,calc(39svh * 1664 / 1745));max-width:340px}
 .hero-wordmark{left:22%;top:12%;width:min(51vw,calc(76svh * 872 / 632))}
 .hero-figure{right:-2%;bottom:-12px;width:min(30vw,calc(65svh * 1040 / 1130));max-width:560px}
 .sticker-cassetta{--x:9%;--y:66%;--size:9vw}
 .sticker-megafono{--x:18%;--y:86%;--size:9vw}
 .sticker-fotocamera{--x:72%;--y:10%;--size:6.5vw}
}
@media(max-width:700px){
 .hero{height:clamp(800px,108svh,980px)}
 .hero-center{left:5%;top:25px;width:37%;max-width:180px}
 .hero-wordmark{left:5%;top:26%;width:88%}
 .hero-figure{right:-5%;width:78%;max-width:430px}
}

/* V30: midpoint between the oversized V28 and compact V29. */
@media(min-width:701px){
 .hero-center{left:3%;top:3%;width:min(26vw,calc(49svh * 1664 / 1745));max-width:410px}
 .hero-wordmark{left:20%;top:15%;width:min(55vw,calc(86svh * 872 / 632))}
 .hero-figure{right:-3%;width:min(36vw,calc(79svh * 1040 / 1130));max-width:680px}
}
@media(max-width:700px){
 .hero{height:clamp(850px,114svh,1040px)}
 .hero-center{left:4%;width:42%;max-width:205px}
 .hero-wordmark{left:4%;top:28%;width:92%}
 .hero-figure{right:-7%;width:87%;max-width:490px}
}
.site-loader .loader-line{display:none}

/* V35: lettering raised, figure slightly larger, mouth logo substantially larger. */
@media(min-width:701px){
 .hero-wordmark{top:6%}
 .hero-center{left:1%;top:2%;width:min(33vw,calc(63svh * 1664 / 1745));max-width:520px}
 .hero-figure{width:min(39vw,calc(86svh * 1040 / 1130));max-width:740px;right:-4%}
}
@media(max-width:700px){
 .hero-wordmark{top:23%}
 .hero-center{left:2%;width:53%;max-width:255px;top:12px}
 .hero-figure{width:94%;max-width:535px;right:-8%}
}

/* Foreground lettering always sits above the mouth, girl and decorative stickers. */
.hero .hero-wordmark{z-index:10;pointer-events:none}

/* Foreground order: mouth logo, MELIX ARTS lettering, then figure. */
.hero .hero-center{z-index:11}