/* ============================================================
   FONTS
   ============================================================ */
/* Cairo (Arabic UI) loaded in HTML */
/* Keep retro font ONLY for headings if desired */

/* RESET */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* THEME */
:root {
  --bg: #05070d;
  --surface: rgba(20, 30, 60, 0.55);
  --surface2: rgba(30, 45, 90, 0.6);

  --accent1: #7dd3fc;
  --accent2: #38bdf8;
  --accent3: #2dd4bf;

  --text: #e6f1ff;
  --muted: #9fb3c8;

  --radius: 18px;
}

/* BODY */
body {
  font-family: 'Cairo', sans-serif;
  background: var(--bg);
  color: var(--text);

  direction: rtl;
  text-align: right;

  line-height: 1.8;
  letter-spacing: 0;
  overflow-x: hidden;
}

/* ============================================================
   ⭐ STARFIELD (UNCHANGED)
   ============================================================ */


/* helper that turns a single box-shadow list into a starfield */
.stars,
.stars2,
.stars3 {
  position: fixed;
  top: 0;
  left: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
  z-index: 0;
}

/* --- Layer 1: many tiny stars, slow drift --- */
.stars {
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    120px  340px #fff, 450px   80px #fff, 790px  210px #fff,
    230px  560px #fff, 670px  430px #fff, 100px  730px #fff,
    830px  650px #fff, 370px  910px #fff, 550px  140px #fff,
    990px  490px #fff, 180px  270px #fff, 740px  380px #fff,
    310px  620px #fff, 860px  770px #fff, 490px  510px #fff,
     60px  850px #fff, 920px  300px #fff, 640px  690px #fff,
    270px  430px #fff, 710px  590px #fff, 400px  760px #fff,
    150px  130px #fff, 580px  870px #fff, 960px  190px #fff,
    340px  710px #fff, 790px  950px #fff, 510px  320px #fff,
    870px  480px #fff,  30px  660px #fff, 700px  830px #fff,
    200px  480px #fff, 450px  900px #fff, 820px  130px #fff,
    130px  380px #fff, 660px  260px #fff, 350px  790px #fff,
    980px  610px #fff, 240px  970px #fff, 590px   50px #fff,
    760px  720px #fff,  80px  530px #fff, 420px  160px #fff,
    880px  890px #fff, 310px  240px #fff, 750px  450px #fff,
    170px  680px #fff, 530px  580px #fff, 910px   70px #fff,
    390px  810px #fff,  20px  410px #fff, 680px  940px #fff,
    480px  350px #fff, 840px  560px #fff, 260px   90px #fff,
    620px  730px #fff,  50px  200px #fff, 730px  170px #fff,
    290px  640px #fff, 560px  440px #fff, 950px  800px #fff;
  animation: twinkle 6s ease-in-out infinite alternate;
}

/* --- Layer 2: medium stars, medium speed --- */
.stars2 {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    340px  120px rgba(200,230,255,0.9),  80px  460px rgba(200,230,255,0.9),
    700px  290px rgba(200,230,255,0.9), 520px  640px rgba(200,230,255,0.9),
    160px  800px rgba(200,230,255,0.9), 890px  530px rgba(200,230,255,0.9),
    420px  370px rgba(200,230,255,0.9), 760px   90px rgba(200,230,255,0.9),
    230px  950px rgba(200,230,255,0.9), 610px  710px rgba(200,230,255,0.9),
    950px  400px rgba(200,230,255,0.9), 110px  270px rgba(200,230,255,0.9),
    480px  830px rgba(200,230,255,0.9), 810px  620px rgba(200,230,255,0.9),
    350px  190px rgba(200,230,255,0.9), 640px  520px rgba(200,230,255,0.9),
     70px  680px rgba(200,230,255,0.9), 900px  760px rgba(200,230,255,0.9),
    260px  440px rgba(200,230,255,0.9), 730px  310px rgba(200,230,255,0.9);
  animation: twinkle 9s ease-in-out infinite alternate;
  animation-delay: 2s;
}

/* --- Layer 3: few large bright stars, slowest --- */
.stars3 {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: transparent;
  box-shadow:
    500px  300px rgba(255,255,255,0.95), 150px  700px rgba(255,255,255,0.95),
    800px  500px rgba(255,255,255,0.95), 300px  150px rgba(255,255,255,0.95),
    650px  850px rgba(255,255,255,0.95),  50px  450px rgba(255,255,255,0.95),
    920px  200px rgba(255,255,255,0.95), 400px  600px rgba(255,255,255,0.95),
    200px  350px rgba(255,255,255,0.95), 750px  650px rgba(255,255,255,0.95);
  animation: twinkle 12s ease-in-out infinite alternate;
  animation-delay: 4s;
}

@keyframes twinkle {
  0%   { opacity: 0.4; }
  50%  { opacity: 1;   }
  100% { opacity: 0.5; }
}

/* ============================================================
   LAYOUT
   ============================================================ */
.wrapper {
  position: relative;
  z-index: 1;
  max-width: 800px;
  margin: auto;
  padding: 60px 20px 80px;
}

/* ============================================================
   HEADER
   ============================================================ */
.header {
  text-align: center;
  margin-bottom: 48px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 130px;
  height: 130px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(56,189,248,0.15), transparent 70%);
}

.logo-img {
  width: 120px;
}

/* 🔥 Retro ONLY here */
h1 {
  font-family: 'Bungee', cursive;
  font-size: 28px;
  line-height: 1.6;
}

.tagline {
  font-size: 18px;
  color: var(--muted);
}

/* ============================================================
   GLASS COMPONENTS
   ============================================================ */
.about,
.link-btn,
.project-card {
  position: right;
  background: var(--surface);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(125, 211, 252, 0.15);
  border-radius: var(--radius);
}

/* ============================================================
   ABOUT
   ============================================================ */
.about {
  position: relative;
  padding: 26px;
  margin-bottom: 32px;
}

.section-label {
  position: relative;
  font-family: 'Cairo', sans-serif;
  font-size: 20px;
  color: var(--accent3);
  margin-bottom: 12px;
}

.about p {
  font-size: 18px;
  line-height: 1.9;
}

/* ============================================================
   LINKS
   ============================================================ */
.links-section {
  margin-bottom: 32px;
}

.links-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.link-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;

  flex-direction: row-reverse;

  padding: 16px 18px;
  text-decoration: none;
  color: var(--text);

  font-size: 16px;
  transition: 0.2s;
}

.link-btn:hover {
  transform: translateY(-2px);
  background: var(--surface2);
}

/* ICON */
.link-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* COLORS */
.icon-steam   { background: rgba(56,189,248,0.15); color: var(--accent2); }
.icon-ig      { background: rgba(125,211,252,0.15); color: var(--accent1); }
.icon-tiktok  { background: rgba(45,212,191,0.15); color: var(--accent3); }
.icon-youtube { background: rgba(125,211,252,0.15); color: var(--accent1); }
.icon-email   { background: rgba(45,212,191,0.15); color: var(--accent3); }

/* ARROW */
.link-arrow {
  transform: rotate(180deg);
  color: var(--muted);
}

/* ============================================================
   SOCIALS
   ============================================================ */
.social-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.social-row .link-btn {
  flex-direction: column;
  text-align: center;
}

/* ============================================================
   PROJECTS
   ============================================================ */
.projects-section {
  margin-bottom: 32px;
}

.projects-grid {
  display: grid;
  gap: 16px;
}

.project-card {
  overflow: hidden;
  transition: 0.2s;
}

.project-card:hover {
  transform: translateY(-4px);
}

/* IMAGE */
.project-thumb {
  aspect-ratio: 16/9;
  position: relative;
}

.project-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* LABEL */
.thumb-label {
  position: absolute;
  top: 10px;
  right: 12px;
  background: rgba(0,0,0,0.6);
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  color: var(--muted);
}

/* TEXT */
.project-info {
  padding: 16px;
}

.project-name {
  font-size: 20px;
  font-weight: 700;
  margin-bottom: 8px;
}

.project-desc {
  font-size: 16px;
  color: var(--muted);
  line-height: 1.8;
  margin-bottom: 10px;
}

/* TAGS */
.tag {
  display: inline-block;
  font-size: 14px;
  padding: 6px 10px;
  border-radius: 10px;
  margin-left: 6px;
}

.tag-blue  { background: rgba(125,211,252,0.15); color: var(--accent1); }
.tag-green { background: rgba(45,212,191,0.15); color: var(--accent3); }

/* ============================================================
   FOOTER
   ============================================================ */
.footer {
  text-align: center;
  font-size: 14px;
  color: var(--muted);
  margin-top: 30px;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */
.section-header {
  font-family: 'Cairo', sans-serif;

  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
  position: right;

  flex-direction: row;
}

.section-title {
  position: right;
  font-family: 'Cairo', sans-serif;
  text-align: right;
  font-size: 20px;
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 500px) {
  h1 {
    font-size: 22px;
  }

  .social-row {
    grid-template-columns: 1fr;
  }

  .about p {
    font-size: 16px;
  }
}