/* ================================= */
/* BACKGROUND EFFECTS — ANIMATED     */
/* ================================= */

/* Holographic — rainbow prismatic shimmer */
.card-preview-canvas.rarity-style-holographic { position: relative; }
.card-preview-canvas.rarity-style-holographic::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(135deg,
    rgba(255,0,0,0.12) 0%, rgba(255,165,0,0.12) 15%, rgba(255,255,0,0.12) 30%,
    rgba(0,255,0,0.12) 45%, rgba(0,200,255,0.12) 60%, rgba(130,0,255,0.12) 75%,
    rgba(255,0,200,0.12) 90%, rgba(255,0,0,0.12) 100%);
  background-size: 400% 400%;
  animation: holo-shift 6s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: color-dodge;
}
@keyframes holo-shift {
  0%, 100% { background-position: 0% 0%; }
  25% { background-position: 100% 0%; }
  50% { background-position: 100% 100%; }
  75% { background-position: 0% 100%; }
}

/* Sparkle / Glitter — twinkling dots (dense, varied sizes) */
.card-preview-canvas.rarity-style-sparkle { position: relative; overflow: hidden; }
.card-preview-canvas.rarity-style-sparkle::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image:
    radial-gradient(1.5px 1.5px at 5% 12%, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 12% 35%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 18% 68%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 8% 88%, rgba(255,255,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 25% 8%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 30% 52%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 35% 78%, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 22% 92%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.5px 1.5px at 42% 18%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 48% 42%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 50% 65%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 55% 5%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 58% 85%, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 65% 30%, rgba(255,255,255,0.7), transparent),
    radial-gradient(2px 2px at 68% 55%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 72% 12%, rgba(255,255,255,0.85), transparent),
    radial-gradient(1.5px 1.5px at 75% 72%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 78% 92%, rgba(255,255,255,0.8), transparent),
    radial-gradient(2px 2px at 82% 38%, rgba(255,255,255,1), transparent),
    radial-gradient(1px 1px at 85% 58%, rgba(255,255,255,0.75), transparent),
    radial-gradient(1.5px 1.5px at 88% 8%, rgba(255,255,255,0.9), transparent),
    radial-gradient(1px 1px at 92% 45%, rgba(255,255,255,0.85), transparent),
    radial-gradient(2px 2px at 95% 75%, rgba(255,255,255,0.95), transparent),
    radial-gradient(1px 1px at 38% 28%, rgba(255,255,255,0.8), transparent),
    radial-gradient(1.5px 1.5px at 62% 48%, rgba(255,255,255,0.9), transparent);
  animation: sparkle-twinkle 2.5s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: -1;
}
@keyframes sparkle-twinkle {
  0% { opacity: 0.25; }
  20% { opacity: 0.85; }
  40% { opacity: 0.35; }
  60% { opacity: 1; }
  80% { opacity: 0.5; }
  100% { opacity: 0.9; }
}

/* Aurora — northern lights color bands */
.card-preview-canvas.rarity-style-aurora { position: relative; }
.card-preview-canvas.rarity-style-aurora::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(180deg,
    rgba(0,255,150,0.08) 0%, rgba(0,200,255,0.12) 25%,
    rgba(130,0,255,0.08) 50%, rgba(0,255,200,0.1) 75%, transparent 100%);
  background-size: 100% 300%;
  animation: aurora-wave 8s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}
@keyframes aurora-wave {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 0% 100%; }
}

/* Pulse — breathing glow overlay */
.card-preview-canvas.rarity-style-pulse { position: relative; overflow: hidden; }
.card-preview-canvas.rarity-style-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, var(--card-accent, #00d4ff), transparent 70%);
  animation: pulse-glow 3s ease-in-out infinite;
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: screen;
}
@keyframes pulse-glow {
  0%, 100% { opacity: 0; }
  50% { opacity: 0.25; }
}

/* Particles — floating dots (hero-style, pure CSS) */
.card-preview-canvas.rarity-style-particles { position: relative; overflow: hidden; }
.card-preview-canvas.rarity-style-particles::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -60%;
  height: 160%;
  border-radius: inherit;
  background-image:
    radial-gradient(2px 2px at 3% 8%, rgba(90,228,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 6% 22%, rgba(90,228,255,0.5), transparent),
    radial-gradient(2.5px 2.5px at 9% 38%, rgba(90,228,255,0.45), transparent),
    radial-gradient(2px 2px at 12% 55%, rgba(90,228,255,0.6), transparent),
    radial-gradient(3px 3px at 15% 72%, rgba(90,228,255,0.4), transparent),
    radial-gradient(1.5px 1.5px at 18% 88%, rgba(90,228,255,0.7), transparent),
    radial-gradient(2px 2px at 21% 15%, rgba(90,228,255,0.5), transparent),
    radial-gradient(2.5px 2.5px at 24% 45%, rgba(90,228,255,0.55), transparent),
    radial-gradient(2px 2px at 27% 65%, rgba(90,228,255,0.6), transparent),
    radial-gradient(1.5px 1.5px at 30% 82%, rgba(90,228,255,0.7), transparent),
    radial-gradient(3px 3px at 33% 95%, rgba(90,228,255,0.5), transparent),
    radial-gradient(2px 2px at 36% 30%, rgba(90,228,255,0.45), transparent),
    radial-gradient(2px 2px at 39% 52%, rgba(90,228,255,0.6), transparent),
    radial-gradient(2.5px 2.5px at 42% 75%, rgba(90,228,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 45% 12%, rgba(90,228,255,0.4), transparent),
    radial-gradient(2px 2px at 48% 42%, rgba(90,228,255,0.65), transparent),
    radial-gradient(3px 3px at 51% 68%, rgba(90,228,255,0.5), transparent),
    radial-gradient(2px 2px at 54% 90%, rgba(90,228,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 57% 25%, rgba(90,228,255,0.45), transparent),
    radial-gradient(2.5px 2.5px at 60% 58%, rgba(90,228,255,0.6), transparent),
    radial-gradient(2px 2px at 63% 78%, rgba(90,228,255,0.55), transparent),
    radial-gradient(2px 2px at 66% 5%, rgba(90,228,255,0.4), transparent),
    radial-gradient(3px 3px at 69% 35%, rgba(90,228,255,0.5), transparent),
    radial-gradient(1.5px 1.5px at 72% 62%, rgba(90,228,255,0.65), transparent),
    radial-gradient(2.5px 2.5px at 75% 85%, rgba(90,228,255,0.7), transparent),
    radial-gradient(2px 2px at 78% 18%, rgba(90,228,255,0.45), transparent),
    radial-gradient(2px 2px at 81% 48%, rgba(90,228,255,0.55), transparent),
    radial-gradient(1.5px 1.5px at 84% 72%, rgba(90,228,255,0.6), transparent),
    radial-gradient(3px 3px at 87% 92%, rgba(90,228,255,0.5), transparent),
    radial-gradient(2px 2px at 90% 28%, rgba(90,228,255,0.4), transparent),
    radial-gradient(2.5px 2.5px at 93% 55%, rgba(90,228,255,0.6), transparent),
    radial-gradient(2px 2px at 96% 78%, rgba(90,228,255,0.7), transparent),
    radial-gradient(1.5px 1.5px at 4% 48%, rgba(90,228,255,0.5), transparent),
    radial-gradient(2px 2px at 16% 32%, rgba(90,228,255,0.55), transparent),
    radial-gradient(2.5px 2.5px at 34% 18%, rgba(90,228,255,0.4), transparent),
    radial-gradient(2px 2px at 52% 3%, rgba(90,228,255,0.5), transparent),
    radial-gradient(3px 3px at 70% 48%, rgba(90,228,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 88% 62%, rgba(90,228,255,0.6), transparent);
  animation: particles-float 14s linear infinite;
  pointer-events: none;
  z-index: -1;
}
@keyframes particles-float {
  0% { transform: translateY(0); opacity: 0.7; }
  20% { opacity: 1; }
  80% { opacity: 0.8; }
  100% { transform: translateY(-65%); opacity: 0; }
}

/* ================================= */
/* BACKGROUND EFFECTS — STATIC       */
/* ================================= */

/* Noise / Grain — film grain overlay */
.card-preview-canvas.rarity-style-grain { position: relative; }
.card-preview-canvas.rarity-style-grain::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.12'/%3E%3C/svg%3E");
  background-size: 128px 128px;
  pointer-events: none;
  z-index: -1;
  opacity: 0.5;
  mix-blend-mode: overlay;
}

/* Vignette — darkened edges */
.card-preview-canvas.rarity-style-vignette { position: relative; }
.card-preview-canvas.rarity-style-vignette::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.25) 70%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
  z-index: -1;
}

/* Scanlines — retro CRT effect */
.card-preview-canvas.rarity-style-scanlines { position: relative; }
.card-preview-canvas.rarity-style-scanlines::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(0deg, transparent 0px, transparent 2px, rgba(0,0,0,0.15) 2px, rgba(0,0,0,0.15) 4px);
  pointer-events: none;
  z-index: -1;
}

/* Frosted — blurred glass overlay */
.card-preview-canvas.rarity-style-frosted { position: relative; }
.card-preview-canvas.rarity-style-frosted::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(255,255,255,0.06);
  backdrop-filter: blur(1.5px) saturate(1.2);
  -webkit-backdrop-filter: blur(1.5px) saturate(1.2);
  pointer-events: none;
  z-index: -1;
}

/* ================================= */
/* BACKGROUND EFFECTS — TEXTURES     */
/* ================================= */

/* Linen — subtle fabric texture */
.card-preview-canvas.rarity-style-linen { position: relative; }
.card-preview-canvas.rarity-style-linen::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 3px),
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, transparent 1px, transparent 3px);
  pointer-events: none;
  z-index: -1;
}

/* Brushed Metal — steel streaks */
.card-preview-canvas.rarity-style-brushed-metal { position: relative; }
.card-preview-canvas.rarity-style-brushed-metal::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    repeating-linear-gradient(90deg, rgba(255,255,255,0.04) 0px, transparent 1px, rgba(255,255,255,0.02) 2px, transparent 3px, rgba(255,255,255,0.05) 5px, transparent 6px),
    linear-gradient(180deg, rgba(255,255,255,0.08) 0%, transparent 30%, rgba(255,255,255,0.05) 50%, transparent 70%, rgba(255,255,255,0.06) 100%);
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: overlay;
}

/* Parchment — aged paper texture */
.card-preview-canvas.rarity-style-parchment { position: relative; }
.card-preview-canvas.rarity-style-parchment::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background:
    radial-gradient(ellipse at 20% 30%, rgba(139,105,60,0.08), transparent 50%),
    radial-gradient(ellipse at 80% 70%, rgba(139,105,60,0.06), transparent 50%),
    radial-gradient(ellipse at 50% 50%, rgba(160,130,80,0.04), transparent 70%),
    repeating-linear-gradient(0deg, rgba(139,105,60,0.02) 0px, transparent 1px, transparent 4px);
  pointer-events: none;
  z-index: -1;
  mix-blend-mode: multiply;
}