/* ---- Fonts ---- */
@font-face {
  font-family: "Stratum2";
  src: url("../fonts/Stratum2-Medium.otf") format("opentype");
}

@font-face {
  font-family: "LexendBold";
  src: url("../fonts/Lexend-Bold.ttf") format("truetype");
}

/* ---- Global ---- */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  font-family: "Stratum2", Verdana, sans-serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  background: black;
  overflow: hidden;
}

/* ---- YouTube Background ---- */
.youtube-bg {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
}

.youtube-bg iframe {
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  transform: scale(1.15);
  transform-origin: center center;
  transition: transform 0.7s ease-in-out;
  filter: blur(6px) brightness(0.65);
}

.youtube-bg:hover iframe {
  transform: scale(1);
}

/* ---- Glass Panel ---- */
.panel {
  background: rgba(0, 0, 0, 0.50);
  border-radius: 20px;
  padding: 50px 70px;
  backdrop-filter: blur(15px) saturate(150%);
  box-shadow: 0 0 25px rgba(0,0,0,0.5);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 10;
}

/* ---- Container Animation ---- */
.container {
  opacity: 0;
  animation: fadeDown 0.7s ease-out forwards;
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ---- Profile Picture ---- */
.profile-pic {
  width: 160px;
  height: 160px;
  border-radius: 50%;
  object-fit: cover;
  margin-bottom: 20px;
  box-shadow: 0 0 12px rgba(173, 216, 230, 0.55);
}

/* ---- Knife-Fade Name ---- */
.name {
  font-size: 46px;
  letter-spacing: 1px;
  font-family: "Stratum2", Verdana, sans-serif;
  text-align: center;
  background: linear-gradient(120deg, #ffffff, #a0c4ff, #ffffff);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  -moz-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow: 0 0 10px rgba(173, 216, 230, 0.6);
  animation: textFade 3s linear infinite;
  margin-bottom: 25px;
}

@keyframes textFade {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Buttons ---- */
.buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-bottom: 10px;
}

.icon-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(18, 18, 18, 0.4);
  padding: 14px;
  border-radius: 16px;
  box-shadow: 0 0 3px rgba(255,255,255,0.2);
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.icon-button img {
  width: 28px;
  height: 28px;
}

.icon-button:hover {
  transform: translateY(-2px);
  box-shadow: 0 0 10px rgba(173, 216, 230, 0.3);
}

/* ---- Email Badge Center Bottom ---- */
.email-badge {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(26, 26, 26, 0.95);
  padding: 7px 14px;
  border-radius: 12px;
  box-shadow: 0 0 6px rgba(173, 216, 230, 0.35);
  font-family: "LexendBold", Verdana, sans-serif;
  font-size: 12px;
  color: white;
  cursor: default;
  z-index: 1000;
  transition: box-shadow 0.2s ease;
}

.email-badge img {
  width: 16px;
  height: 16px;
}

.email-badge:hover {
  box-shadow: 0 0 8px rgba(173, 216, 230, 0.45);
}