/* ============================================
   Szókút – finom animációk (szinonima-fx.js)
   Csak transform és opacity; Fibonacci időzítés (377 / 610 / 987 ms,
   késleltetés 89 / 144); a márkapaletta hat színe; prefers-reduced-motion
   alatt nincs animáció (a JS sem indít részecskét, a CSS is kikapcsol mindent).
   ============================================ */

/* A részecskék rétege a body-n él, ezért saját palettaváltozói vannak
   (ugyanazok az értékek, mint a .szf-wrap tokenjei). */
.szf-fx-layer {
    --fx-blue: var(--color-four, #0285BA);
    --fx-navy: var(--color-two, #013A63);
    --fx-sky: #9fd3ff;
    --fx-amber: #f4a261;
    --fx-crimson: #c0392b;
    position: fixed;
    inset: 0;
    z-index: 9998;
    overflow: hidden;
    pointer-events: none;
}

.szf-fx-p {
    position: fixed;
    pointer-events: none;
    will-change: transform, opacity;
}

/* ---------- 1. Szó-kút ---------- */
.szf-fx-drop {
    width: var(--sd-8, 8px);
    height: var(--sd-8, 8px);
    margin: -4px 0 0 -4px;
    border-radius: 50%;
    background: var(--c, var(--fx-blue));
    opacity: 0;
    animation: szfFxFountain 610ms cubic-bezier(0.21, 0.55, 0.34, 1) both;
}

@keyframes szfFxFountain {
    0%   { opacity: 0;    transform: translate(0, 0) scale(0.55); }
    21%  { opacity: 0.89; transform: translate(calc(var(--dx) * 0.55), calc(var(--rise) * -0.8)) scale(1); }
    55%  { opacity: 0.89; transform: translate(calc(var(--dx) * 0.89), calc(var(--rise) * -1)) scale(1); }
    100% { opacity: 0;    transform: translate(var(--dx), var(--fall)) scale(0.8); }
}

/* ---------- 2. Lecsöppenő utolsó szinonima ---------- */
.szf-fx-fall {
    position: absolute;
    left: 50%;
    top: 100%;
    width: var(--sd-8, 8px);
    height: var(--sd-8, 8px);
    margin-left: -4px;
    border-radius: 50%;
    background: var(--word-tone, var(--fx-blue));
    opacity: 0;
    animation: szfFxDrip 987ms cubic-bezier(0.21, 0.55, 0.34, 1) both;
}

/* A csepp kinő a szóból (scale), leesik (translateY), és a végén hullámgyűrűvé
   szélesedve eltűnik (scaleX + opacity). */
@keyframes szfFxDrip {
    0%   { opacity: 0;    transform: translateY(-5px) scale(0.3); }
    21%  { opacity: 0.89; transform: translateY(0) scale(1); }
    62%  { opacity: 0.89; transform: translateY(34px) scale(1, 1.3); }
    80%  { opacity: 0.55; transform: translateY(42px) scale(1.8, 0.34); }
    100% { opacity: 0;    transform: translateY(42px) scale(3.4, 0.21); }
}

/* ---------- 3. Pill-hullám ---------- */
.szf-fx-wave .szf-pill {
    animation: szfFxWave 377ms cubic-bezier(0.21, 0.55, 0.34, 1) both;
    animation-delay: calc(var(--i, 0) * 89ms);
}

@keyframes szfFxWave {
    0%   { transform: translateY(0); }
    38%  { transform: translateY(-5px); }
    100% { transform: translateY(0); }
}

/* ---------- 5. Mérföldkő-szikrák ---------- */
.szf-fx-spark {
    width: var(--sd-8, 8px);
    height: var(--sd-8, 8px);
    margin: -4px 0 0 -4px;
    border-radius: 2px;
    opacity: 0;
    animation: szfFxSpark 987ms cubic-bezier(0.21, 0.55, 0.34, 1) both;
}

.szf-fx-c-blue    { background: var(--fx-blue); }
.szf-fx-c-navy    { background: var(--fx-navy); }
.szf-fx-c-sky     { background: var(--fx-sky); }
.szf-fx-c-amber   { background: var(--fx-amber); }
.szf-fx-c-crimson { background: var(--fx-crimson); }

@keyframes szfFxSpark {
    0%   { opacity: 0;    transform: translate(0, 0) rotate(0) scale(0.34); }
    13%  { opacity: 0.89; transform: translate(calc(var(--dx) * 0.21), calc(var(--dy) * 0.21)) rotate(calc(var(--rot) * 0.21)) scale(1.3); }
    62%  { opacity: 0.89; transform: translate(calc(var(--dx) * 0.89), calc(var(--dy) * 0.89)) rotate(var(--rot)) scale(1); }
    100% { opacity: 0;    transform: translate(var(--dx), calc(var(--dy) + 21px)) rotate(var(--rot)) scale(0.55); }
}

/* ---------- Kevesebb mozgás: semmi animáció ---------- */
@media (prefers-reduced-motion: reduce) {
    .szf-fx-layer,
    .szf-fx-p {
        display: none !important;
    }

    .szf-fx-wave .szf-pill {
        animation: none !important;
    }
}