/**
 * Newsletter-Section – Sprechblasen-Pop-in (mobil).
 *
 * Progressive Enhancement: Ohne JS bleibt .pz-nl-bubble sichtbar.
 * newsletter-section.js setzt .pz-nl-animate auf die Section (Vor-Zustand:
 * unsichtbar) und .is-visible auf die Blase, sobald sie ins Bild scrollt.
 * Auf Desktop ist die Blase ohnehin ausgeblendet (md:hidden) – die Regeln
 * greifen dort nicht sichtbar.
 */

/* Placeholder wie im Figma: Feld-Textfarbe (semantic-text-main via inherit) bei 42 %.
   Als CSS-Regel statt Tailwind-Arbitrary-Wert – exakt 0.42, ohne Hex/px im Markup. */
.pz-nl-input::placeholder {
    color: inherit;
    opacity: 0.42;
}

.pz-nl-bubble {
    transform-origin: bottom center;
}

/* Vor-Zustand nur, wenn JS aktiv ist (Section trägt dann .pz-nl-animate). */
.pz-nl-animate .pz-nl-bubble {
    opacity: 0;
    transform: scale(0);
    will-change: transform, opacity;
}

/* Pop-in mit leichtem Bounce: schnell auf 110 %, weich zurück auf 100 %. */
.pz-nl-animate .pz-nl-bubble.is-visible {
    animation: pz-nl-bubble-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pz-nl-bubble-pop {
    0%   { opacity: 0; transform: scale(0); }
    60%  { opacity: 1; transform: scale(1.1); }
    100% { opacity: 1; transform: scale(1); }
}

/* Barrierefreiheit: keine Bewegung, wenn der Nutzer sie abbestellt hat. */
@media (prefers-reduced-motion: reduce) {
    .pz-nl-animate .pz-nl-bubble,
    .pz-nl-animate .pz-nl-bubble.is-visible {
        opacity: 1;
        transform: none;
        animation: none;
    }
}