/* ========== FONTS ========== */
@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&display=swap');

/* ========== GLOBAL ========== */
:root{
  --overlay: rgba(0,0,0,0.55);
  --accent-gradient: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:#000;
  color:#fff;
  font-family:'Orbitron',sans-serif;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ===== background video (fixed) ===== */
#bg-video{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  object-fit:cover;
  z-index:-2;
  filter:brightness(0.45) saturate(1.05);
}

/* ===== splash ===== */
#splash{
  position:fixed;
  inset:0;
  display:flex;
  justify-content:center;
  align-items:center;
  background:rgba(0,0,0,0.9); /* dark overlay while splash */
  z-index:10010;
  transition:opacity .8s ease;
}
.splash-text{
  font-size:56px;
  font-weight:700;
  background:var(--accent-gradient);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rgbText 5s linear infinite;
  text-align:center;
  padding:0 20px;
}

/* ===== NAVBAR ===== */
.navbar{
  position:fixed;
  top:0;left:0;right:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 40px;
  z-index:1000;
  background:rgba(0,0,0,0.6);
  backdrop-filter:blur(6px);
  border-bottom:1px solid rgba(255,255,255,0.06);
}
.logo{display:flex;align-items:center;gap:12px;font-weight:700}
.logo-img{height:24px}
.nav-links{display:flex;gap:28px;list-style:none;margin:0;padding:0}
.nav-links a{color:#fff;text-decoration:none;font-weight:600;transition:all .25s ease}
.nav-links a:hover{color:#00ffcc;transform:translateY(-3px)}
/* active */
.nav-links a.active{
  font-weight:800;
  background:var(--accent-gradient);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rgbText 5s linear infinite;
}

/* hamburger */
.hamburger{display:none;cursor:pointer;flex-direction:column;gap:6px}
.hamburger span{width:28px;height:3px;background:#fff;border-radius:2px;display:block;transition:all .3s}
.hamburger.active span:nth-child(1){transform:rotate(45deg) translate(5px,5px)}
.hamburger.active span:nth-child(2){opacity:0}
.hamburger.active span:nth-child(3){transform:rotate(-45deg) translate(6px,-6px)}

/* ===== SECTIONS (overlay + glass) ===== */
.section{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:120px 5vw;
  color:whitesmoke;
  background:var(--overlay);
  backdrop-filter:blur(6px);
  border-radius:12px;
  margin:48px auto;
  width:calc(100% - 4vw);
  max-width:1300px;
  position:relative;
  opacity:0; transform:translateY(40px);
  transition:opacity 1s ease, transform 1s ease;
}

/* when visible (via JS) */
.section.visible{opacity:1;transform:none}

/* section titles (RGB) */
.section-title{
  font-size:56px;
  margin:0 0 28px 0;
  background:var(--accent-gradient);
  background-size:300% 300%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:rgbPulse 3s ease-in-out infinite, rgbText 5s linear infinite;
}

/* HOME special */
#home .section-title{font-size:64px;margin-top:10vh}
.section-content-home1{max-width:1100px;font-size:20px;line-height:1.6}

/* DETAILS */
#details{height:auto;min-height:75vh;padding:80px 5vw}
.details-top,.details-bot{max-width:1100px;margin:12px 0;font-size:20px;line-height:1.6}

/* SPONSORS */
#sponsors{padding:80px 5vw}
.sponsors-text{max-width:900px;color:#ddd;margin-bottom:36px}
.sponsors-logos{display:flex;gap:48px;flex-wrap:wrap;justify-content:center;align-items:center}
.sponsors-logos img{width:160px;transition:transform .25s;filter:drop-shadow(0 0 8px rgba(255,255,255,0.08))}
.sponsors-logos img:hover{transform:scale(1.08)}

/* EQUIPMENT */
#equipment {
  background: #000;
  padding: 100px 5vw;
  text-align: center;
}

#equipment .section-title {
  margin-bottom: 60px;
  font-size: 48px;
  color: #00ffcc;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
}

.equipment-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 60px;
  flex-wrap: wrap;
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 1s ease forwards;
  animation-delay: 0.3s;
}

.equipment-image img {
  width: 560px;
  max-width: 90%;
  border-radius: 14px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6);
  transition: transform 0.4s ease, box-shadow 0.4s ease;
}

.equipment-image img:hover {
  transform: scale(1.05);
  box-shadow: 0 0 40px rgba(0, 255, 200, 0.4);
}

.equipment-text {
  max-width: 520px;
  text-align: left;
  color: #ddd;
  font-size: 20px;
  line-height: 1.6;
}

/* Fade-in animace */
@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(30px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Responsivita */
@media (max-width: 900px) {
  .equipment-wrapper {
    flex-direction: column;
    text-align: center;
  }

  .equipment-text {
    text-align: center;
  }

  .equipment-image img {
    width: 100%;
    max-width: 500px;
  }
}



/* VISUALS */
#visuals{padding:80px 5vw}
.visuals-gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;justify-items:center;align-items:center}
.image-wrapper{position:relative;border-radius:12px;overflow:hidden}
.image-wrapper img{display:block;width:100%;max-width:250px;border-radius:12px;transition:transform .35s ease,box-shadow .25s}
.image-wrapper:hover img{transform:scale(1.05)}
/* RGB border trick */
.image-wrapper::before{
  content:"";position:absolute;inset:0;padding:3px;border-radius:12px;
  background:var(--accent-gradient);background-size:400% 400%;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity:0;transition:opacity .35s ease;
}
.image-wrapper:hover::before{opacity:1;animation:rgbBorderFlow 4s linear infinite}

/* CONTACT */
#contact{padding:80px 5vw}
.contact-text{max-width:760px;font-size:18px;color:#ddd;line-height:1.7}

/* ===== ANIMATIONS ===== */
@keyframes rgbText{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes rgbBorderFlow{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes rgbPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.35)}}

/* IMAGE appear animation handled by JS by toggling .visible on images */

/* ===== RESPONSIVE ===== */
/* mobile */
@media (max-width:600px){
  .navbar{padding:12px 18px}
  .nav-links{display:none}
  .hamburger{display:flex}
  .logo{font-size:18px}
  .section{padding:80px 4vw;margin:24px auto}
  .section-title{font-size:34px}
  .visuals-gallery{grid-template-columns:repeat(2,1fr)}
  .image-wrapper img{max-width:140px}
  .equipment-image img{width:90%}
  .sponsors-logos img{width:120px}
  .contact-text{font-size:15px}
  .equipment-wrapper {
  flex-direction: column;
  text-align: center;}
  .equipment-text {
  text-align: center;}
  .equipment-image img {
  width: 100%;
  max-width: 500px;}
}

/* tablet */
@media (min-width:601px) and (max-width:1024px){
  .nav-links{gap:18px}
  .section-title{font-size:44px}
  .visuals-gallery{grid-template-columns:repeat(3,1fr)}
  .image-wrapper img{max-width:180px}
  .equipment-image img{width:70%}
}

/* large screens */
@media (min-width:1600px){
  .section-title{font-size:80px}
  .image-wrapper img{max-width:320px}
  .equipment-image img{width:900px}
}

/* small tweak when mobile menu active: show nav */
.nav-links.active{display:flex;flex-direction:column;position:absolute;top:72px;right:0;width:100%;background:rgba(0,0,0,0.92);padding:18px 0;border-top:1px solid rgba(255,255,255,0.05)}