/*
Theme Name: آوای نیایش موزیک
Theme URI: https://avayeniyayesh.ir
Author: Avaye Niayesh Music Institute
Author URI: https://avayeniyayesh.ir
Description: قالب کاملاً ویرایش‌پذیر وردپرس (Full Site Editing) برای آموزشگاه موسیقی آوای نیایش. هدر، فوتر، رنگ‌ها، فونت‌ها، متن‌ها و عکس‌ها همگی از طریق «ظاهر ← ویرایشگر سایت»، بدون نیاز به کدنویسی، قابل ویرایش هستند.
Version: 3.1.0
Requires at least: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: avaye-niayesh
Tags: education, block-patterns, full-site-editing, rtl-language-support, translation-ready, custom-colors, custom-menu
*/

/* ==========================================================================
   پایه
   ========================================================================== */
html { scroll-behavior: smooth; }
img { max-width: 100%; height: auto; }
.wp-caption { max-width: 100%; }
body {
	direction: rtl;
	background:
		radial-gradient(1200px 600px at 8% -10%, rgba(78,110,85,0.10), transparent 60%),
		radial-gradient(900px 500px at 100% 0%, rgba(176,141,62,0.10), transparent 55%),
		var(--wp--preset--color--cream);
	background-attachment: fixed;
}

h1, h2, h3 { text-shadow: 0 1px 0 rgba(255,255,255,0.35); }

::selection { background: var(--wp--preset--color--gold-soft, #E4C77E); color: var(--wp--preset--color--green-deep); }

/* بافت نویزِ ظریف روی کل سایت — حس متریال و پرمیوم به‌جای رنگ صاف */
body::before{
	content:"";
	position: fixed;
	inset: 0;
	z-index: 9990;
	pointer-events: none;
	opacity: 0.035;
	mix-blend-mode: multiply;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%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");
}
@media (prefers-reduced-motion: reduce), (max-width: 480px){ body::before{ display:none; } }

/* بخش‌های رنگیِ تمام‌عرض — پنل‌های شناور با گوشه‌های گرد به‌جای مستطیل صاف */
main .wp-block-group.alignfull.has-background{
	border-radius: 44px;
	margin-block: 14px;
	overflow: hidden;
	box-shadow: 0 30px 70px -40px rgba(34,37,28,0.35);
}
@media (max-width: 782px){
	main .wp-block-group.alignfull.has-background{ border-radius: 26px; margin-block: 8px; }
}

/* برچسبِ کوچک بالای هر بخش — خط طلایی با درخشش عبوری آرام */
.avn-eyebrow::before{
	background: linear-gradient(90deg, var(--wp--preset--color--gold), var(--wp--preset--color--gold-soft), var(--wp--preset--color--gold));
	background-size: 200% 100%;
	animation: avn-shimmer 3.5s ease-in-out infinite;
}
@keyframes avn-shimmer{
	0%, 100%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce){ .avn-eyebrow::before{ animation:none; } }

/* ==========================================================================
   نوار بالای هدر — شیشه‌ای
   ========================================================================== */
.avn-topbar{
	background: linear-gradient(180deg, var(--wp--preset--color--green-deep), #21351F 130%);
	color: #E7EEDF;
	font-size: 0.85rem;
}
.avn-topbar .wp-block-group{ align-items:center; gap:18px; padding:8px 0; }
.avn-topbar a{ color:#E7EEDF; }
.avn-topbar a:hover{ color: var(--wp--preset--color--gold-soft, #E4C77E); }
.avn-topbar .wp-block-social-links{ gap:14px; }
.avn-topbar .wp-block-social-links a{ font-size:0.8rem; opacity:.85; }
.avn-topbar .wp-block-social-links a:hover{ opacity:1; }

/* ==========================================================================
   هدر دسکتاپ — شیشه‌ای با عمق سه‌بعدی
   ========================================================================== */
.avn-header{
	border-bottom: 1px solid rgba(227,216,190,0.6);
	background: linear-gradient(180deg, rgba(247,242,230,0.86), rgba(247,242,230,0.72));
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	position: sticky;
	top: 0;
	z-index: 999;
	box-shadow: 0 1px 0 rgba(255,255,255,0.5) inset, 0 12px 30px -20px rgba(34,37,28,0.25);
}
.avn-header-inner{
	display:flex;
	flex-wrap: wrap;
	row-gap: 10px;
	align-items:center;
	justify-content:space-between;
	gap:16px;
	padding:14px 0;
}
.avn-logo-area{ display:flex; align-items:center; gap:10px; flex-shrink: 0; }
.avn-logo-area img{
	border-radius: 14px;
	box-shadow: 0 6px 16px -6px rgba(40,64,47,0.35);
}
.avn-header .wp-block-navigation{
	gap: 2px;
	flex-wrap: wrap;
	row-gap: 4px;
}
.avn-header .wp-block-navigation-item > .wp-block-navigation-item__content{
	position: relative;
	padding: 8px 11px;
	border-radius: 999px;
	white-space: nowrap;
	font-size: 0.94rem;
	transition: background .25s ease, color .25s ease, transform .2s ease;
}
.avn-header .wp-block-navigation-item > .wp-block-navigation-item__content::after{
	content: "";
	position: absolute; right: 11px; bottom: 2px;
	width: 0; height: 2px;
	background: var(--wp--preset--color--gold);
	transition: width .3s ease;
}
.avn-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content{
	background: rgba(255,255,255,0.55);
	transform: translateY(-1px);
	box-shadow: 0 6px 14px -8px rgba(34,37,28,0.3);
}
.avn-header .wp-block-navigation-item:hover > .wp-block-navigation-item__content::after{ width: calc(100% - 22px); }
.avn-header .wp-block-buttons{ flex-shrink: 0; }
.avn-header .wp-block-buttons .wp-block-button__link{
	white-space: nowrap;
	padding-top: 12px;
	padding-bottom: 12px;
	box-shadow: 0 10px 22px -10px rgba(40,64,47,0.55), inset 0 1px 0 rgba(255,255,255,0.25);
	transition: transform .25s ease, box-shadow .25s ease;
}
.avn-header .wp-block-buttons .wp-block-button__link:hover{
	transform: translateY(-2px);
	box-shadow: 0 14px 28px -10px rgba(40,64,47,0.6), inset 0 1px 0 rgba(255,255,255,0.3);
}
.avn-logo-area{ position: relative; z-index: 2; }
.avn-logo-area a{ pointer-events: auto; }

/* بین ۱۲۰۰ تا ۱۳۶۰px کمی فشرده‌تر می‌شویم تا با فاصله‌ی بیشتری جا شود */
@media (min-width: 1200px) and (max-width: 1360px){
	.avn-header .wp-block-navigation-item > .wp-block-navigation-item__content{ padding: 8px 8px; font-size: 0.88rem; }
	.avn-header .wp-block-buttons .wp-block-button__link{ padding-left: 22px; padding-right: 22px; }
}

/* زیر ۱۲۰۰px هدر موبایل نمایش داده می‌شود؛ هدر دسکتاپ (و نوار بالا) کاملاً کنار می‌رود
   تا دو هدر روی هم نیفتند. مرز ۱۲۰۰px با توجه به عرض واقعیِ لازم برای لوگو + ۸ آیتم
   منو + دکمه‌ی ثبت‌نام انتخاب شده تا هدر دسکتاپ همیشه به‌درستی جا شود و فیت نشدنش
   دیگر تکرار نشود. */
@media (max-width: 1200px){
	.avn-topbar,
	.avn-header{
		display: none !important;
	}
}

/* ==========================================================================
   نوار پایین اپلیکیشنی موبایل (parts/header-mobile.html)
   تنها هدر/منوی موبایل سایت — بدون نوار بالا، بدون هدر جداگانه.
   ========================================================================== */
.avn-mnav{
	--avn-cream:#F6F1E4;
	--avn-green:#4E6E55;
	--avn-green-deep:#28402F;
	--avn-gold:#B08D3E;
	--avn-gold-soft:#E4C77E;
	--avn-ink:#22251C;

	font-family:'Vazirmatn', sans-serif;
	direction:rtl;
	display:none;
}

/* فقط زیر ۱۲۰۰px نمایش داده شود — دسکتاپ هدر خودش را دارد (مرز با
   هدر دسکتاپ در همین فایل، بخش .avn-header، هماهنگ نگه داشته شود) */
@media (max-width:1200px){
	.avn-mnav{ display:block; }
}

/* ---------- پرده تیره پشت کشو ---------- */
.avn-mnav-overlay{
	position:fixed;
	inset:0;
	z-index:9999;
	background:rgba(20,28,17,.55);
	-webkit-backdrop-filter:blur(2px);
	backdrop-filter:blur(2px);
	opacity:0;
	visibility:hidden;
	transition:opacity .35s ease, visibility .35s ease;
}
.avn-mnav-overlay.active{
	opacity:1;
	visibility:visible;
}

/* ---------- کشوی منو از پایین به بالا (Bottom Sheet) ---------- */
.avn-mnav-sheet{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:10000;
	max-height:80vh;
	background:#F8F4E9;
	box-shadow:0 -24px 60px rgba(20,28,17,.3);
	border-radius:22px 22px 0 0;
	transform:translateY(100%);
	transition:transform .35s cubic-bezier(.22,1,.36,1);
	display:flex;
	flex-direction:column;
	padding:12px 22px calc(18px + env(safe-area-inset-bottom, 0px));
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
}
.avn-mnav-sheet.active{
	transform:translateY(0);
}

.avn-mnav-sheet-handle{
	width:40px;
	height:4px;
	border-radius:99px;
	background:rgba(46,67,39,.25);
	margin:0 auto 14px;
	flex-shrink:0;
}

.avn-mnav-panel-head{
	display:flex;
	align-items:center;
	justify-content:space-between;
	margin-bottom:10px;
	padding-bottom:14px;
	border-bottom:1px solid rgba(46,67,39,.15);
}

.avn-mnav-panel-title{
	font-size:13px;
	font-weight:600;
	letter-spacing:.3px;
	color:var(--avn-gold) !important;
	text-transform:uppercase;
}

.avn-mnav-close{
	width:36px;
	height:36px;
	border-radius:50%;
	border:none;
	background:rgba(46,67,39,.08);
	color:var(--avn-green-deep) !important;
	font-size:22px;
	line-height:1;
	cursor:pointer;
	display:flex;
	align-items:center;
	justify-content:center;
}
.avn-mnav-close:hover{
	background:rgba(46,67,39,.15);
}

/* ---------- لیست آیتم‌ها ----------
   نکته: قبلاً آیتم‌ها با opacity:0 شروع می‌شدند و فقط با یک انیمیشن
   پلکانیِ زمان‌بندی‌شده نمایان می‌شدند — روی بعضی مرورگرهای موبایل این
   انیمیشن هیچ‌وقت اجرا نمی‌شد و آیتم‌ها برای همیشه نامرئی می‌ماندند.
   حالا آیتم‌ها همیشه و بدون هیچ پیش‌شرطی کاملاً دیده می‌شوند. */
.avn-mnav-list{
	list-style:none;
	margin:0;
	padding:0;
}

.avn-mnav-list li{
	opacity:1;
}

.avn-mnav-list a{
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:15px 4px;
	font-size:16.5px;
	font-weight:600;
	color:var(--avn-ink) !important;
	text-decoration:none;
	border-bottom:1px solid rgba(46,67,39,.10);
	position:relative;
	transition:color .25s ease, padding-right .25s ease;
}

.avn-mnav-list a::before{
	content:"";
	width:6px;
	height:6px;
	border-radius:50%;
	background:var(--avn-gold);
	opacity:0;
	transform:scale(.4);
	transition:opacity .25s ease, transform .25s ease;
}

.avn-mnav-list a:active,
.avn-mnav-list a:focus-visible{
	color:var(--avn-green) !important;
	padding-right:12px;
}
.avn-mnav-list a:active::before,
.avn-mnav-list a:focus-visible::before{
	opacity:1;
	transform:scale(1);
}

/* ---------- نوار پایین ثابت (Bottom Tab Bar) ---------- */
.avn-mtabbar{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:9997;
	display:flex;
	align-items:stretch;
	justify-content:space-around;
	padding:8px 6px calc(8px + env(safe-area-inset-bottom, 0px));
	background:linear-gradient(180deg, rgba(246,241,228,.94), rgba(246,241,228,.99));
	-webkit-backdrop-filter:blur(18px) saturate(150%);
	backdrop-filter:blur(18px) saturate(150%);
	border-top:1px solid rgba(46,67,39,.14);
	box-shadow:0 -10px 26px -18px rgba(20,28,17,.4);
}

.avn-mtab{
	flex:1;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	gap:3px;
	padding:6px 0;
	border:none;
	background:transparent;
	color:var(--avn-green-deep);
	text-decoration:none;
	cursor:pointer;
	-webkit-tap-highlight-color:transparent;
}

.avn-mtab-ic{
	display:flex;
	align-items:center;
	justify-content:center;
	width:26px;
	height:26px;
	color:var(--avn-green-deep) !important;
}
.avn-mtab-ic svg{ fill:currentColor; }

.avn-mtab-label{
	font-size:9.8px;
	font-weight:600;
	color:var(--avn-green-deep) !important;
	line-height:1;
}

.avn-mtab:active{ transform:scale(.92); transition:transform .15s ease; }

.avn-mtab-active .avn-mtab-ic,
.avn-mtab-active .avn-mtab-label{
	color:var(--avn-gold) !important;
}

/* حالت باز — دکمه‌ی «منو» طلایی می‌شود تا وضعیت باز/بسته مشخص باشد */
.avn-mtab-btn[aria-expanded="true"] .avn-mtab-ic,
.avn-mtab-btn[aria-expanded="true"] .avn-mtab-label{
	color:var(--avn-gold) !important;
}

/* دکمه‌ی «ثبت‌نام» — برجسته‌تر، شبیه دکمه‌ی اکشن اصلی اپ‌های موبایل */
.avn-mtab-cta{
	position:relative;
}
.avn-mtab-cta .avn-mtab-ic{
	width:44px;
	height:44px;
	margin-top:-22px;
	border-radius:50%;
	background:linear-gradient(155deg, var(--avn-green-deep), var(--avn-green));
	color:#fff !important;
	box-shadow:0 10px 20px -8px rgba(40,64,47,.6), 0 0 0 5px rgba(246,241,228,.98);
}
.avn-mtab-cta .avn-mtab-ic svg{ fill:#fff; }
.avn-mtab-cta .avn-mtab-label{ color:var(--avn-green-deep) !important; margin-top:1px; }

/* چون نوار پایین ثابت است، محتوای صفحه باید یک فاصله‌ی پایینی معادل ارتفاع آن داشته باشد
   تا چیزی زیر آن مخفی نشود */
@media (max-width:1200px){
	body{ padding-bottom: calc(66px + env(safe-area-inset-bottom, 0px)); }
}

/* موبایل خیلی کوچک */
@media (max-width:360px){
	.avn-mtab-label{ font-size:9.5px; }
}

/* احترام به کاهش حرکت */
@media (prefers-reduced-motion: reduce){
	.avn-mnav-sheet,
	.avn-mnav-overlay,
	.avn-mnav-list li{
		transition:none !important;
		animation:none !important;
		opacity:1 !important;
		transform:none !important;
	}
	.avn-mtab{ transition:none !important; }
	.avn-mtab:active{ transform:none; }
}

/* ==========================================================================
   واترمارک کالیگرافی هرو
   ========================================================================== */
.avn-hero{ position: relative; overflow: hidden; }
.avn-hero::before{
	content: "آوا";
	position: absolute;
	inset-inline-end: -0.05em;
	top: -0.28em;
	font-family: var(--wp--preset--font-family--naskh);
	font-size: clamp(9rem, 22vw, 18rem);
	color: var(--wp--preset--color--green-deep);
	opacity: 0.05;
	line-height: 1;
	pointer-events: none;
	z-index: 0;
	user-select: none;
}
.avn-hero > * { position: relative; z-index: 1; }

.avn-hero::after{
	content:"";
	position:absolute; inset:0; z-index:0; pointer-events:none;
	background:
		radial-gradient(420px 420px at 85% 10%, rgba(176,141,62,0.16), transparent 70%),
		radial-gradient(360px 360px at 5% 90%, rgba(78,110,85,0.18), transparent 70%);
	filter: blur(2px);
	animation: avn-orbit 18s ease-in-out infinite alternate;
}
@keyframes avn-orbit{
	from{ transform: translate3d(0,0,0) scale(1); }
	to{ transform: translate3d(-10px,14px,0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce){ .avn-hero::after{ animation:none; } }

.avn-wave{ display: block; width: 100%; max-width: 420px; height: 46px; margin: 8px 0 0; }
.avn-wave path{
	fill: none;
	stroke: var(--wp--preset--color--gold);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-dasharray: 6 10;
	animation: avn-waveflow 5s linear infinite;
}
@keyframes avn-waveflow{ to { stroke-dashoffset: -160; } }
@media (prefers-reduced-motion: reduce){ .avn-wave path{ animation: none; } }

/* ==========================================================================
   کارت‌های شیشه‌ای سه‌بعدی
   ========================================================================== */
.avn-card{
	position: relative;
	background: linear-gradient(165deg, rgba(255,253,249,0.92), rgba(255,253,249,0.72));
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	border: 1px solid rgba(227,216,190,0.8);
	border-radius: 20px;
	box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 14px 32px -20px rgba(34,37,28,0.28);
	transition: transform .45s cubic-bezier(.22,1,.36,1), box-shadow .45s ease, border-color .35s ease;
}
.avn-card::before{
	content:"";
	position:absolute; inset:0; border-radius:inherit; padding:1px;
	background: linear-gradient(135deg, rgba(224,193,120,0.55), rgba(78,110,85,0) 40%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events:none; opacity:0; transition: opacity .35s ease;
}
.avn-card:hover{
	transform: translateY(-8px);
	box-shadow: 0 30px 60px -24px rgba(34,37,28,0.34), 0 1px 0 rgba(255,255,255,0.6) inset;
	border-color: rgba(176,141,62,0.55);
}
.avn-card:hover::before{ opacity: 1; }

.avn-icon-box{
	width: 56px; height: 56px;
	border-radius: 16px;
	background: linear-gradient(150deg, var(--wp--preset--color--green-pale), #fff);
	box-shadow: 0 10px 20px -12px rgba(40,64,47,0.4), inset 0 1px 0 rgba(255,255,255,0.7);
	display: flex; align-items: center; justify-content: center;
}

.avn-avatar-fallback .wp-block-post-featured-image{
	border-radius: 50%; overflow: hidden; width: 128px; height: 128px; margin-inline: auto;
	box-shadow: 0 16px 30px -14px rgba(40,64,47,0.45), 0 0 0 6px rgba(255,255,255,0.6);
	transition: transform .4s ease, box-shadow .4s ease;
}
.avn-avatar-fallback:hover .wp-block-post-featured-image{
	transform: translateY(-4px) scale(1.03);
	box-shadow: 0 22px 40px -16px rgba(40,64,47,0.5), 0 0 0 6px rgba(255,255,255,0.75);
}
.avn-avatar-fallback img{ object-fit: cover; height: 100%; }

/* ==========================================================================
   بنر فراخوان به اقدام — شیشه سبز عمیق
   ========================================================================== */
.avn-cta-banner{
	position: relative;
	overflow: hidden;
	background: linear-gradient(155deg, var(--wp--preset--color--green-deep) 0%, #1D3122 100%);
	border-radius: 28px;
	box-shadow: 0 30px 70px -28px rgba(20,30,20,0.55), inset 0 1px 0 rgba(255,255,255,0.08);
}
.avn-cta-banner::before{
	content:"";
	position:absolute; inset:0;
	background: radial-gradient(500px 260px at 90% -20%, rgba(224,193,120,0.35), transparent 60%);
	pointer-events:none;
}
.avn-cta-banner *{ color: var(--wp--preset--color--cream) !important; position: relative; }
.avn-cta-banner .wp-block-button__link{
	background: linear-gradient(155deg, var(--wp--preset--color--gold-soft, #E4C77E), var(--wp--preset--color--gold)) !important;
	color: var(--wp--preset--color--green-deep) !important;
	box-shadow: 0 14px 28px -12px rgba(0,0,0,0.4);
}
.avn-cta-banner .is-style-outline .wp-block-button__link{
	background: transparent !important;
	color: var(--wp--preset--color--cream) !important;
	border-color: var(--wp--preset--color--cream) !important;
	box-shadow:none;
}

/* ==========================================================================
   گالری
   ========================================================================== */
.avn-gallery-item{
	overflow: hidden;
	border-radius: 16px;
	box-shadow: 0 16px 34px -20px rgba(34,37,28,0.35);
	transition: transform .4s ease, box-shadow .4s ease;
}
.avn-gallery-item:hover{ transform: translateY(-5px); box-shadow: 0 24px 46px -20px rgba(34,37,28,0.4); }
.avn-gallery-item img{ transition: transform .5s ease; }
.avn-gallery-item:hover img{ transform: scale(1.06); }

/* ==========================================================================
   فوتر — سبز تیره شیشه‌ای
   ========================================================================== */
.avn-footer{
	background: linear-gradient(180deg, var(--wp--preset--color--green-deep), #17251B);
	position: relative;
}
.avn-footer::before{
	content:"";
	position:absolute; inset-inline:0; top:0; height:1px;
	background: linear-gradient(90deg, transparent, rgba(224,193,120,0.6), transparent);
}
.avn-footer, .avn-footer a, .avn-footer h2, .avn-footer h3, .avn-footer h4, .avn-footer p{ color: #D9E0D0; }
.avn-footer a:hover{ color: var(--wp--preset--color--gold-soft, #E4C77E); }
.avn-footer .wp-block-social-links .wp-social-link{
	background-color: rgba(255,255,255,0.08);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: transform .25s ease, background-color .25s ease;
}
.avn-footer .wp-block-social-links .wp-social-link:hover{
	background-color: var(--wp--preset--color--gold);
	transform: translateY(-3px);
}

.avn-ltr{ direction: ltr; unicode-bidi: embed; display: inline-block; }

/* پیشرفت تدریجی (Progressive Enhancement): پیش‌فرض همه‌چیز کاملاً
 * دیده می‌شود. فقط وقتی جاوااسکریپت واقعاً اجرا و کلاس «avn-js» را
 * به <html> اضافه کرد، انیمیشن محو-به-نمایان فعال می‌شود. این یعنی:
 *  ۱) داخل ویرایشگر سایت وردپرس (Site Editor) — جایی که main.js
 *     همیشه/به‌موقع اجرا نمی‌شود — محتوای صفحه اصلی و بقیه صفحات
 *     همیشه به‌طور کامل و قابل‌ویرایش دیده می‌شود (نه opacity:0).
 *  ۲) برای کاربر واقعی بدون جاوااسکریپت یا هنگام کندی/خطای اسکریپت،
 *     محتوا هیچ‌وقت نامرئی نمی‌ماند — بهتر برای دسترس‌پذیری و سئو.
 *  ۳) برای مرورگرهای عادی، همان جلوه‌ی محو-به-نمایان قبلی حفظ می‌شود. */
.avn-reveal{ opacity: 1; transform: none; }
html.avn-js .avn-reveal{ opacity: 0; transform: translateY(26px); transition: opacity .9s ease, transform .9s ease; }
html.avn-js .avn-reveal.avn-in{ opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce){ html.avn-js .avn-reveal{ opacity: 1; transform: none; transition: none; } }

/* ==========================================================================
   تصویر ساز در هرو — لایه شیشه‌ای سه‌بعدی
   ========================================================================== */
.avn-hero-visual{
	position: relative;
	max-width: 320px;
	aspect-ratio: 1 / 1.05;
	margin: 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	perspective: 900px;
}
.avn-hero-visual .avn-ring{
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--green-pale), var(--wp--preset--color--cream) 70%);
	border: 1px solid rgba(227,216,190,0.9);
	box-shadow:
		0 40px 80px -30px rgba(40,64,47,0.5),
		inset 0 2px 6px rgba(255,255,255,0.8),
		inset 0 -18px 30px -10px rgba(40,64,47,0.15);
	animation: avn-float 6s ease-in-out infinite;
}
.avn-hero-visual .avn-ring::after{
	content:"";
	position:absolute; inset:10%;
	border-radius:50%;
	background: linear-gradient(135deg, rgba(255,255,255,0.55), rgba(255,255,255,0) 55%);
	pointer-events:none;
}
@keyframes avn-float{
	0%,100%{ transform: translateY(0) rotateZ(0deg); }
	50%{ transform: translateY(-10px) rotateZ(0.4deg); }
}
@media (prefers-reduced-motion: reduce){ .avn-hero-visual .avn-ring{ animation:none; } }
.avn-hero-visual svg{ position: relative; width: 78%; height: auto; filter: drop-shadow(0 18px 22px rgba(40,64,47,0.35)); }

/* ==========================================================================
   هرو نسل جدید — پس‌زمینه‌ی اسلایدشو + کارت شیشه‌ای سه‌بعدی
   ========================================================================== */

/* اسلایدشوی عکس‌های پس‌زمینه — کاملاً با CSS، بدون جاوااسکریپت،
   محو و در حال چرخش، پشت همه‌چیز */
.avn-hero > .avn-hero-bgslide{ position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.avn-hero-bgslide img{
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover; object-position: center;
	opacity: 0;
	filter: grayscale(45%) saturate(70%) brightness(1.05);
	animation: avn-hero-slide-fade 36s infinite;
}
.avn-hero-bgslide img:nth-child(1){ animation-delay: 0s; }
.avn-hero-bgslide img:nth-child(2){ animation-delay: 9s; }
.avn-hero-bgslide img:nth-child(3){ animation-delay: 18s; }
.avn-hero-bgslide img:nth-child(4){ animation-delay: 27s; }
@keyframes avn-hero-slide-fade{
	0%{ opacity: 0; transform: scale(1.06); }
	5%{ opacity: .14; }
	22%{ opacity: .14; }
	28%{ opacity: 0; transform: scale(1.12); }
	100%{ opacity: 0; }
}
@media (prefers-reduced-motion: reduce){
	.avn-hero-bgslide img{ animation: none; opacity: .08; transform: none; }
}

/* نوار آمار شیشه‌ای زیر متن هرو */
.avn-hero-stats-glass{
	background: rgba(255,255,255,0.55);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
	border: 1px solid rgba(255,255,255,0.7);
	border-radius: 20px;
	padding: 18px 6px !important;
	box-shadow: 0 20px 40px -24px rgba(40,64,47,0.3);
}

/* کارت شیشه‌ای سه‌بعدی جایگزین حلقه‌ی قبلی */
.avn-hero-visual-v2{
	position: relative;
	display: flex; align-items: center; justify-content: center;
	min-height: 320px;
	perspective: 1000px;
}
.avn-hero-glass-card{
	position: relative; z-index: 3;
	width: 210px;
	padding: 34px 18px 26px;
	display: flex; align-items: center; justify-content: center;
	background: linear-gradient(160deg, rgba(255,255,255,0.75), rgba(255,255,255,0.32));
	-webkit-backdrop-filter: blur(16px);
	backdrop-filter: blur(16px);
	border: 1px solid rgba(255,255,255,0.75);
	border-radius: 30px;
	box-shadow:
		0 44px 74px -30px rgba(40,64,47,0.48),
		inset 0 1px 0 rgba(255,255,255,0.85);
	transform: perspective(1000px) rotateY(-10deg) rotateX(5deg);
	transition: transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s ease;
}
.avn-hero-visual-v2:hover .avn-hero-glass-card{
	transform: perspective(1000px) rotateY(0deg) rotateX(0deg) translateY(-6px);
	box-shadow: 0 54px 90px -30px rgba(40,64,47,0.55), inset 0 1px 0 rgba(255,255,255,0.85);
}
.avn-hero-glass-card svg{ position: relative; width: 82%; height: auto; filter: drop-shadow(0 16px 20px rgba(40,64,47,0.35)); }

.avn-hero-orb{ position: absolute; border-radius: 50%; z-index: 1; }
.avn-hero-orb-1{
	width: 92px; height: 92px; top: -8%; inset-inline-end: 2%;
	background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--gold-soft), transparent 70%);
	box-shadow: 0 30px 55px -20px rgba(176,141,62,0.55);
	animation: avn-float 8s ease-in-out infinite;
}
.avn-hero-orb-2{
	width: 56px; height: 56px; bottom: 4%; inset-inline-start: 0%;
	background: radial-gradient(circle at 35% 30%, #fff, var(--wp--preset--color--green-pale) 75%);
	box-shadow: 0 24px 42px -18px rgba(40,64,47,0.4);
	animation: avn-float 7s ease-in-out infinite reverse;
}
@media (prefers-reduced-motion: reduce){ .avn-hero-orb{ animation: none; } }

.avn-hero-badge{
	position: absolute; z-index: 4;
	bottom: 8%; inset-inline-start: -6%;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: linear-gradient(155deg, var(--wp--preset--color--green-deep), var(--wp--preset--color--green));
	color: var(--wp--preset--color--cream);
	border-radius: 18px;
	min-width: 76px;
	padding: 10px 14px;
	box-shadow: 0 22px 42px -18px rgba(40,64,47,0.55), inset 0 1px 0 rgba(255,255,255,0.15);
	animation: avn-float 6s ease-in-out infinite;
}
.avn-hero-badge strong{ font-size: 1.25rem; line-height: 1; }
.avn-hero-badge span{ font-size: .68rem; opacity: .85; margin-top: 3px; white-space: nowrap; }

@media (max-width: 782px){
	.avn-hero-visual-v2{ min-height: 220px; }
	.avn-hero-glass-card{ width: 160px; padding: 24px 14px 18px; }
	.avn-hero-orb-1{ width: 60px; height: 60px; }
	.avn-hero-orb-2{ width: 40px; height: 40px; }
	.avn-hero-badge{ padding: 8px 12px; bottom: 0; inset-inline-start: -2%; min-width: 64px; }
	.avn-hero-badge strong{ font-size: 1.05rem; }
	.avn-hero-stats-glass{ border-radius: 16px; }
}

/* ==========================================================================
   شماره‌گذاری فارسی روی کارت دوره‌ها
   ========================================================================== */
@counter-style avn-persian-digits{
	system: numeric;
	symbols: "۰" "۱" "۲" "۳" "۴" "۵" "۶" "۷" "۸" "۹";
	suffix: "";
}
.avn-course-list{ counter-reset: avn-course; }
.avn-course-card{ position: relative; overflow: hidden; }
.avn-course-card::before{
	counter-increment: avn-course;
	content: counter(avn-course, avn-persian-digits);
	position: absolute;
	inset-inline-start: 16px;
	top: 6px;
	font-family: var(--wp--preset--font-family--naskh);
	font-size: 2.4rem;
	color: rgba(78,110,85,0.14);
	line-height: 1;
	z-index: 0;
	pointer-events: none;
}
.avn-course-card > *{ position: relative; z-index: 1; }

/* ==========================================================================
   بخش شیشه‌ای عمومی (اختیاری، با افزودن این کلاس به هر بلوک)
   ========================================================================== */
.avn-glass-panel{
	background: linear-gradient(165deg, rgba(255,253,249,0.85), rgba(255,253,249,0.55));
	-webkit-backdrop-filter: blur(14px) saturate(150%);
	backdrop-filter: blur(14px) saturate(150%);
	border: 1px solid rgba(255,255,255,0.6);
	box-shadow: 0 24px 50px -26px rgba(34,37,28,0.35), inset 0 1px 0 rgba(255,255,255,0.7);
	border-radius: 24px;
}
.avn-eyebrow{ display:inline-flex; align-items:center; gap:8px; font-weight:600; }
.avn-eyebrow::before{
	content:""; width:18px; height:2px; border-radius:2px;
	background: var(--wp--preset--color--gold);
	display:inline-block;
}

.wp-block-button__link{ transition: transform .25s ease, box-shadow .25s ease, filter .25s ease; }
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
	box-shadow: 0 12px 26px -12px rgba(40,64,47,0.55), inset 0 1px 0 rgba(255,255,255,0.2);
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover{
	transform: translateY(-2px);
	box-shadow: 0 18px 34px -14px rgba(40,64,47,0.6), inset 0 1px 0 rgba(255,255,255,0.25);
}
.wp-block-button__link:active{ transform: translateY(0); filter: brightness(.96); }
.is-style-outline .wp-block-button__link{
	border-width:1.5px !important;
	background: rgba(255,255,255,0.35) !important;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.avn-hero h3{ text-shadow: 0 2px 10px rgba(40,64,47,0.15); }

/* تیتر هرو — عبارت کلیدی با گرادیان طلایی متحرک، به‌جای رنگ صاف */
.avn-heading-accent{
	background: linear-gradient(90deg, var(--wp--preset--color--green-deep) 0%, var(--wp--preset--color--gold) 45%, var(--wp--preset--color--green) 100%);
	background-size: 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	animation: avn-heading-shine 6s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce){ .avn-heading-accent{ animation:none; background-position: 30% 50%; } }
@keyframes avn-heading-shine{
	0%, 100%{ background-position: 0% 50%; }
	50%{ background-position: 100% 50%; }
}

/* ==========================================================================
   واکنش‌گرا — تبلت
   ========================================================================== */
@media (max-width: 960px){
	.avn-hero-visual{ max-width: 240px; }
}

/* ==========================================================================
   واکنش‌گرا — موبایل
   ========================================================================== */
@media (max-width: 782px){
	.avn-card{ border-radius: 18px; }
	.avn-hero::before{ font-size: clamp(6rem, 30vw, 10rem); }
	.avn-cta-banner{ border-radius: 22px; }
	.avn-glass-panel{ border-radius: 18px; }

	/* فاصله‌های عمودی بخش‌ها روی موبایل خیلی کمتر تا اسکرول بی‌خودی حذف بشه */
	.wp-block-group[style*="padding-top:110px"],
	.wp-block-group[style*="padding-top:100px"],
	.wp-block-group[style*="padding-top:90px"]{
		padding-top: 56px !important;
	}
	.wp-block-group[style*="padding-bottom:100px"],
	.wp-block-group[style*="padding-bottom:90px"],
	.wp-block-group[style*="padding-bottom:70px"],
	.wp-block-group[style*="padding-bottom:60px"]{
		padding-bottom: 48px !important;
	}

	/* هرو: تصویر ساز بالای متن و جمع‌وجورتر */
	.avn-hero-visual{ max-width: 190px; margin-bottom: 8px; }

	/* دکمه‌ها روی موبایل تمام‌عرض و راحت برای لمس */
	.wp-block-buttons{ width: 100%; }
	.wp-block-buttons .wp-block-button{ width: 100%; }
	.wp-block-buttons .wp-block-button__link{
		width: 100%;
		text-align: center;
		padding-top: 14px;
		padding-bottom: 14px;
	}
	.avn-cta-banner .wp-block-buttons{ flex-direction: column; }

	/* کارت‌ها و آواتارها کمی جمع‌وجورتر */
	.avn-icon-box{ width: 48px; height: 48px; }
	.avn-avatar-fallback .wp-block-post-featured-image{ width: 108px; height: 108px; }

	/* اسکرول افقی ناخواسته را می‌بندیم (مثلاً از سایه‌های بزرگ کارت‌ها) */
	body{ overflow-x: hidden; }
}

@media (max-width: 480px){
	.avn-hero-visual{ max-width: 160px; }
	.avn-topbar .wp-block-group{ gap: 10px; flex-wrap: wrap; justify-content: center; }
	.avn-topbar{ font-size: 0.78rem; text-align: center; }
}

/* ==========================================================================
   تیلت سه‌بعدی واقعی با موس (روی دسکتاپ) — کارت‌ها، بنر CTA، گالری
   کلاس avn-tilt فقط روی دستگاه‌های دارای موس (pointer: fine) توسط جاوااسکریپت
   اضافه می‌شود؛ روی موبایل و لمسی دست نمی‌خورد.
   ========================================================================== */
.avn-tilt{
	--avn-rx: 0deg;
	--avn-ry: 0deg;
	--avn-mx: 50%;
	--avn-my: 50%;
	--avn-ty: 0px;
	transform-style: preserve-3d;
	will-change: transform;
	transform: perspective(1100px) translateY(var(--avn-ty)) rotateX(var(--avn-rx)) rotateY(var(--avn-ry));
	transition: transform .12s ease-out, box-shadow .4s ease, border-color .35s ease;
}
.avn-tilt:hover{ --avn-ty: -8px; }
.avn-cta-banner.avn-tilt:hover{ --avn-ty: -4px; }

.avn-tilt::after{
	content:"";
	position:absolute; inset:0; border-radius:inherit; z-index:2;
	pointer-events:none;
	background: radial-gradient(360px circle at var(--avn-mx) var(--avn-my), rgba(255,255,255,0.45), transparent 55%);
	opacity:0;
	transition: opacity .35s ease;
	mix-blend-mode: soft-light;
}
.avn-tilt:hover::after{ opacity:1; }
.avn-cta-banner.avn-tilt::after{
	background: radial-gradient(420px circle at var(--avn-mx) var(--avn-my), rgba(224,193,120,0.5), transparent 55%);
	mix-blend-mode: normal;
}

@media (prefers-reduced-motion: reduce), (hover: none){
	.avn-tilt{ transform: none !important; transition: none !important; }
	.avn-tilt::after{ display:none; }
}

/* ==========================================================================
   جلوه‌های پرمیومِ اضافه — دکمه‌ها با درخشش عبوری، حاشیه‌های نرم‌تر
   ========================================================================== */
.wp-block-button:not(.is-style-outline) .wp-block-button__link{
	position: relative;
	overflow: hidden;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link::before{
	content:"";
	position:absolute; inset:0;
	background: linear-gradient(115deg, transparent 20%, rgba(255,255,255,0.35) 42%, transparent 60%);
	transform: translateX(-120%);
	transition: transform .7s ease;
	pointer-events:none;
}
.wp-block-button:not(.is-style-outline) .wp-block-button__link:hover::before{
	transform: translateX(120%);
}

/* حلقه هرو — لایه‌های شناور بیشتر برای عمق سه‌بعدی */
.avn-hero-visual{ overflow: visible; }
.avn-hero-visual::before,
.avn-hero-visual::after{
	content:"";
	position:absolute;
	border-radius:50%;
	pointer-events:none;
	z-index:0;
}
.avn-hero-visual::before{
	width:64px; height:64px;
	inset-inline-start:-6%;
	top:8%;
	background: radial-gradient(circle at 35% 30%, var(--wp--preset--color--gold-soft), transparent 70%);
	box-shadow: 0 20px 40px -18px rgba(176,141,62,0.55);
	opacity:.85;
	animation: avn-float 7s ease-in-out infinite;
	animation-delay: .4s;
}
.avn-hero-visual::after{
	width:38px; height:38px;
	inset-inline-end:2%;
	bottom:10%;
	background: radial-gradient(circle at 35% 30%, #fff, var(--wp--preset--color--green-pale) 75%);
	box-shadow: 0 16px 30px -14px rgba(40,64,47,0.45);
	opacity:.9;
	animation: avn-float 8s ease-in-out infinite reverse;
}
@media (prefers-reduced-motion: reduce){
	.avn-hero-visual::before, .avn-hero-visual::after{ animation:none; }
}

/* بنر CTA — مش گرادیانِ عمیق‌تر برای حس سه‌بعدی بیشتر */
.avn-cta-banner{
	background:
		radial-gradient(480px 260px at 8% 120%, rgba(78,110,85,0.35), transparent 60%),
		linear-gradient(155deg, var(--wp--preset--color--green-deep) 0%, #1D3122 100%);
}

/* کارت‌های گالری هم از تیلت لذت ببرند */
.avn-gallery-item{ position: relative; }

/* ==========================================================================
   صفحه پروفایل استاد (single-avn_instructor)
   ========================================================================== */
.avn-instructor-hero-inner{
	display: flex;
	align-items: center;
	gap: 44px;
}
.avn-instructor-avatar{ flex: 0 0 auto; }
.avn-instructor-avatar .wp-block-post-featured-image{
	width: 180px !important;
	height: 180px !important;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 20px 44px -18px rgba(40,64,47,0.45), 0 0 0 8px rgba(255,253,249,0.75);
}
.avn-instructor-avatar img{ object-fit: cover; height: 100%; width: 100%; }

.avn-instructor-heading{ flex: 1 1 320px; min-width: 240px; }
.avn-instructor-heading h1{ margin: 0; }

.avn-instructor-role{
	font-family: var(--wp--preset--font-family--naskh);
	color: var(--wp--preset--color--green-deep);
	font-size: 1.15rem;
	font-weight: 600;
	margin: 4px 0 18px;
}
.avn-instructor-role:empty{ display: none; }

.avn-instructor-meta-row{ display: flex; flex-wrap: wrap; gap: 10px; }
.avn-instructor-chip{
	display: inline-flex;
	align-items: center;
	gap: 6px;
	background: var(--wp--preset--color--surface);
	border: 1px solid var(--wp--preset--color--line);
	border-radius: 999px;
	padding: 9px 18px;
	font-size: 0.85rem;
	color: var(--wp--preset--color--ink-soft);
	box-shadow: 0 8px 18px -12px rgba(34,37,28,0.25);
}
.avn-instructor-chip p{ margin: 0; }
.avn-instructor-chip p:first-child{ font-weight: 700; color: var(--wp--preset--color--green-deep); }
.avn-instructor-chip:has(p:empty){ display: none; }

.avn-instructor-bio.avn-card{ padding: 44px; text-align: right; }
.avn-instructor-bio .wp-block-post-content{
	font-size: 1.05rem;
	line-height: 2;
	color: var(--wp--preset--color--ink);
}

@media (max-width: 782px){
	.avn-instructor-hero-inner{ flex-direction: column; text-align: center; gap: 22px; }
	.avn-instructor-heading{ text-align: center; }
	.avn-instructor-meta-row{ justify-content: center; }
	.avn-instructor-avatar .wp-block-post-featured-image{ width: 140px !important; height: 140px !important; }
	.avn-instructor-bio.avn-card{ padding: 26px; }
}