/*
 * THM-02: the six button effects a theme can pick.
 *
 * Each effect is a `.effect-<enum value>` class applied to the themed card
 * container; the rule targets the buttons inside it, so a theme change never
 * requires touching the block templates. `.cta` is the card's own button
 * (BLK-30); `.btn` is what an embed or a form still renders.
 */

.effect-glow :is(.cta, .btn) {
    box-shadow: 0 0 12px var(--card-button-color, #2563eb);
    transition: box-shadow 0.3s ease;
}

.effect-glow :is(.cta, .btn):hover {
    box-shadow: 0 0 24px var(--card-button-color, #2563eb);
}

.effect-pulse :is(.cta, .btn) {
    animation: effect-pulse 1.8s ease-in-out infinite;
}

@keyframes effect-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.04); }
}

.effect-shake :is(.cta, .btn):hover {
    animation: effect-shake 0.4s ease-in-out;
}

@keyframes effect-shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-4px); }
    75% { transform: translateX(4px); }
}

/* Theme effects paint the button themselves, except where the owner chose
   a colour for that button: the `-custom` variable marks it and wins. */
.effect-glassmorphism :is(.cta, .btn):not([style*="--cta-bg-custom"]) {
    background-color: rgba(255, 255, 255, 0.18);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.35);
}

.effect-neon_hover :is(.cta, .btn) {
    transition: text-shadow 0.25s ease, box-shadow 0.25s ease;
}

.effect-neon_hover :is(.cta, .btn):hover {
    text-shadow: 0 0 6px var(--card-button-color, #22d3ee);
    box-shadow: 0 0 8px var(--card-button-color, #22d3ee), inset 0 0 8px var(--card-button-color, #22d3ee);
}

.effect-gradient_shift :is(.cta, .btn):not([style*="--cta-bg-custom"]) {
    background-image: linear-gradient(90deg, var(--card-button-color, #38bdf8), #9333ea, var(--card-button-color, #38bdf8));
    background-size: 200% 100%;
    animation: effect-gradient-shift 4s linear infinite;
}

@keyframes effect-gradient-shift {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}

/*
 * THM-03: a visitor who asked for less motion gets none — neither the button
 * effects nor the animated background of the theme.
 */
@media (prefers-reduced-motion: reduce) {
    .themed-card,
    .themed-card :is(.cta, .btn),
    [class*='effect-'] :is(.cta, .btn) {
        animation: none !important;
        transition: none !important;
    }
}