/* team-resume.css — استایل مشترک برای همه‌ی صفحات رزومه‌ی اعضای تیم.
   فایل static جدا، یک‌بار توسط مرورگر کش می‌شه. فقط زیر .art-resume اثر می‌ذاره. */

.art-resume {
	--a-purple: #5a0c75;
	--a-purple-light: #8a3bb0;
	--a-purple-deep: #2c0640;
	--a-gold: #ffb800;
	--a-gold-soft: #ffd873;
	--a-ink: #f4ecf9;
	--a-muted: #b9a4c9;
	--a-void: #050208;
	--a-glass: rgba(255,255,255,.04);
	--a-glass-border: rgba(255,184,0,.18);
	position: relative;
	overflow-x: hidden;
	isolation: isolate;
	background: var(--a-void);
	color: var(--a-ink);
	font-family: inherit;
	direction: rtl;
	width: 100%;
	max-width: 100%;
	min-height: 100vh;
	/* توجه: اینجا دیگه filter نداریم. چرا؟ چون هر عنصری که filter
	   داشته باشه، طبق مشخصات CSS خودش containing block فرزندهای
	   position:fixed می‌شه، نه viewport واقعی. کانواس پس‌زمینه‌ی
	   سینمایی (پایین‌تر) fixed هست و باید نسبت به کل صفحه فیکس بمونه؛
	   رنگ‌بندی سینمایی (که قبلاً اینجا اعمال می‌شد) الان روی
	   .art-content اعمال می‌شه، نه روی خودِ .art-resume. */
}

	.art-resume * {
		box-sizing: border-box;
	}

	.art-resume ::selection {
		background: var(--a-gold);
		color: var(--a-void);
	}

	.art-resume img {
		max-width: 100%;
	}

	.art-resume section {
		position: relative;
		z-index: 2;
	}

/* ============================================================
   کانواس پس‌زمینه‌ی سینمایی (کهکشان + مار نوری + گوی‌ها + تابلوها).
   همون‌جایی می‌مونه که تو HTML هست (داخل .art-resume، قبل از
   .art-content) و position:fixed داره تا با اسکرول کل صفحه ثابت
   بمونه. دیگه لازم نیست با جاوااسکریپت از DOM بیرون کشیده بشه، چون
   filter رو از رو .art-resume برداشتیم (بالا توضیح داده شده) —
   پس این المان دیگه containing block نامناسبی نداره و fixed خالص و
   قابل‌اعتماده. ============================================================ */
.art-bg-canvas {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	z-index: 0;
	pointer-events: none;
	opacity: .5;
}

/* wrapper محتوا: همه‌ی سکشن‌ها (intro تا contact) داخل همینن.
   رنگ‌بندی سینمایی هر سکانس و فید تیره‌شدن بخش تماس با GSAP روی
   همین filter اعمال می‌شن — نه روی خودِ .art-resume — دقیقاً به‌خاطر
   همون دلیل بالا (containing block کانواس fixed). */
.art-content {
	position: relative;
	z-index: 1;
	filter: saturate(1) brightness(1);
}

.art-spot-rail {
	position: absolute;
	top: 0;
	right: 28px;
	width: 2px;
	height: 100%;
	z-index: 5;
	pointer-events: none;
	background: linear-gradient(to bottom, transparent 0%, rgba(255,184,0,.35) 15%, rgba(90,12,117,.5) 50%, rgba(255,184,0,.35) 85%, transparent 100%);
}

@media (max-width:768px) {
	.art-spot-rail {
		display: none;
	}
}

.art-grain {
	position: absolute;
	inset: 0;
	z-index: 4;
	pointer-events: none;
	opacity: .05;
	mix-blend-mode: overlay;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.art-vignette {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
	background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,.55) 100%);
}

.art-section {
	padding: min(14vw,140px) 0;
}

.art-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--a-gold);
	font-weight: 700;
	font-size: .85rem;
	margin-bottom: 16px;
}

	.art-eyebrow::before {
		content: '';
		width: 26px;
		height: 2px;
		background: var(--a-gold);
		display: inline-block;
	}

.art-title {
	font-size: clamp(1.9rem,4vw,2.9rem);
	font-weight: 800;
	margin-bottom: 22px;
	line-height: 1.35;
}

	.art-title .accent {
		color: var(--a-gold);
	}

.art-sub {
	color: var(--a-muted);
	font-size: 1.05rem;
	max-width: 720px;
	line-height: 2;
}

.art-center {
	text-align: center;
	max-width: 700px;
	margin: 0 auto;
}

.art-panel {
	background: var(--a-glass);
	border: 1px solid var(--a-glass-border);
	border-radius: 26px;
	padding: min(6vw,50px);
	backdrop-filter: blur(18px) saturate(140%);
}

/* intro */
.art-intro {
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: radial-gradient(ellipse at 50% 40%, rgba(21,10,30,.55) 0%, rgba(5,2,8,.75) 70%);
	overflow: hidden;
}

.art-letterbox-top,
.art-letterbox-bottom {
	position: absolute;
	left: 0;
	right: 0;
	height: 0;
	background: #000;
	z-index: 6;
	pointer-events: none;
}

.art-letterbox-top {
	top: 0;
}

.art-letterbox-bottom {
	bottom: 0;
}

.art-intro-stage {
	position: relative;
	width: 100%;
	max-width: 520px;
	perspective: 900px;
}

.art-intro-glow {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 520px;
	height: 520px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,184,0,.35) 0%, rgba(255,184,0,.08) 40%, transparent 70%);
	filter: blur(10px);
	opacity: 0;
}

.art-intro-photo {
	position: relative;
	width: 230px;
	height: 230px;
	margin: 0 auto;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid rgba(255,184,0,.5);
	box-shadow: 0 0 0 10px rgba(90,12,117,.25), 0 0 60px 10px rgba(255,184,0,.25);
	z-index: 2;
	opacity: 0;
	transform: scale(.8);
	filter: blur(18px) brightness(.3);
}

	.art-intro-photo img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
		will-change: transform;
		transform-origin: 50% 42%;
	}

.art-intro-name {
	margin-top: 34px;
	overflow: hidden;
	position: relative;
	z-index: 2;
	line-height: 1.28;
}

	.art-intro-name .name-inner {
		display: inline-block;
		font-size: clamp(2.4rem,6vw,3.8rem);
		font-weight: 900;
		letter-spacing: 1px;
		background: linear-gradient(120deg, var(--a-gold-soft), var(--a-gold) 40%, var(--a-purple-light) 75%, var(--a-gold-soft));
		background-size: 250% auto;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		filter: drop-shadow(0 0 18px rgba(90,12,117,.55));
		opacity: 0;
		transform: translateY(115%);
	}

.art-intro-title {
	margin-top: 14px;
	font-size: clamp(1rem,2.4vw,1.35rem);
	font-weight: 500;
	color: var(--a-muted);
	opacity: 0;
	transform: translateY(24px);
	position: relative;
	z-index: 2;
}

	.art-intro-title b {
		color: var(--a-gold);
		font-weight: 700;
	}

.art-intro-logo {
	margin-top: 38px;
	height: 46px;
	opacity: 0;
	filter: brightness(0) invert(1);
	position: relative;
	z-index: 2;
}

.art-scroll-cue {
	position: absolute;
	bottom: 16px;
	left: 50%;
	transform: translateX(-50%);
	color: var(--a-muted);
	font-size: .78rem;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	opacity: 0;
	animation: artFadeCue 1.2s ease 2.4s forwards;
}

	.art-scroll-cue .line {
		width: 1px;
		height: 38px;
		background: linear-gradient(var(--a-gold), transparent);
		animation: artScrollLine 1.8s ease-in-out infinite;
	}

@keyframes artFadeCue {
	to {
		opacity: .8;
	}
}

@keyframes artScrollLine {
	0% {
		transform: scaleY(0);
		transform-origin: top;
	}

	50% {
		transform: scaleY(1);
		transform-origin: top;
	}

	50.1% {
		transform-origin: bottom;
	}

	100% {
		transform: scaleY(0);
		transform-origin: bottom;
	}
}

/* about */
.art-about-figure {
	position: relative;
	border-radius: 24px;
	overflow: hidden;
	box-shadow: 0 40px 80px -20px rgba(90,12,117,.5);
	aspect-ratio: 4/5;
	border: 1px solid rgba(255,184,0,.18);
}

	.art-about-figure img {
		position: absolute;
		inset: 0;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: top center;
		filter: saturate(1.05) contrast(1.05);
		will-change: transform;
	}

	.art-about-figure .corner {
		position: absolute;
		width: 34px;
		height: 34px;
		z-index: 2;
		border: 2px solid var(--a-gold);
		opacity: .85;
	}

		.art-about-figure .corner.tl {
			top: 14px;
			right: 14px;
			border-left: none;
			border-bottom: none;
		}

		.art-about-figure .corner.br {
			bottom: 14px;
			left: 14px;
			border-right: none;
			border-top: none;
		}

.art-split-line {
	overflow: hidden;
	display: block;
}

	.art-split-line > span {
		display: inline-block;
		opacity: 0;
		transform: translateY(100%);
	}

.art-about-text p {
	color: #d8c9e6;
	line-height: 2.1;
	font-size: 1.05rem;
	margin-bottom: 20px;
}

.art-about-text strong {
	color: var(--a-gold);
}

/* career timeline */
.art-career-track {
	position: relative;
}

.art-career-line {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 19px;
	width: 2px;
	background: rgba(255,255,255,.08);
}

.art-career-fill {
	position: absolute;
	top: 0;
	right: 19px;
	width: 2px;
	height: 0%;
	background: linear-gradient(var(--a-gold), var(--a-purple-light));
}

.art-career-item {
	position: relative;
	padding: 0 60px 54px 0;
	opacity: 0;
	transform: translateY(24px);
}

	.art-career-item .dot {
		position: absolute;
		top: 2px;
		right: 10px;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--a-void);
		border: 2px solid rgba(255,255,255,.2);
		transition: all .5s;
		z-index: 1;
	}

	.art-career-item.on .dot {
		border-color: var(--a-gold);
		background: var(--a-gold);
		box-shadow: 0 0 0 6px rgba(255,184,0,.18);
	}

.art-career-year {
	color: var(--a-gold);
	font-weight: 800;
	font-size: .82rem;
	letter-spacing: .4px;
	margin-bottom: 8px;
}

.art-career-item h6 {
	color: var(--a-muted);
	font-weight: 700;
	font-size: 1.15rem;
	margin-bottom: 10px;
	transition: color .5s;
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 10px;
}

.art-career-item.on h6 {
	color: var(--a-ink);
}

.art-career-item h6 .role {
	color: var(--a-gold);
	font-size: .78rem;
	font-weight: 600;
	background: rgba(255,184,0,.1);
	border: 1px solid rgba(255,184,0,.25);
	padding: 4px 12px;
	border-radius: 20px;
}

.art-career-item p {
	color: var(--a-muted);
	font-size: .95rem;
	line-height: 1.9;
	margin: 0 0 14px;
}

.art-career-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

	.art-career-tags span {
		font-size: .78rem;
		padding: 5px 14px;
		border-radius: 20px;
		background: rgba(255,184,0,.06);
		border: 1px solid rgba(255,184,0,.2);
		color: var(--a-gold-soft);
	}

@media (max-width:768px) {
	.art-career-item h6 {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
}

/* role */
.art-role-list {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.art-role-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 20px 26px;
	border-radius: 16px;
	background: rgba(255,255,255,.02);
	border: 1px solid rgba(255,255,255,.05);
	overflow: hidden;
	opacity: 0;
}

	.art-role-item::before {
		content: '';
		position: absolute;
		top: 0;
		bottom: 0;
		right: 0;
		width: 0%;
		background: linear-gradient(90deg, rgba(90,12,117,.45), rgba(255,184,0,.12));
		transition: width .7s cubic-bezier(.16,1,.3,1);
		z-index: 0;
	}

	.art-role-item.lit::before {
		width: 100%;
	}

.art-role-check {
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,184,0,.18), transparent 70%);
	border: 1px solid var(--a-gold);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--a-gold);
	position: relative;
	z-index: 1;
	transform: scale(0) rotate(-90deg);
	opacity: 0;
}

.art-role-item.lit .art-role-check {
	animation: artPopCheck .55s cubic-bezier(.34,1.56,.64,1) forwards;
}

@keyframes artPopCheck {
	to {
		transform: scale(1) rotate(0deg);
		opacity: 1;
	}
}

.art-role-text {
	position: relative;
	z-index: 1;
	font-size: 1.02rem;
	font-weight: 500;
}

/* services */
.art-service {
	perspective: 1000px;
	height: 100%;
}

.art-service-inner {
	background: linear-gradient(160deg, rgba(255,255,255,.045), rgba(255,255,255,.015));
	border: 1px solid rgba(255,255,255,.08);
	border-radius: 22px;
	padding: 38px 30px;
	height: 100%;
	transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s, border-color .5s;
	transform-style: preserve-3d;
	position: relative;
	overflow: hidden;
}

.art-service:hover .art-service-inner {
	border-color: rgba(255,184,0,.55);
	box-shadow: 0 25px 60px -15px rgba(255,184,0,.35);
}

.art-service-icon {
	width: 58px;
	height: 58px;
	border-radius: 16px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: linear-gradient(135deg, var(--a-purple), var(--a-purple-deep));
	color: var(--a-gold);
	font-size: 1.4rem;
	margin-bottom: 22px;
}

.art-service-inner h4 {
	font-size: 1.15rem;
	font-weight: 700;
	margin-bottom: 12px;
}

.art-service-inner p {
	color: var(--a-muted);
	font-size: .92rem;
	line-height: 1.9;
	margin: 0;
}

/* skills */
.art-skill-col h5 {
	color: var(--a-gold);
	font-weight: 800;
	font-size: 1.15rem;
	margin-bottom: 26px;
	display: flex;
	align-items: center;
	gap: 10px;
}

	.art-skill-col h5 i {
		animation: artPulseIcon 2.2s ease-in-out infinite;
	}

@keyframes artPulseIcon {
	0%,100% {
		opacity: .6;
		transform: scale(1);
	}

	50% {
		opacity: 1;
		transform: scale(1.15);
	}
}

.art-skill-row {
	position: relative;
	padding: 12px 0;
	border-bottom: 1px solid rgba(255,255,255,.06);
	color: #e7dbf1;
	font-size: .98rem;
}

	.art-skill-row .line {
		position: absolute;
		bottom: -1px;
		right: 0;
		height: 2px;
		width: 0%;
		background: linear-gradient(90deg, var(--a-gold), var(--a-purple-light));
	}

	.art-skill-row.lit .line {
		width: 100%;
		transition: width 1s cubic-bezier(.16,1,.3,1);
	}

/* values */
.art-value {
	position: relative;
	text-align: center;
	padding: 48px 28px;
	border-radius: 22px;
	background: rgba(255,255,255,.035);
	border: 1px solid rgba(255,255,255,.07);
	backdrop-filter: blur(14px);
	opacity: 0;
	transform: translateY(60px) scale(.9);
	transition: border-color .5s, box-shadow .5s, transform .5s;
}

	.art-value:hover {
		border-color: rgba(255,184,0,.4);
		box-shadow: 0 25px 60px -18px rgba(255,184,0,.25);
		transform: translateY(-6px) scale(1.02) !important;
	}

	.art-value.spot .art-value-glow {
		opacity: 1;
		transform: scale(1);
	}

.art-value-glow {
	position: absolute;
	inset: 0;
	margin: auto;
	width: 160px;
	height: 160px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,184,0,.35), transparent 70%);
	opacity: 0;
	transform: scale(.6);
	transition: all .9s cubic-bezier(.16,1,.3,1);
}

.art-value-num {
	font-size: 2.6rem;
	font-weight: 900;
	color: transparent;
	-webkit-text-stroke: 1.4px var(--a-gold);
	position: relative;
	margin-bottom: 8px;
}

.art-value h6 {
	font-weight: 700;
	font-size: 1.1rem;
	margin-bottom: 10px;
	position: relative;
}

.art-value p {
	color: var(--a-muted);
	font-size: .9rem;
	line-height: 1.8;
	margin: 0;
	position: relative;
}

/* vision */
.art-vision-track {
	position: relative;
}

.art-vision-line {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 19px;
	width: 2px;
	background: rgba(255,255,255,.08);
}

.art-vision-fill {
	position: absolute;
	top: 0;
	right: 19px;
	width: 2px;
	height: 0%;
	background: linear-gradient(var(--a-gold), var(--a-purple-light));
}

.art-vision-item {
	position: relative;
	padding: 0 60px 60px 0;
	opacity: 0;
}

	.art-vision-item .dot {
		position: absolute;
		top: 0;
		right: 10px;
		width: 22px;
		height: 22px;
		border-radius: 50%;
		background: var(--a-void);
		border: 2px solid rgba(255,255,255,.2);
		transition: all .5s;
	}

	.art-vision-item.on .dot {
		border-color: var(--a-gold);
		background: var(--a-gold);
		box-shadow: 0 0 0 6px rgba(255,184,0,.18);
	}

	.art-vision-item h6 {
		color: var(--a-muted);
		font-weight: 700;
		font-size: 1.08rem;
		margin-bottom: 6px;
		transition: color .5s;
	}

	.art-vision-item.on h6 {
		color: var(--a-gold);
	}

	.art-vision-item p {
		color: var(--a-muted);
		margin: 0;
		font-size: .95rem;
		line-height: 1.8;
	}

/* contact */
.art-btn {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 16px;
	padding: 14px 30px 14px 14px;
	border-radius: 50px;
	font-weight: 700;
	font-size: .98rem;
	text-decoration: none;
	color: #fff;
	overflow: hidden;
	isolation: isolate;
	border: 1px solid rgba(255,255,255,.1);
	transition: box-shadow .4s, border-color .4s;
	cursor: pointer;
}

	.art-btn .ring {
		position: absolute;
		inset: 0;
		border-radius: inherit;
		padding: 1.5px;
		z-index: 0;
		background: conic-gradient(from 0deg, var(--a-gold), transparent 22%, var(--a-purple-light) 50%, transparent 78%, var(--a-gold));
		-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
		-webkit-mask-composite: xor;
		mask-composite: exclude;
		animation: artRingSpin 5s linear infinite;
		opacity: .55;
	}

@keyframes artRingSpin {
	to {
		transform: rotate(360deg);
	}
}

.art-btn .shine {
	position: absolute;
	top: 0;
	bottom: 0;
	width: 55%;
	left: -70%;
	background: linear-gradient(115deg, transparent, rgba(255,255,255,.4), transparent);
	transform: skewX(-20deg);
	transition: left .75s cubic-bezier(.16,1,.3,1);
	z-index: 1;
	pointer-events: none;
}

.art-btn:hover .shine {
	left: 130%;
}

.art-btn .icon {
	position: relative;
	z-index: 2;
	width: 42px;
	height: 42px;
	min-width: 42px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.05rem;
	background: rgba(255,255,255,.14);
	transition: transform .45s cubic-bezier(.34,1.56,.64,1);
}

.art-btn:hover .icon {
	transform: rotate(-16deg) scale(1.1);
}

.art-btn .text {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	line-height: 1.35;
}

	.art-btn .text small {
		font-weight: 500;
		font-size: .72rem;
		opacity: .78;
		margin-top: 2px;
	}

.art-btn.main {
	background: linear-gradient(135deg, rgba(90,12,117,.92), rgba(123,63,224,.92));
}

.art-btn.mail {
	background: linear-gradient(135deg, rgba(255,184,0,.96), rgba(255,143,0,.96));
	color: var(--a-void);
}

	.art-btn.mail .icon {
		background: rgba(5,2,8,.14);
	}

.art-btn:hover {
	box-shadow: 0 25px 55px -16px rgba(255,184,0,.45);
	border-color: rgba(255,184,0,.4);
}

.art-copy-pulse {
	position: absolute;
	inset: 0;
	border-radius: 50px;
	border: 2px solid var(--a-gold);
	opacity: 0;
	pointer-events: none;
	z-index: 3;
}

	.art-copy-pulse.go {
		animation: artPulseRing .7s ease-out;
	}

@keyframes artPulseRing {
	0% {
		opacity: .9;
		transform: scale(1);
	}

	100% {
		opacity: 0;
		transform: scale(1.35);
	}
}

@media (max-width:768px) {
	.art-section {
		padding: 70px 20px;
	}

	.art-panel {
		padding: 28px;
	}
}

.art-planet-logo {
	/* یه نسبت ثابت بین اندازه‌ی سیاره و حلقه، پس هیچ‌وقت این دو از
	   نسبت هم بیرون نمی‌زنن — با تغییر همین یه عدد، همه‌چیز با هم
	   هماهنگ بزرگ/کوچیک می‌شه. */
	--planet-size: 108px;
	--ring-size: calc(var(--planet-size) * 1.85);
	position: relative;
	width: var(--planet-size);
	height: var(--planet-size);
	margin: 30px auto;
	opacity: 0;
	transform: scale(.7);
}

.art-planet-glow {
	position: absolute;
	inset: calc(var(--planet-size) * -0.32);
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255,184,0,.35), transparent 70%);
	z-index: 1;
	animation: artPlanetPulse 3.4s ease-in-out infinite;
}

/* حلقه دو لایه‌ست: یکی پشت سیاره (z-index کمتر از سیاره)، یکی جلوش
   (z-index بیشتر) ولی با clip-path فقط نیمه‌ش نشون داده می‌شه — این
   دقیقاً همون ترفندیه که یه حلقه‌ی تخت CSS رو مثل حلقه‌ی واقعیِ زحل
   نشون می‌ده: نصفش از جلوی سیاره رد می‌شه، نصفش از پشتش. */
.art-planet-ring-back,
.art-planet-ring-front {
	position: absolute;
	left: 50%;
	top: 50%;
	width: var(--ring-size);
	height: var(--ring-size);
	margin-left: calc(var(--ring-size) / -2);
	margin-top: calc(var(--ring-size) / -2);
	border: 1.5px solid rgba(255,184,0,.6);
	border-radius: 50%;
	box-shadow: 0 0 10px rgba(255,184,0,.35);
	animation: artPlanetRingSpin 9s linear infinite;
	transform: rotate(-18deg) scaleY(.32);
}

.art-planet-ring-back {
	z-index: 2;
}

.art-planet-ring-front {
	z-index: 4;
	/* clip-path قبل از transform اعمال می‌شه، پس بعد از چرخش هم
		   دقیقاً همون نیمه‌ای که باید جلو باشه، جلو می‌مونه. */
	clip-path: inset(50% 0 0 0);
}

/* خودِ سیاره — دقیقاً هم‌اندازه‌ی .art-planet-logo، بدون هیچ فاصله‌ی
   خالی دور لوگو. object-fit:cover یعنی لوگو کاملِ دایره رو پر می‌کنه،
   نه اینکه وسطش با حاشیه‌ی خالی معلق بمونه. */
.art-planet-sphere {
	position: absolute;
	inset: 0;
	z-index: 3;
	border-radius: 50%;
	overflow: hidden;
	border: 2px solid var(--a-gold);
	background: radial-gradient(circle at 38% 35%, #2a1233, #0a0310 78%);
	box-shadow: inset -14px -14px 26px rgba(0,0,0,.65), inset 8px 8px 20px rgba(255,220,150,.2), 0 0 18px 3px rgba(255,184,0,.5), 0 0 46px 12px rgba(90,12,117,.4);
}

	.art-planet-sphere img {
		width: 100%;
		height: 100%;
		object-fit: cover;
		display: block;
	}

@keyframes artPlanetPulse {
	0%, 100% {
		opacity: .55;
		transform: scale(1);
	}

	50% {
		opacity: .9;
		transform: scale(1.12);
	}
}

@keyframes artPlanetRingSpin {
	to {
		transform: rotate(342deg) scaleY(.32);
	}
}

.art-intro-brand {
	margin: 14px 0 0;
	font-size: .95rem;
	font-weight: 700;
	letter-spacing: .5px;
	color: var(--a-gold-soft);
	opacity: 0;
	position: relative;
	z-index: 2;
}