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

html,body{
  height:100%;
  scroll-behavior:smooth;
  color:#fff;
  background:#000;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
}

/* Header */
.site-header{
  position:fixed;
  top:0;
  width:100%;
  z-index:999;
  background:rgba(255,255,255,0.6);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}
.site-header.scrolled{
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 2px 10px rgba(0,0,0,0.15);
  transition:all 0.5s ease;
}
.site-header .container{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:15px 5%;
}
.logo{
  font-weight:700;
  font-size:18px;
  color:#fff;
}

/* Nav */
.site-nav a{
  margin-left:20px;
  text-decoration:none;
  color:#333;
  font-weight:700;
  transition:color 0.3s;
}
.site-nav a:hover{color:#000;}

/* Sections */
.hero,
.section.full{
  height:100vh;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
}
.section.static{
  padding:40px 20px;
  background:#000;
}
.overlay{
  background:rgba(0,0,0,0.5);
  padding:40px;
  text-align:center;
  border-radius:12px;
}
.overlay h1{
  font-size:3em;
  margin-bottom:10px;
}
.content{
  max-width:800px;
  margin:auto;
  padding:30px;
  border-radius:12px;
  color:#f0f0f0;
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
  box-shadow:0 8px 20px rgba(0,0,0,0.5);
}
.avatar{box-shadow:0 4px 10px rgba(0,0,0,0.2);}
.profile-card{
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
  padding:20px;
  border-radius:12px;
  color:#f0f0f0;
  text-align:center;
  max-width:600px;
  margin:20px auto;
  box-shadow:0 8px 20px rgba(0,0,0,0.5);
}

/* Keep legacy selectors used in your CSS/HTML */
.profile-card, .roles-cards .card, .reflection-cards .card, #contact .content{
  background:rgba(255,255,255,0.1);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,0.2);
}
.profile-card h1, .roles-cards h2, .reflection-cards h2, #contact h2{
  font-size:28px;
  font-weight:bold;
  margin-bottom:15px;
}


/* Footer */
footer{
  background:#000;
  text-align:center;
  padding:30px;
  font-size:0.9em;
  color:#888;
}

/* Waves */
.waves{
  position:relative;
  width:100%;
  height:60px;
  margin-top:-5px;
}
#wave{width:100%;height:100%;}

/* Page fade-in */
body{opacity:0;transition:opacity 1s ease-out;}
body.loaded{opacity:1;}

/* Hero text fade-up */
.text-fade-up{
  opacity:0;
  transform:translateY(30px);
  transition:all 1s ease-out;
}
.text-fade-up.visible{
  opacity:1;
  transform:translateY(0);
}

/* Optional: shared visible effect (kept for compatibility with your existing classnames) */
.fade-up.visible{
  opacity:1;
  transform:translateY(0) scale(1.02);
  transition:all 1s cubic-bezier(0.25,1.5,0.5,1);
}

/* Buttons */
button:hover{
  transform:scale(1.1);
  transition:all 0.3s ease-in-out;
}

/* Responsive */
@media (max-width:768px){
  .site-nav a{margin-left:10px;font-size:14px;}
  .overlay h1{font-size:2em;}
  .overlay p{font-size:1em;}
  .avatar{width:80px;height:80px;}
  .content{padding:20px;}
}
@media (max-width:480px){
  .site-nav a{margin-left:8px;font-size:12px;}
  .overlay h1{font-size:1.5em;}
  .overlay p{font-size:0.9em;}
}


/* Fix: avoid double waves in hero (keep only .waves) */
.waves-bottom{display:none !important;}