:root {
  --accent: #000000;
  --white: #750200;
  --muted: rgb(255 253 253);
  --glass: rgb(49 13 13 / 15%);
}

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

body {
  background:#000000;
  color:var(--white);
  font-family:'Labster', sans-serif;
  overflow:hidden;
  height:100vh;
}

.bg-dragon {
  position: fixed;
  inset: 0;
  background-image: url("images/bn.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: -2;
  opacity: 0.35;
  pointer-events: none;
}

    /* خلفية اللوقو */
    .bg-main-logo {
      position: fixed;
      inset: 0;
      background:
        radial-gradient(circle at center, #000000 0, #000 55%, #000 100%)
        url("images/15.png") center 18% / 420px no-repeat;
      z-index: -1;
      opacity: 0.22;
      pointer-events: none;
    }

    /* مطر اللوقو */
    .logo-rain {
      position: fixed;
      inset: 0;
      pointer-events: none;
      z-index: 0;
      overflow: hidden;
    }

    .logo-drop {
      position: absolute;
      top: -140px;
      width: 120px;
      opacity: 0.7;
      filter: drop-shadow(0 0 40px rgb(126 33 33 / 80%));
      animation: logoRain 8s linear infinite;
}

    @keyframes logoRain {
      0% { transform: translateY(-140px) scale(.9); }
      100% { transform: translateY(110vh) scale(1); }
}

.bg-layer {
  position: absolute; /* بدل fixed */
  inset: 0;
  background: url("images/bn.png") center center / cover no-repeat;
  z-index: -1;
  opacity: 0.35;
  pointer-events: none; /* يمنع أي ثقلة */
}

/* الكارد */
.overlay {
  position:relative;
  z-index:3;
  height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
}

.profile-card {
  width:360px;
  background:var(--glass);
  backdrop-filter:blur(4px);
  padding:80px;
  border-radius:130px;
  text-align:center;
  animation:fadeUp .7s ease forwards, float 6s ease-in-out infinite;
  box-shadow: 0 0 90px rgb(255 0 0 / 38%);
  opacity:0;
}

@keyframes fadeUp {
  from {opacity:0; transform:translateY(25px);}
  to {opacity:1; transform:translateY(0);}
}

@keyframes float {
  0%,100% {transform:translateY(4);}
  50% {transform:translateY(-8px);}
}

/* الصورة */
.avatar {
  width:180px;
  height:240px;
  border-radius:50%;
  border:1px solid var(--accent);
  object-fit:cover;
  box-shadow:0 0 90px var(--accent);
}

/* الاسم */
.name {
  margin-top:12px;
  font-size:1.5rem;
}

/* النص المتحرك */
.role {
  margin:8px 0 18px;
  color:var(--muted);
  font-weight:600;
}

.cursor {
  color:var(--accent);
}

/* الروابط */
.links {
  display:flex;
  flex-direction:column;
  gap:10px;
}

.link-item {
  background:rgb(230 223 223 / 11%);
  padding:10px 14px;
  border-radius:12px;
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  color:#000000;
  text-decoration:none;
  transition:.2s;
}

.link-item:hover {
  background:#c50707cd;
  color:#000000;
  transform:translateY(-4px) scale(1.05);
}

/* أزرار */
.actions {
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:15px;
}

.btn {
  padding:10px 14px;
  border:none;
  border-radius:10px;
  background:var(--accent);
  color:#000;
  font-weight:700;
  cursor:pointer;
  transition:.2s;
}

.btn:hover {
  transform:translateY(-4px);
  filter:brightness(1.1);
}

.btn.ghost {
  background:transparent;
  border:1px solid var(--white);
  color:#ffffff;
}