/* Variables */
:root {
  --primary: #a8dadc;
  --accent: #f1faee;
  --bg1: #0f2027;
  --bg2: #203a43;
  --bg3: #2c5364;
  --text: #e9ecef;
  --particle-color: rgba(255,255,255,0.2);
}

/* Light Mode */
body.light {
  --primary: #457b9d;
  --accent: #1d3557;
  --bg1: #e0fbfc;
  --bg2: #c2dfe3;
  --bg3: #9db4c0;
  --text: #1b263b;
  --particle-color: rgba(0,0,0,0.15);
}

body {
  font-family: 'Outfit', sans-serif;
  margin: 0;
  color: var(--text);
  background: linear-gradient(-45deg, var(--bg1), var(--bg2), var(--bg3));
  background-size: 400% 400%;
  animation: gradientMove 15s ease infinite;
  overflow-x: hidden;
  transition: all 0.5s ease;
}

/* Theme Toggle */
#themeToggle {
  position: fixed;
  right: 20px;
  top: 20px;
  background: var(--primary);
  color: #1d3557;
  border: none;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.4rem;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
  z-index: 100;
  transition: all 0.3s ease;
}
#themeToggle:hover { background: var(--accent); }

/* Header */
header {
  text-align: center;
  padding: 4rem 1rem;
  position: relative;
  overflow: hidden;
}
header canvas { 
  position:absolute; 
  top:0; left:0; 
  width:100%; height:100%; 
  z-index:0; 
}
header h1, header p { position: relative; z-index:1; }
header h1 { font-size: 3rem; color: var(--accent); text-shadow: 0 0 25px rgba(255,255,255,0.5); animation: fadeInDown 1.5s ease-out; }
header p { margin-top: 0.8rem; font-size: 1.2rem; color: var(--primary); animation: fadeIn 2s ease-in; }

/* Navigation */
nav { display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; padding:1rem; background: rgba(255,255,255,0.07); backdrop-filter: blur(8px); position: sticky; top:0; z-index:50; }
nav a { color: var(--accent); text-decoration:none; padding:0.6rem 1.3rem; border-radius:30px; border:2px solid var(--primary); font-weight:600; transition: all 0.3s ease; }
nav a:hover { background: var(--primary); color: var(--accent); box-shadow: 0 0 25px var(--primary); }

/* Hero Section */
.hero { text-align:center; margin:3rem auto; max-width:900px; padding:0 1rem; }
.hero h2 { font-size:2rem; color: var(--accent); margin-bottom:1rem; }
.hero p { font-size:1.1rem; color: var(--text); line-height:1.7; }

/* Map Gallery */
.map-gallery { display:flex; flex-wrap:wrap; justify-content:center; gap:25px; margin:3rem auto; width:90%; max-width:1300px; }
.map-frame {
  position: relative;
  background: rgba(255,255,255,0.08);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 0 25px rgba(0,0,0,0.3);
  border: 2px solid rgba(168,218,220,0.4);
  width: 47%;
  min-width: 320px;
  transform: translateY(50px);
  opacity: 0;
  transition: transform 0.6s ease, opacity 0.6s ease;
}
.map-frame.visible { transform: translateY(0); opacity:1; }
.map-frame:hover { transform: scale(1.03); box-shadow:0 0 45px rgba(168,218,220,0.6); }

/* Hover Overlay (pointer-events:none so map is interactive) */
.map-frame::after {
  content: attr(data-desc);
  position: absolute;
  top:0; left:0;
  width:100%; height:100%;
  background: rgba(0,0,0,0.4);
  color: var(--accent);
  display:flex;
  justify-content:center;
  align-items:center;
  opacity:0;
  text-align:center;
  padding:1rem;
  font-weight:600;
  transition: opacity 0.3s ease;
  pointer-events: none; 
}
.map-frame:hover::after { opacity:1; }

/* Map Title */
.map-title { text-align:center; background: rgba(255,255,255,0.05); padding:0.8rem; font-weight:600; color: var(--primary); }

/* iframe */
iframe { width:100%; height:500px; border:none; }

/* Footer */
footer { text-align:center; background: rgba(0,0,0,0.3); color: var(--primary); padding:2rem 1rem; font-size:0.9rem; border-top:1px solid rgba(255,255,255,0.1); }
footer .contact-links { margin-top:0.5rem; display:flex; justify-content:center; gap:1.2rem; }
footer .contact-links a { color: var(--accent); text-decoration:none; font-weight:600; border-bottom:1px dashed var(--primary); transition: all 0.3s ease; }
footer .contact-links a:hover { color: var(--primary); border-bottom:1px solid var(--accent); }

/* Animations */
@keyframes fadeInDown { from {opacity:0; transform:translateY(-30px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeInUp { from {opacity:0; transform:translateY(30px);} to {opacity:1; transform:translateY(0);} }
@keyframes fadeIn { from {opacity:0;} to {opacity:1;} }
@keyframes gradientMove { 0% {background-position:0% 50%;} 50% {background-position:100% 50%;} 100% {background-position:0% 50%;} }

@media (max-width:768px){ .map-frame{width:90%;} iframe{height:320px;} header h1{font-size:2rem;} }