/* ============================================
 * 装扮特效样式库 v2 - Campus Wall Effects
 * 重构版：更稳定、更兼容、更易维护
 * ============================================ */

/* ========== 特效基础容器 ========== */
.post-card.with-effects {
  position: relative;
  overflow: hidden;
  border-radius: 20px !important;
  transition: all 0.3s ease;
}

.post-card.with-effects:hover {
  transform: translateY(-3px);
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.18);
}

/* ========== 贴纸特效 ========== */
.post-card .effect-sticker {
  position: absolute !important;
  z-index: 10 !important;
  font-size: 1.6rem;
  pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25));
  line-height: 1;
}

.effect-sticker.top-right {
  top: 6px;
  right: 6px;
  animation: stickerBounce 3s ease-in-out infinite;
}

.effect-sticker.top-left {
  top: 6px;
  left: 6px;
  animation: stickerBounce 3s ease-in-out infinite 0.5s;
}

.effect-sticker.bottom-left {
  bottom: 6px;
  left: 6px;
  animation: stickerBounce 3s ease-in-out infinite 1s;
}

.effect-sticker.bottom-right {
  bottom: 6px;
  right: 6px;
  animation: stickerBounce 3s ease-in-out infinite 1.5s;
}

@keyframes stickerBounce {
  0%, 100% { transform: scale(1) rotate(-5deg); }
  50% { transform: scale(1.15) rotate(5deg); }
}

/* 贴纸类型特殊动画 */
.effect-sticker.sticker-school { animation-name: badgeSpin; }
@keyframes badgeSpin {
  0%, 100% { transform: scale(1) rotate(0deg); }
  50% { transform: scale(1.1) rotate(15deg); }
}

.effect-sticker.sticker-cat { animation-name: catPaw; }
@keyframes catPaw {
  0%, 100% { transform: scale(1) translateY(0); }
  50% { transform: scale(1.15) translateY(-4px); }
}

.effect-sticker.sticker-heart { animation-name: heartBeat; animation-duration: 1.5s; }
@keyframes heartBeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.25); }
  28% { transform: scale(1); }
  42% { transform: scale(1.15); }
  70% { transform: scale(1); }
}

/* ========== 背景特效公共基础 ========== */
.post-card.effect-bg {
  border: none !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2) !important;
}

/* Override app.css hover effect for bg cards */
.post-card.effect-bg::before {
  opacity: 1 !important;
}

.post-card.effect-bg::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 0;
  pointer-events: none;
  border-radius: inherit;
}

.post-card.effect-bg > *:not(.effect-sticker) {
  position: relative;
  z-index: 2;
}

/* 背景特效文字颜色 */
.post-card.effect-bg .post-content,
.post-card.effect-bg .post-username,
.post-card.effect-bg .post-time,
.post-card.effect-bg .post-meta {
  color: #fff !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.post-card.effect-bg .post-time { opacity: 0.8; }

.post-card.effect-bg .action-btn {
  color: rgba(255,255,255,0.9) !important;
  background: rgba(255,255,255,0.15) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 2px solid rgba(255,255,255,0.2);
}

.post-card.effect-bg .action-btn:hover {
  background: rgba(255,255,255,0.25) !important;
}

.post-card.effect-bg .action-btn.liked {
  color: #ff6b6b !important;
  background: rgba(255,107,107,0.2) !important;
  transform: none;
}

/* ========== 背景：极光幻境 ========== */
.post-card.effect-bg.aurora::before {
  background: 
    radial-gradient(ellipse at 20% 80%, rgba(120, 119, 198, 0.8) 0%, transparent 50%),
    radial-gradient(ellipse at 80% 20%, rgba(255, 119, 198, 0.7) 0%, transparent 50%),
    radial-gradient(ellipse at 40% 40%, rgba(100, 200, 255, 0.6) 0%, transparent 50%),
    linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
  background-size: 200% 200%;
  animation: auroraFlow 6s ease-in-out infinite;
}

@keyframes auroraFlow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.post-card.effect-bg.aurora::after {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: 
    radial-gradient(circle at 30% 30%, rgba(255,255,255,0.12) 0%, transparent 40%),
    radial-gradient(circle at 70% 70%, rgba(255,255,255,0.08) 0%, transparent 30%);
  animation: auroraGlow 4s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

@keyframes auroraGlow {
  0% { transform: translate(-5%, -5%) scale(1); opacity: 0.5; }
  100% { transform: translate(5%, 5%) scale(1.1); opacity: 0.8; }
}

/* ========== 背景：星空璀璨 ========== */
.post-card.effect-bg.starry::before {
  background: linear-gradient(135deg, #0f0c29 0%, #302b63 50%, #24243e 100%);
}

.post-card.effect-bg.starry::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    radial-gradient(2px 2px at 15% 20%, #fff, transparent),
    radial-gradient(2px 2px at 35% 45%, rgba(255,255,255,0.9), transparent),
    radial-gradient(2px 2px at 55% 15%, #fff, transparent),
    radial-gradient(2px 2px at 75% 55%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 85% 25%, #fff, transparent),
    radial-gradient(2px 2px at 25% 70%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 65% 80%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 50%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 90% 75%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 50% 35%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 30% 85%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 10%, rgba(255,255,255,0.7), transparent);
  animation: starTwinkle 2.5s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

@keyframes starTwinkle {
  0% { opacity: 0.5; }
  100% { opacity: 1; }
}

/* ========== 背景：樱花飞舞 ========== */
.post-card.effect-bg.sakura::before {
  background: linear-gradient(180deg, #ffe4ec 0%, #ffb6c1 40%, #ff85a2 100%);
}

.post-card.effect-bg.sakura::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    radial-gradient(ellipse 12px 8px at 12% 18%, rgba(255,182,193,0.8), transparent 70%),
    radial-gradient(ellipse 10px 7px at 28% 42%, rgba(255,192,203,0.7), transparent 70%),
    radial-gradient(ellipse 14px 10px at 45% 12%, rgba(255,182,193,0.8), transparent 70%),
    radial-gradient(ellipse 11px 8px at 62% 52%, rgba(255,192,203,0.7), transparent 70%),
    radial-gradient(ellipse 13px 9px at 78% 22%, rgba(255,182,193,0.8), transparent 70%),
    radial-gradient(ellipse 10px 7px at 90% 45%, rgba(255,192,203,0.7), transparent 70%),
    radial-gradient(ellipse 12px 8px at 18% 68%, rgba(255,182,193,0.8), transparent 70%),
    radial-gradient(ellipse 14px 10px at 42% 78%, rgba(255,192,203,0.7), transparent 70%),
    radial-gradient(ellipse 11px 8px at 68% 88%, rgba(255,182,193,0.8), transparent 70%),
    radial-gradient(ellipse 13px 9px at 85% 65%, rgba(255,192,203,0.7), transparent 70%);
  animation: sakuraFloat 4s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

@keyframes sakuraFloat {
  0% { transform: translateY(0); opacity: 0.7; }
  100% { transform: translateY(8px); opacity: 1; }
}

/* ========== 背景：霓虹赛博 ========== */
.post-card.effect-bg.neon::before {
  background: linear-gradient(135deg, #0a0a1a 0%, #1a0a2e 50%, #0a1a2e 100%);
}

.post-card.effect-bg.neon {
  border: 2px solid transparent !important;
  background: 
    linear-gradient(#0a0a1a, #0a0a1a) padding-box,
    linear-gradient(135deg, #00f5ff, #ff00ff, #00f5ff) border-box !important;
  background-size: 100% 100%, 300% 300% !important;
  animation: neonBorder 3s linear infinite;
}

@keyframes neonBorder {
  0% { background-position: 0 0, 0% 50%; }
  100% { background-position: 0 0, 200% 50%; }
}

.post-card.effect-bg.neon::after {
  content: '';
  position: absolute;
  top: -4px; left: -4px; right: -4px; bottom: -4px;
  background: linear-gradient(135deg, #00f5ff, #ff00ff, #00f5ff);
  background-size: 200% 200%;
  filter: blur(18px);
  opacity: 0.4;
  z-index: 0;
  animation: neonGlow 2s ease-in-out infinite alternate;
  border-radius: inherit;
}

@keyframes neonGlow {
  0% { opacity: 0.25; }
  100% { opacity: 0.5; }
}

/* ========== 背景：金色奢华 ========== */
.post-card.effect-bg.golden::before {
  background: linear-gradient(135deg, #f7971e 0%, #ffd700 25%, #ffed4e 50%, #ffd700 75%, #f7971e 100%);
  background-size: 200% 200%;
  animation: goldenShine 3s ease-in-out infinite;
}

@keyframes goldenShine {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.post-card.effect-bg.golden::after {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.4) 50%, transparent 100%);
  transform: rotate(25deg);
  animation: goldenSweep 2.5s ease-in-out infinite;
  z-index: 0;
  pointer-events: none;
}

@keyframes goldenSweep {
  0% { left: -100%; }
  100% { left: 150%; }
}

/* ========== 背景：梦幻气泡 ========== */
.post-card.effect-bg.bubble::before {
  background: linear-gradient(135deg, #a8edea 0%, #fed6e3 50%, #ffc3a0 100%);
  background-size: 200% 200%;
  animation: bubbleBg 6s ease-in-out infinite;
}

@keyframes bubbleBg {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.post-card.effect-bg.bubble::after {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: 
    radial-gradient(circle at 15% 25%, rgba(255,255,255,0.45) 0%, transparent 15%),
    radial-gradient(circle at 75% 35%, rgba(255,255,255,0.35) 0%, transparent 12%),
    radial-gradient(circle at 35% 65%, rgba(255,255,255,0.4) 0%, transparent 18%),
    radial-gradient(circle at 85% 75%, rgba(255,255,255,0.3) 0%, transparent 10%),
    radial-gradient(circle at 55% 15%, rgba(255,255,255,0.25) 0%, transparent 8%),
    radial-gradient(circle at 25% 85%, rgba(255,255,255,0.35) 0%, transparent 14%);
  animation: bubbleFloat 4s ease-in-out infinite alternate;
  z-index: 0;
  pointer-events: none;
}

@keyframes bubbleFloat {
  0% { transform: translateY(0) scale(1); }
  100% { transform: translateY(-10px) scale(1.03); }
}

/* ========== 背景：毛玻璃渐变 ========== */
.post-card.effect-bg.frosted::before {
  background: linear-gradient(135deg, 
    rgba(102, 126, 234, 0.9) 0%, 
    rgba(118, 75, 162, 0.85) 40%,
    rgba(237, 100, 166, 0.8) 100%);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.post-card.effect-bg.frosted {
  background: linear-gradient(135deg, 
    rgba(255,255,255,0.12) 0%, 
    rgba(255,255,255,0.04) 100%) !important;
  border: 1.5px solid rgba(255,255,255,0.4) !important;
  box-shadow: 
    0 12px 40px rgba(102, 126, 234, 0.35),
    inset 0 1px 0 rgba(255,255,255,0.25) !important;
}

.post-card.effect-bg.frosted::after {
  content: '';
  position: absolute;
  top: -50%; left: -100%;
  width: 50%; height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.2) 50%, transparent 70%);
  animation: shinePass 2.5s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes shinePass {
  0% { transform: translateX(-100%) rotate(45deg); }
  100% { transform: translateX(100%) rotate(45deg); }
}

/* ========== 文字特效：渐变 ========== */
.post-card.effect-text .post-content {
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradient 3s linear infinite;
}

@keyframes textGradient {
  0% { background-position: 0% center; }
  100% { background-position: 200% center; }
}

/* 文字特效：霓虹 */
/* Neon effect: dark purple card background */
.post-card.effect-text.neon {
  background: linear-gradient(135deg, #0a0015 0%, #1a0033 50%, #0d001a 100%) !important;
  border: 1px solid rgba(255, 0, 222, 0.2) !important;
  box-shadow: 0 0 20px rgba(255, 0, 222, 0.1), inset 0 0 30px rgba(255, 0, 222, 0.05) !important;
}

.post-card.effect-text.neon .post-meta .post-author {
  color: #fff !important;
}

.post-card.effect-text.neon .post-meta .post-time {
  color: rgba(255, 255, 255, 0.6) !important;
}

.post-card.effect-text.neon .post-actions {
  border-top-color: rgba(255, 0, 222, 0.15) !important;
}

.post-card.effect-text.neon .post-actions .action-btn {
  color: rgba(255, 255, 255, 0.7) !important;
}

.post-card.effect-text.neon .post-actions .action-btn:hover {
  color: #fff !important;
  background: rgba(255, 0, 222, 0.1) !important;
}

.post-card.effect-text.neon .post-actions .action-btn.liked {
  color: #ff6b6b !important;
}

.post-card.effect-text.neon .post-content {
  -webkit-text-fill-color: #fff;
  text-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 20px #ff00de,
    0 0 40px #ff00de;
  animation: neonFlicker 1.5s ease-in-out infinite alternate;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

@keyframes neonFlicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 20px #ff00de, 0 0 40px #ff00de;
  }
  20%, 24%, 55% { text-shadow: none; }
}

/* 文字特效：打字机 */
.post-card.effect-text.typewriter .post-content {
  overflow: hidden;
  border-right: 2px solid rgba(255,255,255,0.8);
  white-space: nowrap;
  animation: typing 2s steps(20,end), blinkCaret 0.75s step-end infinite;
  -webkit-text-fill-color: #fff;
  background: none;
  -webkit-background-clip: unset;
  background-clip: unset;
}

@keyframes typing { from { width: 0; } to { width: 100%; } }
@keyframes blinkCaret { from, to { border-color: transparent; } 50% { border-color: rgba(255,255,255,0.8); } }

/* ========== VIP头像光环 ========== */
.vip-avatar {
  position: relative;
  border: 3px solid transparent;
  background: linear-gradient(white, white) padding-box,
              linear-gradient(135deg, #ffd700, #ff6b6b, #ffd700) border-box;
  background-size: 200% 200%;
  animation: vipRing 3s linear infinite;
}

@keyframes vipRing {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

.vip-author {
  background: linear-gradient(90deg, #ffd700, #ff6b6b);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: 700;
}

/* ========== 用户等级标识 ========== */
.user-level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  margin-left: 6px;
  font-size: 0.7rem;
  font-weight: 700;
  border-radius: 10px;
  color: white;
  vertical-align: middle;
  line-height: 1.2;
}

.user-level-badge.level-1,
.user-level-badge.level-2,
.user-level-badge.level-3 {
  background: linear-gradient(135deg, #cd7f32, #b87333);
}

.user-level-badge.level-4,
.user-level-badge.level-5,
.user-level-badge.level-6 {
  background: linear-gradient(135deg, #c0c0c0, #a8a8a8);
}

.user-level-badge.level-7,
.user-level-badge.level-8,
.user-level-badge.level-9 {
  background: linear-gradient(135deg, #ffd700, #ffb347);
}

.user-level-badge.level-10,
.user-level-badge.level-11,
.user-level-badge.level-12 {
  background: linear-gradient(135deg, #b9f2ff, #00bfff);
  animation: diamondShine 2s ease-in-out infinite;
}

@keyframes diamondShine {
  0%, 100% { box-shadow: 0 2px 6px rgba(0, 191, 255, 0.4); }
  50% { box-shadow: 0 2px 12px rgba(0, 191, 255, 0.7); }
}

.user-level-badge.level-13,
.user-level-badge.level-14,
.user-level-badge.level-15 {
  background: linear-gradient(135deg, #ff6b6b, #feca57, #48dbfb, #ff9ff3);
  background-size: 300% 300%;
  animation: rainbowLevel 3s ease infinite;
}

@keyframes rainbowLevel {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ========== 文字特效：渐变文字（补充） ========== */
.post-card.effect-text.gradient .post-content {
  background: linear-gradient(90deg, #667eea, #764ba2, #f093fb, #667eea);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: textGradient 3s linear infinite;
}