*{margin:0;padding:0;box-sizing:border-box;font-family:"Segoe UI",sans-serif;}

body{
  position:relative;min-height:100vh;
  color:var(--font-color,white);
  display:flex;flex-direction:column;
}

/* Background layer (MAIN image) */
.feature{
  position:fixed;inset:0;z-index:0;
  background:url('vs_bg.png') no-repeat center/cover;
  /* JS controls: background-size + filter (blur/others) */
}
.feature::after{
  content:"";position:absolute;inset:0;
  background:var(--blur-base,rgba(0,0,0,1));
  opacity:var(--blur-a,0.4);
  pointer-events:none;
}

/* Hero */
.welcome{
  flex-grow:1;text-align:center;padding:100px 20px;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  position:relative;z-index:2;
}
.city-logo{width:170px;margin-bottom:10px;}
.welcome h2{font-size:42px;margin-bottom:10px;font-family:"Times New Roman",serif;color:var(--font-color);}
.welcome h1{
  font-size:100px;font-family:"Times New Roman",serif;font-weight:bold;
  background:var(--gameschedgo-gradient);
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;
}
.welcome p{margin-top:10px;font-size:32px;letter-spacing:1px;font-family:"Times New Roman",serif;color:var(--font-color);}

/* CMS section */
.content{
  position:relative;z-index:2;width:min(960px,92%);
  margin:0 auto;padding-top:5vh;padding-bottom:10vh;
}
.headline h2{font-size:clamp(28px,4vw,40px);margin-bottom:12px;font-family:"Times New Roman",serif;font-weight:bold;color:var(--font-color);}
.headline p{font-size:clamp(16px,2.1vw,20px);line-height:1.7;margin:0 0 1.5rem 0;font-family:"Times New Roman",serif;color:var(--font-color);text-align:justify;}

/* CMS images strip */
.cms-images{
  display:flex;gap:42px;align-items:flex-end;justify-content:center;
  flex-wrap:wrap;margin:8px 0 0 0;padding:6px 0;
}
.cms-images figure{
  margin:0;opacity:0;transform:translateX(120px);
  transition:transform .8s cubic-bezier(.2,.7,.1,1), opacity .6s ease;
}
.cms-images figure.in-view{opacity:1;transform:translateX(0);}
.cms-images img{
  display:block;height:400px;width:auto;object-fit:cover;
  border:3px solid rgba(255,255,255,.8);border-radius:14px;
  box-shadow:0 8px 30px rgba(0,0,0,.35);background:#0e0e0e;
}

/* Zoom + brighten on hover */
.cms-images img:hover {
  transform: scale(1.05);
  filter: brightness(1.15);
  cursor: pointer;
}


/* Spacer—fixed (page height no longer follows background) */
.spacer{width:100%;height:40px;}

/* Logo hover */
.animated-logo span{display:inline-block;font-size:120px;font-weight:700;background:var(--gameschedgo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;color:transparent;transition:transform .3s ease,color .3s ease;cursor:default;}
.animated-logo span:hover{transform:translateX(8px) scale(1.2);color:var(--font-color);}

/* Footer */
#footer-container{position:relative;z-index:2;margin-top:auto;}
