@font-face{font-family:Boska;src:url(../fonts/boska-200.woff2) format("woff2");font-weight:200;font-display:swap}
@font-face{font-family:"General Sans";src:url(../fonts/general-sans-400.woff2) format("woff2");font-weight:400;font-display:swap}

:root{
  --sand:#F3F0EB;--brown:#191714;--taupe:#CFC6BD;--mist:#EAE6E0;--ash:#8E8883;
  --ruby:#B08582;--gold:#C9B98A;--clay:#BA8A70;--wine:#4A0512;
  --serif:Boska,"Times New Roman",serif;
  --sans:"General Sans",Arial,Helvetica,sans-serif;
  --gutter:20px;
  --t-display:clamp(3.25rem,9.72vw,11.5rem);
  --t-lead:clamp(1.25rem,3.89vw,4.2rem);
  --t-note:clamp(1.125rem,2.22vw,2.4rem);
  --t-note-s:clamp(1.125rem,1.67vw,1.75rem);
  --t-small:.875rem;
  --ease:cubic-bezier(.19,1,.22,1);
}
*,*::before,*::after{box-sizing:border-box}
html.js.motion{overflow:hidden;overscroll-behavior:none}
.js.motion body{touch-action:pinch-zoom;overscroll-behavior:none}
[tabindex="-1"]:focus{outline:none}
html{-webkit-text-size-adjust:100%;background:var(--taupe);scrollbar-color:var(--ash) transparent;scrollbar-width:thin}
body{margin:0;font:400 1rem/1.5 var(--sans);color:var(--brown);background:var(--taupe);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:clip;caret-color:var(--wine)}
::selection{background:var(--wine);color:var(--sand)}
a{color:inherit;text-decoration:none}
a:focus-visible,button:focus-visible{outline:1px solid currentColor;outline-offset:4px;border-radius:2px}
h1,h2,h3,p,ul,dl,dd,figure,address{margin:0;padding:0;font:inherit}
ul{list-style:none}
img,svg,canvas{display:block}
img{max-width:100%;height:auto}
address{font-style:normal}

.skip{position:fixed;left:var(--gutter);top:-60px;z-index:60;background:var(--sand);padding:8px 14px;border-radius:999px;font-size:var(--t-small)}
.skip:focus{top:12px}

.display{font-family:var(--serif);font-weight:200;font-size:var(--t-display);line-height:1;letter-spacing:-.04em;font-feature-settings:"onum" 1}
.lead{font-size:var(--t-lead);line-height:1;letter-spacing:-.02em;text-wrap:balance}
.note{font-size:var(--t-note);line-height:1.1;letter-spacing:-.02em}
.note-s{font-size:var(--t-note-s);line-height:1.2;letter-spacing:-.02em}
.small{font-size:var(--t-small);line-height:1.4}

/* Lettere che salgono da sotto una linea */
.w{display:inline-block;white-space:nowrap}
.c{display:inline-block;overflow:hidden;vertical-align:top;padding:.24em .02em .2em;margin:-.24em -.02em -.2em}
.c i{display:inline-block;font-style:normal;will-change:transform}

.mark{display:block;background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat}
.mark-eja{-webkit-mask-image:url(../img/logo-eja.svg);mask-image:url(../img/logo-eja.svg);aspect-ratio:1149/1002}
.mark-ab{-webkit-mask-image:url(../img/logo-ab.svg);mask-image:url(../img/logo-ab.svg);aspect-ratio:3097/331}

.roll{position:relative;display:inline-block;overflow:hidden;vertical-align:top}
.roll span{display:block;transition:transform .55s var(--ease)}
.roll::after{content:attr(data-t);content:attr(data-t) / "";position:absolute;left:0;top:100%;white-space:nowrap;transition:transform .55s var(--ease)}
@media (hover:hover){.roll:hover span,.roll:hover::after{transform:translateY(-100%)}}

.gobo{position:absolute;inset:-6% -4%;background:url(../img/gobo.webp) center/cover;mix-blend-mode:multiply;opacity:.62;pointer-events:none}

.btn{display:inline-flex;align-items:center;gap:10px;height:48px;padding:0 42px;border-radius:999px;background:var(--sand);font-size:var(--t-small);transition:background .4s var(--ease),color .4s var(--ease)}
.btn svg{width:10px;height:10px;fill:none;stroke:currentColor;stroke-width:1.2;transition:transform .4s var(--ease)}
.btn-line{background:none;box-shadow:inset 0 0 0 1px rgba(25,23,20,.28)}
@media (hover:hover){.btn:hover{background:var(--brown);color:var(--sand)}.btn:hover svg{transform:translate(2px,-2px)}}

/* Intestazione */
.hd{position:fixed;inset:0 0 auto;z-index:20;display:grid;grid-template-columns:1fr auto 1fr;align-items:start;padding:20px var(--gutter);color:var(--brown);transition:color .5s;pointer-events:none}
.hd a,.hd button{pointer-events:auto}
.hd.hd--sand{color:var(--sand)}
html:not(.motion) .hd{position:absolute;color:var(--sand)}
.hd-nav{display:grid;gap:0;justify-items:start;line-height:1.5;transition:opacity .5s,visibility .5s}
.hd-logo{display:grid;justify-items:center;gap:7px;width:128px;transition:opacity .5s,visibility .5s}
.hd-logo .mark-eja{width:64px}
.hd-logo .mark-ab{width:128px}
.hd-right{justify-self:end;display:flex;gap:18px}
.hd.hd--min .hd-nav,.hd.hd--min .hd-logo{opacity:0 !important;visibility:hidden !important}
.hd-burger{display:none}

/* Preloader */
.loader{display:none}
.js.motion .loader{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:24px var(--gutter);background:var(--taupe);color:var(--brown)}
.loader-logo{width:150px}
.loader-mid{display:grid;justify-items:center;gap:12px}
.loader-glass{width:40px;height:80px;overflow:visible}
.loader-glass path{fill:none;stroke:currentColor;stroke-width:1.4}
.loader-glass rect{fill:var(--brown)}
.loader-num{font-size:var(--t-small);font-variant-numeric:tabular-nums}
.loader-txt{font-size:var(--t-small)}

/* Tela WebGL e livello sopra la bottiglia */
#gl{display:none}
.over{display:none}
.st-bottle{display:none}

.js.motion #gl{display:block;position:fixed;left:0;top:0;width:100vw;height:100vh;height:100dvh;z-index:5;pointer-events:none}
.js.motion .over{display:block;position:fixed;inset:0;z-index:6;pointer-events:none;mix-blend-mode:normal}
.inter{position:absolute;left:50%;top:50%;width:min(7.4em,76vw);transform:translate(-50%,-50%);text-align:center;font-size:var(--t-lead);line-height:1.04;letter-spacing:-.02em;color:var(--sand);opacity:0;mix-blend-mode:normal;text-wrap:balance}
.pill{position:absolute;left:50%;bottom:20px;width:212px;transform:translateX(-50%);pointer-events:auto;transition:opacity .4s,visibility .4s,transform .6s var(--ease)}
.pill.is-off{opacity:0 !important;visibility:hidden !important;transform:translate(-50%,20px)}
.pill-btn{display:grid;grid-template-columns:36px 1fr 28px;align-items:center;width:100%;height:48px;padding:0 8px 0 6px;border:0;border-radius:999px;background:var(--sand);color:var(--brown);font:400 var(--t-small)/1 var(--sans);cursor:pointer}
.pill-btn img{width:36px;height:36px;border-radius:50%;background:var(--mist)}
.pill-btn svg{width:28px;height:28px;padding:9px;border-radius:50%;background:var(--mist);fill:none;stroke:currentColor;stroke-width:1.4;transition:transform .45s var(--ease)}
.pill-btn[aria-expanded="true"] svg{transform:rotate(180deg)}
.pill-list{position:absolute;left:0;right:0;bottom:56px;padding:8px;border-radius:20px;background:var(--sand);font-size:var(--t-small);opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .35s,visibility .35s,transform .5s var(--ease)}
.pill-list.is-open{opacity:1;visibility:visible;transform:none}
.pill.is-off .pill-list{visibility:hidden}
.pill-list a{display:block;padding:9px 12px;border-radius:12px}
@media (hover:hover){.pill-list a:hover{background:var(--mist)}}

/* Scena principale: senza movimento è una pagina normale */
.stage{position:relative;overflow:hidden}
.st-color,.st-dark,.st-vine,.stage>.gobo{display:none}
.hero{position:relative;padding:150px var(--gutter) 40px;background:var(--brown);color:var(--sand)}
.hero-sub{margin-top:32px;max-width:32ch;font-size:var(--t-small)}
.hero-scroll{display:none}
.st-bottle{display:block;width:min(260px,60vw);margin:0 auto;padding:40px 0}
.brand{padding:80px var(--gutter);text-align:center}
.brand .lead{max-width:18em;margin:24px auto 0}
.ch{padding:64px var(--gutter)}
.ch[data-i="0"]{background:var(--ruby)}
.ch[data-i="1"]{background:var(--gold)}
.ch[data-i="2"]{background:var(--clay)}
.ch-title{white-space:nowrap}
.ch-tag{display:flex;align-items:center;gap:12px;margin-top:32px;padding-top:16px;border-top:1px solid rgba(25,23,20,.2)}
.ch-tag i{width:7px;height:7px;border-radius:50%;background:currentColor}
.ch-meta{margin-top:8px}
.ch-note{margin-top:32px;max-width:15em}
.ch-body{margin-top:32px;max-width:27.5rem}
.ch-body .small{margin-top:16px}
.ch-links{margin-top:32px !important}
.ch-links li{line-height:1.6}
.ch-photo{margin-top:32px;max-width:320px;overflow:hidden}
.ch-photo img{width:100%;aspect-ratio:1;object-fit:cover}

.js.motion .stage-wrap{height:1400vh}
.js.motion .stage{position:sticky;top:0;height:100vh;height:100dvh;z-index:1;background:var(--taupe)}
.js.motion .st-color,.js.motion .st-dark,.js.motion .st-vine,.js.motion .stage>.gobo{display:block;position:absolute}
.js.motion .st-color{inset:0;background:var(--taupe)}
.js.motion .st-dark{inset:0;background:linear-gradient(#191714 0%,#191714 42%,#3f3b37 62%,#7c766f 82%,#a9a29a 100%)}
.js.motion .st-vine{right:-3vw;top:-9vh;width:auto;max-width:none;height:119vh}
.js.motion .st-bottle{display:none}
.js.motion .hero{position:absolute;inset:0;padding:0;background:none;z-index:1}
.js.motion .hero h1{position:absolute;left:var(--gutter);top:calc(50vh - 1.75em);width:6em}
.js.motion .hero-sub{position:absolute;left:var(--gutter);bottom:20px;margin:0}
.js.motion .hero-scroll{display:block;position:absolute;right:var(--gutter);bottom:20px;font-size:var(--t-small)}
.js.motion .brand{position:absolute;inset:0;padding:96px var(--gutter) 0;z-index:1;opacity:0;pointer-events:none}
.js.motion .brand .lead{max-width:16.5em}
.js.motion .brand .lead .w{opacity:.14;white-space:normal}
.js.motion .ch{position:absolute;inset:0;padding:0;background:none;opacity:0;z-index:1;pointer-events:none}
.js.motion .ch.is-live{pointer-events:auto}
.js.motion .ch-title{position:absolute;left:var(--gutter);top:6px}
.js.motion .ch-tag{position:absolute;left:0;right:0;top:calc(var(--t-display) + 30px);margin:0;padding:18px var(--gutter) 0}
.js.motion .ch-meta{position:absolute;left:67.15vw;top:calc(var(--t-display) + 48px);margin:0}
.js.motion .ch-note{position:absolute;left:var(--gutter);top:40.5vh;margin:0;width:23.2vw;max-width:none}
.js.motion .ch-body{position:absolute;left:67.15vw;top:40.5vh;margin:0;width:24vw;max-width:none}
.js.motion .ch-photo{position:absolute;left:var(--gutter);bottom:20px;width:23.2vw;max-width:none;margin:0}

/* Sava e mappa */
.rg{position:relative;padding:96px var(--gutter);background:var(--brown);color:var(--sand)}
.sava-bg,.rg-shade,.rg-map{display:none}
.rg-l1,.rg-l2{display:block}
.rg-title{margin-bottom:48px}
.rg-stats{display:flex;flex-wrap:wrap;gap:24px 48px}
.rg-stats dt{opacity:.7}
.rg-dream,.rg-text{margin-top:40px;max-width:30em}

.js.motion .rg-wrap{position:relative;z-index:7;margin-top:-100vh;margin-top:-100dvh;height:340vh}
.js.motion .rg{position:sticky;top:0;height:100vh;height:100dvh;overflow:hidden;padding:0}
.js.motion .sava-bg{display:block;position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;object-fit:cover;object-position:50% 58%}
.js.motion .rg-shade{display:block;position:absolute;inset:0;background:linear-gradient(rgba(25,23,20,.62),rgba(25,23,20,.5) 42%,rgba(25,23,20,.84))}
.js.motion .rg-title{margin:0}
.js.motion .rg-l1{position:absolute;left:9.5vw;top:calc(46vh - 1.05em)}
.js.motion .rg-l2{position:absolute;left:21vw;top:46vh}
.js.motion .rg-stats{position:absolute;left:21vw;right:var(--gutter);bottom:72px;gap:0 7vw}
.js.motion .rg-dream{position:absolute;left:67.15vw;top:30vh;margin:0;width:26vw;max-width:none}
.js.motion .rg-text{position:absolute;left:67.15vw;top:38vh;margin:0;width:26vw;max-width:none;opacity:0}
.js.motion .rg-map{display:block;position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible}
.rg-map path{fill:none;stroke:var(--sand);stroke-width:var(--sw,1.15)}
.rg-map .italy{opacity:.9}
.rg-map .puglia{fill:url(#hatch)}
.rg-map text{fill:var(--sand);font-family:var(--sans)}
.rg-map circle{fill:var(--sand)}
.rg-map .halo{fill:none;stroke:var(--sand);stroke-width:var(--sw,1)}

/* I nostri prodotti */
.prod,.ft{position:relative;overflow:hidden;background:linear-gradient(115deg,#F1EDE8,#D3CBC3)}
.prod{padding:96px var(--gutter) 0}
.prod-wine,.prod-figs{position:relative;margin-top:40px;max-width:26em}
.prod-price{margin-top:6px}
.prod-desc{margin-top:12px}
.prod .btn{margin-top:18px}
.prod-figs .btn{justify-self:start}
.prod-figs img{width:min(220px,50vw);aspect-ratio:3/4;object-fit:cover;margin-bottom:16px}
.buy-anchor{display:none}
.buy-bottle{position:relative;width:min(200px,46vw);margin:32px auto 0}
.buy-vine{width:120%;max-width:none;margin-left:-10%}

.js.motion .prod{height:100vh;height:100dvh;padding:0;z-index:1}
.js.motion .prod-title{position:absolute;left:4.5vw;top:6vh;white-space:nowrap}
.js.motion .prod-wine{position:absolute;left:41vw;top:30vh;width:20vw;margin:0;max-width:none;z-index:2}
.js.motion .prod-figs{position:absolute;left:67.15vw;top:11vh;width:28vw;margin:0;max-width:none;z-index:2}
.js.motion .prod-figs img{width:15vw;margin-bottom:14px}
.js.motion .buy-anchor{display:block;position:absolute;left:26vw;bottom:16.6vw;width:1px;height:min(50vh,calc(100vh - 16.6vw - var(--t-display) - 9vh))}
.js.motion .buy-bottle{display:none}
.js.motion .buy-vine{position:absolute;left:-31vw;bottom:-8vw;width:104vw;margin:0;filter:brightness(.86) contrast(.96) saturate(.85);-webkit-mask-image:linear-gradient(#000 58%,transparent 80%);mask-image:linear-gradient(#000 58%,transparent 80%)}

.ft{padding:0 var(--gutter)}
.js.motion .ft{min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:space-between}
.ft-top{position:relative;display:grid;gap:48px;padding:64px 0}
.ft-logo{display:grid;gap:10px;width:190px;align-self:start;align-content:start}
.ft-logo .mark-eja{width:92px}
.ft-logo .mark-ab{width:190px}
.ft-nav li{line-height:1.5}
.ft-contact{display:grid;gap:8px;justify-items:start}
.ft-bar{position:relative;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;padding:20px 0;border-top:1px solid rgba(25,23,20,.16)}

/* Desktop */
@media (min-width:768px){
  .ft-top{grid-template-columns:1fr 1fr 16.5vw;gap:0;padding-top:30vh}
  .ft-nav{justify-self:start;margin-left:0;padding-left:0}
}

/* Telefono e tablet in verticale */
@media (max-width:767px),(max-aspect-ratio:85/100){
  :root{--t-display:clamp(2.6rem,11.6vw,4rem);--t-lead:1.25rem;--t-note:1.125rem;--t-small:.8125rem}
  .hd{display:flex;justify-content:space-between;gap:12px;padding:16px var(--gutter);align-items:center}
  .js.motion .hd{display:grid;grid-template-columns:40px 1fr auto}
  .hd-nav{display:none}
  .hd-burger{display:grid;place-items:center;width:32px;height:32px;padding:0;border:0;border-radius:50%;background:var(--sand);color:var(--brown);pointer-events:auto}
  .hd-burger svg{width:14px;height:14px;fill:currentColor}
  .hd-logo{justify-self:center;flex:none;width:96px;gap:4px}
  .hd-logo .mark-eja{width:44px}
  .hd-logo .mark-ab{width:96px}
  .hd-right a span,.hd-right .roll::after{font-size:var(--t-small)}
  .js.motion .st-vine{right:-52vw;top:-3vh;height:96vh}
  .js.motion .hero{text-align:center}
  .js.motion .hero h1{left:0;right:0;top:auto;bottom:calc(164px);width:auto;font-size:clamp(2.75rem,12.5vw,4.25rem);padding:0 var(--gutter)}
  .js.motion .hero-sub{left:0;right:0;bottom:84px;max-width:none;padding:0 38px}
  .js.motion .hero-scroll{display:none}
  .js.motion .brand{padding-top:64px}
  .js.motion .brand .lead{max-width:15em}
  .js.motion .ch-title{top:60px;left:var(--gutter);font-size:var(--t-display)}
  .js.motion .ch-tag{top:calc(var(--t-display) + 72px);padding-top:12px}
  .js.motion .ch-meta{left:auto;right:var(--gutter);top:calc(var(--t-display) + 84px)}
  .js.motion .ch-note{top:calc(var(--t-display) + 122px);width:auto;right:var(--gutter);max-width:none}
  .js.motion .ch-body{left:var(--gutter);right:var(--gutter);top:auto;bottom:18px;width:auto}
  .js.motion .ch-body .small{margin-top:10px}
  .js.motion .ch-links{margin-top:14px !important}
  .js.motion .ch-links li{display:inline-block;margin-right:18px}
  .js.motion .ch-photo{left:var(--gutter);bottom:auto;top:calc(var(--t-display) + 176px);width:38vw}
  .js.motion .rg-l1{left:var(--gutter);top:calc(32vh - 1.05em)}
  .js.motion .rg-l2{left:var(--gutter);top:32vh}
  .js.motion .rg-dream{left:var(--gutter);right:var(--gutter);top:auto;bottom:92px;width:auto;font-size:1rem}
  .js.motion .rg-stats{left:var(--gutter);bottom:20px;gap:6px 24px;font-size:.75rem}
  .js.motion .rg-text{left:var(--gutter);right:var(--gutter);top:auto;bottom:24px;width:auto;font-size:1rem}
  .js.motion .prod-title{left:var(--gutter);top:72px}
  .js.motion .buy-anchor{left:25vw;top:calc(72px + var(--t-display) + 16px);bottom:auto;height:32vh}
  .js.motion .buy-vine{left:-68vw;top:calc(72px + var(--t-display) + 16px + 32vh - 8vw);bottom:auto;width:170vw;-webkit-mask-image:linear-gradient(#000 44%,transparent 66%);mask-image:linear-gradient(#000 44%,transparent 66%)}
  .js.motion .prod-wine{left:47vw;right:var(--gutter);top:calc(72px + var(--t-display) + 40px);width:auto}
  .js.motion .prod-figs{left:var(--gutter);right:var(--gutter);top:auto;bottom:20px;width:auto;display:grid;grid-template-columns:27vw 1fr;column-gap:14px;align-content:end}
  .js.motion .prod-figs img{grid-column:1;grid-row:1/6;width:100%;margin:0}
  .js.motion .prod-figs>:not(img){grid-column:2}
  .prod .btn{height:40px;padding:0 24px}
  .ft-top{padding-top:96px}
}

/* Telefono basso: il footer deve entrare in una schermata */
@media (max-width:767px) and (max-height:720px){
  .ft-top{gap:18px;padding:64px 0 14px}
  .ft-logo{width:130px;gap:6px}
  .ft-logo .mark-eja{width:58px}
  .ft-logo .mark-ab{width:130px}
  .ft-nav{font-size:1rem}
  .ft-contact{gap:4px}
  .ft-bar{padding:12px 0;font-size:.75rem}
}

/* Telefono in orizzontale */
@media (max-height:560px) and (min-aspect-ratio:85/100){
  :root{--t-display:15vh;--t-lead:1.5rem;--t-note:1rem;--t-small:.75rem}
  .pill,.js.motion .ch-photo{display:none}
  .js.motion .ch-tag{top:calc(var(--t-display) + 12px);padding-top:8px}
  .js.motion .ch-meta{top:calc(var(--t-display) + 20px)}
  .js.motion .ch-note,.js.motion .ch-body{top:calc(var(--t-display) + 52px)}
  .js.motion .ch-body .small{margin-top:6px}
  .js.motion .ch-links{margin-top:8px !important}
  .js.motion .ch-links li{display:inline-block;margin-right:16px}
  .js.motion .prod-wine{top:27vh}
  .js.motion .prod-wine .prod-desc{display:none}
  .js.motion .prod-figs{top:6vh}
  .js.motion .prod-figs img{width:18vh;margin-bottom:6px}
  .prod .btn{height:36px;margin-top:8px}
  .js.motion .buy-anchor{bottom:4vw;height:52vh}
  .js.motion .buy-vine{bottom:-20vw}
}

/* Menu su telefono */
.menu{position:fixed;left:var(--gutter);right:var(--gutter);top:20px;z-index:30;padding:64px 20px 24px;border-radius:16px;background:var(--sand);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .35s,visibility 0s .35s,transform .5s var(--ease)}
.menu.is-open{opacity:1;visibility:visible;transform:none;transition:opacity .35s,visibility 0s,transform .5s var(--ease)}
.menu a{display:block;font-family:var(--serif);font-weight:200;font-size:2.6rem;line-height:1.15;letter-spacing:-.04em}
.menu-close{position:absolute;left:12px;top:12px;width:32px;height:32px;border:0;border-radius:50%;background:var(--mist);color:var(--brown);display:grid;place-items:center}
.menu-close svg{width:12px;height:12px;stroke:currentColor;stroke-width:1.4;fill:none}