/* NEW PREMIUM ANIMATIONS - Notification Stack */
.notif-stack-anim {
  position: relative;
  height: 180px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
}
.notif-card {
  position: absolute;
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 0, 0, 0.05);
  border-radius: 12px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  width: 90%;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  animation: stack-slide 6s infinite cubic-bezier(0.4, 0, 0.2, 1);
  opacity: 0;
  transform: translateY(20px) scale(0.9);
}
body.dark .notif-card {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.1);
}
.notif-card--1 { animation-delay: 0s; z-index: 3; }
.notif-card--2 { animation-delay: 2s; z-index: 2; }
.notif-card--3 { animation-delay: 4s; z-index: 1; }

@keyframes stack-slide {
  0%, 5% { opacity: 0; transform: translateY(20px) scale(0.9); z-index: 3;}
  10%, 30% { opacity: 1; transform: translateY(0) scale(1); z-index: 3;}
  35%, 60% { opacity: 0.8; transform: translateY(-20px) scale(0.95); z-index: 2;}
  65%, 90% { opacity: 0.4; transform: translateY(-40px) scale(0.9); z-index: 1;}
  95%, 100% { opacity: 0; transform: translateY(-50px) scale(0.85); z-index: 0;}
}

.notif-icon {
  font-size: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,0.03);
}
body.dark .notif-icon { background: rgba(255,255,255,0.05); }

.notif-text {
  font-size: 13px;
  color: #333;
}
body.dark .notif-text { color: #ccc; }
.notif-text strong {
  color: #111;
  font-weight: 600;
}
body.dark .notif-text strong { color: #fff; }

/* NEW PREMIUM ANIMATIONS - Fanning Cards */
.fanning-cards-anim {
  position: relative;
  height: 140px;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 10px;
}
.fan-card {
  position: absolute;
  width: 90px;
  height: 120px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  padding: 12px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.05);
  transform-origin: bottom center;
  animation: fan-out 5s infinite cubic-bezier(0.4, 0, 0.2, 1);
}
.fan-card--ig { background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888); color: white; animation-name: fan-left; z-index: 1;}
.fan-card--fb { background: #1877F2; color: white; z-index: 3; animation-name: fan-center; }
.fan-card--tk { background: #000; color: white; animation-name: fan-right; z-index: 2;}

.fan-card__logo {
  font-size: 14px;
  font-weight: bold;
  margin-bottom: auto;
}
.fan-card__bars {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.fan-card__bar {
  height: 4px;
  background: rgba(255,255,255,0.4);
  border-radius: 2px;
  width: 100%;
}
.fan-card__bar.w-half {
  width: 60%;
}

@keyframes fan-center {
  0%, 15%, 85%, 100% { transform: translateY(10px) scale(0.9); opacity: 0.5; }
  25%, 75% { transform: translateY(0) scale(1.05); opacity: 1; z-index: 4; box-shadow: 0 15px 35px rgba(0,0,0,0.2);}
}
@keyframes fan-left {
  0%, 15%, 85%, 100% { transform: translateY(10px) scale(0.9) rotate(0deg); opacity: 0.5; }
  25%, 75% { transform: translateY(10px) translateX(-50px) rotate(-15deg) scale(0.95); opacity: 1; box-shadow: 0 10px 20px rgba(0,0,0,0.15);}
}
@keyframes fan-right {
  0%, 15%, 85%, 100% { transform: translateY(10px) scale(0.9) rotate(0deg); opacity: 0.5; }
  25%, 75% { transform: translateY(10px) translateX(50px) rotate(15deg) scale(0.95); opacity: 1; box-shadow: 0 10px 20px rgba(0,0,0,0.15);}
}