/* ============================================================
   LUMEXI – KEYFRAMES
   ============================================================ */
@keyframes loadReveal {
    from { opacity: 0; transform: translateY(26px); filter: blur(10px); }
    to   { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes bubbleSpin { to { transform: rotate(360deg); } }
@keyframes bubbleBreath {
    0%, 100% { opacity: 0.7; transform: scale(1); }
    50%      { opacity: 1;   transform: scale(1.08); }
}
@keyframes bubbleWave {
    0%   { transform: scale(1);   opacity: 0.7; }
    100% { transform: scale(1.5); opacity: 0; }
}
@keyframes bubbleOrbit {
    0%   { opacity: 0; transform: rotate(var(--p-angle)) translateY(calc(var(--bubble-size) * 0.34)) scale(0.4); }
    30%  { opacity: 1; }
    100% { opacity: 0; transform: rotate(var(--p-angle)) translateY(calc(var(--bubble-size) * 0.13)) scale(0.7); }
}
@keyframes bubblePulseCore {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.08); }
}
@keyframes fabPulse {
    0%, 100% { box-shadow: 0 6px 20px -4px rgba(139, 157, 255, 0.7), 0 0 0 0 rgba(139, 157, 255, 0.35); }
    50%      { box-shadow: 0 6px 20px -4px rgba(139, 157, 255, 0.7), 0 0 0 9px rgba(139, 157, 255, 0); }
}
@keyframes statusBlink {
    0%, 100% { opacity: 1; }
    50%      { opacity: 0.35; }
}
@keyframes typingDot {
    0%, 60%, 100% { transform: translateY(0); opacity: 0.4; }
    30%           { transform: translateY(-4px); opacity: 1; }
}
@keyframes caretBlink { 50% { opacity: 0; } }
@keyframes answerPop {
    0%  { transform: scale(0.97); }
    60% { transform: scale(1.02); }
    100%{ transform: scale(1); }
}
@keyframes answerShake {
    0%, 100% { transform: translateX(0); }
    25%      { transform: translateX(-4px); }
    75%      { transform: translateX(4px); }
}
@keyframes glowDrift {
    from { transform: translate(0, 0) scale(1); }
    to   { transform: translate(50px, 34px) scale(1.1); }
}
@keyframes heroBubbleFloat {
    0%, 100% { transform: translateY(0) rotate(-1.2deg); }
    50%      { transform: translateY(-13px) rotate(1.2deg); }
}
@keyframes heroPhoneFloat {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-9px); }
}

/* ============================================================
   SCROLL REVEAL
   Progressive: ohne JS / reduced-motion immer sichtbar.
   ============================================================ */
html.js .reveal,
html.js .reveal-load {
    opacity: 0;
}

html.js .reveal-load {
    animation: loadReveal 800ms var(--ease-out) both;
    animation-delay: var(--load-delay, 0ms);
}

html.js .reveal {
    transform: translateY(32px);
    filter: blur(6px);
    transition:
        opacity 750ms var(--ease-out),
        transform 750ms var(--ease-out),
        filter 750ms var(--ease-out);
    transition-delay: var(--rv-delay, 0ms);
    will-change: opacity, transform, filter;
}
html.js .reveal.is-visible { opacity: 1; transform: none; filter: blur(0); }

html.js .reveal-scale { opacity: 0; transform: scale(0.94) translateY(18px); }
html.js .reveal-scale {
    transition:
        opacity 750ms var(--ease-out),
        transform 750ms var(--ease-spring);
    transition-delay: var(--rv-delay, 0ms);
}
html.js .reveal-scale.is-visible { opacity: 1; transform: none; }

/* ============================================================
   REDUCED MOTION
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    html.js .reveal,
    html.js .reveal-scale,
    html.js .reveal-load { opacity: 1 !important; transform: none !important; filter: none !important; animation: none !important; }
}