/* ============================================================
   آکادمی فرصت و پول‌سازی هوشمند
   Style v2 — براق‌سازی، گرادیان‌های متحرک، درخشش
   ============================================================ */

/* ============================================================
   ۱) گرادیان متحرک برای دکمه‌های طلایی
   ============================================================ */
@keyframes gradientShift {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.btn-primary,
.btn-gold,
.btn-golden {
  background: linear-gradient(270deg, #F0D890, #D4A843, #B8860B, #F0D890);
  background-size: 300% 300%;
  animation: gradientShift 6s ease infinite;
}

/* ============================================================
   ۲) درخشش (Glow) برای دکمه‌ها و کارت‌ها
   ============================================================ */
.btn-primary:hover,
.btn-gold:hover {
  box-shadow:
    0 0 12px rgba(240, 216, 144, .7),
    0 0 24px rgba(212, 168, 67, .55),
    0 0 40px rgba(212, 168, 67, .35),
    0 8px 20px rgba(212, 168, 67, .50);
  transform: translateY(-2px) scale(1.02);
}

/* درخشش کارت‌ها */
.card:hover,
.form-card:hover,
.analysis-card:hover,
.success-card:hover {
  box-shadow:
    0 0 0 1px rgba(212, 168, 67, .25),
    0 20px 50px rgba(212, 168, 67, .20),
    0 0 60px rgba(212, 168, 67, .15);
}

/* ============================================================
   ۳) افکت شیشه‌ای (Glassmorphism)
   ============================================================ */
.site-header,
.form-card,
.card,
.analysis-card {
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
}

body[data-theme="dark"] .site-header,
body[data-theme="dark"] .form-card,
body[data-theme="dark"] .card,
body[data-theme="dark"] .analysis-card {
  background: rgba(28, 38, 56, .88);
}

/* ============================================================
   ۴) افکت انعکاس زیر کارت‌ها
   ============================================================ */
.card,
.form-card,
.analysis-card {
  position: relative;
}

.card::after,
.form-card::after,
.analysis-card::after {
  content: "";
  position: absolute;
  bottom: -25px;
  left: 12%;
  right: 12%;
  height: 40px;
  background: radial-gradient(ellipse at center, rgba(212, 168, 67, .35), transparent 70%);
  filter: blur(18px);
  pointer-events: none;
  z-index: -1;
  opacity: 0;
  transition: opacity .4s ease;
}

.card:hover::after,
.form-card:hover::after,
.analysis-card:hover::after {
  opacity: 1;
}

/* ============================================================
   ۵) نور متحرک پشت عنوان Hero
   ============================================================ */
@keyframes pulseLight {
  0%, 100% {
    opacity: .45;
    transform: scale(1);
  }
  50% {
    opacity: .85;
    transform: scale(1.08);
  }
}

.hero h1,
.page-header h1 {
  position: relative;
  z-index: 1;
}

.hero h1::before,
.page-header h1::before {
  content: "";
  position: absolute;
  inset: -30px -50px;
  background: radial-gradient(circle at center, rgba(212, 168, 67, .35), transparent 70%);
  filter: blur(45px);
  z-index: -1;
  animation: pulseLight 4s ease-in-out infinite;
  pointer-events: none;
}

/* ============================================================
   ۶) افکت Hover روی لینک‌های ناوبری (شیمر)
   ============================================================ */
.top-row a,
.nav-links a {
  position: relative;
  overflow: hidden;
}

.top-row a::before,
.nav-links a::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .7), transparent);
  transition: left .5s ease;
  pointer-events: none;
}

.top-row a:hover::before,
.nav-links a:hover::before {
  left: 100%;
}

/* ============================================================
   ۷) درخشش نئونی برای آیکن‌ها و لوگوها
   ============================================================ */
@keyframes neonPulse {
  0%, 100% {
    filter: drop-shadow(0 0 6px rgba(212, 168, 67, .5));
  }
  50% {
    filter: drop-shadow(0 0 14px rgba(212, 168, 67, .9));
  }
}

.header-brand__logo,
.brand-mark,
.card-icon,
.choice-icon {
  animation: neonPulse 3s ease-in-out infinite;
}

/* ============================================================
   ۸) افکت نور نقطه‌ای متحرک در پس‌زمینه
   ============================================================ */
@keyframes floatOrb {
  0%, 100% {
    transform: translate(0, 0) scale(1);
    opacity: .35;
  }
  33% {
    transform: translate(40px, -30px) scale(1.15);
    opacity: .55;
  }
  66% {
    transform: translate(-30px, 20px) scale(.95);
    opacity: .40;
  }
}

.hero::after,
.page-header::after {
  content: "";
  position: absolute;
  top: 20%;
  right: 10%;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(77, 182, 172, .35), transparent 70%);
  filter: blur(60px);
  animation: floatOrb 12s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

.hero,
.page-header {
  position: relative;
  overflow: hidden;
}

/* ============================================================
   ۹) درخشش تیتر و متن تاکیدی
   ============================================================ */
.hl,
.eyebrow,
h1 .hl,
h2 .hl {
  text-shadow:
    0 0 8px rgba(212, 168, 67, .35),
    0 0 16px rgba(212, 168, 67, .20);
}

/* ============================================================
   ۱۰) افکت ورود نرم (Fade + Slide + Scale)
   ============================================================ */
@keyframes luxuryEnter {
  0% {
    opacity: 0;
    transform: translateY(30px) scale(.96);
    filter: blur(8px);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
    filter: blur(0);
  }
}

.fade-in.visible,
.section-head,
.card,
.form-card {
  animation: luxuryEnter .8s cubic-bezier(.16, 1, .3, 1) both;
}

/* ============================================================
   ۱۱) هایلایت تیتر با گرادیان متحرک
   ============================================================ */
@keyframes gradientTextMove {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

.hero h1 .hl,
.page-header h1 .hl,
.text-gold {
  background: linear-gradient(90deg, #F0D890, #D4A843, #B8860B, #F0D890);
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientTextMove 5s ease infinite;
}

/* ============================================================
   ۱۲) درخشش خط جداکننده
   ============================================================ */
.divider {
  background: linear-gradient(90deg, transparent, #D4A843, #F0D890, #D4A843, transparent);
  height: 2px;
  box-shadow: 0 0 12px rgba(212, 168, 67, .55);
}

/* ============================================================
   ۱۳) افکت نوار شعار متحرک (تشدید درخشش)
   ============================================================ */
.ticker {
  box-shadow:
    0 3px 16px rgba(212, 168, 67, .45),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}

/* ============================================================
   ۱۴) درخشش کادرهای ورودی هنگام فوکوس
   ============================================================ */
.field input:focus,
.field select:focus,
.field textarea:focus,
.form-control:focus {
  box-shadow:
    0 0 0 4px rgba(212, 168, 67, .20),
    0 0 16px rgba(212, 168, 67, .35);
}

/* ============================================================
   ۱۵) درخشش QR Code و کد CIM
   ============================================================ */
.id-card__code,
.cim-box__code,
.track-box__code {
  text-shadow:
    0 0 8px rgba(240, 216, 144, .55),
    0 0 16px rgba(212, 168, 67, .35);
}

.id-card__qr,
.qr-box {
  box-shadow:
    0 0 0 2px rgba(212, 168, 67, .55),
    0 0 24px rgba(212, 168, 67, .50);
}

/* ============================================================
   ۱۶) درخشش نوار ابزار پایین
   ============================================================ */
.bottom-toolbar {
  box-shadow:
    0 -4px 24px rgba(0, 0, 0, .35),
    inset 0 1px 0 rgba(212, 168, 67, .25);
}

/* ============================================================
   ۱۷) کارت‌های آماری درخشان
   ============================================================ */
.stat-item:hover {
  background: linear-gradient(135deg, rgba(212, 168, 67, .08), rgba(240, 216, 144, .12));
  box-shadow: inset 0 0 30px rgba(212, 168, 67, .15);
}

.stat-number {
  text-shadow:
    0 0 12px rgba(212, 168, 67, .45),
    0 0 24px rgba(212, 168, 67, .25);
}

/* ============================================================
   ۱۸) درخشش پالس‌دار برای نشانگر AI Live
   ============================================================ */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 0 0 rgba(77, 182, 172, .8);
  }
  50% {
    box-shadow: 0 0 0 14px rgba(77, 182, 172, 0);
  }
}

.ai-live__pulse {
  animation: pulseGlow 2s infinite;
}

/* ============================================================
   ۱۹) افکت عمق (Depth) برای کارت‌ها
   ============================================================ */
.card,
.form-card,
.analysis-card {
  transform: translateZ(0);
  transition:
    transform .4s cubic-bezier(.16, 1, .3, 1),
    box-shadow .4s ease,
    border-color .3s ease;
}

.card:hover,
.form-card:hover {
  transform: translateY(-6px) translateZ(0);
}

/* ============================================================
   ۲۰) درخشش خطوط دور بخش‌ها
   ============================================================ */
.section-alt {
  background: linear-gradient(180deg, rgba(240, 216, 144, .04), rgba(212, 168, 67, .02));
  border-block: 1px solid rgba(212, 168, 67, .20);
  box-shadow:
    inset 0 1px 0 rgba(240, 216, 144, .15),
    inset 0 -1px 0 rgba(240, 216, 144, .15);
}

/* ============================================================
   ۲۱) کارت‌های ID Card درخشان
   ============================================================ */
.id-card__front,
.id-card__back {
  box-shadow:
    0 20px 50px rgba(26, 42, 74, .35),
    0 0 0 2px rgba(212, 168, 67, .65),
    0 0 40px rgba(212, 168, 67, .35),
    inset 0 0 100px rgba(0, 0, 0, .25);
}

/* ============================================================
   ۲۲) درخشش نوار بالای کارت (خط طلایی)
   ============================================================ */
.card::before {
  box-shadow: 0 0 12px rgba(212, 168, 67, .65);
}

/* ============================================================
   ۲۳) افکت اسکرول‌بار درخشان
   ============================================================ */
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #F0D890, #D4A843);
  box-shadow: inset 0 0 8px rgba(212, 168, 67, .55);
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #F0D890, #B8860B);
}

/* ============================================================
   ۲۴) افکت درخشش برای دکمه‌های ثانویه
   ============================================================ */
.btn-secondary:hover,
.btn-ghost:hover {
  box-shadow:
    0 0 0 2px rgba(212, 168, 67, .35),
    0 6px 20px rgba(212, 168, 67, .30);
}

/* ============================================================
   ۲۵) درخشش نشان‌های تگ
   ============================================================ */
.card-tag,
.id-card__tag,
.choice-tag {
  box-shadow: inset 0 0 8px rgba(212, 168, 67, .15);
}

/* ============================================================
   ۲۶) افکت پالس برای دکمه‌های CTA
   ============================================================ */
@keyframes ctaPulse {
  0%, 100% {
    box-shadow:
      0 6px 16px rgba(212, 168, 67, .40),
      0 0 0 0 rgba(212, 168, 67, .55);
  }
  50% {
    box-shadow:
      0 6px 16px rgba(212, 168, 67, .55),
      0 0 0 12px rgba(212, 168, 67, 0);
  }
}

.btn-pulse {
  animation: ctaPulse 2.5s ease-in-out infinite;
}

/* ============================================================
   ۲۷) درخشش پس‌زمینه‌های body
   ============================================================ */
body.bg-1::before,
body.bg-2::before,
body.bg-3::before,
body.bg-4::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: -1;
  background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, .15), transparent 65%);
  mix-blend-mode: overlay;
}

body[data-theme="dark"].bg-1::before,
body[data-theme="dark"].bg-2::before,
body[data-theme="dark"].bg-3::before,
body[data-theme="dark"].bg-4::before {
  background: radial-gradient(circle at 50% 50%, rgba(240, 216, 144, .06), transparent 65%);
}

/* ============================================================
   ۲۸) افکت درخشش برای فرم‌های Wizard
   ============================================================ */
.form-progress__step.active,
.form-progress__step.done {
  box-shadow:
    0 0 8px rgba(212, 168, 67, .65),
    0 0 16px rgba(212, 168, 67, .35);
}

/* ============================================================
   ۲۹) درخشش برای دکمه‌های شناور (Back to Top)
   ============================================================ */
.back-to-top {
  box-shadow:
    0 6px 20px rgba(212, 168, 67, .50),
    0 0 24px rgba(212, 168, 67, .35);
}

.back-to-top:hover {
  box-shadow:
    0 10px 30px rgba(212, 168, 67, .65),
    0 0 40px rgba(212, 168, 67, .45);
}

/* ============================================================
   ۳۰) افکت درخشش برای hover روی گزینه‌های Choice
   ============================================================ */
.choice input:checked + label {
  box-shadow:
    0 0 0 4px rgba(212, 168, 67, .18),
    0 6px 20px rgba(212, 168, 67, .30);
}

/* ============================================================
   Respect Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}