/* pages/instructors.css — بخشی از سیستم سبک سایت عمومی پلاس
 *
 * کارت مدرس «قاب پرتره» است: عکس کل کارت را پر می‌کند، و فقط نام و یک
 * عنوان پررنگ روی سایه‌ی پایین عکس می‌نشیند. بقیه‌ی اطلاعات در پروفایل کامل.
 *
 * لایه‌ها از پایین به بالا: عکس (یا مونوگرام) ← سایه ← برق نور ← متن.
 * کج‌شدن سه‌بعدی روی .fc-link است و ظهور اسکرول (.rv) روی .fcard؛ این دو
 * عمدا روی دو عنصر جدا هستند چون هر دو transform می‌خواهند.
 */

@property --fc-ang{syntax:"<angle>";inherits:false;initial-value:0deg}

.fac-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(232px,1fr));
  gap:clamp(14px,2vw,26px)}

.fcard{--fc-c:var(--gold-400);perspective:1000px;
  transition-delay:calc(mod(var(--i,0),4) * 70ms)}
.fcard.ravan{--fc-c:var(--brand-ravan-soft)}
.fcard.modir{--fc-c:var(--brand-modir-soft,#7FA8FF)}
.fcard.hide{display:none}

.fc-link{position:relative;display:block;isolation:isolate;overflow:hidden;
  aspect-ratio:4/5;border-radius:26px;text-decoration:none;color:#fff;
  background:
    radial-gradient(120% 80% at 50% 0%,color-mix(in oklab,var(--fc-c) 22%,transparent),transparent 62%),
    linear-gradient(165deg,var(--navy-700),var(--navy-950) 78%);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 26px 50px -32px rgba(5,7,15,.7);
  transform:rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
  transition:transform .55s var(--ease-out),box-shadow .45s var(--ease-out),filter .45s var(--ease-out)}
.mode-paper .fac-cards .fc-link{color:#fff}

/* قاب نوری دور کارت: یک گرادیان مخروطی چرخان که فقط لبه‌اش دیده می‌شود */
.fc-link::after{content:"";position:absolute;inset:0;z-index:5;border-radius:inherit;padding:1.5px;
  pointer-events:none;opacity:0;
  background:conic-gradient(from var(--fc-ang),transparent 0 18%,var(--fc-c) 30%,#fff 34%,var(--fc-c) 38%,transparent 52% 68%,var(--teal-400) 82%,transparent 92%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  transition:opacity .4s var(--ease-out)}

.fc-media{position:absolute;inset:0;z-index:0}
.fc-media img{inline-size:100%;block-size:100%;object-fit:cover;object-position:50% 16%;
  transform:scale(1.03);filter:saturate(.82) contrast(1.03);
  transition:transform 1.1s var(--ease-out),filter .6s var(--ease-out)}

/* مدرس بدون عکس: حرف اول نام خانوادگی روی مدارهای نرم، نه آیکون آدمک */
.fc-mono{position:absolute;inset:0;display:grid;place-items:center;padding-block-end:22%;
  font-family:var(--font-display);font-weight:900;font-size:clamp(96px,11vw,136px);line-height:1;
  color:transparent;-webkit-background-clip:text;background-clip:text;
  background-image:linear-gradient(160deg,#fff 10%,var(--fc-c) 55%,color-mix(in oklab,var(--fc-c) 40%,var(--navy-900)) 100%)}
.fc-mono::before{content:"";position:absolute;inset:-10%;z-index:-1;opacity:.55;
  background:
    repeating-radial-gradient(circle at 50% 38%,transparent 0 26px,rgba(255,255,255,.07) 27px 28px),
    radial-gradient(circle at 50% 38%,color-mix(in oklab,var(--fc-c) 30%,transparent),transparent 55%);
  transition:transform 1.1s var(--ease-out)}

.fc-shade{position:absolute;inset:0;z-index:1;
  background:linear-gradient(to top,rgba(5,7,15,.96) 0%,rgba(5,7,15,.72) 26%,rgba(5,7,15,.12) 54%,transparent 70%)}

/* برق نور: مرکزش با نشانگر جابه‌جا می‌شود (--mx/--my از instructors.js) */
.fc-glare{position:absolute;inset:0;z-index:2;opacity:0;pointer-events:none;mix-blend-mode:soft-light;
  background:radial-gradient(circle at var(--mx,50%) var(--my,0%),rgba(255,255,255,.55),transparent 46%);
  transition:opacity .4s var(--ease-out)}

.fc-brand{position:absolute;inset-block-start:14px;inset-inline-start:14px;z-index:4;
  display:inline-flex;align-items:center;gap:7px;
  font-family:var(--font-display);font-size:11px;font-weight:800;color:#fff;
  padding:6px 11px;border-radius:99px;
  background:rgba(8,14,32,.48);border:1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.fc-brand i{inline-size:7px;block-size:7px;border-radius:50%;background:var(--fc-c);
  box-shadow:0 0 0 3px color-mix(in oklab,var(--fc-c) 28%,transparent)}

.fc-cap{position:absolute;inset-inline:0;inset-block-end:0;z-index:3;
  display:flex;flex-direction:column;align-items:flex-start;
  padding:0 20px 20px;padding-inline-end:64px}
.fc-line{display:block;inline-size:26px;block-size:3px;border-radius:3px;margin-block-end:12px;
  background:var(--fc-c);transition:inline-size .5s var(--ease-out)}
.fc-name{font-family:var(--font-display);font-size:clamp(17px,1.5vw,20px);font-weight:900;line-height:1.5;
  color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.45)}
.fc-role{margin-block-start:6px;font-family:var(--font-display);font-size:12.5px;font-weight:800;line-height:1.75;
  color:color-mix(in oklab,var(--fc-c) 78%,#fff);
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;line-clamp:2;overflow:hidden}

.fc-go{position:absolute;inset-block-end:20px;inset-inline-end:18px;z-index:4;
  display:grid;place-items:center;inline-size:42px;block-size:42px;border-radius:50%;
  color:var(--navy-950);background:var(--fc-c);
  opacity:0;transform:translateX(12px) scale(.8);
  transition:opacity .35s var(--ease-out),transform .45s var(--ease-out)}
.fc-go svg{inline-size:18px;block-size:18px}

/* ---- حالت فعال: نشانگر روی کارت یا فوکوس کیبورد ---- */
.fc-link:hover,.fc-link:focus-visible{
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 40px 70px -34px rgba(5,7,15,.85),
             0 0 0 1px color-mix(in oklab,var(--fc-c) 40%,transparent)}
.fc-link:hover::after,.fc-link:focus-visible::after{opacity:1;animation:fcSpin 4.5s linear infinite}
.fc-link:hover .fc-media img,.fc-link:focus-visible .fc-media img{transform:scale(1.09);filter:saturate(1.06) contrast(1.05)}
.fc-link:hover .fc-mono::before{transform:scale(1.12) rotate(8deg)}
.fc-link:hover .fc-glare{opacity:1}
.fc-link:hover .fc-line,.fc-link:focus-visible .fc-line{inline-size:58px}
.fc-link:hover .fc-go,.fc-link:focus-visible .fc-go{opacity:1;transform:none}
.fc-link:focus-visible{outline:3px solid var(--fc-c);outline-offset:4px}

/* بقیه‌ی کارت‌ها وقتی یکی زیر نشانگر است کمی عقب می‌روند — حس گالری */
@media (hover:hover){
  .fac-cards:has(.fc-link:hover) .fc-link:not(:hover){filter:saturate(.55) brightness(.82)}
}
/* گوشی هاور ندارد: دکمه‌ی رفتن همیشه پیداست */
@media (hover:none){
  .fc-go{opacity:1;transform:none;inline-size:36px;block-size:36px;inset-block-end:16px;inset-inline-end:14px}
  .fc-line{inline-size:40px}
}

@keyframes fcSpin{to{--fc-ang:360deg}}

@media (max-width:620px){
  .fac-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .fc-link{border-radius:20px}
  .fc-cap{padding:0 13px 14px}
  .fc-go{display:none}
  .fc-mono{font-size:84px;padding-block-end:40%}
  .fc-name{font-size:15px}
  .fc-role{font-size:11.5px}
  .fc-brand{inset-block-start:10px;inset-inline-start:10px;font-size:10px;padding:5px 9px}
}

@media (prefers-reduced-motion:reduce){
  .fc-link,.fc-media img,.fc-line,.fc-go,.fc-mono::before{transition:none}
  .fc-link:hover::after{animation:none}
}