/* ============================================
   Additional Styles - Particles, Effects, Extras
   ============================================ */

/* --- Hero Particles Canvas --- */
#hero-particles {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  z-index: -1;
  pointer-events: none;
}

/* --- Section Divider --- */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border-color), transparent);
}

/* --- Animated gradient border for hero button --- */
@keyframes gradient-shift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Text gradient animation --- */
.text-gradient-animate {
  background: linear-gradient(90deg, var(--accent), var(--teal-light), var(--accent));
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradient-shift 4s linear infinite;
}

/* --- Floating animation --- */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.float-anim { animation: float 4s ease-in-out infinite; }

/* --- Pulse glow for schedule dots --- */
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 2px var(--accent), 0 0 16px rgba(var(--accent-rgb), 0.4); }
  50% { box-shadow: 0 0 0 4px var(--accent), 0 0 32px rgba(var(--accent-rgb), 0.6); }
}
.schedule-dot { animation: pulse-glow 3s ease-in-out infinite; }

/* --- Card shine effect on hover --- */
.card-shine {
  position: relative;
  overflow: hidden;
}
.card-shine::after {
  content: "";
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(
    45deg,
    transparent 40%,
    rgba(255,255,255,0.03) 50%,
    transparent 60%
  );
  transform: translateX(-100%);
  transition: transform 0.6s;
}
.card-shine:hover::after { transform: translateX(100%); }

/* --- Reveal animation for sections --- */
@keyframes reveal-up {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: translateY(0); }
}

/* --- Horizontal scroll text --- */
.scroll-text-wrap {
  overflow: hidden;
  white-space: nowrap;
  padding: 32px 0;
}
.scroll-text {
  display: inline-flex;
  gap: 48px;
  animation: scroll-text 25s linear infinite;
}
.scroll-text span {
  font-family: var(--font-heading);
  font-size: 80px;
  font-weight: 700;
  letter-spacing: 0.05em;
  -webkit-text-stroke: 1px rgba(255,255,255,0.08);
  color: transparent;
}
@keyframes scroll-text {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* --- Video container responsive --- */
.video-container {
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
  border-radius: var(--radius-md);
  margin-top: 32px;
}
.video-container iframe {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  border: 0;
  border-radius: var(--radius-md);
}

/* --- Stats counter display --- */
.stat-number {
  font-family: var(--font-heading);
  font-size: 56px;
  font-weight: 700;
  background: linear-gradient(135deg, var(--accent), var(--teal-light));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  line-height: 1;
}

/* --- Glassmorphism card variant --- */
.glass-card {
  background: rgba(255,255,255,0.03);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: var(--radius-md);
}

/* --- Smooth image zoom on hover --- */
.img-zoom-wrap {
  overflow: hidden;
  border-radius: var(--radius-sm);
}
.img-zoom-wrap img {
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.img-zoom-wrap:hover img { transform: scale(1.05); }

/* --- Tag / Badge --- */
.tag {
  display: inline-block;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  border-radius: var(--radius-full);
  background: rgba(var(--accent-rgb), 0.1);
  color: var(--accent);
  border: 1px solid rgba(var(--accent-rgb), 0.2);
}

/* --- Investor profile cards: 1 column on mobile --- */
@media (max-width: 768px) {
  .p-program_sec_profdetail .inner {
    grid-template-columns: 1fr !important;
  }
}

/* --- Loading skeleton shimmer --- */
@keyframes shimmer {
  0% { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.skeleton {
  background: linear-gradient(90deg, var(--bg-card) 25%, var(--bg-card-hover) 50%, var(--bg-card) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: var(--radius-sm);
}