/* ═══════════════════════════════════════════════
   PrimeFlx — Animations & Microinteractions CSS
   ═══════════════════════════════════════════════ */

/* ── Base preference ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── Keyframes ── */
@keyframes fadeIn         { from { opacity:0 }                     to { opacity:1 } }
@keyframes fadeInUp       { from { opacity:0; transform:translateY(30px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInDown     { from { opacity:0; transform:translateY(-20px) } to { opacity:1; transform:translateY(0) } }
@keyframes fadeInLeft     { from { opacity:0; transform:translateX(-30px) } to { opacity:1; transform:translateX(0) } }
@keyframes fadeInRight    { from { opacity:0; transform:translateX(30px) }  to { opacity:1; transform:translateX(0) } }
@keyframes slideUp        { from { transform:translateY(100%) }    to { transform:translateY(0) } }
@keyframes slideDown      { from { transform:translateY(-100%) }   to { transform:translateY(0) } }
@keyframes scaleIn        { from { opacity:0; transform:scale(0.85) } to { opacity:1; transform:scale(1) } }
@keyframes scaleOut       { from { opacity:1; transform:scale(1) }   to { opacity:0; transform:scale(0.85) } }
@keyframes pulse          { 0%,100% { transform:scale(1) } 50% { transform:scale(1.05) } }
@keyframes pulseSoft      { 0%,100% { opacity:1 }          50% { opacity:0.7 } }
@keyframes spin           { from { transform:rotate(0deg) } to { transform:rotate(360deg) } }
@keyframes shimmer        { 0% { background-position:-200% center } 100% { background-position:200% center } }
@keyframes gradientShift  { 0%,100% { background-position:0% 50% } 50% { background-position:100% 50% } }
@keyframes float          { 0%,100% { transform:translateY(0) } 50% { transform:translateY(-8px) } }
@keyframes glow           { 0%,100% { box-shadow:0 0 20px var(--accent) } 50% { box-shadow:0 0 40px var(--accent), 0 0 60px var(--accent) } }
@keyframes glowText       { 0%,100% { text-shadow:0 0 10px var(--accent) } 50% { text-shadow:0 0 20px var(--accent), 0 0 40px var(--accent) } }
@keyframes heartBeat      { 0% { transform:scale(1) } 14% { transform:scale(1.3) } 28% { transform:scale(1) } 42% { transform:scale(1.2) } 70% { transform:scale(1) } }
@keyframes bounce         { 0%,20%,53%,80%,100% { transform:translateY(0) } 40%,43% { transform:translateY(-20px) } 70% { transform:translateY(-8px) } 90% { transform:translateY(-4px) } }
@keyframes shake          { 0%,100% { transform:translateX(0) } 10%,30%,50%,70%,90% { transform:translateX(-4px) } 20%,40%,60%,80% { transform:translateX(4px) } }
@keyframes ripple         { 0% { transform:scale(0); opacity:0.6 } 100% { transform:scale(4); opacity:0 } }
@keyframes toast-in       { from { opacity:0; transform:translateX(100%) } to { opacity:1; transform:translateX(0) } }
@keyframes toast-out      { from { opacity:1; transform:translateX(0) } to { opacity:0; transform:translateX(100%) } }
@keyframes floatHeart     { 0% { opacity:1; transform:translateY(0) scale(1) } 100% { opacity:0; transform:translateY(-60px) scale(0.5) } }
@keyframes particleBurst  { 0% { transform:translate(0,0) scale(1); opacity:1 } 100% { transform:translate(var(--x),var(--y)) scale(0); opacity:0 } }
@keyframes loadingBar     { 0% { width:0 } 100% { width:100% } }
@keyframes pageLoad       { 0% { opacity:1 } 100% { opacity:0; pointer-events:none } }
@keyframes modalOpen      { from { opacity:0; transform:scale(0.9) translateY(20px) } to { opacity:1; transform:scale(1) translateY(0) } }
@keyframes progressBar    { from { width:0 } to { width:100% } }

/* ── Utility classes ── */
.anim-fade-in        { animation: fadeIn     0.4s ease both }
.anim-fade-in-up     { animation: fadeInUp   0.5s ease both }
.anim-fade-in-down   { animation: fadeInDown 0.4s ease both }
.anim-scale-in       { animation: scaleIn    0.35s ease both }
.anim-slide-up       { animation: slideUp    0.4s ease both }
.anim-float          { animation: float      3s ease-in-out infinite }
.anim-pulse          { animation: pulse      2s ease-in-out infinite }
.anim-glow           { animation: glow       2s ease-in-out infinite }
.anim-spin           { animation: spin       1s linear infinite }
.anim-shimmer        { background:linear-gradient(90deg,transparent 25%,rgba(255,255,255,.07) 50%,transparent 75%); background-size:200% auto; animation: shimmer 1.5s linear infinite }
.anim-gradient-shift { background-size:200% 200%; animation: gradientShift 4s ease infinite }

/* ── Scroll animation trigger ── */
.anim-on-scroll      { opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease }
.anim-on-scroll.anim-in { opacity:1; transform:translateY(0) }
.anim-on-scroll.delay-1 { transition-delay:.1s }
.anim-on-scroll.delay-2 { transition-delay:.2s }
.anim-on-scroll.delay-3 { transition-delay:.3s }
.anim-on-scroll.delay-4 { transition-delay:.4s }

/* ── Stagger children ── */
.stagger > * { opacity:0; animation: fadeInUp 0.5s ease both }
.stagger > *:nth-child(1) { animation-delay:.05s }
.stagger > *:nth-child(2) { animation-delay:.10s }
.stagger > *:nth-child(3) { animation-delay:.15s }
.stagger > *:nth-child(4) { animation-delay:.20s }
.stagger > *:nth-child(5) { animation-delay:.25s }
.stagger > *:nth-child(6) { animation-delay:.30s }

/* ── Spinner ── */
.spinner {
  width: 44px; height: 44px;
  border: 3px solid rgba(255,255,255,.1);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin: auto;
}
.spinner-sm {
  width: 18px; height: 18px;
  border: 2px solid rgba(255,255,255,.15);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
  display: inline-block;
  vertical-align: middle;
}

/* ── Skeleton loading ── */
.skeleton {
  background: linear-gradient(90deg,rgba(255,255,255,.04) 25%,rgba(255,255,255,.08) 50%,rgba(255,255,255,.04) 75%);
  background-size: 200% auto;
  animation: shimmer 1.6s linear infinite;
  border-radius: 6px;
}
.skeleton-card { height: 280px }
.skeleton-text { height: 14px; margin-bottom: 8px }
.skeleton-title { height: 22px; width: 60%; margin-bottom: 12px }

/* ── Toast ── */
.toast          { animation: toast-in  .35s ease both }
.toast.toast-show { animation: toast-in .35s ease both }
.toast:not(.toast-show) { animation: toast-out .35s ease both }

/* ── Reaction pop ── */
.reaction-pop   { animation: pulse    .3s ease }
.fav-burst      { animation: heartBeat .6s ease }
.float-heart    { position:absolute; pointer-events:none; animation: floatHeart 1s ease forwards; font-size:20px; left:50%; transform:translateX(-50%) }
.reaction-particle {
  position:absolute; pointer-events:none; width:6px; height:6px; border-radius:50%;
  background:var(--accent); animation: particleBurst .6s ease forwards;
}

/* ── Card hover transitions ── */
.content-card {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.content-card:hover {
  z-index: 10;
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 30px rgba(124,58,237,.3);
}
.content-card .card-poster img {
  transition: transform .4s ease;
}
.content-card:hover .card-poster img {
  transform: scale(1.08);
}
.content-card .card-overlay {
  opacity: 0;
  transition: opacity .3s ease;
}
.content-card:hover .card-overlay {
  opacity: 1;
}

/* ── Button press effect ── */
.btn-watch-now, .btn-auth-submit, .btn-plan, .card-play-btn {
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease;
}
.btn-watch-now:active, .btn-auth-submit:active, .btn-plan:active, .card-play-btn:active {
  transform: scale(0.96);
}

/* ── Ripple on buttons ── */
.btn-ripple {
  position: relative; overflow: hidden;
}
.btn-ripple::after {
  content:''; position:absolute; border-radius:50%;
  width:100px; height:100px; margin:-50px;
  background:rgba(255,255,255,.2);
  transform: scale(0); opacity:0;
  transition: transform .6s ease, opacity .6s ease;
  pointer-events:none;
}
.btn-ripple:active::after {
  transform: scale(4); opacity:0;
  transition: 0s;
}

/* ── Modal ── */
.modal-overlay.modal-active .modal-content,
.modal-overlay.modal-active .auth-modal,
.modal-overlay.modal-active .detail-modal-inner {
  animation: modalOpen .35s cubic-bezier(.34,1.56,.64,1) both;
}

/* ── Hero progress bar ── */
.hero-progress-bar {
  transition: width var(--hero-delay, 6s) linear;
}

/* ── Loader exit ── */
#pf-loader.fade-out { animation: pageLoad .6s ease forwards }

/* ── Page transition ── */
.page-enter { animation: fadeIn .4s ease both }

/* ── Navbar ── */
#main-navbar { transition: transform .3s ease, background .3s ease, padding .3s ease }
#main-navbar.hidden { transform: translateY(-100%) }
#main-navbar.visible { transform: translateY(0) }

/* ── Player fade ── */
.player-fade { animation: pulseSoft .3s ease }

/* ── Autocomplete items ── */
.autocomplete-item {
  transition: background .15s ease, transform .15s ease;
}
.autocomplete-item:hover {
  transform: translateX(4px);
}

/* ── Genre chips ── */
.genre-chip, .chip {
  transition: background .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.genre-chip.active, .chip.active {
  animation: scaleIn .2s ease;
}

/* ── Episode item ── */
.episode-item {
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.episode-item:hover { transform: translateX(4px) }
.episode-item.active { animation: fadeInLeft .2s ease both }

/* ── Profile tab ── */
.profile-tab {
  transition: color .2s ease, border-color .2s ease;
}

/* ── Score badge ── */
.detail-score-badge {
  animation: float 3s ease-in-out infinite;
}

/* ── Cast items ── */
.cast-item {
  transition: transform .2s ease;
}
.cast-item:hover { transform: scale(1.05) translateY(-2px) }

/* ── Suggestion tags ── */
.suggestion-tag {
  transition: background .2s ease, transform .2s ease;
}
.suggestion-tag:hover { transform: translateY(-2px) }

/* ── Social buttons ── */
.btn-social {
  transition: transform .2s ease, box-shadow .2s ease, opacity .2s ease;
}
.btn-social:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,.3);
}
.btn-social:active { transform: translateY(0) }

/* ── Plan card ── */
.plan-card {
  transition: transform .3s ease, box-shadow .3s ease;
}
.plan-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 30px 60px rgba(0,0,0,.4), 0 0 40px rgba(124,58,237,.2);
}
.plan-card.plan-popular {
  animation: glow 3s ease-in-out infinite;
}

/* ── Loading dots ── */
.loading-dots::after {
  content: '.';
  animation: loadingDots 1.4s infinite;
}
@keyframes loadingDots {
  0%   { content: '.' }
  33%  { content: '..' }
  66%  { content: '...' }
  100% { content: '.' }
}