/* Anti-flicker: prima paint nascosta finché JS non rimuove .preload */
html.preload .content,
html.preload .bg-marquee__inner,
html.preload #custom-scrollbar{
  opacity: 0 !important;
  visibility: hidden !important;
}

/* Evita micro-scatti durante il preload (blocca transizioni) */
html.preload *{
  transition: none !important;
}

html, body {width:100%; height:100%; margin:0; padding:0; font-family:"Antonio", sans-serif; color:#fff;  background-color: var(--bg, #0c1f8f); }

/* Stato scuro dopo 50% scroll */
body.is-dark{
  background-color: #1d1d1b !important;
}
a {color:inherit; text-decoration:none; transition:.4s}
a:hover {color:#1d1d1b}
.filter-to-white {filter: brightness(0) invert(1);}

.headings {  width: 100%;color: #fff; text-align: center; font-size: 20px; }
.headings h1 { font-size: 18px; font-weight: 600; margin: 0 0 4px; text-transform: uppercase;}
.headings h2 { font-size: 16px; font-weight: 100; margin: 0}
@media (max-width: 700px) {
.headings h1 { font-size: 18px;}
.headings h2 { font-size: 16px;}
}
.cookie-btn-wrapper{ position: fixed; right:20px; bottom: 15px; color: #fff; filter: invert(1);z-index: 999}
.cookie-btn-wrapper a{ font-size: 12px; color: #fff;  }

.bg-marquee {position:fixed; inset:0; z-index:0; display:flex; align-items:center; overflow:hidden; pointer-events:none; -webkit-mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%); mask-image:linear-gradient(90deg, transparent 0%, black 6%, black 94%, transparent 100%);}
.bg-marquee__inner {display:flex; width:calc(var(--group-width, 100vw) * 2); align-items:center; animation-name:marquee; animation-timing-function:linear; animation-iteration-count:infinite; will-change:transform;}
.bg-marquee__group {display:flex; align-items:center; justify-content:center; min-width:var(--group-width, 100vw); padding:0 4vw; box-sizing:border-box;}
.bg-marquee__item {display:inline-block; white-space:nowrap; font-weight:700; text-transform:uppercase; letter-spacing:0.06em; color:rgba(0, 0, 0, 0.06); font-size:100vh; line-height:0.85; -webkit-font-smoothing:antialiased; pointer-events:none; user-select:none; opacity:0.95; mix-blend-mode:normal;}

@keyframes marquee {
from {transform:translateX(0);}
to {transform:translateX(-50%);}
}

@media (prefers-reduced-motion: reduce) {
.bg-marquee__inner {animation:none !important; transform:translateX(0);}
.bg-marquee__item {transition:none;}
}

@media (max-width: 600px) {
.bg-marquee__item {font-size:min(120vh, 140vw); letter-spacing:0.04em;}
}

.box {position: relative;display:flex; align-items:center; justify-content:center; width:100%; height: 100%;  z-index: 1;  }
.content { text-align:center;}
.logo {max-width:100%;  width: 250px;   /* uguale al tuo attributo width */
  height: 250px;  /* uguale al tuo attributo height */
  object-fit: contain; display:block; margin:0 auto 6px; opacity:0; transform:translateY(8px) scale(.995); transition:opacity 1.7s ease, transform 1.7s ease; transform-origin: center center;
  will-change: transform;}

/* hover: ingrandisce */
.content.is-visible .logo:hover{
  transform: translateY(0) scale(1.26);
  transition: transform 180ms ease;
}

/* Durante il bounce, blocca il transform per evitare il frame di "salto" */
.content.is-visible .logo.is-bounce{
  /* NON mettere transition:none */
  transition-property: opacity; /* evita che 'transform' venga transizionato mentre anima */
  animation: logo-bounce 520ms cubic-bezier(.22,.61,.36,1) both;
  transform: translateY(0) scale(1.26);
}

/* bounce al mouse out */
@keyframes logo-bounce{
  0%   { transform: translateY(0) scale(1.26); }
  55%  { transform: translateY(0) scale(0.98); }
  82%  { transform: translateY(0) scale(1.06); }  /* più “smooth” e visibile */
  100% { transform: translateY(0) scale(1.00); }
}
 

 .info{
  margin-top:20px;
  opacity:0;
  color: #fff;
  transform:translateY(8px);
  transition:opacity 1.7s ease, transform 1.7s ease;
}
 .slogan{
   font-family: "Impact", sans-serif;
     font-size: 30px; 
  margin-top:20px;
  opacity:0;
  color: #fff;
  transform:translateY(8px);
  transition:opacity 1.7s ease, transform 1.7s ease;
}

.slogan .colore{ color: #e84e1b;}

.content.is-visible .logo{
  opacity: 1;
  transform: translateY(0) scale(1);
  transition-delay: 0s;
}
/* NON mostrare .info quando parte la sequenza */
.content.is-visible .info{
  opacity: 0;
  transform: translateY(8px);
  transition-delay: 0s;
}

/* Mostra .info (COMING SOON) solo alla fine */
.content.is-info-visible .info{
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}
/* NON mostrare .info quando parte la sequenza */
.content.is-visible .slogan{
  opacity: 0;
  transform: translateY(8px);
  transition-delay: 0s;
}

/* Mostra .info (COMING SOON) solo alla fine */
.content.is-info-visible .slogan{
  opacity: 1;
  transform: none;
  transition-delay: 0s;
}

.contatti { position: fixed; top: 30px; right: 30px; display: flex; align-items: center; justify-content: center;  text-align:center;z-index: 2; grid-gap: 5px;}
.contatti a { transform: scale(1); transition: .4s all;}
.contatti a:hover { transform: scale(1.4); transition: .4s all;}
    

/* --- Headings: devono apparire per ultimi --- */
.headings{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}
.content.is-headings-visible .headings{
  opacity: 1;
  transform: none;
}

/* --- Sponsor: MAIN poi PARTNER --- */
.sponsor .main,
.sponsor .partner .p-title,
.sponsor .partner .p-inner{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

/* Step: mostra MAIN */
.content.is-main-sponsor-visible .sponsor .main{
  opacity: 1;
  transform: none;
}

/* Step: mostra PARTNER title + griglia */
.content.is-partner-visible .sponsor .partner .p-title,
.content.is-partner-visible .sponsor .partner .p-inner{
  opacity: 1;
  transform: none;
}

/* (opzionale) stagger dei loghi partner */
.content.is-partner-visible .sponsor .partner .p-inner img{
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 900ms ease, transform 900ms ease;
}
.content.is-partner-visible .sponsor .partner .p-inner img:nth-child(1){ transition-delay: 0ms; }
.content.is-partner-visible .sponsor .partner .p-inner img:nth-child(2){ transition-delay: 120ms; }
.content.is-partner-visible .sponsor .partner .p-inner img:nth-child(3){ transition-delay: 240ms; }
.content.is-partner-visible .sponsor .partner .p-inner img:nth-child(4){ transition-delay: 360ms; }
.content.is-partner-visible .sponsor .partner .p-inner img{
  opacity: 1;
  transform: none;
}

.sponsor { display: flex;} 
.sponsor .main {position: relative; }
.sponsor .main .m-title { }
.sponsor .partner {text-align: left;display: flex; align-items: center;}
.sponsor .partner .p-wrapper { }
.sponsor .partner .p-title {padding-left: 20px; font-size: 12px;}
.sponsor .partner .p-inner {width: 90%; margin: 0 auto;}
.sponsor .partner .p-inner {display: flex; align-items: center; justify-content: center; text-align:center; max-width: 600px;}
.sponsor .partner .p-inner img { flex-grow: 1; height:auto; width: calc(100% * (1/4) - 10px - 1px); }

.main img,.partner img{  
  transition: transform 180ms ease;
}
.main img:hover,.sponsor .partner .p-inner img:hover{
  transform: translateY(0) scale(1.26)!important;
  transition: transform 180ms ease!important;
}

/* già esistente (ok) */
@media (max-width: 700px) {
  .box { height: auto; padding: 100px 0 400px 0; }
  .sponsor { display: inline-block; width: 90%; }
  .sponsor .partner { position: relative; text-align: center; }
  .sponsor .partner .p-title { padding-left: inherit; font-size: 12px; }
  .sponsor .partner .p-inner { display: inline-block; }
  .sponsor .partner .p-inner img { width: calc(100% * (1/2) - 10px - 1px); }
}

/* NEW: mobile landscape (schermi "bassi") anche se la width supera 700px */
@media (orientation: landscape) and (max-height: 500px) {
  .box { height: auto; padding: 100px 0; }
  .sponsor { display: inline-block; width: 90%; }
  .sponsor .partner { text-align: center; }
  .sponsor .partner .p-title { padding-left: inherit; font-size: 12px; }
  .sponsor .partner .p-inner { display: inline-block; }
  .sponsor .partner .p-inner img { width: calc(100% * (1/2) - 10px - 1px); }
}

@media (prefers-reduced-motion: reduce) {
.logo, .info {transition:none!important; opacity:1!important; transform:none!important}
}