/* ============================================================
   THEME-CARD ANIMATIONS — salki motywy (v5)
   (1) Theme-color glow w kolorze motywu
   (2) Auto-carousel zdjęć (cross-fade co 3s)
   (3) Konfetti burst — z górnego rogu na hover
   ============================================================ */

/* --- Carousel: wszystkie photo nakładają się w jednej komórce grida --- */
.theme-card .photos .photo {
  grid-area: 1 / 1;
  opacity: 0;
  transition: opacity 0.9s ease;
  display: block !important; /* override istniejącego :not(:first-child) display:none */
}
.theme-card .photos .photo.active {
  opacity: 1;
}
/* Domyślnie pierwsze zdjęcie aktywne nawet bez JS */
.theme-card .photos .photo:first-child {
  opacity: 1;
}

/* --- Theme-color glow halo --- */
.theme-card {
  position: relative;
  --theme-c1: var(--c-pomarancz, #E8663B);
  --theme-c2: var(--c-roz, #D85580);
}
.theme-card::before {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 24px;
  background: radial-gradient(
    ellipse at center,
    var(--theme-c1) 0%,
    var(--theme-c2) 60%,
    transparent 80%
  );
  z-index: -1;
  opacity: 0;
  filter: blur(20px);
  transition: opacity 0.5s ease;
  pointer-events: none;
}
.theme-card:hover::before {
  opacity: 0.85;
  animation: themeGlowPulse 2.4s ease-in-out infinite;
}
@keyframes themeGlowPulse {
  0%, 100% { filter: blur(20px); opacity: 0.70; }
  50%      { filter: blur(28px); opacity: 0.95; }
}

/* --- Kolory dla każdego z 6 motywów --- */
.theme-card[data-theme="Minecraft"]    { --theme-c1: #5BA38A; --theme-c2: #2A8B6F; }
.theme-card[data-theme="Kuromi"]       { --theme-c1: #D85580; --theme-c2: #5A1A3A; }
.theme-card[data-theme="Wednesday"]    { --theme-c1: #7B6DD8; --theme-c2: #2D1F5E; }
.theme-card[data-theme="Kapibara"]     { --theme-c1: #FFC857; --theme-c2: #E87B2A; }
.theme-card[data-theme="Lilo i Stich"] { --theme-c1: #3FA9F5; --theme-c2: #1A5FB4; }
.theme-card[data-theme="Unicorn"]      { --theme-c1: #FF8AB7; --theme-c2: #9A8DEC; }

/* Unicorn ma tęczowy konic-gradient dla wow effectu */
.theme-card[data-theme="Unicorn"]::before {
  background: conic-gradient(
    from 0deg,
    #FF8AB7, #FFD944, #9A8DEC, #3FA9F5, #5BA38A, #FF8AB7
  );
  animation: unicornSpin 6s linear infinite;
}
@keyframes unicornSpin {
  to { transform: rotate(360deg); }
}
.theme-card[data-theme="Unicorn"]:hover::before {
  opacity: 0.85;
}

/* --- Konfetti — spawn z górnego prawego rogu --- */
.theme-confetti {
  position: absolute;
  pointer-events: none;
  z-index: 10;
  border-radius: 2px;
  animation: confettiFall var(--cf-dur, 2s) cubic-bezier(0.25, 0.5, 0.5, 1) forwards;
  will-change: transform, opacity;
}
.theme-confetti.circle { border-radius: 50%; }

@keyframes confettiFall {
  0% {
    opacity: 1;
    transform: translate(0, 0) rotate(0deg) scale(1);
  }
  60% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform:
      translate(var(--cf-tx, 0), var(--cf-ty, 220px))
      rotate(var(--cf-tr, 720deg))
      scale(0.5);
  }
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
  .theme-card::before,
  .theme-card[data-theme="Unicorn"]::before { animation: none !important; }
  .theme-confetti { animation: none !important; opacity: 0 !important; }
  .theme-card .photos .photo { opacity: 1 !important; transition: none !important; }
}