/* ۱. معرفی مستقیم فونت کلوچه که الان کنار فایل سی اس اس است */
@font-face {
  font-family: 'KidsMotionFont';
  src: url('Koloche.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ۲. معرفی فونت انگلیسی اختصاصی شما */
@font-face {
  font-family: 'KidsEnglishFont';
  src: url('SunnySpells-Regular.woff2') format('woff2');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ۳. اعمال هوشمند فونت‌ها و حذف کامل مربع آبی رنگ روی گوشی و دسکتاپ */
*, *::before, *::after {
  font-family: 'KidsEnglishFont', 'KidsMotionFont', sans-serif !important;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  
  /* 🪄 کلید اصلی: حذف کامل مستطیل آبی رنگ در حالت لمس روی گوشی‌های اندروید و آیفون */
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
}

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #0a0a12;
  background: url('bg.jpg') no-repeat center center;
  background-size: cover;
}

#app {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 2;
}

canvas {
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* ── استایل ناوبار گلس‌مورفیسم ──────────────── */
.art-navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 10;
  background: rgba(255, 255, 255, 0.4);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-container {
  max-width: 1300px;
  margin: 0 auto;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav-right-logo, .nav-left-action {
  flex: 1; 
  display: flex;
  align-items: center;
}

.nav-right-logo {
  justify-content: flex-start;
}

.nav-left-action {
  justify-content: flex-end;
  gap: 1rem;
}

.nav-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.nav-logo {
  text-decoration: none;
}

.logo-text {
  font-size: 1.4rem;
  font-weight: 800;
  color: #0a0a12;
  letter-spacing: 0.5px;
}

.nav-menu {
  list-style: none;
  display: flex;
  gap: 2.5rem;
}

.nav-item {
  text-decoration: none;
  color: #555560;
  font-weight: 600;
  font-size: 1rem;
  transition: color 0.3s ease;
}

.nav-item:hover, .nav-item.active {
  color: #0a0a12;
}

/* ── استایل دکمه جادویی ستاره‌ای جدید ──────────────── */
.magic-btn-started {
  position: relative;
  padding: 10px 24px;
  background: #7caae68c;
  font-size: 16px;
  font-weight: 700;
  color: #181818;
  border: 3px solid #7caae6;
  border-radius: 50px;
  box-shadow: 0 0 0 #7caae68c;
  transition: all 0.3s ease-in-out;
  cursor: pointer;
  z-index: 1;
  user-select: none;
}

.star-1, .star-2, .star-3, .star-4, .star-5, .star-6 {
  position: absolute;
  height: auto;
  filter: drop-shadow(0 0 0 #fffdef);
  z-index: -5;
}

.star-1 { top: 20%; left: 20%; width: 25px; transition: all 1s cubic-bezier(0.05, 0.83, 0.43, 0.96); }
.star-2 { top: 45%; left: 45%; width: 15px; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); }
.star-3 { top: 40%; left: 40%; width: 5px; transition: all 1s cubic-bezier(0, 0.4, 0, 1.01); }
.star-4 { top: 20%; left: 40%; width: 8px; transition: all 0.8s cubic-bezier(0, 0.4, 0, 1.01); }
.star-5 { top: 25%; left: 45%; width: 15px; transition: all 0.6s cubic-bezier(0, 0.4, 0, 1.01); }
.star-6 { top: 5%; left: 50%; width: 5px; transition: all 0.8s ease; }

/* افکت هاور دکمه ستاره‌ای */
.magic-btn-started:hover {
  background: transparent;
  color: #7caae6;
  box-shadow: 0 0 25px #83c4d88c;
}

.magic-btn-started:hover .star-1 { top: -80%; left: -30%; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.magic-btn-started:hover .star-2 { top: -25%; left: 10%; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.magic-btn-started:hover .star-3 { top: 55%; left: 25%; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.magic-btn-started:hover .star-4 { top: 30%; left: 80%; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.magic-btn-started:hover .star-5 { top: 25%; left: 115%; filter: drop-shadow(0 0 10px #fffdef); z-index: 2; }
.magic-btn-started:hover .star-6 { top: 5%; left: 60%; filter: drop-shadow(0 0 10px #99b9e2); z-index: 2; }

.fil0 { fill: #7caae68c; }

.menu-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  color: #0a0a12;
}

/* ── واکنش‌گرایی موبایل و انیمیشن باز شدن منو ──────────────── */
@media (max-width: 768px) {
  html, body {
    background-image: url('bg-mobile.jpg');
    background-size: cover;
    background-position: center center; 
  }

  .menu-toggle {
    display: inline-block;
  }

  /* تغییر ساختار منو به صورت منوی آبشاری و کشویی شیک مدرن در موبایل */
  .nav-center {
    display: block;
    position: absolute;
    top: 100%;
    left: 0;
    width: 100%;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(15px);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-in-out;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
  }

  /* کلاسی که با جاوااسکریپت اضافه می‌شود تا منو باز شود */
  .nav-center.mobile-open {
    max-height: 300px; 
  }

  .nav-menu {
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
    text-align: center;
  }

  .nav-item {
    display: block;
    padding: 1rem;
    width: 100%;
    border-bottom: 1px solid rgba(0, 0, 0, 0.03);
  }

  .nav-right-logo, .nav-left-action {
    flex: initial; 
  }
}