/* ===== Solar Home (فیکسِ الهام‌گرفته از طرح تو) ===== */
html,body{height:100%; overflow:hidden;}

.home-solar{
  position:relative;
  width:100%;
  height:100vh;          /* fallback */
  height:100svh;         /* بهتر برای موبایل‌های جدید */
  color:#fff;
  overflow:hidden;
  background:
    radial-gradient(ellipse 37.35% 62.55% at 87.90% 34.01%, rgba(255, 165, 0, 0.20) 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse 40.22% 79.85% at 86.21% 80.50%, #000000 0%, rgba(0, 0, 0, 0) 100%),
    radial-gradient(ellipse 44.73% 39.74% at 20.30% 38.09%, #252140 0%, rgba(37, 33, 64, 0) 100%),
    #191721;
}

/* گرادیان بالای صفحه + عنوان */
.home-solar__frame{
  position:absolute; inset:0 0 auto 0; height:140px;
  background:linear-gradient(180deg,#191721 0%,rgba(25,23,33,0) 100%);
  z-index:5; 
  pointer-events:none;   /* روی کلیک‌ها تاثیر نذاره */
}
.home-solar__title{
  position:absolute; top:18px; right:40px;
  font-family:Raqami, monospace;
  font-size:80px; font-weight:400;
  margin:0;
}

/* صحنه */

/* زوم دوربین روی خود صحنه انجام می‌شود (بدون نیاز به .solar-stage) */
.solar-scene{
  position:relative; width:100%; height:100%;
  transform: translate(var(--stage-tx, 0px), var(--stage-ty, 0px)) scale(var(--stage-scale, 1));
  transform-origin: 0 0;
  transition: transform .6s cubic-bezier(.2,.75,.2,1), filter .35s ease, opacity .35s ease;
  will-change: transform;
}

/* وقتی زوم فعال است، همهٔ چیزها جز سیارهٔ فعال محو شوند */
.home-solar.zoom-mode .planet:not(.is-active){
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
  transition: opacity .35s ease, filter .35s ease;
}
.home-solar.zoom-mode .orbits{
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.home-solar.zoom-mode .sun{
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
  transition: opacity .35s ease, filter .35s ease;
}

/* --- Robust fade in focus: support .solar-scene.is-zoom as well --- */

/* === Strong fade rules (ensure by !important) === */
.home-solar.zoom-mode .planet:not(.is-active),
.solar-scene.is-zoom .planet:not(.is-active){
  opacity: 0 !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}
.home-solar.zoom-mode .planet:not(.is-active) .planet-label,
.solar-scene.is-zoom .planet:not(.is-active) .planet-label{
  opacity: 0 !important;
  visibility: hidden !important;
}
.home-solar.zoom-mode .orbits,
.solar-scene.is-zoom .orbits{
  opacity: 0 !important;
  pointer-events: none !important;
}
.home-solar.zoom-mode .sun,
.solar-scene.is-zoom .sun{
  opacity: 0 !important;
  filter: blur(2px) !important;
  pointer-events: none !important;
}

/* پنهان شدن پرچم در حالت فوکِس — bulletproof */
.home-solar.zoom-mode .solar-scene .yt-flag,
.home-solar.zoom-mode .yt-flag,
.solar-scene.is-zoom .yt-flag {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
  display: none !important;   /* سفت‌وسخت: کاملاً حذف از لایه‌بندی */
}
.solar-scene.is-zoom .planet:not(.is-active){
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
  transition: opacity .35s ease, filter .35s ease;
}
.solar-scene.is-zoom .orbits{
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s ease;
}
.solar-scene.is-zoom .sun{
  opacity: 0;
  filter: blur(1px);
  pointer-events: none;
  transition: opacity .35s ease, filter .35s ease;
}

/* --- Enforce: hide all labels in zoom/focus (bulletproof) --- */
.home-solar.zoom-mode .planet-label,
.home-solar.zoom-mode .solar-scene .planet .planet-label,
.solar-scene.is-zoom .planet-label,
.solar-scene.is-zoom .planet .planet-label,
.planet.is-active .planet-label {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* مدارها (SVG) */
.orbits{ position:absolute; inset:0; width:100%; height:100%; z-index:1; }
.orbit{
  fill:none;
  stroke:rgba(255,255,255,.45);  /* خط یک‌تکه */
  stroke-width:2;
}

/* خورشید */
.sun{
  position:absolute; z-index:3;
  width:180px; height:180px; border-radius:50%;
  background:#d9d9d9;
  box-shadow:0 0 60px 18px rgba(255,255,255,.22);
  transform:translate(-50%,-50%);     /* JS جایگذاری می‌کند؛ ما مرکز را وسط نگه می‌داریم */
  transition:transform .25s ease;
}

/* سیاره‌ها (سایزشان را JS با inline می‌گذارد) */
.planet{
  position:absolute; z-index:4;
  border-radius:50%;
  background:#d9d9d9;
  transform:translate(-50%,-50%); /* مرکز دایره روی مختصات */
  box-shadow:0 0 12px rgba(255,255,255,.35);
  transition:transform .18s ease, box-shadow .25s ease;
  z-index: 4;
  will-change: transform, opacity, filter;
}
.planet:hover{
  transform: translate(-50%,-50%) scale(1.08);
  box-shadow: 0 0 18px rgba(255,255,255,.55);
  cursor: pointer;
}


@media (max-width: 900px){
  /* Removed the .planet:hover override to keep uniform hover behavior */
}


/* پرچم پایین چپ (بعداً تصویرش را می‌گذاری) */
.yt-flag{
  position:absolute; left:24px; bottom:28px;
  width:210px; height:126px;
  background: url("../../assets/images/flag.png") center/cover no-repeat;
  z-index:6;
  box-shadow:0 0 12px rgba(255,255,255,.08);
}

/* ===== واکنش‌گرایی (بدون تداخل با inline-sizeهای JS) ===== */
/* لپ‌تاپ متوسط */
@media (max-width: 1280px){
  .home-solar__title{ font-size:64px; }
  .yt-flag{ width:190px; height:114px; }
}

/* تبلت */
@media (max-width: 900px){
  .home-solar__title{ font-size:52px; right:28px; top:16px; }
  .yt-flag{ width:240px; height:144px; left:20px; bottom:22px; }

  /* سیاره‌ها کوچک‌تر (inline width/height باقی می‌ماند) */
  .planet{ transform:translate(-50%,-50%) scale(.82); }
  /* خورشید کمی بزرگ‌تر تا خیلی ریز نشود */
  .sun{ transform:translate(-50%,-50%) scale(1.12); }
}

/* موبایل */
@media (max-width: 600px){
  .planet{
    transform: translate(-50%,-50%) scale(.48);
  }
  .sun{
    transform: translate(-50%,-50%) scale(1.55);
  }

  .planet-label{
    font-size: 22px;
    left: 108%;
    top: 64%;
  }
}

/* احترام به کاهش موشن */
@media (prefers-reduced-motion: reduce){
  .sun, .planet{ transition:none; }
}

/* ===== Labels کنار سیاره‌ها (Updated) ===== */
.planet-label {
  position: absolute;
  top: 64%; /* ← کمی پایین‌تر از مرکز سیاره */
  left: 105%; /* ← نزدیک‌تر به سیاره */
  transform: translateY(-50%);
  font-family: 'Arapix', monospace;
  font-size: 28px; /* ← کمی بزرگ‌تر */
  color: #fff;
  white-space: nowrap;
  opacity: 0.85;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(0,0,0,.7);
  transition: opacity .3s ease, transform .3s ease;
  z-index: 9;
  will-change: transform;
}
.planet:hover .planet-label{
  opacity: 1;
  transform: translateY(-50%) translateX(6px);
}


/* تبلت */
@media (max-width: 900px){
  .planet-label {
    font-size: 30px;
    left: 105%;
    top: 64%;
  }
}

/* موبایل */
@media (max-width: 600px){
  .planet-label {
    font-size: 40px;
    left: 108%;
    top: 64%;
  }
}

/* ===== Focus mode (زوم روی سیاره) ===== */
/* اسکیل فوکِس با ریسپانسیو کنترل می‌شود */
.home-solar{
  --focus-scale: 3.2; /* دسکتاپ: زوم قوی‌تر */
}

/* عنوان بالا در فوکِس دقیقاً وسط می‌آید */
.home-solar.zoom-mode .home-solar__title{
  left: 50%;
  right: auto;
  transform: translateX(-50%);
  width: max-content;
  text-align: center;
  transition: transform .35s ease, left .35s ease, right .35s ease;
}


/* سیاره‌ی فعال → دقیقاً وسط و خیلی بزرگ */
.planet{
  transition: transform .45s cubic-bezier(.2,.75,.2,1), box-shadow .3s ease;
  transform-origin: center;
  will-change: transform;
}
.planet.is-active{
  z-index: 12;
  left: 50% !important;
  top: 50% !important;
  /* اسکیل در JS با متغیر --focus-scale ست می‌شود، اینجا fallback: */
  transform: translate(-50%,-50%) scale(var(--focus-scale, 3.2));
}
.home-solar.zoom-mode .planet.is-active{
  opacity: 1;
  filter: none;
  pointer-events: auto;
}

/* --- Enforce: hide all labels in zoom/focus (bulletproof) --- */
.home-solar.zoom-mode .planet-label,
.home-solar.zoom-mode .solar-scene .planet .planet-label,
.solar-scene.is-zoom .planet-label,
.solar-scene.is-zoom .planet .planet-label,
.planet.is-active .planet-label {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

/* اورلی تاریک هنگام فوکِس */
.page-scrim{
  position: fixed; inset: 0; z-index: 11;
  background: rgba(0,0,0,.25);
  backdrop-filter: blur(2px);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.page-scrim.on{ opacity: 1; pointer-events: auto; }

/* پنل/دکمه‌ی ورود زیر لیبلِ سیاره‌ی فعال */
.planet-focus{
  position: absolute;
  z-index: 13;
  min-width: 220px;
  display: grid; gap: 10px;
  padding: 12px 14px;
  border-radius: 12px;
  border: none;
  color: #fff;
  text-align: center;
  /* مرجع: مرکز سیاره؛ سپس کمی پایین‌تر */
  transform: translate(-50%, 0%) translateY(120px);
  transition: opacity .25s ease, transform .25s ease;
}
.planet-focus[hidden]{ display: none; }
.planet-focus__title{
  margin: 0;
  font-family: "Arapix", monospace;
  font-weight: 700;
  font-size: 80px;
  line-height: 1.05;
}
.planet-focus__btn{
  all: unset;
  cursor: pointer;
  display: inline-block;
  padding: 14px 28px;
  border: 2px solid #fff;
  border-radius: 0;
  background: none;
  color: #fff;
  font: 600 20px/1 "unixel", system-ui;
  text-align: center;
  position: relative;
  transition: background-color .25s ease, color .25s ease;
}
.planet-focus__btn:hover{
  background: #fff;
  color: transparent;            /* شِبهِ برش متن */
  -webkit-text-stroke: 1.2px rgba(0,0,0,0); /* برای جلوگیری از هاله */
}
.planet-focus__btn:active{
  transform: translateY(1px);
}

/* حالت زوم برای صحنه (برای افکت‌های کلی) */
.solar-scene.is-zoom::after{
  content:""; position:absolute; inset:0; 
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(6px);
  pointer-events: none;
}

/* ریسپانسیو: مقدار اسکیلِ فوکِس */
@media (max-width: 900px){
  .home-solar{ --focus-scale: 1.4; } /* تبلت: زوم خیلی کمتر */
}
@media (max-width: 600px){
  .home-solar{ --focus-scale: 1.1; } /* موبایل: تقریباً بدون زوم */
}