/* =============================================================
   برق فنی — نظرات دانشجوها + ویدیوی پیش‌نمایش + المان‌های متحرک
   این فایل کاملاً جداست و روی استایل‌های قبلی سایت دست نمی‌زند.
   ============================================================= */

/* =============================================================
   ۱) بخش نظرات دانشجوها
   ============================================================= */

.bf-rv {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px 32px;
  direction: rtl;
  border-top: 1px solid rgba(43, 16, 19, .05);
}

.bf-rv__head {
  text-align: center;
  margin-bottom: 34px;
}

.bf-rv__title {
  font-size: 24px;
  font-weight: 900;
  color: var(--white);
  margin: 0 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.bf-rv__title span[aria-hidden] {
  display: inline-block;
  animation: float 3.5s ease-in-out infinite;
}

.bf-rv__sub {
  font-size: 13px;
  color: var(--gray-light);
  margin: 0;
  line-height: 1.9;
}

.bf-rv__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 20px;
}

.bf-rv__card {
  position: relative;
  overflow: hidden;
  background: var(--dark2);
  border: 1px solid rgba(43, 16, 19, .08);
  border-radius: 18px;
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease,
              border-color .35s ease;
}

/* گیومهٔ تزئینی گوشهٔ کارت */
.bf-rv__card::before {
  content: "”";
  position: absolute;
  top: -26px;
  left: 16px;
  font-size: 110px;
  line-height: 1;
  font-family: Georgia, "Times New Roman", serif;
  color: var(--yellow);
  opacity: .07;
  pointer-events: none;
  transition: opacity .35s ease, transform .35s ease;
}

/* نوار نازک بالای کارت که موقع هاور از راست باز می‌شود */
.bf-rv__card::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: linear-gradient(90deg, var(--yellow), var(--yellow-dark));
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.bf-rv__card:hover {
  transform: translateY(-6px);
  border-color: rgba(255, 59, 59, .28);
  box-shadow: 0 18px 40px rgba(43, 16, 19, .10);
}

.bf-rv__card:hover::before { opacity: .16; transform: rotate(-6deg); }
.bf-rv__card:hover::after  { transform: scaleX(1); }

.bf-rv__tag {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  color: var(--yellow-dark);
  background: rgba(255, 59, 59, .08);
  border: 1px solid rgba(255, 59, 59, .18);
  border-radius: 20px;
  padding: 4px 12px;
  position: relative;
  z-index: 1;
}

.bf-rv__stars {
  display: flex;
  gap: 3px;
  font-size: 14px;
  letter-spacing: 1px;
  color: #f5a524;
  position: relative;
  z-index: 1;
}

.bf-rv__stars i { font-style: normal; }
.bf-rv__stars i.is-off { opacity: .25; filter: grayscale(1); }

.bf-rv__text {
  font-size: 13.5px;
  line-height: 2.1;
  color: var(--gray-light);
  margin: 0;
  position: relative;
  z-index: 1;
  flex: 1;
}

.bf-rv__person {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 14px;
  border-top: 1px solid rgba(43, 16, 19, .06);
  position: relative;
  z-index: 1;
}

.bf-rv__avatar {
  width: 42px;
  height: 42px;
  flex-shrink: 0;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 900;
  color: #fff;
  background: linear-gradient(140deg, var(--yellow), var(--yellow-dark));
  box-shadow: 0 4px 14px rgba(255, 59, 59, .28);
}

.bf-rv__name {
  font-size: 13.5px;
  font-weight: 800;
  color: var(--white);
  margin: 0 0 2px;
}

.bf-rv__role {
  font-size: 11.5px;
  color: var(--gray);
  margin: 0;
}

@media (max-width: 768px) {
  .bf-rv { padding: 40px 16px; }
  .bf-rv__title { font-size: 20px; }
  .bf-rv__card { padding: 22px 18px 18px; }
}

/* =============================================================
   ۲) ویدیوی پیش‌نمایش دوره
   ============================================================= */

.bf-pv {
  margin: 4px 0 26px;
  direction: rtl;
}

.bf-pv__label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12px;
  font-weight: 800;
  color: var(--yellow-dark);
  background: rgba(255, 59, 59, .08);
  border: 1px solid rgba(255, 59, 59, .2);
  border-radius: 20px;
  padding: 5px 14px;
  margin-bottom: 12px;
}

.bf-pv__label i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--yellow);
  animation: pulse-dot 1.8s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { transform: scale(1);   opacity: 1;  }
  50%      { transform: scale(1.5); opacity: .45; }
}

.bf-pv__frame {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  background: #1a0d0f;
  border: 1px solid rgba(255, 59, 59, .2);
  box-shadow: 0 16px 40px rgba(43, 16, 19, .16);
  aspect-ratio: 16 / 9;
}

.bf-pv__frame video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #1a0d0f;
}

/* دکمهٔ پخش که فقط تا قبل از شروع ویدیو دیده می‌شود */
.bf-pv__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  cursor: pointer;
  background: radial-gradient(ellipse at center, rgba(26, 13, 15, .28) 0%, rgba(26, 13, 15, .62) 100%);
  transition: opacity .3s ease, visibility .3s ease;
  padding: 0;
}

.bf-pv__frame.is-playing .bf-pv__play {
  opacity: 0;
  visibility: hidden;
}

.bf-pv__play span {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--yellow), var(--yellow-dark));
  color: #fff;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 5px;
  box-shadow: 0 0 0 0 rgba(255, 59, 59, .55);
  animation: bf-pv-ring 2.2s ease-out infinite;
  transition: transform .25s ease;
}

.bf-pv__play:hover span { transform: scale(1.09); }

@keyframes bf-pv-ring {
  0%   { box-shadow: 0 0 0 0    rgba(255, 59, 59, .55); }
  70%  { box-shadow: 0 0 0 22px rgba(255, 59, 59, 0);   }
  100% { box-shadow: 0 0 0 0    rgba(255, 59, 59, 0);   }
}

.bf-pv__hint {
  font-size: 11.5px;
  color: var(--gray);
  margin: 10px 2px 0;
}

@media (max-width: 768px) {
  .bf-pv__frame { border-radius: 14px; }
  .bf-pv__play span { width: 56px; height: 56px; font-size: 20px; }
}

/* =============================================================
   ۳) المان‌های متحرک
   -------------------------------------------------------------
   نکتهٔ مهم: کلاس .bf-reveal را جاوااسکریپت اضافه می‌کند، نه HTML.
   یعنی اگر جاوااسکریپت به هر دلیلی اجرا نشود، هیچ چیزی مخفی
   نمی‌ماند و سایت دقیقاً مثل قبل دیده می‌شود.
   ============================================================= */

.bf-reveal {
  opacity: 0;
  transform: translateY(26px);
  transition: opacity .7s cubic-bezier(.22, 1, .36, 1),
              transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}

.bf-reveal.bf-in {
  opacity: 1;
  transform: none;
}

/* ورود پلکانی کارت‌ها */
.bf-reveal[data-bf-delay="1"] { transition-delay: .08s; }
.bf-reveal[data-bf-delay="2"] { transition-delay: .16s; }
.bf-reveal[data-bf-delay="3"] { transition-delay: .24s; }
.bf-reveal[data-bf-delay="4"] { transition-delay: .32s; }
.bf-reveal[data-bf-delay="5"] { transition-delay: .40s; }

/* ---- کارت دوره: بلند شدن + برق کشیدن روی تصویر ---- */
.bf-cc {
  transition: transform .35s cubic-bezier(.22, 1, .36, 1),
              box-shadow .35s ease;
}

.bf-cc:hover {
  transform: translateY(-7px);
  box-shadow: 0 20px 44px rgba(43, 16, 19, .13);
}

.bf-cc__media { position: relative; overflow: hidden; }

.bf-cc__media::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 45%;
  left: -60%;
  background: linear-gradient(100deg,
              transparent 0%,
              rgba(255, 255, 255, .38) 50%,
              transparent 100%);
  transform: skewX(-18deg);
  pointer-events: none;
  transition: left .75s cubic-bezier(.22, 1, .36, 1);
}

.bf-cc:hover .bf-cc__media::after { left: 130%; }

/* ---- جرقه‌های شناور پس‌زمینهٔ هدر ---- */
.bf-sparks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}

.bf-sparks i {
  position: absolute;
  display: block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--yellow);
  opacity: .28;
  box-shadow: 0 0 8px rgba(255, 59, 59, .85);
  animation: bf-spark linear infinite;
}

@keyframes bf-spark {
  0%   { transform: translateY(0) scale(.6);        opacity: 0;   }
  12%  {                                            opacity: .35; }
  88%  {                                            opacity: .35; }
  100% { transform: translateY(-190px) scale(1.25); opacity: 0;   }
}

/* ---- شمارندهٔ آمار ---- */
.bf-count { display: inline-block; font-variant-numeric: tabular-nums; }

/* ---- درخشش آرام روی تیترهای بخش‌ها ---- */
.bf-shine {
  background-size: 200% auto !important;
  animation: shimmer 6s linear infinite;
}

/* ---- دکمه‌ها: کمی جان گرفتن موقع هاور ---- */
.bf-rv__card,
.bf-pv__frame { backface-visibility: hidden; }

/* =============================================================
   احترام به تنظیم «کاهش حرکت» سیستم کاربر
   ============================================================= */
@media (prefers-reduced-motion: reduce) {
  .bf-reveal,
  .bf-reveal.bf-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .bf-sparks,
  .bf-cc__media::after { display: none; }
  .bf-rv__title span[aria-hidden],
  .bf-pv__label i,
  .bf-pv__play span,
  .bf-shine {
    animation: none !important;
  }
  .bf-cc:hover,
  .bf-rv__card:hover { transform: none; }
}