/* ========================================================= TENUTA BRUNI — Luxury edition v3 Robusto: i contenuti sono visibili di default; le animazioni si attivano solo con .js sull'. Niente contenuti nascosti. ========================================================= */ :root{ --green-900:#19231514; --green-900:#16201a; --green-800:#24302038; --green-800:#222d20; --green-700:#3a4a30; --green-600:#566b46; --cream:#f7f3ec; --cream-2:#efe8db; --sand:#ddcfb4; --gold:#a9863f; --gold-soft:#c9ad73; --ink:#221f18; --muted:#6f6a59; --white:#fff; --serif:"Cormorant Garamond", Georgia, serif; --sans:"Jost","Helvetica Neue",Arial,sans-serif; --maxw:1320px; --gutter:clamp(22px,5vw,80px); --ease:cubic-bezier(.22,.61,.36,1); --ease-io:cubic-bezier(.16,1,.3,1); --nav-h:96px; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%} body{font-family:var(--sans);color:var(--ink);background:var(--cream);line-height:1.7;font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased} body.lock{overflow:hidden} img,video{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} ul{list-style:none} button{font-family:inherit;cursor:pointer;border:none;background:none} ::selection{background:var(--gold);color:#fff} h1,h2,h3,h4{font-family:var(--serif);font-weight:500;line-height:1.04;letter-spacing:.005em} h1{font-size:clamp(3.2rem,9vw,7.5rem);font-weight:400} h2{font-size:clamp(2.3rem,5.4vw,4.4rem);font-weight:400} h3{font-size:clamp(1.5rem,3vw,2.2rem)} p{font-size:clamp(1rem,1.15vw,1.13rem)} .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(80px,12vw,180px)} .section--tight{padding-block:clamp(54px,8vw,100px)} .text-center{text-align:center} .overline{font-size:.74rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:400;display:inline-flex;align-items:center;gap:.9em;margin-bottom:1.4rem} .overline::before{content:"";width:42px;height:1px;background:var(--gold);display:inline-block} .overline--center{justify-content:center} .overline--center::after{content:"";width:42px;height:1px;background:var(--gold);display:inline-block} .eyebrow{font-size:.74rem;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:400;display:inline-flex;align-items:center;gap:.9em;margin-bottom:1.4rem} .eyebrow::before{content:"";width:42px;height:1px;background:var(--gold);display:inline-block} .eyebrow--center{justify-content:center} .lead{font-size:clamp(1.08rem,1.5vw,1.32rem);color:var(--muted);max-width:64ch;font-weight:300} .lead--center{margin-inline:auto} /* ---------- Scroll progress + preloader ---------- */ .progress{position:fixed;top:0;left:0;height:2px;width:0;background:var(--gold);z-index:130;transition:width .1s linear} .preloader{position:fixed;inset:0;z-index:300;background:var(--green-900);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:1.6rem;transition:opacity .7s var(--ease),visibility .7s} .preloader img{width:min(230px,55vw);opacity:.0;transform:translateY(12px);animation:preIn 1s var(--ease-io) .1s forwards} .preloader .bar{width:120px;height:1px;background:rgba(255,255,255,.18);overflow:hidden} .preloader .bar i{display:block;height:100%;width:0;background:var(--gold-soft);animation:preBar 1.4s var(--ease-io) .15s forwards} @keyframes preIn{to{opacity:1;transform:none}} @keyframes preBar{to{width:100%}} body.loaded .preloader{opacity:0;visibility:hidden} /* ---------- Buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:.7em;font-size:.78rem;letter-spacing:.24em;text-transform:uppercase;padding:1.15em 2.4em;border:1px solid currentColor;border-radius:0;transition:.45s var(--ease);position:relative;overflow:hidden;font-weight:400} .btn span{position:relative;z-index:1} .btn img{position:relative;z-index:1;width:17px;height:17px} .btn::after{content:"";position:absolute;inset:0;background:currentColor;transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease);z-index:0} .btn:hover::after{transform:scaleX(1)} .btn--gold{color:var(--gold)} .btn--gold:hover span{color:#fff} .btn--light{color:#fff} .btn--light:hover span,.btn--light:hover img{filter:none} .btn--light:hover span{color:var(--green-900)} .btn--dark{color:var(--green-800)} .btn--dark:hover span{color:var(--cream)} /* ---------- Navbar ---------- */ .nav{position:fixed;top:0;left:0;width:100%;z-index:100;height:var(--nav-h);display:flex;align-items:center;transition:background .5s var(--ease),height .5s var(--ease),backdrop-filter .5s} .nav__inner{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:1560px;margin-inline:auto;padding-inline:var(--gutter)} .nav__logo{display:flex;align-items:center;line-height:1} .nav__logo img{height:54px;width:auto;transition:height .5s var(--ease);filter:drop-shadow(0 2px 14px rgba(0,0,0,.28))} .nav__menu{display:flex;align-items:center;gap:clamp(1.4rem,2.6vw,3rem)} .nav__link{position:relative;color:#fff;font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;transition:color .4s var(--ease);padding-block:.4em} .nav__link::after{content:"";position:absolute;left:0;bottom:0;width:0;height:1px;background:var(--gold-soft);transition:width .4s var(--ease)} .nav__link:hover::after,.nav__link.is-active::after{width:100%} .nav__right{display:flex;align-items:center;gap:1.4rem} .nav__menu .menu-extra{display:none} .lang{display:flex;align-items:center;gap:.15rem;font-size:.76rem} .lang button{color:#fff;opacity:.5;transition:.3s;text-transform:uppercase;letter-spacing:.1em;font-size:.76rem;padding:.2em .35em} .lang button.is-active{opacity:1;color:var(--gold-soft)} .lang span{opacity:.4;color:#fff} .nav.is-scrolled{height:72px;background:rgba(22,32,26,.85);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)} .nav.is-scrolled .nav__logo img{height:42px} .nav__burger{display:none;width:34px;height:18px;position:relative;z-index:210} .nav__burger span{position:absolute;left:0;width:100%;height:1.5px;background:#fff;transition:.4s var(--ease)} .nav__burger span:nth-child(1){top:0}.nav__burger span:nth-child(2){top:8px}.nav__burger span:nth-child(3){top:16px} body.menu-open .nav__burger span:nth-child(1){top:8px;transform:rotate(45deg)} body.menu-open .nav__burger span:nth-child(2){opacity:0} body.menu-open .nav__burger span:nth-child(3){top:8px;transform:rotate(-45deg)} /* ---------- Hero ---------- */ .hero{position:relative;height:100svh;min-height:640px;display:flex;align-items:center;justify-content:center;overflow:hidden;color:#fff;text-align:center} .hero__media{position:absolute;inset:-8% 0;z-index:-2;will-change:transform} .hero__media video,.hero__media img{width:100%;height:100%;object-fit:cover;animation:kenburns 26s ease-in-out infinite alternate} @keyframes kenburns{from{transform:scale(1.03)}to{transform:scale(1.15)}} .hero__media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,22,15,.45) 0%,rgba(15,22,15,.2) 38%,rgba(15,22,15,.72) 100%);z-index:1} .hero__inner{position:relative;z-index:2;padding-inline:var(--gutter);max-width:1100px} .hero h1{margin:.18em 0 .4em;text-shadow:0 2px 60px rgba(0,0,0,.4);font-weight:400} .hero h1 .word{display:inline-block;overflow:hidden;vertical-align:top} .hero h1 .word i{display:inline-block;font-style:normal;transform:translateY(110%)} html.js .hero h1 .word i{transition:transform 1.1s var(--ease-io)} body.loaded .hero h1 .word i{transform:none} .hero h1 .word:nth-child(2) i{transition-delay:.1s} .hero .eyebrow{color:var(--gold-soft)} .hero .eyebrow::before{background:var(--gold-soft)} .hero__sub{font-size:clamp(1.05rem,1.6vw,1.35rem);font-weight:300;letter-spacing:.02em;max-width:50ch;margin:0 auto 2.6em;text-shadow:0 1px 24px rgba(0,0,0,.45)} html.js .hero .eyebrow,html.js .hero__sub,html.js .hero__cta{opacity:0;transform:translateY(14px);transition:.9s var(--ease-io)} html.js .hero__sub{transition-delay:.66s} html.js .hero__cta{transition-delay:.8s} html.js .hero .eyebrow{transition-delay:.5s} body.loaded .hero .eyebrow,body.loaded .hero__sub,body.loaded .hero__cta{opacity:1;transform:none} .hero__scroll{position:absolute;bottom:34px;left:50%;transform:translateX(-50%);z-index:2;display:flex;flex-direction:column;align-items:center;gap:.8em;font-size:.62rem;letter-spacing:.34em;text-transform:uppercase;opacity:.85} .hero__scroll .line{width:1px;height:54px;background:rgba(255,255,255,.4);position:relative;overflow:hidden} .hero__scroll .line::after{content:"";position:absolute;top:-100%;left:0;width:100%;height:100%;background:var(--gold-soft);animation:scrolldown 2.4s var(--ease) infinite} @keyframes scrolldown{0%{top:-100%}60%,100%{top:100%}} .hero--page{height:74svh;min-height:520px} /* ---------- Marquee ---------- */ .marquee{background:var(--green-900);color:var(--cream);overflow:hidden;padding:clamp(30px,5vw,60px) 0} .marquee__row{display:flex;gap:2.5rem;width:max-content;animation:marquee 42s linear infinite} .marquee span{font-family:var(--serif);font-size:clamp(2.2rem,6vw,5rem);white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(247,243,236,.5)} .marquee span.fill{color:var(--gold-soft);-webkit-text-stroke:0} .marquee .dot{align-self:center;color:var(--gold-soft);-webkit-text-stroke:0;font-size:1.2rem} @keyframes marquee{to{transform:translateX(-50%)}} /* ---------- Editorial split ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,6vw,6rem);align-items:center} .split--reverse .split__media{order:2} .split__media{position:relative;overflow:hidden} .split__media img{width:100%;aspect-ratio:1/1;object-fit:cover} .split__media .tag{position:absolute;left:0;bottom:0;background:var(--green-900);color:var(--cream);font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;padding:.9em 1.5em;z-index:2} .split__num{font-family:var(--serif);font-size:1.2rem;color:var(--gold);letter-spacing:.1em;margin-bottom:1rem;display:block} .split__body{display:flex;flex-direction:column;justify-content:center} .split__body h2{margin-bottom:.5em;font-size:clamp(2.2rem,4.2vw,3.4rem)} .split__body p+p{margin-top:1.2em} .split__body p{color:#46422f;font-size:clamp(1.08rem,1.3vw,1.24rem);line-height:1.9;max-width:48ch} .split__body .btn,.split__body .price{margin-top:2.2rem} .price{font-family:var(--serif);font-size:1.6rem;color:var(--green-700)} /* ---------- Chapter (full-bleed cinematic) ---------- */ .feature{position:relative;color:#fff;overflow:hidden} .feature__bg{position:absolute;inset:-12% 0;z-index:-2;will-change:transform} .feature__bg img{width:100%;height:100%;object-fit:cover} .feature__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(15,23,17,.82) 0%,rgba(15,23,17,.45) 55%,rgba(15,23,17,.15) 100%)} .feature--center .feature__bg::after{background:linear-gradient(180deg,rgba(15,23,17,.55),rgba(15,23,17,.55))} .feature__inner{padding-block:clamp(110px,18vw,240px)} .feature__box{max-width:600px} .feature--center .feature__box{max-width:760px;margin-inline:auto;text-align:center} .feature__box .eyebrow{color:var(--gold-soft)} .feature__box .eyebrow::before{background:var(--gold-soft)} .feature--center .eyebrow{justify-content:center} .feature__box p{margin-top:1.1rem;opacity:.94;font-weight:300} .feature__stats{display:flex;gap:clamp(2rem,5vw,3.5rem);margin-top:2.8rem;flex-wrap:wrap} .feature--center .feature__stats{justify-content:center} .feature__stats .num{font-family:var(--serif);font-size:2.7rem;color:var(--gold-soft);line-height:1;font-weight:400} .feature__stats .lab{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;opacity:.82;margin-top:.5em} /* ---------- Cards ---------- */ .grid{display:grid;gap:clamp(1.6rem,3vw,2.6rem)} .grid--3{grid-template-columns:repeat(3,1fr)} .grid--2{grid-template-columns:repeat(2,1fr)} .card{background:var(--white);overflow:hidden;display:flex;flex-direction:column;transition:transform .6s var(--ease),box-shadow .6s var(--ease);box-shadow:0 20px 50px -38px rgba(22,32,26,.7)} .card:hover{transform:translateY(-10px);box-shadow:0 40px 70px -40px rgba(22,32,26,.7)} .card__media{overflow:hidden;aspect-ratio:4/3} .card__media img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)} .card:hover .card__media img{transform:scale(1.08)} .card__body{padding:2rem 1.9rem 2.3rem;display:flex;flex-direction:column;flex:1} .card__body h3{margin-bottom:.3em} .card__body .meta{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:1em} .card__body p{font-size:.98rem;color:var(--muted);flex:1} .card__body .price-sm{margin-top:1.1rem;font-family:var(--serif);font-size:1.25rem;color:var(--green-700)} .card__body .more{margin-top:1.4rem;font-size:.74rem;letter-spacing:.22em;text-transform:uppercase;color:var(--green-700);display:inline-flex;align-items:center;gap:.6em;transition:gap .3s} .card:hover .card__body .more{gap:1.1em} /* ---------- Services rows (premium, no dark stacking) ---------- */ .srow{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2rem,5vw,5rem);align-items:center} .srow+.srow{margin-top:clamp(3rem,7vw,7rem)} .srow--rev .srow__media{order:2} .srow__media{overflow:hidden;aspect-ratio:4/3} .srow__media img{width:100%;height:100%;object-fit:cover} .srow__body{display:flex;flex-direction:column;justify-content:center} .srow__body .meta{font-size:.7rem;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);margin-bottom:.8em} .srow__body h3{font-size:clamp(1.8rem,3.2vw,2.6rem);margin-bottom:.5em} .srow__body p{color:#46422f;font-size:clamp(1.06rem,1.25vw,1.2rem);line-height:1.9;max-width:48ch} /* tile (used minimally) */ .tile{position:relative;overflow:hidden;min-height:380px;display:flex;align-items:flex-end;color:#fff} .tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.3s var(--ease)} .tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(15,22,15,.82) 100%)} .tile:hover img{transform:scale(1.08)} .tile__cap{position:relative;z-index:1;padding:2.2rem 2rem} .tile__cap .meta{font-size:.68rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:.5em} .tile__cap h3{font-size:1.8rem} /* ---------- Values ---------- */ .values{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(1.6rem,3vw,2.5rem);text-align:center} .values .item .ico{width:42px;height:42px;margin:0 auto 1.1rem;color:var(--gold)} .values .item h4{font-size:1.35rem;margin-bottom:.4em} .values .item p{font-size:.92rem;color:var(--muted)} /* ---------- Reviews ---------- */ .reviews{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1.4rem,2.5vw,2.2rem)} .review{background:var(--white);padding:2.4rem 2.1rem;box-shadow:0 20px 50px -40px rgba(22,32,26,.7);display:flex;flex-direction:column} .review .stars{color:var(--gold);letter-spacing:.25em;margin-bottom:1.1rem;font-size:.85rem} .review p{font-size:1.1rem;font-family:var(--serif);font-style:italic;color:#3a3629;line-height:1.55;flex:1} .scoreboard{display:flex;justify-content:center;gap:clamp(2.5rem,6vw,5rem);margin-top:3.2rem;flex-wrap:wrap} .scoreboard .s .n{font-family:var(--serif);font-size:3rem;color:var(--green-700);line-height:1;font-weight:400} .scoreboard .s .l{font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:.5em} /* ---------- Contatti ---------- */ .contact{display:grid;grid-template-columns:1fr 1fr;gap:clamp(2.5rem,5vw,5rem)} .contact__info .row{display:flex;gap:1.1rem;padding-block:1.4rem;border-bottom:1px solid rgba(22,32,26,.12)} .contact__info .row:first-of-type{border-top:1px solid rgba(22,32,26,.12)} .contact__info .ico{color:var(--gold);flex:none;margin-top:.2em} .contact__info .k{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:.25em} .contact__info .v{font-size:1.05rem} .form{display:grid;gap:1.1rem} .form .field{display:flex;flex-direction:column;gap:.4em} .form label{font-size:.7rem;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)} .form input,.form textarea{font-family:var(--sans);font-size:1rem;padding:1em 1.1em;border:1px solid rgba(22,32,26,.18);background:var(--white);color:var(--ink);transition:border .3s} .form input:focus,.form textarea:focus{outline:none;border-color:var(--gold)} .form .row2{display:grid;grid-template-columns:1fr 1fr;gap:1.1rem} .map{width:100%;border:0;filter:grayscale(.3) contrast(.95)} .map-blocked{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;background:var(--cream-2);color:var(--muted);text-align:center;padding:2rem} .places{display:grid;grid-template-columns:repeat(2,1fr);gap:.1rem 2.5rem;margin-top:1.6rem} .places li{display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid rgba(22,32,26,.1);font-size:.98rem} .places li::before{content:"";flex:none;width:7px;height:7px;margin-top:.55em;border-radius:50%;background:var(--gold)} .reach{margin-top:1.6rem} .reach li{display:flex;gap:.9rem;padding:1rem 0;border-bottom:1px solid rgba(22,32,26,.12);font-size:1rem} .reach li svg{color:var(--gold);flex:none;margin-top:.15em} /* ---------- Gallery ---------- */ .gallery{columns:3;column-gap:16px} .gallery__item{break-inside:avoid;margin-bottom:16px;overflow:hidden;cursor:pointer;position:relative} .gallery__item img{width:100%;transition:transform 1.1s var(--ease)} .gallery__item::after{content:"+";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-family:var(--serif);font-size:2.4rem;background:rgba(22,32,26,.32);opacity:0;transition:.45s var(--ease);pointer-events:none} .gallery__item:hover img{transform:scale(1.05)} .gallery__item:hover::after{opacity:1} .lightbox{position:fixed;inset:0;z-index:200;background:rgba(14,20,13,.96);display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:.4s var(--ease);padding:5vw} .lightbox.is-open{opacity:1;visibility:visible} .lightbox img{max-width:90vw;max-height:86vh;object-fit:contain;transform:scale(.96);transition:.4s var(--ease)} .lightbox.is-open img{transform:scale(1)} .lightbox__close,.lightbox__nav{position:absolute;color:#fff;opacity:.7;transition:.3s;width:60px;height:60px;display:flex;align-items:center;justify-content:center} .lightbox__close{top:18px;right:24px;font-size:2rem} .lightbox__nav{top:50%;transform:translateY(-50%);font-family:var(--serif);font-size:2.6rem} .lightbox__nav--prev{left:10px}.lightbox__nav--next{right:10px} .lightbox__close:hover,.lightbox__nav:hover{opacity:1;color:var(--gold-soft)} /* ---------- Footer ---------- */ .footer{background:var(--green-900);color:var(--cream);padding-block:clamp(60px,8vw,100px) 2.5rem} .footer__top{display:grid;grid-template-columns:1.6fr 1fr 1.2fr 1fr;gap:clamp(2rem,5vw,4rem);padding-bottom:3rem;border-bottom:1px solid rgba(255,255,255,.12)} .footer__brand .logo-img{height:64px;width:auto;margin-bottom:1.2rem} .footer__brand p{opacity:.7;max-width:40ch;font-size:.95rem} .footer h5{font-size:.74rem;letter-spacing:.26em;text-transform:uppercase;color:var(--gold-soft);margin-bottom:1.3rem} .footer__col a{display:block;opacity:.72;padding-block:.45em;font-size:.95rem;transition:.3s} .footer__col a:hover{opacity:1;color:var(--gold-soft);padding-left:.4em} .footer__bottom{display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;padding-top:2rem;font-size:.8rem;opacity:.6} .socials{display:flex;gap:1rem} .socials a{opacity:.7;transition:.3s} .socials a:hover{opacity:1;color:var(--gold-soft)} /* ---------- WhatsApp (sobrio) ---------- */ .wa-float{position:fixed;right:22px;bottom:22px;z-index:90;width:54px;height:54px;border-radius:50%;background:var(--white);border:1px solid rgba(22,32,26,.1);display:flex;align-items:center;justify-content:center;box-shadow:0 10px 28px -12px rgba(0,0,0,.4);transition:transform .3s var(--ease),box-shadow .3s} .wa-float img{width:30px;height:30px} .wa-float:hover{transform:translateY(-3px);box-shadow:0 16px 34px -14px rgba(0,0,0,.45)} @media (max-width:540px){.wa-float{width:50px;height:50px;right:16px;bottom:16px}.wa-float img{width:27px;height:27px}} /* ---------- Cookie ---------- */ .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:120;max-width:560px;margin-inline:auto;background:rgba(22,32,26,.97);backdrop-filter:blur(8px);color:var(--cream);padding:1.5rem 1.6rem;box-shadow:0 24px 50px -18px rgba(0,0,0,.55);transform:translateY(180%);opacity:0;transition:transform .55s var(--ease),opacity .55s var(--ease)} .cookie.is-visible{transform:none;opacity:1} .cookie p{font-size:.85rem;line-height:1.55;opacity:.9;margin-bottom:1.1rem} .cookie a{color:var(--gold-soft);text-decoration:underline} .cookie__actions{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center} .cookie__actions button{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;padding:.75em 1.5em;transition:.3s} .cookie .acc{background:var(--gold);color:var(--green-900)} .cookie .acc:hover{background:var(--gold-soft)} .cookie .rej{background:transparent;color:var(--cream);border:1px solid rgba(255,255,255,.3)} .cookie .rej:hover{border-color:var(--cream)} /* ---------- Reveal (gated by html.js so content is always visible without JS) ---------- */ html.js [data-reveal]{opacity:0;transform:translateY(26px);transition:opacity .6s var(--ease-io),transform .65s var(--ease-io)} html.js [data-reveal].is-in{opacity:1;transform:none} html.js [data-reveal][data-delay="1"]{transition-delay:.06s} html.js [data-reveal][data-delay="2"]{transition-delay:.12s} html.js [data-reveal][data-delay="3"]{transition-delay:.18s} html.js [data-mask]{clip-path:inset(0 0 101% 0);transition:clip-path .7s var(--ease-io)} html.js [data-mask].is-in{clip-path:inset(0 0 0 0)} html.js [data-mask] img{transform:scale(1.08);transition:transform .9s var(--ease-io)} html.js [data-mask].is-in img{transform:scale(1)} /* ---------- Coverflow 3D ---------- */ .cf-sec{position:relative;background:radial-gradient(ellipse at 50% 35%,#1f2b1e 0%,var(--green-900) 70%);color:var(--cream);overflow:hidden} .cf-sec::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 38%,rgba(8,12,8,.7) 100%);z-index:1} .cf-sec .container{position:relative;z-index:2} .cf-sec .overline{color:var(--gold-soft)} .cf-sec .overline::before,.cf-sec .overline--center::after{background:var(--gold-soft)} .cf-sec h2{color:var(--cream)} .cf{position:relative;height:min(64vh,560px);perspective:1800px;margin-top:3rem;cursor:grab;user-select:none;outline:none} .cf:active{cursor:grabbing} .cf__stage{position:absolute;inset:0;transform-style:preserve-3d} .cf__item{position:absolute;top:50%;left:50%;width:min(56vw,540px);aspect-ratio:3/2;transform:translate(-50%,-50%);transition:transform .8s var(--ease-io),opacity .6s,box-shadow .6s,filter .6s;will-change:transform;overflow:hidden;border-radius:2px;box-shadow:0 40px 80px -30px rgba(0,0,0,.7);background:#0c130c;border:1px solid rgba(255,255,255,.06);filter:brightness(.42) saturate(.92)} .cf__item img{width:100%;height:100%;object-fit:cover;pointer-events:none} .cf__item.is-active{filter:none;box-shadow:0 60px 100px -24px rgba(0,0,0,.9),0 0 0 1px rgba(201,176,115,.55),0 0 70px -10px rgba(201,176,115,.35)} @media (hover:hover) and (min-width:861px){ .cf__item:not(.is-active){filter:brightness(.42) blur(2px)} } .cf__caption{text-align:center;font-family:var(--serif);font-size:clamp(1.8rem,3vw,2.6rem);margin-top:2.6rem;min-height:1.3em;letter-spacing:.02em;color:var(--cream)} .cf__caption.flash{animation:cfCap .55s var(--ease-io)} @keyframes cfCap{from{opacity:0;transform:translateY(10px);letter-spacing:.18em}to{opacity:1;transform:none}} .cf__ui{display:flex;align-items:center;justify-content:center;gap:2rem;margin-top:1rem} .cf__nav{width:54px;height:54px;border:1px solid rgba(255,255,255,.25);border-radius:50%;color:var(--cream);font-family:var(--serif);font-size:1.6rem;display:flex;align-items:center;justify-content:center;transition:.3s} .cf__nav:hover{background:var(--gold);color:var(--green-900);border-color:var(--gold)} .cf__count{font-size:.85rem;letter-spacing:.22em;opacity:.75} .cf__count b{color:var(--gold-soft)} .cf__hint{text-align:center;font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;opacity:.5;margin-top:1.6rem} html:not(.js) .cf{height:auto;display:flex;gap:14px;overflow-x:auto;perspective:none;margin-top:2rem} html:not(.js) .cf__stage{position:static;display:contents} html:not(.js) .cf__item{position:static;transform:none;width:72vw;flex:0 0 auto} html:not(.js) .cf__item::after{display:none} @media (max-width:600px){.cf{height:min(46vh,400px)}.cf__item{width:76vw}} /* ---------- Acqua interattiva ---------- */ .ripple-sec{position:relative;background:var(--green-900)} .ripple{position:relative;width:100%;height:min(72vh,640px);overflow:hidden;cursor:crosshair} .ripple canvas{position:absolute;inset:0;width:100%;height:100%;display:block} .ripple__fallback{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none} .ripple--fallback canvas{display:none} .ripple--fallback .ripple__fallback{display:block} .ripple::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(15,22,15,.15) 0%,transparent 30%,transparent 55%,rgba(15,22,15,.72) 100%)} .ripple__cap{position:absolute;left:0;right:0;bottom:0;z-index:2;text-align:center;padding:clamp(2rem,5vw,3.5rem) 1rem;color:#fff;pointer-events:none} .ripple__cap .overline{color:var(--gold-soft);justify-content:center} .ripple__cap .overline::after{background:var(--gold-soft)} .ripple__cap h2{color:#fff;text-shadow:0 2px 36px rgba(0,0,0,.55)} .ripple__hint{font-size:.68rem;letter-spacing:.28em;text-transform:uppercase;opacity:.85;margin-top:.9rem} @media (max-width:600px){.ripple{height:min(56vh,440px);cursor:default}} /* ---------- Pagine legali ---------- */ .legal{padding-top:calc(var(--nav-h) + 40px);padding-bottom:80px;background:var(--cream)} .legal__wrap{max-width:820px;margin-inline:auto;padding-inline:var(--gutter)} .legal__wrap h1{font-size:clamp(2.2rem,5vw,3.2rem);margin-bottom:.3em} .legal__wrap h2{font-size:1.5rem;margin:2.2rem 0 .6rem;color:var(--green-800)} .legal__wrap p,.legal__wrap li{color:#46422f;font-size:1rem;line-height:1.7} .legal__wrap ul{list-style:disc;padding-left:1.3rem;margin:.5rem 0} .legal__wrap li{margin-bottom:.4rem} .legal__wrap .updated{font-size:.85rem;color:var(--muted);margin-bottom:2rem} .legal__wrap a{color:var(--green-700);text-decoration:underline} .legal__back{display:inline-block;margin-bottom:2rem;font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)} /* ========================================================= RESPONSIVE ========================================================= */ @media (max-width:1024px){ .gallery{columns:2} } @media (max-width:860px){ .nav__menu{position:fixed;inset:0;height:100svh;background:var(--green-900);flex-direction:column;justify-content:center;gap:0;clip-path:circle(0% at calc(100% - 44px) 44px);transition:clip-path .7s var(--ease-io);pointer-events:none} body.menu-open .nav__menu{clip-path:circle(150% at calc(100% - 44px) 44px);pointer-events:auto} .nav__menu .nav__link{color:var(--cream);font-family:var(--serif);text-transform:none;letter-spacing:.01em;font-size:clamp(2.1rem,9vw,3rem);padding:.32em 0;opacity:0;transform:translateY(24px);transition:opacity .5s var(--ease),transform .5s var(--ease)} .nav__menu .nav__link::after{display:none} body.menu-open .nav__menu .nav__link{opacity:1;transform:none} body.menu-open .nav__menu .nav__link:nth-child(1){transition-delay:.16s} body.menu-open .nav__menu .nav__link:nth-child(2){transition-delay:.24s} body.menu-open .nav__menu .nav__link:nth-child(3){transition-delay:.32s} body.menu-open .nav__menu .nav__link:nth-child(4){transition-delay:.4s} body.menu-open .nav__menu .nav__link:nth-child(5){transition-delay:.48s} .nav__menu .menu-extra{display:block;margin-top:2.6rem;text-align:center;opacity:0;transition:opacity .5s .6s} body.menu-open .nav__menu .menu-extra{opacity:.85} .nav__menu .menu-extra a{display:block;color:var(--gold-soft);font-size:1rem;margin:.35em 0} .nav__burger{display:block} .split,.srow{grid-template-columns:1fr;gap:2.2rem} .split--reverse .split__media,.srow--rev .srow__media{order:0} .split__media img{aspect-ratio:4/3} .grid--3,.grid--2{grid-template-columns:1fr} .values{grid-template-columns:repeat(2,1fr);gap:2.6rem 1.5rem} .reviews{grid-template-columns:1fr} .contact{grid-template-columns:1fr} .footer__top{grid-template-columns:1fr} .form .row2{grid-template-columns:1fr} .places{grid-template-columns:1fr} .hero__media,.feature__bg{transform:none!important} } @media (max-width:540px){ .gallery{columns:1} .hero__scroll{display:none} } @media (prefers-reduced-motion:reduce){ *{animation:none!important;transition-duration:.001s!important} html.js [data-reveal],html.js [data-mask]{opacity:1;transform:none;clip-path:none} .hero h1 .word i{transform:none} }