/**
 * Sen Computer — full-card seasonal theming + per-theme falling-particle
 * animation, applied to any element carrying [data-card-theme="...").
 * Wired up by assets/js/card-theme-fx.js.
 */

[data-card-theme] { position: relative; overflow: hidden; }

.sc-card-fx {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
}

.sc-fx-particle {
  position: absolute;
  top: -12%;
  left: var(--fx-left, 50%);
  width: calc(6px * var(--fx-size, 1));
  height: calc(6px * var(--fx-size, 1));
  border-radius: 50%;
  opacity: 0;
}

/* Snow (hiver + noël) */
.sc-fx-particle--snow {
  background: #eaf3ff;
  box-shadow: 0 0 0 1px hsla(210, 55%, 60%, 0.35), 0 2px 5px hsla(210, 55%, 45%, 0.25);
  animation: sc-fx-fall-sway linear infinite;
}

/* Falling leaves (automne) */
.sc-fx-particle--leaves {
  width: calc(9px * var(--fx-size, 1));
  height: calc(9px * var(--fx-size, 1));
  background: linear-gradient(135deg, #e08a3e, #a85423);
  border-radius: 0 60% 0 60%;
  animation: sc-fx-fall-tumble linear infinite;
}

/* Sun glints (été) */
.sc-fx-particle--sun {
  background: radial-gradient(circle, #ffc93c, rgba(255, 226, 122, 0.5) 60%, transparent 75%);
  box-shadow: 0 0 6px rgba(255, 190, 60, 0.5);
  width: calc(12px * var(--fx-size, 1));
  height: calc(12px * var(--fx-size, 1));
  animation: sc-fx-float ease-in-out infinite;
}

/* Sparkle (black-friday + rentrée scolaire) */
.sc-fx-particle--sparkle {
  background: #fff;
  box-shadow: 0 0 6px 2px rgba(255, 215, 0, 0.65);
  animation: sc-fx-twinkle ease-in-out infinite;
}

@keyframes sc-fx-fall-sway {
  0% { top: -12%; transform: translateX(0); opacity: 0; }
  8% { opacity: 0.9; }
  50% { transform: translateX(16px); }
  92% { opacity: 0.9; }
  100% { top: 112%; transform: translateX(-6px); opacity: 0; }
}

@keyframes sc-fx-fall-tumble {
  0% { top: -12%; transform: rotate(0deg); opacity: 0; }
  8% { opacity: 0.95; }
  92% { opacity: 0.9; }
  100% { top: 112%; transform: rotate(340deg); opacity: 0; }
}

@keyframes sc-fx-float {
  0%, 100% { transform: translateY(0); opacity: 0.45; }
  50% { transform: translateY(-14px); opacity: 0.95; }
}

@keyframes sc-fx-twinkle {
  0%, 100% { opacity: 0.15; transform: scale(0.75); }
  50% { opacity: 1; transform: scale(1.25); }
}

@media (prefers-reduced-motion: reduce) {
  .sc-fx-particle { display: none; }
}

/* Full-card theme tints (subtle, so the product/badge stay legible) */

[data-card-theme="noel"] {
  background: linear-gradient(165deg, var(--white) 55%, hsla(0, 60%, 50%, 0.07)) !important;
  box-shadow: inset 0 0 0 1px hsla(0, 60%, 50%, 0.18);
}
[data-card-theme="hiver"] {
  background: linear-gradient(165deg, var(--white) 55%, hsla(207, 68%, 57%, 0.09)) !important;
  box-shadow: inset 0 0 0 1px hsla(207, 68%, 57%, 0.2);
}
[data-card-theme="automne"] {
  background: linear-gradient(165deg, var(--white) 55%, hsla(27, 65%, 48%, 0.09)) !important;
  box-shadow: inset 0 0 0 1px hsla(27, 65%, 48%, 0.2);
}
[data-card-theme="ete"] {
  background: linear-gradient(165deg, var(--white) 55%, hsla(45, 90%, 61%, 0.12)) !important;
  box-shadow: inset 0 0 0 1px hsla(45, 90%, 50%, 0.25);
}
[data-card-theme="black-friday"] {
  background: linear-gradient(165deg, var(--white) 65%, hsla(0, 0%, 7%, 0.07)) !important;
  box-shadow: inset 0 0 0 1px hsla(0, 0%, 7%, 0.25);
}
[data-card-theme="rentree-scolaire"] {
  background: linear-gradient(165deg, var(--white) 55%, hsla(231, 48%, 45%, 0.09)) !important;
  box-shadow: inset 0 0 0 1px hsla(231, 48%, 45%, 0.2);
}