:root {
  --black: #000000;
  --white: #ffffff;
  --blue: #5ce1e6;
}

* { margin:0; padding:0; box-sizing:border-box; }

body { font-family: 'Inter', sans-serif; background:var(--black); color:var(--white); }

/* NAV */
nav { position: fixed; width: 100%; padding:20px 40px; display:flex; justify-content:space-between; z-index:100; opacity: 0; transition: opacity 0.6s ease;}
nav a { color:var(--white); text-decoration:none; margin-left:20px; font-size:14px; opacity:0.7; }
nav a:hover { opacity:1; }

/* HERO — starts as fixed overlay via JS, so no height needed here */
.hero { width:100%; height:100vh; overflow:hidden; }
.hero video {
  position:absolute; top:50%; left:50%; width:100%; height:100%; object-fit:cover;
  transform:translate(-50%,-50%); z-index:0;
}
.hero-content {
  position:relative; z-index:1; text-align:center;
  top:50%; transform:translateY(-50%); opacity:1;
}
.hero-content h1 { font-size:5vw; font-weight:900; line-height:1; }
.hero-content span { color:var(--blue); }
.hero-content p { margin-top:20px; max-width:500px; margin-left:auto; margin-right:auto; opacity:0.7; }

.scroll-hint {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  opacity: 0.45;
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: opacity 0.3s;
}
.scroll-hint:hover { opacity: 0.9; }

.scroll-arrow-wrap {
  animation: bounce 1.4s ease-in-out infinite;
}

.scroll-arrow {
  width: 12px;
  height: 12px;
  border-right: 2px solid var(--white);
  border-bottom: 2px solid var(--white);
  transform: rotate(45deg);
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(5px); }
}


.btn {
  display:inline-block; margin-top:30px; padding:14px 30px;
  border:1px solid var(--blue); color:var(--blue); text-decoration:none;
  font-weight:700; transition:0.3s; border-radius:5px;
}
.btn:hover { background:var(--blue); color:var(--black); }

/* MAIN CONTENT — rendered in normal flow from the start, opacity handled by JS */
.main-content {
  opacity: 0;
  transform: translateY(30px);
  /* no transition here — JS sets it at the right moment */
}

/* SECTION */
.section { padding:120px 8%; }
.section h2 { font-size:2rem; margin-bottom:40px; }

/* EVENTS */
.events { display:grid; grid-template-columns:repeat(auto-fit, minmax(250px,1fr)); gap:20px; }
.event-card { border:1px solid rgba(255,255,255,0.1); padding:20px; transition:0.3s; border-radius:8px; }
.event-card:hover { border-color:var(--blue); }
.event-card h3 { margin-bottom:10px; }
.event-card p { opacity:0.6; font-size:14px; }

/* GALLERY */
.gallery { display:grid; grid-template-columns:repeat(auto-fit, minmax(200px,1fr)); gap:10px; margin-bottom:20px; }
.gallery div { position:relative; overflow:hidden; height:250px; border-radius:8px; background:#111; }
.gallery div img { width:100%; height:100%; object-fit:cover; filter:grayscale(100%); transition:transform 0.4s, filter 0.4s; }
.gallery div:hover img { filter:grayscale(0%); transform:scale(1.05); }

.btn-facebook {
  display:inline-block; padding:14px 30px; border:1px solid var(--blue);
  color:var(--blue); text-decoration:none; font-weight:700; transition:0.3s;
  border-radius:5px; margin-top:20px;
}
.btn-facebook:hover { background:var(--blue); color:var(--black); }

/* FAQ */
.faq h2 { font-size: 2rem; margin-bottom: 40px; }
.faq-item { margin-bottom: 30px; }
.faq-item h3 { font-size: 1.2rem; margin-bottom: 10px; color: var(--blue); }
.faq-item p { font-size: 14px; opacity: 0.7; line-height: 1.6; }
.faq-item a { color: var(--blue); text-decoration: underline; }

/* FOOTER */
footer { text-align:center; padding:60px 20px; opacity:0.5; font-size:14px; }