/* ============================================================
   PREMIUM FX — Rich glows, shine sweeps & smooth animations
   Layered on top of the emerald/gold palette for a polished,
   professional feel (loaded last).
   ============================================================ */

/* ── Respect reduced-motion ── */
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; }
}

/* ══════════════════════════════════════════════════════════
   1. PRIMARY BUTTONS — living gradient + shine sweep + glow
   ══════════════════════════════════════════════════════════ */
.btn-play, .btn-primary, .lc-btn, #pay-btn, .btn-premium-pay {
  position: relative;
  overflow: hidden;
  background: linear-gradient(120deg, #0a9d5a 0%, #12d97a 45%, #3bf29a 55%, #12d97a 70%, #0a9d5a 100%) !important;
  background-size: 220% 100% !important;
  animation: fx-sheen 6s linear infinite;
  box-shadow: 0 6px 22px rgba(18,217,122,0.35), inset 0 1px 0 rgba(255,255,255,0.25) !important;
  transition: transform 0.2s var(--ease-spring), box-shadow 0.25s var(--ease) !important;
}
.btn-play:hover, .btn-primary:hover, .lc-btn:hover, #pay-btn:hover {
  transform: translateY(-2px) scale(1.03);
  box-shadow: 0 10px 34px rgba(18,217,122,0.55), inset 0 1px 0 rgba(255,255,255,0.3) !important;
}
.btn-play:active, .btn-primary:active, .lc-btn:active, #pay-btn:active {
  transform: translateY(0) scale(0.98);
}

/* Shine sweep that crosses the button */
.btn-play::after, .btn-primary::after, .lc-btn::after {
  content: '';
  position: absolute;
  top: 0; left: -60%;
  width: 40%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent);
  transform: skewX(-18deg);
  animation: fx-shine 4.5s ease-in-out infinite;
  pointer-events: none;
}

@keyframes fx-sheen {
  0% { background-position: 0% 0; }
  100% { background-position: 220% 0; }
}
@keyframes fx-shine {
  0%, 60% { left: -60%; }
  85%, 100% { left: 130%; }
}

/* ══════════════════════════════════════════════════════════
   2. PAY / PREMIUM (gold) BUTTON — warm glow
   ══════════════════════════════════════════════════════════ */
.btn-hd-access {
  position: relative;
  overflow: hidden;
  animation: fx-gold-pulse 3.2s ease-in-out infinite;
}
.btn-hd-access::after {
  content: '';
  position: absolute; top: 0; left: -60%;
  width: 45%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
  transform: skewX(-18deg);
  animation: fx-shine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes fx-gold-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(255,192,46,0.35); }
  50%      { box-shadow: 0 6px 26px rgba(255,192,46,0.6); }
}

/* ══════════════════════════════════════════════════════════
   3. POSTER CARDS — lift + emerald glow on hover
   ══════════════════════════════════════════════════════════ */
.poster-card {
  transition: transform 0.32s var(--ease-spring), box-shadow 0.32s var(--ease), border-color 0.32s var(--ease) !important;
}
.poster-card:hover {
  transform: translateY(-8px) scale(1.035);
  border-color: rgba(18,217,122,0.5) !important;
  box-shadow: 0 18px 42px rgba(0,0,0,0.7), 0 0 0 1px rgba(18,217,122,0.25), 0 0 30px rgba(18,217,122,0.28) !important;
}

/* ══════════════════════════════════════════════════════════
   4. TRENDING LIST CARDS — glowing left accent + slide
   ══════════════════════════════════════════════════════════ */
.list-card {
  position: relative;
  transition: transform 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease) !important;
}
.list-card::before {
  content: '';
  position: absolute; left: 0; top: 10%; bottom: 10%;
  width: 3px; border-radius: 3px;
  background: linear-gradient(180deg, #12d97a, #0a9d5a);
  opacity: 0;
  transition: opacity 0.28s var(--ease);
  box-shadow: 0 0 14px rgba(18,217,122,0.7);
}
.list-card:hover {
  background: rgba(18,217,122,0.05) !important;
  transform: translateX(4px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.5) !important;
}
.list-card:hover::before { opacity: 1; }

/* ══════════════════════════════════════════════════════════
   5. CATEGORY TABS — glow on active
   ══════════════════════════════════════════════════════════ */
.cat-tab {
  transition: all 0.24s var(--ease) !important;
}
.cat-tab.active {
  background: linear-gradient(135deg, rgba(18,217,122,0.22), rgba(18,217,122,0.10)) !important;
  border-color: rgba(18,217,122,0.5) !important;
  color: #3bf29a !important;
  box-shadow: 0 0 18px rgba(18,217,122,0.3) !important;
}

/* ══════════════════════════════════════════════════════════
   6. BOTTOM NAV — glowing active item + crown pulse
   ══════════════════════════════════════════════════════════ */
.bn-item.active { color: #3bf29a !important; }
.bn-item.active i {
  filter: drop-shadow(0 0 10px rgba(18,217,122,0.8)) !important;
}
.bn-center-btn {
  animation: fx-crown 3s ease-in-out infinite;
}
@keyframes fx-crown {
  0%, 100% { box-shadow: 0 0 18px rgba(255,192,46,0.45), inset 0 1px 0 rgba(255,255,255,0.4); }
  50%      { box-shadow: 0 0 34px rgba(255,192,46,0.75), inset 0 1px 0 rgba(255,255,255,0.5); }
}

/* ══════════════════════════════════════════════════════════
   7. HERO — animated gradient title + depth vignette
   ══════════════════════════════════════════════════════════ */
.logo .x-accent, .hero-title {
  background-size: 200% auto !important;
  animation: fx-title-flow 8s ease infinite;
}
@keyframes fx-title-flow {
  0% { background-position: 0% center; }
  50% { background-position: 100% center; }
  100% { background-position: 0% center; }
}

/* ══════════════════════════════════════════════════════════
   8. SECTION ENTRANCE — gentle fade-up on scroll-in
   ══════════════════════════════════════════════════════════ */
.poster-card, .list-card, .pkg-card {
  animation: fx-rise 0.5s var(--ease-out) both;
}
@keyframes fx-rise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════════════════════════
   9. RATING BADGE + CHIPS — subtle glow
   ══════════════════════════════════════════════════════════ */
.p-rating, .chip-gold {
  box-shadow: 0 0 12px rgba(255,192,46,0.25);
}
.chip-red { box-shadow: 0 0 12px rgba(244,63,94,0.2); }

/* ══════════════════════════════════════════════════════════
   10. SEARCH FOCUS — emerald ring
   ══════════════════════════════════════════════════════════ */
.header-search input:focus {
  border-color: rgba(18,217,122,0.5) !important;
  box-shadow: 0 0 0 3px rgba(18,217,122,0.12), 0 0 20px rgba(18,217,122,0.15) !important;
}