*{box-sizing:border-box}
:root{
  --bg1:#081018; --bg2:#0b1624;
  --gold:#d4af37; --gold-2:#f7d774;
  --teal:#36e0d6; --text:#e6eaf2;
  --shadow:0 20px 60px rgba(0,0,0,.35);
}
html,body{height:100%}
body{
  margin:0;
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,"Noto Sans",sans-serif;
  color:var(--text);
  background: radial-gradient(1200px 800px at 50% 15%, #0e1b2a 0%, #071019 60%, #04070c 100%);
  overflow:hidden;
}

/* Topbar */
.topbar{
  position:fixed; inset:0 0 auto 0; height:56px;
  display:flex; align-items:center; justify-content:space-between;
  padding:0 14px; background:linear-gradient(180deg, rgba(10,15,25,.5), rgba(10,15,25,0));
  backdrop-filter:saturate(120%) blur(8px);
  z-index:10;
}
.lang-menu{display:flex; gap:10px}
.lang{border:0; background:transparent; color:#cfd6e6; padding:6px 10px; border-radius:10px; cursor:pointer}
.lang:hover{color:white; background:rgba(255,255,255,.06)}
.lang.active{color:black; background:var(--gold); font-weight:600}
.actions .ghost{border:1px solid rgba(212,175,55,.6); color:var(--gold); background:transparent; padding:6px 12px; border-radius:999px; cursor:pointer}
.actions .ghost:hover{background:rgba(212,175,55,.12)}

/* Hero */
.hero{height:100vh; display:grid; place-items:center; text-align:center; padding-top:40px}
.earth-wrap{position:relative; width:min(42vw,420px); aspect-ratio:1; filter:drop-shadow(0 40px 90px rgba(0,0,0,.45));}
.earth{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; display:none}
#logoVideo.ready, #logoImage.ready, #earthSVG.ready{display:block}
#earthSVG{animation:spin 16s linear infinite}
@keyframes spin{from{transform:rotate(0)} to{transform:rotate(360deg)}}
.scale-in{animation:scaleIn 1.6s cubic-bezier(.2,.9,.1,1) both}
@keyframes scaleIn{0%{transform:scale(.6); opacity:.0} 100%{transform:scale(1); opacity:1}}

h1#siteTitle{
  margin:16px 0 6px; letter-spacing:.04em;
  font-weight:800; font-size:clamp(22px,4.6vw,44px);
  text-transform:uppercase; color:var(--gold);
  text-shadow:0 1px 0 #7e641e, 0 2px 6px rgba(212,175,55,.35);
}

/* Taglines with inner-to-outer glow wave */
.taglines{display:flex; gap:min(8vw,48px); align-items:center; justify-content:center; margin-top:6px}
.taglines .shine{
  position:relative; font-weight:700; letter-spacing:.08em;
  font-size:clamp(14px,2.6vw,22px);
  color:var(--gold); padding:.2rem .6rem;
  text-shadow:0 0 0 transparent;
}
.taglines .shine::before{
  content:""; position:absolute; inset:0;
  background:radial-gradient(120px 12px at -20% 50%, rgba(255,255,255,.95), rgba(255,255,255,.35) 30%, rgba(255,255,255,0) 60%);
  filter:blur(.7px);
  transform:translateX(-140%) skewX(-10deg);
  animation:wave 5s ease-in-out forwards;
  mix-blend-mode:screen; border-radius:8px;
}
@keyframes wave{to{transform:translateX(140%) skewX(-10deg)}}

/* IP greet */
.ip-greet{margin-top:14px; color:#c8cfdb; font-size:14px; opacity:.85}

/* Footer */
.foot{position:fixed; inset:auto 0 10px 0; text-align:center; font-size:12px; color:#a6b0c0}

/* Leaving transition */
body.leaving .earth-wrap{transition:transform .45s ease, opacity .45s ease; transform:translateY(-10px) scale(.98); opacity:.4}
body.leaving #siteTitle, body.leaving .taglines{transition:opacity .35s ease; opacity:.0}

/* RTL helper */
.rtl .taglines{direction:rtl}

.spinner{
  position:absolute; inset:0; display:grid; place-items:center;
}
.spinner::after{
  content:""; width:36px; height:36px; border-radius:50%;
  border:3px solid rgba(255,255,255,.15);
  border-top-color: var(--gold);
  animation: spin 1s linear infinite;
}
.earth.ready ~ .spinner{ display:none; } /* وقتی مدیا آماده شد مخفی شود */

/* Subtle gold particles */
.bg-particles{
  position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(2px 2px at 12% 22%, rgba(212,175,55,.35), transparent 60%),
    radial-gradient(2px 2px at 78% 18%, rgba(212,175,55,.25), transparent 60%),
    radial-gradient(2px 2px at 30% 80%, rgba(212,175,55,.28), transparent 60%),
    radial-gradient(2px 2px at 66% 66%, rgba(212,175,55,.22), transparent 60%);
  animation: twinkle 6s ease-in-out infinite alternate;
}
@keyframes twinkle{
  0% { opacity:.35; transform:translateY(0) }
  100%{ opacity:.6;  transform:translateY(-6px) }
}
/* لایه‌بندی صحیح: intro بالای ذرات */
#intro{ position:relative; z-index:1; }