
:root{
  --yellow:#FFD426;
  --blue:#0DA4FF;
  --teal:#20C997;
  --aqua:#3AE6D5;
  --midnight:#041F44;
  --black:#1A1A1A;
  --neon:#4CFF4C;
  --coral:#FF5C73;
  --cloud:#F5F5F5;
  --silver:#C0C0C0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif}
.bg-midnight{background:var(--midnight);color:var(--cloud)}
.container{width:min(1100px,92%);margin-inline:auto}
.site-header{position:sticky;top:0;z-index:50;background:rgba(4,31,68,0.9);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,255,255,0.06)}
.site-header nav{display:flex;align-items:center;justify-content:space-between;padding:12px 0}
.brand{font-family:Bungee,cursive;color:var(--yellow);text-decoration:none;font-size:1.4rem;letter-spacing:0.5px}
.nav{display:flex;gap:14px;align-items:center;list-style:none;margin:0;padding:0}
.nav a{color:var(--cloud);text-decoration:none;padding:8px 10px;border-radius:999px;font-weight:600}
.nav a:hover{background:rgba(255,255,255,0.08)}
.btn{display:inline-block;padding:10px 16px;border-radius:999px;font-weight:800;text-decoration:none}
.btn-primary{background:var(--yellow);color:#222}
.btn-secondary{background:var(--teal);color:#002b2b}
.btn-ghost{border:1px solid rgba(255,255,255,0.25);color:var(--cloud)}
.btn-primary:hover{filter:brightness(0.95)}
.btn-secondary:hover{filter:brightness(1.05)}
.btn-ghost:hover{background:rgba(255,255,255,0.06)}

.hero{position:relative;min-height:92vh;display:grid;place-items:center;text-align:center;color:var(--cloud)}
.parallax{background:url('assets/ufo-bg.webp') center/cover fixed no-repeat}
.hero .overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(4,31,68,0.55),rgba(4,31,68,0.95))}
.hero-inner{position:relative;padding:64px 0}
.title{font-family:Bungee,cursive;font-size:clamp(38px,6vw,86px);line-height:0.95;margin:0;color:var(--yellow);text-shadow:0 6px 24px rgba(0,0,0,0.6)}
.title span{display:block;font-family:'Permanent Marker',cursive;color:var(--cloud);font-size:0.45em;letter-spacing:1px;margin-top:10px;transform:rotate(-2deg)}
.subtitle{margin:18px 0 26px;color:var(--cloud);opacity:0.9;font-weight:600}

.section{padding:64px 0}
.h-title{font-family:Bungee,cursive;color:var(--yellow);font-size:2rem;margin:0 0 22px}
.lead{margin-top:18px;max-width:70ch;opacity:0.95}

.info-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.info-card{background:linear-gradient(180deg,rgba(13,164,255,0.12),rgba(32,201,151,0.08));border:1px solid rgba(255,255,255,0.08);padding:18px;border-radius:16px}
.info-card h3{margin:6px 0 8px}
.emoji{font-size:26px}

.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.gallery figure{margin:0;background:rgba(255,255,255,0.06);border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,0.08)}
.gallery img{width:100%;height:220px;object-fit:cover;display:block}
.gallery figcaption{text-align:center;padding:8px 10px;font-weight:600}

.faq-item{background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.1);padding:14px 16px;border-radius:12px;margin:10px 0}
.faq-item>summary{cursor:pointer;font-weight:700}
.faq-item>p{margin:10px 0 0}

.footer{border-top:1px solid rgba(255,255,255,0.08);padding:26px 0;background:#071837}
.footer-inner{display:flex;justify-content:space-between;align-items:center}
.footer .insta{color:var(--aqua);text-decoration:none}
.footer .insta:hover{text-decoration:underline}

@media (max-width:900px){
  .info-grid{grid-template-columns:1fr}
  .gallery{grid-template-columns:1fr 1fr}
  .site-header nav{flex-wrap:wrap;gap:10px}
}


.brand {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: Bungee, cursive;
  color: var(--yellow);
  text-decoration: none;
  font-size: 1.4rem;
  letter-spacing: 0.5px;
}

.ufo-logo {
  height: 32px;
  width: auto;
  display: inline-block;
  filter: drop-shadow(0 0 6px rgba(255, 212, 38, 0.6));
  transition: transform 0.3s ease;
}

.ufo-logo:hover {
  transform: rotate(-10deg) scale(1.05);
}

.gallery figure {
  overflow: hidden;
  position: relative;
}

.gallery img {
  transition: transform 0.3s ease, filter 0.3s ease;
}

.gallery figcaption {
  transition: color 0.3s ease;
}

.gallery figure:hover img {
  transform: scale(1.05);
  filter: brightness(1.1);
}

.gallery figure:hover figcaption {
  color: var(--yellow); /* highlight caption on hover */
}

.menu-has-dropdown details { position: relative; display: inline-block; }
.menu-has-dropdown summary { list-style: none; cursor: pointer; }
.menu-has-dropdown summary::-webkit-details-marker { display:none; }

.menu-has-dropdown .dropdown {
  position: absolute; top: 110%; right: 0;
  background: rgba(4,31,68,.98);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px; padding: 8px; min-width: 240px;
  box-shadow: 0 8px 24px rgba(0,0,0,.35); display: grid; gap: 6px;
}
.menu-has-dropdown .dropdown a {
  display: block; padding: 10px 12px; border-radius: 8px; text-decoration: none; 
  color: var(--cloud); font-weight: 600;
}
.menu-has-dropdown .dropdown a:hover { background: rgba(255,255,255,.06); }

.social-follow {
  display: flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  color: var(--cloud);
}

.social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  transition: background 0.3s ease, transform 0.3s ease;
}

.social-btn img {
  width: 20px;
  height: 20px;
  filter: invert(1); /* makes logos white if SVG is black */
}

.social-btn:hover {
  background: var(--yellow);
  transform: scale(1.1);
}

.social-btn:hover img {
  filter: invert(0); /* back to original logo color */
}
.map-embed {
  width: 100%;
  aspect-ratio: 16 / 9;       /* keeps proportions consistent */
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.15);
  box-shadow: 0 4px 14px rgba(0,0,0,0.4);
  margin-top: 10px;
}

.map-embed iframe {
  width: 100%;
  height: 100%;
  border: 0;
}

.gallery figure.special-act img {
  transition: transform 0.4s ease, filter 0.4s ease;
}

.gallery figure.special-act:hover img {
  transform: scale(1.08) rotate(1deg);
  filter: drop-shadow(0 0 20px var(--neon)) brightness(1.2);
}

.regulament-body { max-width: 80ch; }
.regulament-body h2,
.regulament-body h3 {
  font-family: Bungee, cursive;        /* titluri cu fontul corect */
  line-height: 1;
  letter-spacing: .5px;
  text-transform: uppercase;
  margin: 24px 0 8px;
}
.regulament-body h2 { font-size: clamp(26px, 3vw, 36px); color: var(--yellow); }
.regulament-body h3 { font-size: clamp(20px, 2.2vw, 28px); color: var(--aqua); }

.regulament-body p,
.regulament-body li {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;  /* text cu Inter */
  line-height: 1.65;
  opacity: .95;
}
.regulament-body ol,
.regulament-body ul { padding-left: 1.1rem; margin: .4rem 0 1rem; }
.regulament-body strong { color: var(--yellow); }

/* ——— Reveal on scroll (slide-in) ——— */
.reveal {
  opacity: 0;
  transform: translateX(24px);
  transition: opacity .6s ease, transform .6s ease;
  will-change: transform, opacity;
}
.reveal.in-view {
  opacity: 1;
  transform: none;
}
.reveal.alt { transform: translateX(-24px); }     /* dacă vrei să alternezi stânga/dreapta */
.reveal.alt.in-view { transform: none; }

/* respectă preferința de reduce motion */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.alt { transition: none; transform: none; opacity: 1; }
}