/* Atlante v3 — percorso cinematografico tra i cinque paesi */
.atlas{
  --atlas-night:#0b191b;--atlas-cream:#f2ede4;--atlas-gold:#d9bd83;
  padding-block:clamp(92px,10vw,150px);background:var(--atlas-night);color:var(--atlas-cream);
  border-top:0;isolation:isolate
}
.atlas::before{
  content:"05";top:-.12em;right:-.02em;color:rgba(255,255,255,.025);
  font-size:clamp(220px,37vw,590px);letter-spacing:-.1em
}
.atlas-intro{align-items:end;margin-bottom:clamp(46px,6vw,76px)}
.atlas-intro h2{max-width:10ch;color:var(--atlas-cream);font-size:clamp(58px,7.8vw,120px)}
.atlas-intro .serif-i{color:var(--atlas-gold)}
.atlas-intro .eyebrow{color:rgba(242,237,228,.68)}
.atlas-intro .lead{color:rgba(242,237,228,.7)}
.atlas-badges{border-color:rgba(255,255,255,.17)}
.atlas-badges span{color:rgba(242,237,228,.68);border-color:rgba(255,255,255,.17);font-size:10px}
.atlas-stage{position:relative;display:block;min-height:760px}
.atlas-view{
  position:relative;display:block;min-height:760px;border:1px solid rgba(255,255,255,.17);
  border-radius:26px;overflow:hidden;background:#172725;box-shadow:0 36px 90px rgba(0,0,0,.28)
}
.atlas-media{position:absolute;inset:0;min-height:0;background:#172725}
.atlas-photo{transform:scale(1.08);transition:opacity 1s var(--ease),transform 2.2s var(--ease),visibility 1s}
.atlas-photo.on{transform:scale(1)}
.atlas-photo{--atlas-focus:50% 50%}
.atlas-photo[data-atlas-img="molveno"]{--atlas-focus:50% 54%}
.atlas-photo[data-atlas-img="andalo"]{--atlas-focus:48% 61%}
.atlas-photo[data-atlas-img="cavedago"]{--atlas-focus:50% 48%}
.atlas-photo[data-atlas-img="spormaggiore"]{--atlas-focus:47% 58%}
.atlas-photo[data-atlas-img="fai"]{--atlas-focus:49% 48%}
.atlas-photo img{object-position:var(--atlas-focus);filter:saturate(.9) contrast(1.04);transform:scale(1.04) translate(calc(var(--atlas-x,0) * -11px),calc(var(--atlas-y,0) * -11px))}
.atlas-media::after{
  background:linear-gradient(90deg,rgba(6,15,17,.78) 0%,rgba(6,15,17,.2) 43%,rgba(6,15,17,.12) 100%),
             linear-gradient(0deg,rgba(6,15,17,.72) 0%,transparent 55%)
}
.atlas-route{
  position:absolute;z-index:6;left:24px;top:24px;bottom:24px;width:250px;
  display:flex;flex-direction:column;overflow:hidden;padding:8px;
  border:1px solid rgba(255,255,255,.2);border-radius:19px;
  background:rgba(8,21,22,.56);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px)
}
.atlas-route::after{display:none}
.atlas-tab{
  flex:1;grid-template-columns:30px 1fr;align-items:center;padding:15px 14px;border:0;border-bottom:1px solid rgba(255,255,255,.11);
  border-radius:13px;color:rgba(255,255,255,.64);transition:background .45s var(--ease),color .45s var(--ease),transform .45s var(--ease)
}
.atlas-tab:last-child{border-bottom:0}.atlas-tab>i{color:var(--atlas-gold);font-size:10px}
.atlas-tab b{font-size:clamp(21px,1.7vw,27px)}
.atlas-tab small{font-size:9px;color:inherit}
.atlas-tab:hover{background:rgba(255,255,255,.08);color:#fff;transform:translateX(3px)}
.atlas-tab[aria-selected="true"]{background:var(--atlas-cream);color:#172321;transform:none;box-shadow:0 10px 32px rgba(0,0,0,.18)}
.atlas-tab[aria-selected="true"]>i{color:#8a6535}
.atlas-copy{
  position:absolute;z-index:5;right:24px;bottom:24px;width:min(570px,calc(100% - 322px));min-height:470px;
  display:grid;overflow:hidden;border:1px solid rgba(255,255,255,.46);border-radius:20px;
  background:rgba(242,237,228,.92);color:#202b25;box-shadow:0 22px 60px rgba(0,0,0,.2);
  backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px)
}
.atlas-copy::before{right:-110px;top:-110px;border-color:rgba(122,90,50,.16)}
.atlas-panel{padding:clamp(34px,4vw,60px);transform:translateY(28px) scale(.985);transition:opacity .55s var(--ease),transform .8s var(--ease),visibility .55s}
.atlas-panel.on{transform:none}
.atlas-place{color:#806139;border-color:rgba(32,43,37,.16)}
.atlas-panel h3{color:#202b25;font-size:clamp(39px,4vw,61px)}
.atlas-panel>p{color:rgba(32,43,37,.72);font-size:16px}
.atlas-tags span{border-color:rgba(122,90,50,.22);background:rgba(122,90,50,.06);color:#775831}
.atlas-points{border-color:rgba(32,43,37,.14)}
.atlas-points li{display:block;position:relative;padding-left:26px;color:rgba(32,43,37,.72);border-color:rgba(32,43,37,.14)}
.atlas-points li::before{position:absolute;left:0;top:11px}
.atlas-points li b{color:#202b25;font-weight:650}
.atlas-points li::before,.atlas-link{color:#775831}
.atlas-link{border-color:rgba(122,90,50,.42)}
.atlas-credit{
  position:absolute;z-index:4;left:294px;bottom:25px;margin:0;padding:7px 10px;border-radius:999px;
  background:rgba(6,15,17,.42);color:rgba(255,255,255,.72);font:500 9px/1 var(--sans);letter-spacing:.08em;
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0;transform:translateY(7px);
  transition:opacity .5s var(--ease),transform .65s var(--ease)
}
.atlas-photo.on .atlas-credit{opacity:1;transform:none}
.atlas-compass{left:auto;right:28px;top:28px;bottom:auto}
.atlas-playback{
  position:absolute;z-index:7;right:28px;top:82px;display:flex;align-items:center;gap:11px;
  color:#fff;font:500 10px/1 var(--sans);letter-spacing:.14em;text-transform:uppercase
}
.atlas-playback button{
  width:37px;height:37px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.38);border-radius:50%;
  background:rgba(7,17,19,.3);color:#fff;font:500 12px/1 var(--sans);cursor:pointer;backdrop-filter:blur(10px)
}
.atlas-playback button:hover,.atlas-playback button:focus-visible{background:rgba(255,255,255,.16);outline:none}
.atlas-progress{width:74px;height:2px;overflow:hidden;background:rgba(255,255,255,.28)}
.atlas-progress i{display:block;width:100%;height:100%;background:var(--atlas-gold);transform:scaleX(0);transform-origin:left}
.atlas[data-playing="true"] .atlas-progress i{animation:atlasClock 7s linear both}
@keyframes atlasClock{to{transform:scaleX(1)}}
.atlas-count{min-width:40px}
.atlas.seen .atlas-route{animation:atlasSlide .9s var(--ease) both .08s}
.atlas.seen .atlas-view{animation:atlasReveal 1s var(--ease) both}
@keyframes atlasSlide{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes atlasReveal{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}

@media(max-width:1000px){
  .atlas-stage{min-height:0}.atlas-route{position:relative;left:auto;top:auto;bottom:auto;width:auto;height:auto;margin-bottom:14px;flex-direction:row;overflow-x:auto;border-radius:16px}
  .atlas-tab{min-width:190px;min-height:88px;border-bottom:0;border-right:1px solid rgba(255,255,255,.11)}
  .atlas-view{min-height:820px}.atlas-copy{left:24px;right:24px;width:auto;min-height:435px}.atlas-compass{top:24px}.atlas-playback{top:78px}
  .atlas-credit{left:24px;bottom:auto;top:24px}
}
@media(max-width:800px){
  .atlas{padding-block:82px 96px}.atlas-intro{gap:26px;margin-bottom:42px}.atlas-intro h2{max-width:9ch}
  .atlas-stage{padding-inline:0}.atlas-route{margin-inline:0;padding:6px}.atlas-view{min-height:900px;border-radius:20px}
  .atlas-media{height:54svh;min-height:400px;bottom:auto}.atlas-media::after{background:linear-gradient(0deg,rgba(6,15,17,.65),transparent 60%)}
  .atlas-copy{top:calc(54svh - 30px);bottom:18px;min-height:0;border-radius:18px}.atlas-panel{align-self:start;padding:34px 25px 40px}
  .atlas-compass{top:20px;right:20px}.atlas-playback{top:75px;right:20px}.atlas-panel h3{font-size:42px}.atlas-credit{left:20px;top:auto;bottom:20px}
}
@media(max-width:520px){
  .atlas-intro h2{font-size:clamp(54px,16vw,74px)}.atlas-badges span{font-size:9px;padding:11px 10px}
  .atlas-tab{min-width:164px;min-height:80px;padding:12px}.atlas-tab b{font-size:22px}.atlas-tab small{font-size:8px}
  .atlas-view{min-height:930px}.atlas-copy{left:12px;right:12px;bottom:12px}.atlas-panel>p{font-size:15px}
  .atlas-points li{font-size:12.5px}.atlas-playback{left:20px;right:auto}.atlas-compass{display:none}
}
@media(prefers-reduced-motion:reduce){
  .atlas.seen .atlas-route,.atlas.seen .atlas-view,.atlas[data-playing="true"] .atlas-progress i{animation:none!important}
}

/* Keep content in normal flow: translations and text zoom must never crop it. */
.atlas-view{display:grid;grid-template-columns:minmax(280px,1fr) minmax(360px,570px);align-items:end;padding:150px 24px 24px 294px;min-height:820px}
.atlas-copy{position:relative;inset:auto;width:auto;min-width:0;min-height:0;grid-column:2}
.atlas-panel{align-self:start;min-width:0}
@media(max-width:1200px){
  .atlas-view{grid-template-columns:minmax(0,1fr);padding:300px 24px 24px 294px}
  .atlas-copy{grid-column:1}
}
@media(max-width:1000px){
  .atlas-view{display:block;padding:330px 24px 24px;min-height:0}
  .atlas-copy{position:relative;inset:auto;width:auto;min-height:0}
  .atlas-route{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));overflow:visible}
  .atlas-tab{min-width:0;grid-template-columns:1fr;padding:14px 10px}
  .atlas-tab b{font-size:22px}.atlas-tab small{font-size:10px}
}
@media(max-width:800px){
  .atlas-view{padding:300px 12px 12px}
  .atlas-media{height:360px;min-height:0}
  .atlas-copy{inset:auto}
  .atlas-panel{padding:30px 24px}
  .atlas-route{display:flex;overflow-x:auto}
  .atlas-tab{flex:0 0 160px}
  .atlas-points li{font-size:14px}
}