/* ==========================================================================
   هینایاد — لایهٔ حرکت و جزئیات بصری (روی style.css سوار می‌شود)
   ========================================================================== */

/* ---------- اسپلش لوگو (فقط بار اول هر نشست) ---------- */
.splash { display: none; }
html.intro body { overflow: hidden; }
html.intro .site-header .brand__mark { opacity: 0; }
html.intro .splash {
  position: fixed; inset: 0; z-index: 300; isolation: isolate;
  display: grid; place-content: center; justify-items: center; gap: 4px; cursor: pointer;
}
html.intro .splash::before, html.intro .splash::after { content: ""; position: absolute; inset: 0; transition: opacity .6s ease .1s; }
html.intro .splash::after { z-index: -2; background: radial-gradient(90% 80% at 50% 38%, #FFFBF5 0%, #F7EBDB 62%, #EFDCC2 100%); }
html.intro .splash::before { z-index: -1; opacity: .5; background: url("../img/ornament.svg") repeat; background-size: 280px 280px; }
.splash__logo { position: relative; width: min(520px, 74vw); height: auto; will-change: transform; }
.splash__name, .splash__tag { position: relative; margin: 0; opacity: 0; animation: splashText .9s var(--ease) both; }
.splash__name { margin-top: 6px; color: var(--c-heading); font-size: 1.7rem; font-weight: 800; animation-delay: 1.9s; }
.splash__tag { color: var(--c-muted); font-size: .92rem; font-weight: 600; animation-delay: 2.1s; }
@keyframes splashText { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0; } }
html.intro .splash.is-leaving { pointer-events: none; }
html.intro .splash.is-leaving::before, html.intro .splash.is-leaving::after { opacity: 0; }
.splash.is-leaving .splash__name, .splash.is-leaving .splash__tag { animation: none; opacity: 0; transition: opacity .25s; }

/* ---------- نوار پیشرفت اسکرول + منوی فعال ---------- */
.progress {
  position: absolute; inset-inline: 0; top: 0; height: 3px; pointer-events: none;
  background: linear-gradient(270deg, #C9975B, #8B4C34 60%, #5C2D1D);
  transform: scaleX(0); transform-origin: right;
}
.nav a.is-active { color: var(--c-brown-900); }
.nav a.is-active::after { transform: scaleX(1); }

/* ---------- ورود هیرو (یک صحنهٔ هماهنگ) ---------- */
.w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .12em; margin-bottom: -.12em; }
.w__i { display: inline-block; }
.js .w__i { transform: translateY(112%); transition: transform .85s cubic-bezier(.2, .8, .2, 1); transition-delay: calc(var(--i) * 80ms + .15s); }
.js.ready .w__i { transform: none; }

.js .marker::after { transform: rotate(-.5deg) scaleX(0); transform-origin: right; }
.js.ready .marker::after { transform: rotate(-.5deg) scaleX(1); transition: transform .9s cubic-bezier(.7, 0, .2, 1) 1s; }

.js .hero .eyebrow, .js .hero__lead, .js .hero__actions, .js .hero__trust,
.js .art__chip, .js .art__stamp, .js .art__book { animation-play-state: paused; animation-fill-mode: both; }
.js.ready .hero .eyebrow, .js.ready .hero__lead, .js.ready .hero__actions, .js.ready .hero__trust,
.js.ready .art__chip, .js.ready .art__stamp, .js.ready .art__book { animation-play-state: running; }

.hero .eyebrow { animation: rise .8s var(--ease) 0s; }
.hero__lead { animation: rise .9s var(--ease) .75s; }
.hero__actions { animation: rise .9s var(--ease) .9s; }
.hero__trust { animation: rise .9s var(--ease) 1.05s; }
@keyframes rise { from { opacity: 0; translate: 0 18px; } to { opacity: 1; translate: 0; } }

/* دفتر هیرو: صفحه‌های زیرین + تیلت با اشارهگر */
.art__book {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)) rotate(-2.2deg);
  transition: transform .6s var(--ease);
  box-shadow: 0 30px 55px -30px rgba(74, 36, 24, .6), -9px 11px 0 -3px #F7ECDD, -18px 22px 0 -6px #EBD8BE, -26px 36px 50px -22px rgba(74, 36, 24, .45);
  animation: bookIn 1.1s cubic-bezier(.2, .8, .2, 1) .35s;
}
@keyframes bookIn { from { opacity: 0; translate: 0 56px; rotate: -6deg; } to { opacity: 1; translate: 0; rotate: 0deg; } }
.art__chip--top { animation: chipIn .8s var(--ease) 1.1s; }
.art__chip--bottom { animation: chipIn .8s var(--ease) 1.3s; }
@keyframes chipIn { from { opacity: 0; translate: 0 14px; } to { opacity: 1; translate: 0; } }
.art__chip { transition: transform .6s var(--ease); }
.art__chip--top { transform: translate(calc(var(--px, 0) * -16px), calc(var(--py, 0) * -12px)); }
.art__chip--bottom { transform: translate(calc(var(--px, 0) * -22px), calc(var(--py, 0) * -16px)); }
.art__stamp { animation: stamp .7s cubic-bezier(.3, 1.5, .5, 1) 1.25s; }
@keyframes stamp { from { opacity: 0; scale: 2.3; rotate: -35deg; } to { opacity: 1; scale: 1; rotate: 0deg; } }

/* نوشته‌شدن واژه‌ها داخل دفتر */
.js .book__words .w-en { clip-path: inset(0 100% 0 0); }
.js .book__words .w-fa, .js .book__words li { transition: opacity .4s; }
.book__words.is-writing .w-en { animation: write .55s cubic-bezier(.6, 0, .2, 1) both; animation-delay: calc(var(--r) * .17s + .12s); }
.book__words.is-writing .w-fa { animation: fade .5s ease both; animation-delay: calc(var(--r) * .17s + .5s); }
@keyframes write { from { clip-path: inset(-4px 100% -4px -4px); } to { clip-path: inset(-4px -4px -4px -4px); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.book__label, .book__foot { transition: opacity .3s; }
.art__book.is-swapping .book__label, .art__book.is-swapping .book__foot { opacity: 0; }
.book__tab { transition: background-color .35s var(--ease), color .35s var(--ease); }

/* ---------- نور دنبال‌کنندهٔ اشارهگر روی کارت‌ها ---------- */
.feature-card, .grade-card, .quote-card, .resource-card, .related-card { position: relative; isolation: isolate; }
.feature-card::before, .grade-card::before, .quote-card::before, .resource-card::before, .related-card::before {
  content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 151, 91, .2), transparent 65%);
  transition: opacity .35s var(--ease);
}
.feature-card:hover::before, .grade-card:hover::before, .quote-card:hover::before, .resource-card:hover::before, .related-card:hover::before { opacity: 1; }
.grade-card__num { transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), color .3s; }
.grade-card:hover .grade-card__num { transform: rotate(-6deg) scale(1.06); color: var(--c-brown-700); }

/* ---------- ورق خوردن در تب‌های نمونهٔ جزوه ---------- */
.preview__panel.is-active .page, .preview__panel.is-active .pdf-doc { transform-origin: right center; animation: turn .65s cubic-bezier(.2, .8, .2, 1); }
@keyframes turn { from { opacity: 0; transform: perspective(1400px) rotateY(24deg) translateX(-14px); } to { opacity: 1; transform: none; } }
.preview__panel.is-active .word-table tr, .preview__panel.is-active .example-list li, .preview__panel.is-active .checklist li,
.preview__panel.is-active .exercise-list li, .preview__panel.is-active .answer-list li {
  animation: rise .6s var(--ease) both; animation-delay: calc(var(--r, 0) * .07s + .2s);
}

/* ---------- ستاره‌ها، پرتره، نوار CTA ---------- */
.js .quote-card__stars .icon { transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.6, .5, 1); }
.js .quote-card.is-visible .quote-card__stars .icon { transform: none; }
.quote-card__stars .icon:nth-child(1) { transition-delay: .3s !important; } .quote-card__stars .icon:nth-child(2) { transition-delay: .4s !important; }
.quote-card__stars .icon:nth-child(3) { transition-delay: .5s !important; } .quote-card__stars .icon:nth-child(4) { transition-delay: .6s !important; }
.quote-card__stars .icon:nth-child(5) { transition-delay: .7s !important; }

.js .portrait::before {
  content: ""; position: absolute; inset: 0; z-index: 3; background: linear-gradient(160deg, #EFDCC2, #E2C9A9);
  transform-origin: top; transition: transform 1.1s cubic-bezier(.7, 0, .2, 1) .25s;
}
.js .about__art.is-visible .portrait::before { transform: scaleY(0); }
.js .portrait__photo { transform: scale(1.2); transition: transform 1.8s var(--ease) .25s; }
.js .about__art.is-visible .portrait__photo { transform: none; }
.js .portrait__plate { opacity: 0; translate: 0 10px; transition: opacity .6s ease 1.1s, translate .6s var(--ease) 1.1s; }
.js .about__art.is-visible .portrait__plate { opacity: 1; translate: 0; }

.cta-band__ornament { animation: drift 90s linear infinite; }
@keyframes drift { to { background-position: -280px 280px; } }
.btn--primary { will-change: translate; transition: transform .25s var(--ease), box-shadow .25s var(--ease), translate .3s var(--ease); }

/* ---------- صفحه‌های پایه و محصول ---------- */
.js :is(.level-hero, .product-hero) :is(.crumbs, .eyebrow, .level-hero__lead, .product-lead, .level-stats, .product-meta, .level-hero__actions, .buy-box, .level-switch),
.js .level-badge, .js .level-badge__chips li, .js .cover { animation-play-state: paused; animation-fill-mode: both; }
.js.ready :is(.level-hero, .product-hero) :is(.crumbs, .eyebrow, .level-hero__lead, .product-lead, .level-stats, .product-meta, .level-hero__actions, .buy-box, .level-switch),
.js.ready .level-badge, .js.ready .level-badge__chips li, .js.ready .cover { animation-play-state: running; }
:is(.level-hero, .product-hero) .crumbs { animation: rise .7s var(--ease) 0s; }
:is(.level-hero, .product-hero) .eyebrow { animation: rise .7s var(--ease) .1s; }
:is(.level-hero__lead, .product-lead) { animation: rise .9s var(--ease) .6s; }
:is(.level-stats, .product-meta) { animation: rise .9s var(--ease) .75s; }
:is(.level-hero__actions, .buy-box) { animation: rise .9s var(--ease) .9s; }
.level-switch { animation: rise .9s var(--ease) 1.05s; }
.level-badge { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); animation: badgeIn 1s cubic-bezier(.2, .8, .2, 1) .25s; }
@keyframes badgeIn { from { opacity: 0; scale: .88; rotate: -5deg; translate: 0 30px; } to { opacity: 1; scale: 1; rotate: 0deg; translate: 0; } }
.level-badge__chips li { animation: chipIn .6s cubic-bezier(.3, 1.4, .5, 1) both; }
.level-badge__chips li:nth-child(1) { animation-delay: .9s; } .level-badge__chips li:nth-child(2) { animation-delay: 1s; }
.level-badge__chips li:nth-child(3) { animation-delay: 1.1s; } .level-badge__chips li:nth-child(4) { animation-delay: 1.2s; }
.cover {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease);
  box-shadow: 0 44px 80px -46px rgba(74, 36, 24, .95), -9px 11px 0 -3px #6B3522, -18px 22px 0 -6px #4F281A;
  animation: bookIn 1.1s cubic-bezier(.2, .8, .2, 1) .3s;
}
.lesson[open] .lesson__body { animation: lessonIn .45s var(--ease); }
@keyframes lessonIn { from { opacity: 0; translate: 0 -8px; } to { opacity: 1; translate: 0; } }
.lesson[open] .file-card { animation: rise .5s var(--ease) both; animation-delay: calc(var(--r, 0) * .07s + .08s); }

/* گذار نرم بین صفحه‌ها (مرورگرهای پشتیبان؛ هدر و نوار موبایل ثابت می‌مانند) */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .site-header { view-transition-name: hdr; }
  .mobile-bar { view-transition-name: mbar; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: .35s; }
}

/* ---------- صفحهٔ پکیج‌ها ---------- */
.js .pkg-hero :is(.crumbs, .eyebrow, .pkg-hero__lead, .level-stats, .level-hero__actions), .js .summary-card { animation-play-state: paused; animation-fill-mode: both; }
.js.ready .pkg-hero :is(.crumbs, .eyebrow, .pkg-hero__lead, .level-stats, .level-hero__actions), .js.ready .summary-card { animation-play-state: running; }
.pkg-hero .crumbs { animation: rise .7s var(--ease) 0s; }
.pkg-hero .eyebrow { animation: rise .7s var(--ease) .1s; }
.pkg-hero__lead { animation: rise .9s var(--ease) .6s; }
.pkg-hero .level-stats { animation: rise .9s var(--ease) .75s; }
.pkg-hero .level-hero__actions { animation: rise .9s var(--ease) .9s; }
.summary-card { transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .6s var(--ease); animation: badgeIn 1s cubic-bezier(.2, .8, .2, 1) .3s; }
.compare-wrap.is-visible tbody tr { animation: rise .5s var(--ease) both; animation-delay: calc(var(--r, 0) * .05s); }
.plan { position: relative; isolation: isolate; }
.plan::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; opacity: 0;
  background: radial-gradient(360px circle at var(--mx, 50%) var(--my, 50%), rgba(201, 151, 91, .2), transparent 65%); transition: opacity .35s var(--ease); }
.plan:hover::before { opacity: 1; }

/* ---------- دکمهٔ تم روشن/تیره ---------- */
.theme-toggle { position: relative; flex: none; width: 42px; height: 42px; display: inline-grid; place-items: center; overflow: hidden; cursor: pointer;
  border: 1px solid var(--c-line); border-radius: 50%; background: var(--c-white); color: var(--c-brown-700);
  transition: transform .35s cubic-bezier(.3, 1.4, .5, 1), border-color .3s, background-color .3s; }
.theme-toggle:hover { transform: rotate(14deg) scale(1.06); border-color: var(--c-sand); }
.theme-toggle:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 3px; }
.theme-toggle svg { position: absolute; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform .6s cubic-bezier(.3, 1.3, .5, 1), opacity .35s; }
.theme-toggle .i-moon { opacity: 0; transform: translateY(130%) rotate(-70deg); }
:root[data-theme="dark"] .theme-toggle .i-sun { opacity: 0; transform: translateY(-130%) rotate(70deg); }
:root[data-theme="dark"] .theme-toggle .i-moon { opacity: 1; transform: none; }
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-new(root) { z-index: 2; }
html.theme-vt .site-header, html.theme-vt .mobile-bar { view-transition-name: none; }

/* ==========================================================================
   v3 — حرکت‌های قلمی: آیکون‌های رسم‌شونده، خط کالیگرافی، هایلایت و جای‌خالی
   ========================================================================== */

/* آیکون‌هایی که با قلم کشیده می‌شوند */
.js .draw :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dasharray: var(--l) calc(var(--l) * 2); stroke-dashoffset: calc(var(--l) * 1.02); }
.js .is-visible .draw :is(path, circle, rect, line, polyline, polygon, ellipse) {
  animation: inkdraw 1s cubic-bezier(.5, .1, .3, 1) forwards; animation-delay: calc(var(--k, 0) * .16s + .35s);
}
@keyframes inkdraw { to { stroke-dashoffset: 0; } }

/* خط کالیگرافی روی مرز بخش‌ها؛ با اسکرول کشیده می‌شود */
.flourish { position: relative; z-index: 4; height: 0; display: flex; justify-content: center; pointer-events: none; }
.flourish svg { position: absolute; top: -45px; width: min(1100px, 92%); height: 90px; overflow: visible; }
.flourish.is-flip svg { transform: scaleY(-1); }
.flourish__line { fill: none; stroke: var(--c-sand); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1 2; stroke-dashoffset: 1.02; }
.flourish__halo { fill: var(--c-gold); opacity: .22; }
.flourish__dot { fill: var(--c-gold); }

/* هایلایت ماژیکی روی واژه‌های جدول نمونه */
.hl { padding-inline: .18em; margin-inline: -.18em; border-radius: 2px;
  background: linear-gradient(transparent 60%, rgba(201, 151, 91, .42) 60%) no-repeat left center / 0% 100%; }
.reveal.is-visible .preview__panel.is-active .hl { animation: hlDraw .7s cubic-bezier(.6, 0, .2, 1) forwards; animation-delay: calc(var(--r, 0) * .28s + .5s); }
@keyframes hlDraw { to { background-size: 100% 100%; } }

/* جای‌خالی تمرین‌ها: پاسخ با قلم نوشته می‌شود */
.exercise-list .blank.has-answer { position: relative; display: inline-block; min-width: 5.6em; text-align: center; color: transparent; border-bottom: 2px dotted var(--c-sand); }
.exercise-list .blank.has-answer::after {
  content: attr(data-answer); position: absolute; inset: -.15em 0 auto; text-align: center; letter-spacing: 0;
  color: var(--c-brown-800); font-style: italic; font-weight: 700; clip-path: inset(-4px 100% -4px -4px);
}
.preview__panel.is-active .exercise-list .blank.has-answer::after { animation: write .75s cubic-bezier(.6, 0, .2, 1) forwards; animation-delay: calc(var(--b, 0) * .6s + 1s); }

/* درخششِ فویل طلا روی دکمهٔ پایانی */
.cta-band .btn--light { position: relative; overflow: hidden; }
.cta-band .btn--light::after { content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-130%);
  background: linear-gradient(105deg, transparent 38%, rgba(255, 236, 205, .75) 50%, transparent 62%); }
.cta-band.is-visible .btn--light::after { animation: foil 6.5s ease-in-out 2.2s infinite; }
@keyframes foil { 0%, 62% { transform: translateX(-130%); } 88%, 100% { transform: translateX(130%); } }

@media (prefers-reduced-motion: reduce) {
  .js .draw :is(path, circle, rect, line, polyline, polygon, ellipse) { stroke-dashoffset: 0; animation: none; }
  .flourish__line { stroke-dashoffset: 0; }
  .hl { background-size: 100% 100%; }
  .exercise-list .blank.has-answer::after { clip-path: none; }
  .cta-band .btn--light::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .splash, .progress { display: none !important; }
  .js .w__i, .js .marker::after { transform: none !important; }
  .js .book__words .w-en { clip-path: none; }
}

.login-link{flex:none;padding:8px 16px;border:1px solid var(--c-line);border-radius:999px;background:var(--c-white);color:var(--c-brown-700);font-weight:700;font-size:.85rem;white-space:nowrap}
.login-link:hover{border-color:var(--c-sand)}