/**
 * TalkiLand Motion — حرکت نرم برای پنل‌ها و صفحات عمومی.
 *
 * بعد از panel.css بارگذاری می‌شود و فقط «چطور حرکت کند» را تعیین می‌کند، نه
 * چیدمان یا رنگ را. همه‌چیز CSS بومی است (بدون کتابخانه یا CDN):
 *   - اسکرول نرم برای لینک‌های داخل صفحه
 *   - گذار نرم بین صفحه‌ها با View Transitions مرورگر (Chrome/Edge/Safari جدید؛
 *     مرورگرهای دیگر بدون هیچ خطایی همان پرش معمولی را دارند)
 *   - بازخورد لمسی دکمه‌ها: بالا آمدن ملایم در Hover و فرورفتن در کلیک
 *   - سایه‌ای که با بالا آمدن کارت/دکمه نرم عمیق‌تر می‌شود
 *   - باز شدن نرم منوها، FAQ و فرم‌های بازشونده
 *
 * کاربری که «کاهش حرکت» را در سیستم‌عامل روشن کرده، هیچ‌کدام را نمی‌بیند:
 * بلوک prefers-reduced-motion در tokens.css همهٔ مدت‌ها را صفر می‌کند و
 * گذار صفحه‌ها اینجا فقط زیر no-preference فعال می‌شود.
 *
 * @package TalkiLand
 */

/* ============ اسکرول نرم ============ */
html {
	scroll-behavior: smooth;
	/* هدر چسبان (۶۴ تا ۷۲px) روی عنوانِ مقصدِ لینک‌های #... نیفتد. */
	scroll-padding-top: 88px;
}

/* ============ گذار بین صفحه‌ها ============ */
@media (prefers-reduced-motion: no-preference) {
	@view-transition {
		navigation: auto;
	}

	/* محتوای قبلی سریع کم‌رنگ می‌شود و محتوای تازه کمی از پایین بالا می‌آید. */
	::view-transition-old(root) {
		animation: tl-vt-out 160ms var(--tl-ease-in-out) both;
	}

	::view-transition-new(root) {
		animation: tl-vt-in 320ms var(--tl-ease) both;
	}

	/* هدر و سایدبار بین صفحه‌ها ثابت می‌مانند؛ فقط محتوا عوض می‌شود. */
	.tl-header {
		view-transition-name: tl-header;
	}

	.tl-sidebar {
		view-transition-name: tl-sidebar;
	}

	body.tl-app[class*="tl-public-"] .topbar {
		view-transition-name: tl-topbar;
	}
}

@keyframes tl-vt-out {
	to {
		opacity: 0;
	}
}

@keyframes tl-vt-in {
	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

/* ============ دکمه‌ها ============ */
.tl-btn,
.tl-iconbtn,
.tl-icon-btn,
.tl-header__menu-toggle,
.tl-pagination__item,
.tl-tabs__tab,
.tl-usermenu > summary,
body.tl-app[class*="tl-public-"] .nav__toggle {
	transition-property: background-color, border-color, color, box-shadow, transform, filter, opacity;
	transition-duration: var(--tl-duration);
	transition-timing-function: var(--tl-ease);
}

/* بالا آمدن ملایم فقط روی دستگاه‌های دارای ماوس؛ روی لمسی Hover «گیر» می‌کند. */
@media (hover: hover) {
	.tl-btn:hover:not(:disabled):not([aria-disabled="true"]),
	body.tl-app[class*="tl-public-"] .nav__toggle:hover {
		transform: translateY(-1px);
	}

	/* دکمهٔ اصلی با بالا آمدن، سایهٔ هم‌رنگ برند می‌گیرد. */
	.tl-btn--primary:hover:not(:disabled):not([aria-disabled="true"]) {
		box-shadow: var(--tl-shadow-color);
	}

	body.tl-app[class*="tl-public-"] .tl-btn--primary:hover {
		box-shadow: 0 14px 28px -12px color-mix(in srgb, var(--tq-600) 55%, transparent);
	}
}

/* فرورفتن کوتاه در لحظهٔ کلیک؛ برگشتِ سریع‌تر حس «فنری» می‌دهد. هم‌وزن با
   قاعدهٔ :active صفحات عمومی در panel.css تا هر دو جا یک رفتار داشته باشند. */
body.tl-app .tl-btn:active:not(:disabled),
body.tl-app .tl-iconbtn:active,
body.tl-app .tl-icon-btn:active,
body.tl-app .tl-header__menu-toggle:active {
	transform: translateY(0) scale(.97);
	transition-duration: 80ms;
}

.tl-btn:focus-visible,
.tl-iconbtn:focus-visible,
.tl-icon-btn:focus-visible {
	transition-duration: var(--tl-duration-fast);
}

/* ============ کارت‌های قابل کلیک: بالا آمدن و عمیق‌شدن سایه با یک منحنی ============ */
.tl-stat,
.tl-tile,
.tl-teacher-card,
.tl-subject-tile,
.tl-queue,
.tl-week-cards__day,
.tl-hero__cta,
.tl-btn--hero,
body.tl-app[class*="tl-public-"] .step,
body.tl-app[class*="tl-public-"] .tcard {
	transition-property: transform, box-shadow, border-color, background-color;
	transition-duration: var(--tl-duration-slow);
	transition-timing-function: var(--tl-ease);
}

.tl-subject-tile:hover,
.tl-queue:hover,
.tl-week-cards__day:hover {
	box-shadow: var(--tl-shadow);
}

/* لینک‌ها و ردیف‌ها: فقط رنگ، کوتاه. */
.tl-sidebar__link,
.tl-usermenu__list a,
.tl-table tbody tr,
.tl-link,
.tl-card__link,
body.tl-app[class*="tl-public-"] .nav__links a,
body.tl-app[class*="tl-public-"] .footer__col a {
	transition-property: background-color, color, border-color;
	transition-duration: var(--tl-duration);
	transition-timing-function: var(--tl-ease);
}

/* ============ باز شدن منوها و پنل‌ها ============ */
@keyframes tl-pop-in {
	from {
		opacity: 0;
		transform: translateY(-6px) scale(.98);
	}
}

@keyframes tl-fade-up {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
}

/* منوی حساب کاربری زیر آواتار. */
.tl-usermenu[open] > .tl-usermenu__list {
	transform-origin: top left;
	animation: tl-pop-in var(--tl-duration) var(--tl-ease) both;
}

[dir="ltr"] .tl-usermenu[open] > .tl-usermenu__list {
	transform-origin: top right;
}

/* فرم‌های بازشونده (لغو کلاس، ثبت نظر، ...) داخل کارت و جدول. */
.tl-card details[open] > .tl-form,
.tl-table details[open] > .tl-form {
	animation: tl-fade-up var(--tl-duration) var(--tl-ease) both;
}

/* منوی موبایل صفحات عمومی (public.js آن را با display:flex باز می‌کند). */
@media (max-width: 860px) {
	body.tl-app[class*="tl-public-"] .nav:has(.nav__toggle[aria-expanded="true"]) .nav__links {
		transform-origin: top center;
		animation: tl-pop-in var(--tl-duration) var(--tl-ease) both;
	}
}

/* سایدبار کشویی موبایل کمی آهسته‌تر از Hover تا حس سنگینیِ یک «صفحه» را بدهد. */
@media (max-width: 900px) {
	.tl-sidebar {
		transition-duration: var(--tl-duration-slow);
	}
}

/* FAQ: ارتفاع پاسخ نرم باز و بسته می‌شود (Chrome 131+؛ بقیه مثل قبل باز می‌شوند). */
@supports (interpolate-size: allow-keywords) {
	body.tl-app[class*="tl-public-"] .faqitem {
		interpolate-size: allow-keywords;
	}

	body.tl-app[class*="tl-public-"] .faqitem::details-content {
		block-size: 0;
		overflow: hidden;
		transition: block-size var(--tl-duration-slow) var(--tl-ease), content-visibility var(--tl-duration-slow) allow-discrete;
	}

	body.tl-app[class*="tl-public-"] .faqitem[open]::details-content {
		block-size: auto;
	}
}

body.tl-app[class*="tl-public-"] .faqitem__chevron::before,
body.tl-app[class*="tl-public-"] .faqitem__chevron::after {
	transition: transform var(--tl-duration-slow) var(--tl-ease);
}

/* ============ نمایش تدریجی هنگام اسکرول (صفحات عمومی) ============ */
/* public.js تأخیر پله‌ای می‌دهد و بعد از پایان، کلاس reveal را برمی‌دارد تا
   Hover خودِ کارت دوباره با مدت کوتاه خودش اجرا شود. */
body.tl-app[class*="tl-public-"] .reveal {
	transform: translateY(18px);
	transition: opacity 700ms var(--tl-ease), transform 700ms var(--tl-ease);
}

body.tl-app[class*="tl-public-"] .reveal.is-visible {
	transform: none;
}

/* ============ سایه‌های صفحات عمومی (فقط حالت روشن؛ تیره دست نخورده) ============ */
@media not (prefers-color-scheme: dark) {
	body.tl-app[class*="tl-public-"] {
		--shadow-sm: 0 1px 2px rgb(20 35 34 / 5%), 0 2px 6px -2px rgb(20 35 34 / 6%);
		--shadow: 0 1px 2px rgb(20 35 34 / 4%), 0 6px 14px -6px rgb(20 35 34 / 9%), 0 18px 36px -16px rgb(20 35 34 / 16%);
		--shadow-lg: 0 2px 4px rgb(20 35 34 / 4%), 0 12px 26px -10px rgb(20 35 34 / 12%), 0 34px 64px -24px rgb(20 35 34 / 24%);
	}
}