@font-face{font-family:"Archivo";src:url("archivo-var-latin.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
:root{
  --viola:#470085;--giallo:#FFF271;--bianco:#FFFFFF;--crema:#FFFDF2;--verde:#00A138;
  --filo:1.5px;--margine:20px;
  --colonna:clamp(280px,min(100vw - 40px,52vh),460px);
}
@media (min-width:960px){:root{--margine:48px}}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--viola);color:var(--crema);font-family:"Archivo",system-ui,sans-serif;font-size:17px;line-height:1.5;font-variant-numeric:tabular-nums}
p,h2,h3,dl,dd{margin:0}
a{color:inherit}
:focus-visible{outline:3px solid var(--giallo);outline-offset:3px}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.testata{padding:0 0 clamp(12px,3vh,40px);text-align:center}
.testata svg{display:block;width:max(110px,min(360px,56vw,20vh));height:auto;margin:0 auto;color:var(--giallo)}
.testata p{color:var(--giallo);text-shadow:0 1px 12px rgb(20 30 90 / .6);margin-top:clamp(4px,1vh,10px);font-size:clamp(12px,1.6vh,14px);font-weight:700;letter-spacing:.14em;text-transform:uppercase}
.cielo{position:relative;isolation:isolate;overflow:hidden;display:flex;flex-direction:column;min-height:100vh;min-height:100svh;padding:clamp(16px,3.5vh,32px) var(--margine) 0;background:#3280B9;text-align:center}
.cielo::before,.cielo::after{content:"";position:absolute;inset:0;pointer-events:none}
.cielo::before{z-index:-2;inset:-12px auto -12px -24px;aspect-ratio:2048/288;background:url("cielo-giro-2048.webp") 0 0/auto 100% repeat-x}
.cielo::after{z-index:-1;background:linear-gradient(180deg,rgb(71 0 133 / 0) 60%,rgb(71 0 133 / .4) 78%,rgb(71 0 133 / .85) 92%,var(--viola) 100%)}
@media (min-height:600px){.cielo::before{background-image:url("cielo-giro-3072.webp")}}
@media (min-height:1000px){.cielo::before{background-image:url("cielo-giro-4096.webp")}}
@media (min-aspect-ratio:3/1){.cielo::before{aspect-ratio:6144/576}}
.testata,.cielo main{position:relative;z-index:1}
.cielo main{flex:1;display:flex;flex-direction:column;justify-content:space-evenly}
.dentro-cielo{width:100%;max-width:1240px;margin:0 auto;display:flex;flex-direction:column;align-items:center}
h1{margin:0;color:var(--giallo);text-shadow:0 2px 24px rgb(20 30 90 / .35);font-weight:800;font-stretch:66%;text-transform:uppercase;line-height:.92;font-size:max(40px,min(13vw,8vh,168px));letter-spacing:-.005em}
.attacco{max-width:24em;color:var(--giallo);text-shadow:0 1px 14px rgb(20 30 90 / .55);margin-top:clamp(10px,2.4vh,24px);font-size:max(17px,min(5vw,2.5vh,26px));font-weight:750;line-height:1.25;text-wrap:balance}
@media (min-width:720px){.attacco{max-width:calc(var(--colonna) * 1.5)}}
.altare{position:relative;display:flex;justify-content:center;margin-top:clamp(20px,4vh,48px)}
.altare::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(300%,150vw,90vh);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgb(255 242 113 / .75) 0%,rgb(255 242 113 / .32) 22%,rgb(255 242 113 / .1) 42%,rgb(255 242 113 / 0) 64%);pointer-events:none}
.santino{position:relative;width:var(--colonna);border:var(--filo) solid var(--viola);border-radius:999px 999px 0 0;padding:10px;background:var(--viola);color:var(--giallo);overflow:hidden;box-shadow:0 18px 48px rgb(20 30 90 / .35)}
.santino::after{content:"";position:absolute;inset:6px;border:1px solid var(--giallo);border-radius:999px 999px 0 0;pointer-events:none}
.santino .dentro{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:6px;padding:clamp(22px,4.4vh,48px) 12px clamp(10px,1.8vh,18px);text-decoration:none}
.santino .via,.santino .luogo{white-space:nowrap;font-size:max(14px,min(4.6vw,2.1vh,20px));font-weight:800;font-stretch:72%;text-transform:uppercase;line-height:1;letter-spacing:.04em}
.santino .civico{font-weight:800;font-stretch:66%;font-size:max(64px,min(24vw,12vh,136px));line-height:.86}
.santino .dentro:hover .civico{color:var(--crema)}
.santino .orari-arco{position:relative;z-index:1;display:grid;grid-template-columns:auto auto;justify-content:center;align-items:baseline;gap:1px 6px;margin:0 10px;padding:clamp(10px,1.8vh,16px) 0 clamp(12px,2vh,18px);border-top:1px dashed rgb(255 242 113 / .7);color:var(--giallo);font-weight:800;font-stretch:72%;text-transform:uppercase;font-size:clamp(14px,1.9vh,17px);line-height:1.3;letter-spacing:.02em}
.santino .orari-arco dt{text-align:right}
.santino .orari-arco dd{text-align:left;white-space:nowrap}
.santino .orari-arco small{font-size:.66em;letter-spacing:.04em}
.strade{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:var(--colonna);margin:12px auto clamp(24px,4.4vh,48px)}
.strade .pieno{grid-column:1/-1}
.bottone{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:10px 16px;border-radius:999px;font-weight:800;font-stretch:80%;font-size:clamp(15px,1.9vh,17px);letter-spacing:.04em;text-transform:uppercase;text-decoration:none;transition:transform .25s cubic-bezier(.2,.7,.2,1),background-color .25s,color .25s}
.bottone svg{width:20px;height:20px;flex:none}
.bottone.pieno{background:var(--giallo);color:var(--viola);box-shadow:0 6px 24px rgb(20 30 90 / .3)}
.bottone.pieno:hover{background:var(--crema);transform:translateY(-2px)}
.bottone.filo{border:2px solid var(--giallo);color:var(--giallo);background:rgb(71 0 133 / .35)}
.bottone.filo:hover{background:var(--giallo);color:var(--viola);transform:translateY(-2px)}
.banda{width:100%;max-width:1240px;margin:0 auto;padding:clamp(48px,9vh,112px) var(--margine) clamp(40px,7vh,88px);text-align:center}
.banda .titoletto{color:var(--crema);font-size:clamp(13px,1.6vh,15px);font-weight:750;letter-spacing:.14em;text-transform:uppercase}
.banda{max-width:none;padding-inline:0;overflow:hidden}
.banda .titoletto,.banda .portare{padding-inline:var(--margine)}
.nastro{display:flex;width:max-content;margin-top:clamp(12px,2.4vh,24px)}
.compriamo{list-style:none;margin:0;padding:0;display:flex;align-items:center;color:var(--giallo);font-weight:850;font-stretch:62%;text-transform:uppercase;font-size:clamp(64px,11vw,160px);line-height:.95;white-space:nowrap}
.compriamo li::after{content:"";display:inline-block;width:.26em;height:.36em;margin:0 .4em;border-radius:999px 999px 0 0;background:var(--crema);vertical-align:.12em}
@media (prefers-reduced-motion:no-preference){
  .nastro{animation:nastro 36s linear infinite}
  .banda:hover .nastro{animation-play-state:paused}
  @keyframes nastro{to{transform:translate3d(-50%,0,0)}}
}
@media (prefers-reduced-motion:reduce){
  .nastro{width:auto;justify-content:center}
  .nastro .copia{display:none}
  .compriamo{flex-wrap:wrap;justify-content:center;white-space:normal;font-size:clamp(48px,9vw,120px)}
  .compriamo li:last-child::after{display:none}
}
.banda .portare{max-width:34em;margin:clamp(24px,4.4vh,48px) auto 0;font-size:clamp(17px,2vw,21px);line-height:1.45;text-wrap:balance}
.banda .portare strong{color:var(--giallo)}
.ante{display:none}
@media (max-height:499px){.cielo{min-height:0}.cielo main{padding-block:16px}}
@media (max-height:740px){
  .testata{padding-bottom:8px}
  .testata svg{width:max(110px,min(280px,52vw,16vh))}
  h1{font-size:max(34px,min(12vw,7vh,128px))}
  .attacco{margin-top:8px;font-size:max(15px,min(4.6vw,2.4vh,26px))}
  .altare{margin-top:16px}
  .strade{margin:10px auto 20px}
  .bottone{min-height:48px}
}
@media (prefers-reduced-motion:no-preference){
  .ante{display:flex;position:absolute;inset:0;z-index:5;perspective:1800px;pointer-events:none;animation:via 0s linear 2.4s forwards}
  .ante span{flex:1;background:var(--viola)}
  .ante span:first-child{transform-origin:0 50%;box-shadow:inset -2px 0 0 var(--giallo),8px 0 40px rgb(255 242 113 / .5);animation:anta-sx 1.7s cubic-bezier(.7,0,.25,1) .45s forwards}
  .ante span:last-child{transform-origin:100% 50%;box-shadow:inset 2px 0 0 var(--giallo),-8px 0 40px rgb(255 242 113 / .5);animation:anta-dx 1.7s cubic-bezier(.7,0,.25,1) .45s forwards}
  @keyframes anta-sx{to{transform:rotateY(-100deg)}}
  @keyframes anta-dx{to{transform:rotateY(100deg)}}
  @keyframes via{to{visibility:hidden}}
  .cielo::before{animation:scorre 160s linear infinite;translate:calc(var(--px,0) * -16px) calc(var(--py,0) * -8px);transition:translate .8s cubic-bezier(.2,.7,.2,1);will-change:transform}
  @keyframes scorre{from{transform:translate3d(-50%,0,0)}to{transform:translate3d(0,0,0)}}
  @media (min-aspect-ratio:3/1){.cielo::before{animation-name:scorre-largo}}
  @keyframes scorre-largo{from{transform:translate3d(-33.3333%,0,0)}to{transform:translate3d(0,0,0)}}
  h1 .parola{display:inline-block;animation:sorge 1.1s cubic-bezier(.2,.8,.2,1) both;animation-delay:1.25s}
  h1 .parola+.parola{animation-delay:1.4s}
    @keyframes sorge{from{opacity:0;transform:translateY(60%) rotate(3deg);filter:blur(8px)}to{opacity:1;transform:none;filter:none}}
  .attacco{animation:sale 1s cubic-bezier(.2,.7,.2,1) 1.7s both}
  @keyframes sale{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
  .altare::before{animation:accende 2s ease-out 1.8s both,respira 6s ease-in-out 3.8s infinite alternate}
  @keyframes accende{from{opacity:0;transform:translate(-50%,-50%) scale(.6)}to{opacity:1;transform:translate(-50%,-50%)}}
  @keyframes respira{to{transform:translate(-50%,-50%) scale(1.12);opacity:.8}}
  .santino{animation:apre 1.2s cubic-bezier(.7,0,.2,1) 1.6s both}
  @keyframes apre{from{clip-path:inset(100% 0 0 0)}to{clip-path:inset(0 0 0 0)}}
  .santino::before{content:"";position:absolute;inset:0 auto 0 0;z-index:0;width:300%;background:linear-gradient(110deg,transparent 35%,rgb(255 242 113 / .22) 50%,transparent 65%);transform:translateX(-100%);animation:luce 7s ease-in-out 3s infinite}
  @keyframes luce{0%{transform:translateX(-100%)}35%,100%{transform:translateX(33.4%)}}
  .strade{animation:sale .9s cubic-bezier(.2,.7,.2,1) 2.1s both}
}
.piede{padding:24px var(--margine) 32px;border-top:1px solid rgb(255 242 113 / .25);text-align:center;font-size:14px;line-height:1.6}
.piede p+p{margin-top:12px;font-size:13px;color:rgb(255 253 242 / .8)}
.piede strong{color:var(--giallo)}
.piede .seguici a{color:var(--giallo);font-weight:750;text-underline-offset:4px}
.sprite{position:absolute}