:where(html.din) :where(body > section){background-color:var(--bianco)}
.din body > section,.din body > footer{position:relative;z-index:1}
.din body > section.foglio{position:sticky}
.din .foglio.coperta{visibility:hidden}



.din .hero,.din .apertura{position:sticky!important;top:0;z-index:0}
.din .hero.coperta,.din .apertura.coperta{visibility:hidden}

.din .hero{visibility:hidden}
.din .hero > *{visibility:visible}
.din .hero.coperta > *{visibility:hidden}


@keyframes din-respiro{from{scale:1}to{scale:1.07}}
.din .slide .bg{animation:din-respiro 26s ease-in-out infinite alternate;transform-origin:50% 55%;will-change:transform;transform:scale(1.08)}
.din .slide:nth-child(2) .bg{animation-delay:-9s}
.din .slide:nth-child(3) .bg{animation-delay:-18s}
.din .hero.coperta .bg{animation-play-state:paused}
.din .slide-inner{will-change:transform,opacity}

.din .parole .w{display:inline-block}
.din .reveal{opacity:1;transform:none;transition:none}
.din .reveal:not(.in) :is(img,video):not(#opere-scroll img,.rail img){opacity:0}
.din .reveal :is(img,video):not(#opere-scroll img,.rail img){transition:opacity 1.4s ease,transform 1.3s cubic-bezier(.16,1,.3,1)}
.din .step > :not(img,picture,video),.din .formato > *{opacity:1!important;transform:none!important;transition:none!important}


.din #opere-scroll img,.din .rail img{transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.din #opere-scroll img.su,.din .rail img.su{transform:perspective(1200px) translateZ(26px)}
@keyframes din-posa{from{opacity:0;transform:perspective(1200px) translate3d(0,24px,-120px)}to{opacity:1;transform:none}}
.din .reveal:not(.in) #opere-scroll img,.din .reveal:not(.in) .rail img{opacity:0}
.din .reveal.in #opere-scroll img,.din .reveal.in .rail img{animation:din-posa 1.9s cubic-bezier(.16,1,.3,1) backwards;animation-delay:calc(.15s + var(--n,0)*.09s)}


.din .reveal .percorsi img{transition:transform 1.3s cubic-bezier(.16,1,.3,1)}
@media (hover:hover){.din .reveal .percorsi a:hover img{transform:perspective(1000px) translateZ(22px)}}


@supports (animation-timeline: scroll()){
  @keyframes din-via{0%{transform:none;opacity:1}71%{opacity:0}100%{transform:translate3d(0,-110px,0);opacity:0}}
  @keyframes din-lenta{from{translate:0 var(--amp,-34px)}to{translate:0 calc(var(--amp,-34px) * -1)}}
  .din .din-lenta{animation:din-lenta linear both;animation-timeline:view();animation-range:cover}
  @media (max-width:699px){.din .din-lenta{--amp:-17px}}
}


@media (prefers-reduced-motion:reduce){
  .din .slide .bg{animation:none}
  .din .parole .w,.din .slide .eyebrow,.din .slide .slide-inner > p,.din .slide .slide-inner > .cta,.din .reveal > *,.din .percorsi > a{opacity:1!important;transform:none!important;transition:none!important}
  .din #opere-scroll img,.din .rail img{opacity:1!important;animation:none!important}
  .din .apertura-testo,.din .din-lenta{animation:none!important}
}
html.ax.din .slide .bg{animation:none}
html.ax.din .parole .w,html.ax.din .slide .eyebrow,html.ax.din .slide .slide-inner > p,html.ax.din .slide .slide-inner > .cta,html.ax.din .reveal > *,html.ax.din .percorsi > a{opacity:1!important;transform:none!important}
html.ax.din #opere-scroll img,html.ax.din .rail img{opacity:1!important;animation:none!important}
html.ax.din .apertura-testo,html.ax.din .din-lenta{animation:none!important}


@media(max-width:680px){
  .din body::before{bottom:64px}
  .din .mobilecta{border-top:0}
  .din .mobilecta a{padding-top:.95em;padding-bottom:.95em}
}

.hero .slide{pointer-events:none}
.hero .slide.active{pointer-events:auto}
@media(max-width:680px){.hero .slide-inner > h1,.hero .slide-inner > h2{width:fit-content}
  .hero .slide.active .slide-inner > h1,.hero .slide.active .slide-inner > h2,.hero .slide.active .slide-inner .eyebrow{cursor:pointer}}

@media(max-width:680px){
  footer .foot-links{display:grid;grid-template-columns:1fr 1fr;column-gap:1.4rem;row-gap:0;width:100%}
}


.din img,.din video,.din .frame,.din .fmt .rect,.din .mappa,.din .gift-card{box-shadow:none!important}



@keyframes din-deriva{from{translate:3% 0}to{translate:-3% 0}}
@media (min-width:881px) and (min-aspect-ratio:5/4){
  .din .slide .bg{animation:none}
  .din .slide:is(.active,.uscente,.trascina,.trascina-via) .bg{animation:din-respiro 26s ease-in-out infinite alternate,din-deriva 14s ease-in-out -3.5s infinite alternate}
  .din .slide:nth-child(2):is(.active,.uscente,.trascina,.trascina-via) .bg{animation-direction:alternate,alternate-reverse}
}
@media (prefers-reduced-motion:reduce){.din .slide .bg,.din img.hero-kb{animation:none!important}}
html.ax.din .slide .bg,html.ax.din img.hero-kb{animation:none!important}


@media (max-width:680px){.din #ck-banner{bottom:var(--fascia-h,0px)}}



@media (max-width:880px),(max-aspect-ratio:5/4){
  .din .slide .bg.gallery-bg,.din img.hero-kb[src$="portrait-room-velina.jpg"]{filter:sepia(.09)}
  
  .din .slide .bg.portrait{filter:saturate(.8)}
}


.din-giu{position:absolute;left:var(--pad);bottom:30px;z-index:6;display:flex;align-items:center;gap:16px;color:#fff;text-decoration:none;opacity:.78;transition:opacity .3s}
.din-giu b{font-family:var(--body);font-weight:400;font-size:.66rem;letter-spacing:.34em;text-transform:uppercase;line-height:1}
.din-giu span{display:block;width:48px;height:1px;background:currentColor}
.din-giu:hover{opacity:1}
@media (max-width:880px),(max-aspect-ratio:5/4){.din-giu{display:none}}