/**
 * Love-o-Meter Frontend – nur Animations-/Zustands-Styles.
 * Farben, Abstände und Typografie kommen ausschließlich aus den
 * Tailwind-Token-Klassen im Markup (templates/section.php) – hier stehen
 * bewusst KEINE Design-Werte, nur Opacity/Transform/Keyframes.
 */

/* Radio-Optik der Antworten: Dot erscheint bei Hover angedeutet, bei Auswahl voll. */
.pz-lom-radio-dot {
    opacity: 0;
    transform: scale(0.4);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.pz-lom-answer:hover .pz-lom-radio-dot,
.pz-lom-answer:focus-visible .pz-lom-radio-dot {
    opacity: 0.4;
    transform: scale(0.8);
}

.pz-lom-answer.is-selected .pz-lom-radio-dot {
    opacity: 1;
    transform: scale(1);
}

/* Panel-Wechsel: altes Panel gleitet leicht raus, neues rein. */
.pz-lom-panel.pz-lom-leave {
    animation: pz-lom-out 0.18s ease both;
}

.pz-lom-panel.pz-lom-enter {
    animation: pz-lom-in 0.25s ease both;
}

@keyframes pz-lom-out {
    from { opacity: 1; transform: translateY(0); }
    to   { opacity: 0; transform: translateY(-8px); }
}

@keyframes pz-lom-in {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Progress-Balken füllt sich weich. */
.pz-lom-progress-fill {
    transition: width 0.3s ease;
}

/* Ergebnis: Produktkarten poppen leicht versetzt ein. */
.pz-lom-enter .pz-lom-card {
    animation: pz-lom-pop 0.3s ease both;
}

.pz-lom-enter .pz-lom-card:nth-child(2) {
    animation-delay: 0.08s;
}

.pz-lom-enter .pz-lom-card:nth-child(3) {
    animation-delay: 0.16s;
}

@keyframes pz-lom-pop {
    from { opacity: 0; transform: scale(0.94); }
    to   { opacity: 1; transform: scale(1); }
}

/* Reduzierte Bewegung: alles sofort, nichts animieren. */
@media (prefers-reduced-motion: reduce) {
    .pz-lom-panel.pz-lom-leave,
    .pz-lom-panel.pz-lom-enter,
    .pz-lom-enter .pz-lom-card {
        animation: none;
    }

    .pz-lom-radio-dot,
    .pz-lom-progress-fill {
        transition: none;
    }
}