/* assets/hero.css — کارتِ شیشه‌ای + صحنه‌ی سه‌بعدی + مارکیِ مجوزها */

/* تمِ سایت (iranuni.com) رویِ خودِ body یه overflow:hidden auto + ارتفاعِ محدود می‌ذاره
   (برایِ افکت‌هایِ اسکرولِ خودِ تم) که باعث می‌شه body جدا از html اسکرول بشه و صفحه‌ی
   فول‌پیجِ ما (که از html.scrollTop استفاده می‌کنه) بصری اسکرول نکنه با اینکه
   window.scrollY واقعاً عوض می‌شه. چون body.ilh-standalone-page فقط رویِ همین صفحه‌ست،
   امن می‌شه این قانون‌هایِ تم رو override کرد. */
html:has(body.ilh-standalone-page),
body.ilh-standalone-page {
  height: auto !important;
  min-height: 100% !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: 0 !important;
}

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400 800;
  font-display: swap;
  src: url('fonts/vazirmatn.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+200C-200E, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}

.ilh-hero {
  --ilh-purple: #5b2a86;
  --ilh-purple-2: #7c3fae;
  --ilh-gold: #ffc107;
  --ilh-bg-deep: #1a1030;
  --ilh-fg: #f5f0ff;
  --ilh-muted: rgba(245, 240, 255, .65);
  --ilh-radius: 22px;

  position: relative;
  font-family: 'Vazirmatn', Tahoma, sans-serif;
  direction: rtl;
  overflow: hidden;
  background: var(--ilh-bg-deep);
  color: var(--ilh-fg);
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.ilh-hero-stage {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 100vh;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: clamp(1.4rem, 3vh, 2.4rem);
}
.ilh-hero * { box-sizing: border-box; }

.ilh-hero-bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(120% 100% at 20% -10%, #3d2461 0%, var(--ilh-bg-deep) 55%);
}
.ilh-hero-canvas-wrap {
  position: absolute; inset: 0; z-index: 1;
  opacity: .85;
}
.ilh-hero-canvas-wrap canvas { display: block; width: 100% !important; height: 100% !important; opacity: 0; transition: opacity .8s ease; }
.ilh-hero-canvas-wrap canvas.ready { opacity: 1; }

.ilh-hero-inner {
  position: relative; z-index: 2;
  width: 100%; max-width: 640px; margin-inline: auto; padding: 0 1.5rem;
}
.ilh-glass-card {
  position: relative;
  background: linear-gradient(165deg, rgba(255, 255, 255, .09), rgba(255, 255, 255, .03));
  border-radius: var(--ilh-radius);
  backdrop-filter: blur(26px);
  -webkit-backdrop-filter: blur(26px);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .5), 0 1px 0 rgba(255, 255, 255, .08) inset;
  padding: 2.4rem 2.2rem;
  text-align: center;
  animation: ilh-rise .6s cubic-bezier(.16, 1, .3, 1) both;
}
/* حاشیه‌یِ گرادیانیِ متحرک — لمسِ مدرن/پرمیوم به‌جایِ یه بردرِ صافِ ساده */
.ilh-glass-card::after {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.5px;
  background: conic-gradient(from var(--ilh-border-angle, 0deg), rgba(255, 193, 7, .05), rgba(255, 193, 7, .8), rgba(124, 63, 174, .5), rgba(255, 193, 7, .05));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: ilh-border-rotate 6s linear infinite;
}
@property --ilh-border-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@keyframes ilh-border-rotate { to { --ilh-border-angle: 360deg; } }
@keyframes ilh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ilh-glass-card::after { animation: none; } }
@media (prefers-reduced-motion: reduce) { .ilh-glass-card { animation: none; } }

/* تیترِ کارت — سه‌دایره‌یِ رنگیِ مک/ویندوز (تزئینی) + برندِ «ایران دانشگاه» تویِ همون یه
   ردیف، هرکدوم یه گوشه — به‌جایِ دو خطِ جدا، تا ارتفاعِ کارت کمتر بشه. */
.ilh-card-titlebar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.1rem; }
.ilh-card-dots { display: flex; gap: .45rem; }
.ilh-dot { width: 12px; height: 12px; border-radius: 50%; }
.ilh-dot--red { background: #ff5f57; }
.ilh-dot--yellow { background: #febc2e; }
.ilh-dot--green { background: #28c840; }

.ilh-card-brand {
  font-weight: 800; font-size: 1rem; letter-spacing: .02em;
  background: linear-gradient(90deg, #c084fc, #a78bfa 45%, #e0c3fc 70%, #a78bfa);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 10px rgba(192, 132, 252, .55));
}

.ilh-promo-badge {
  display: inline-flex; align-items: center; gap: .4rem;
  background: linear-gradient(90deg, rgba(255, 193, 7, .18), rgba(255, 193, 7, .08));
  border: 1px solid rgba(255, 193, 7, .4); color: var(--ilh-gold);
  font-size: .8rem; font-weight: 700; padding: .4rem .9rem; border-radius: 999px;
  margin-bottom: 1rem;
  animation: ilh-promo-pulse 2.4s ease-in-out infinite;
}
@keyframes ilh-promo-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 193, 7, .35); } 50% { box-shadow: 0 0 0 6px rgba(255, 193, 7, 0); } }
@media (prefers-reduced-motion: reduce) { .ilh-promo-badge { animation: none; } }

.ilh-hero-title {
  font-size: clamp(1.4rem, 1.05rem + 1.4vw, 2rem); font-weight: 800; margin: 0 0 .7rem;
  min-height: 2.7em; /* چندتا جمله با طولِ متفاوت می‌چرخن (assets/hero-typewriter.js) — جا برایِ ۲ خط */
  color: var(--ilh-gold);
  text-shadow: 0 0 18px rgba(255, 193, 7, .3);
  contain: layout style; /* تغییرِ متن هر ۴۵ms بیرون از خودش تأثیر نذاره، backdrop-filterِ کارت هی دوباره کامپوز نشه */
}
/* افکتِ تایپ‌رایتر (assets/hero-typewriter.js متن رو حرف‌به‌حرف تو همین span می‌ریزه) —
   خودِ متنِ کامل تو HTML از قبل هست (برایِ SEO/no-JS)، JS فقط موقعِ اجرا خالیش می‌کنه و
   دوباره تایپ می‌کنه. */
.ilh-hero-title .ilh-caret {
  display: inline-block; width: 3px; height: .85em; background: var(--ilh-gold);
  margin-inline-start: 2px; vertical-align: -0.1em;
  animation: ilh-caret-blink .9s steps(1) infinite;
}
@keyframes ilh-caret-blink { 50% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .ilh-hero-title .ilh-caret { animation: none; } }

.ilh-hero-sub { color: var(--ilh-muted); margin: 0 0 1.8rem; font-size: 1.02rem; }

.ilh-hero-actions { display: grid; grid-template-columns: repeat(2, 1fr); gap: .8rem; }
.ilh-hero-actions--grid { grid-template-columns: repeat(2, 1fr); }

/* ویزاردِ ۲-مرحله‌ای — استارت/ثبت‌نام/زبان‌آموزِ فعلی، همه با JS داخلِ همین کارت جابه‌جا می‌شن */
.ilh-step { animation: ilh-step-fade .3s ease both; }
@keyframes ilh-step-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ilh-step { animation: none; } }
.ilh-btn-back {
  display: block; margin: .9rem auto 0; background: none; border: none; cursor: pointer;
  color: var(--ilh-muted); font-size: .85rem; font-family: inherit; padding: .3rem .6rem;
  transition: color .2s ease;
}
.ilh-btn-back:hover { color: var(--ilh-fg); }
.ilh-btn {
  display: flex; align-items: center; justify-content: center; text-align: center;
  border-radius: 12px; padding: .85rem 1rem; font-size: .95rem; font-weight: 700; line-height: 1.3;
  text-decoration: none; transition: transform .2s cubic-bezier(.16, 1, .3, 1), box-shadow .2s ease, background .2s ease;
  border: 1px solid transparent;
  font-family: inherit; cursor: pointer; appearance: none; -webkit-appearance: none;
}
.ilh-btn:hover, .ilh-btn:focus-visible { transform: translateY(-2px); }
.ilh-btn:active { transform: translateY(0); }
/* این کلاس قبلاً هیچ‌جا تعریف نشده بود — assets/survey.js چندجا ازش استفاده می‌کرد
   ولی بدونِ این قانون، دکمه فقط به‌اندازه‌ی متنش جمع می‌شد (گوشه‌ی راستِ کارت، نه وسط). */
.ilh-btn--block { width: 100%; }
.ilh-btn--primary {
  background: linear-gradient(135deg, var(--ilh-purple), var(--ilh-purple-2));
  color: #fff; box-shadow: 0 10px 26px rgba(91, 42, 134, .5);
}
.ilh-btn--primary:hover { box-shadow: 0 14px 32px rgba(91, 42, 134, .65); }
.ilh-btn--outline { border-color: rgba(255, 193, 7, .5); color: var(--ilh-gold); background: rgba(255, 193, 7, .06); }
.ilh-btn--outline:hover { background: rgba(255, 193, 7, .14); box-shadow: 0 8px 20px rgba(255, 193, 7, .18); }
@media (prefers-reduced-motion: reduce) { .ilh-btn:hover, .ilh-btn:focus-visible { transform: none; } }

@media (max-width: 640px) {
  .ilh-hero-stage { min-height: 100vh; padding-top: 3rem; }
  .ilh-hero-canvas-wrap { opacity: .35; }
  .ilh-glass-card { padding: 2rem 1.4rem; }
  .ilh-hero-actions { grid-template-columns: 1fr; }
  .ilh-promo-badge { margin-bottom: 1.5rem; } /* یه‌کم فاصله‌ی بیشتر بینِ کادرِ تخفیف و متنِ تایپ‌رایتر، فقط رو موبایل */
}

/* ---- مارکیِ مجوزها — حالا داخلِ خودِ کارتِ شیشه‌ای، زیرِ دکمه‌ها (نه یه بخشِ جدایِ
   تمام‌عرض) — طبقِ خواستِ سینا. یه خط‌جداکننده‌یِ نازک به‌جایِ عوض‌شدنِ رنگِ زمینه. */
.ilh-marquee-section {
  position: relative; z-index: 2; width: 100%;
  margin-top: 1.6rem; padding-top: 1.3rem;
  border-top: 1px solid rgba(255, 255, 255, .1);
}
.ilh-marquee-title {
  text-align: center; color: var(--ilh-fg); font-size: .95rem; font-weight: 800;
  margin: 0 0 1rem; position: relative; padding-bottom: .6rem;
}
.ilh-marquee-title::after {
  content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 36px; height: 2px; border-radius: 2px; background: var(--ilh-gold);
}
.ilh-marquee-carousel { display: flex; align-items: center; gap: .6rem; }
/* دیگه دکمه‌یِ ‹ › نداریم — با سوایپِ لمسی/موسی (assets/licenses-marquee.js، pointerdown/up
   رویِ خودِ track) جابه‌جا می‌شه. */
.ilh-marquee-track { overflow: hidden; width: 100%; padding: 26px 0; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ilh-marquee-track, .ilh-marquee-row { direction: ltr; }
.ilh-marquee-row {
  display: flex; align-items: center; gap: 2.2rem; width: max-content;
  will-change: transform;
  transition: transform .6s cubic-bezier(.16, 1, .3, 1);
}
@media (prefers-reduced-motion: reduce) { .ilh-marquee-row { transition: none; } }
/* حرکت قدم‌به‌قدمه (نه اسکرولِ پیوسته) — assets/licenses-marquee.js با محاسبه‌یِ offsetLeftِ
   خودِ آیتمِ فعلی، هر بار transform رو رویِ یه لوگویِ مشخص می‌ذاره و چند ثانیه نگه می‌داره. */
.ilh-marquee-caption {
  text-align: center; color: var(--ilh-fg); font-size: .85rem; font-weight: 700;
  min-height: 1.4em; margin-top: .6rem; opacity: 0; transition: opacity .3s ease;
}
.ilh-marquee-caption.is-visible { opacity: 1; }

/* لینک‌هایِ داخلیِ کوچک (سئو) — کمرنگ و ریز، عمداً کوچیک‌تر از بقیه‌ی متنِ کارت که
   جلبِ توجه نکنه و ظاهرِ گلس‌کارت به‌هم نریزه. */
.ilh-footer-links {
  display: flex; justify-content: center; gap: 1.1rem; margin-top: 1rem;
}
.ilh-footer-links a {
  color: var(--ilh-muted); font-size: .78rem; text-decoration: none; opacity: .75;
  transition: opacity .2s ease, color .2s ease;
}
.ilh-footer-links a:hover { opacity: 1; color: var(--ilh-gold); }
.ilh-marquee-item {
  position: relative;
  flex: none; display: flex; align-items: center; justify-content: center; height: 40px;
  opacity: .55; filter: grayscale(.7);
  transition: opacity .3s ease, filter .3s ease, transform .35s cubic-bezier(.16, 1, .3, 1);
}
.ilh-marquee-item:hover { opacity: 1; filter: grayscale(0); }
.ilh-marquee-item img { position: relative; z-index: 1; max-height: 40px; max-width: 100px; width: auto; height: auto; object-fit: contain; transition: filter .3s ease; }

/* هرکدوم از لوگوها که به وسطِ نوار برسه، بزرگ و پررنگ می‌شه — دقیقاً افکتِ hostiran.net/customer.
   کلاسِ is-center رو assets/licenses-marquee.js هر فریم بر اساسِ نزدیک‌ترین آیتم به مرکزِ
   track محاسبه و ست می‌کنه (خودِ CSS keyframe بالا فقط جابه‌جاییِ افقی رو انجام می‌ده). scale
   بزرگ (۱.۹) عمداً چشمگیره؛ paddingِ ۲۶px رویِ track جلویِ کلیپ‌شدنِ عمودیِ لوگویِ بزرگ‌شده رو می‌گیره. */
.ilh-marquee-item.is-center { opacity: 1; filter: grayscale(0); transform: scale(1.9); z-index: 2; }
.ilh-marquee-item.is-center::before {
  content: ''; position: absolute; inset: -12px; z-index: 0; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 193, 7, .22), transparent 70%);
  animation: ilh-marquee-pulse 2.2s ease-in-out infinite;
}
.ilh-marquee-item.is-center img { filter: drop-shadow(0 0 10px rgba(255, 193, 7, .5)); }
@keyframes ilh-marquee-pulse { 0%, 100% { transform: scale(1); opacity: .8; } 50% { transform: scale(1.1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .ilh-marquee-item.is-center::before { animation: none; } }