/*
 * انیمیشن‌های دکمه و کارت (الهام‌گرفته از وایب‌فارسی) — بدون کتابخانه، فقط کلاس:
 *
 *   .fx-shine    درخشش دوره‌ای روی «تنها» دکمهٔ اصلی صفحه.
 *   .fx-pulse    حلقه‌های تپنده پشت دکمه؛ دکمه را داخل <span class="fx-pulse"> بگذارید.
 *   .fx-beam     نوری که دور حاشیهٔ کارت می‌چرخد.
 *   [data-fx-sparkles]   ستاره‌های چشمک‌زن دور یک کلمه/نشان (fx.js می‌سازدشان).
 *   [data-fx-swipe]      کشیدن برای تأیید (fx.js)؛ رویداد fx:confirm می‌فرستد.
 *
 * همه با prefers-reduced-motion خاموش می‌شوند.
 */

@property --fx-beam-angle {
    syntax: "<angle>";
    initial-value: 0deg;
    inherits: false;
}

/* ── shine ─────────────────────────────────────────────── */

.fx-shine {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.fx-shine::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 33%;
    background: linear-gradient(to left, transparent, var(--fx-shine-color, rgba(255, 255, 255, .38)), transparent);
    animation: fx-shine 2.6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes fx-shine {
    0% { transform: translateX(-120%) skewX(-15deg); }
    60%, 100% { transform: translateX(320%) skewX(-15deg); }
}

/* ── pulse ─────────────────────────────────────────────── */

.fx-pulse {
    position: relative;
    display: inline-flex;
    max-width: 100%;
    isolation: isolate;
}

.fx-pulse::before,
.fx-pulse::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    --fx-pulse-c: var(--fx-pulse-color, color-mix(in srgb, var(--bale-primary, #00A693) 40%, transparent));
    border-radius: var(--fx-pulse-radius, 12px);
    background: var(--fx-pulse-c);
    animation: fx-pulse-ring 2.4s cubic-bezier(.16, 1, .3, 1) infinite;
    pointer-events: none;
}

.fx-pulse::after { animation-delay: 1.2s; }

/* هاله با box-shadow پهن می‌شود نه با scale، تا دور دکمه‌های عریض هم به یک اندازه (نه ۴۰٪ عرض) بزرگ شود
   و روی دکمهٔ کناری نیفتد. */
@keyframes fx-pulse-ring {
    0% { opacity: .6; box-shadow: 0 0 0 0 var(--fx-pulse-c); }
    100% { opacity: 0; box-shadow: 0 0 0 var(--fx-pulse-spread, 14px) var(--fx-pulse-c); }
}

/* ── border beam ───────────────────────────────────────── */

.fx-beam {
    position: relative;
}

.fx-beam::after {
    content: "";
    position: absolute;
    inset: var(--fx-beam-inset, -2px);
    padding: var(--fx-beam-width, 2px);
    border-radius: var(--fx-beam-radius, inherit);
    background: conic-gradient(from var(--fx-beam-angle), transparent 0 72%, var(--fx-beam-color, #9b6ff0) 90%, transparent 100%);
    -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite: xor;
    mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
    animation: fx-beam var(--fx-beam-duration, 4s) linear infinite;
    pointer-events: none;
}

@keyframes fx-beam {
    100% { --fx-beam-angle: 360deg; }
}

/* ── sparkles ──────────────────────────────────────────── */

.fx-sparkles {
    position: relative;
    display: inline-block;
}

.fx-sparkle {
    position: absolute;
    width: var(--fx-sparkle-size, 12px);
    height: var(--fx-sparkle-size, 12px);
    color: var(--fx-sparkle-color, #f5b301);
    opacity: 0;
    pointer-events: none;
    animation: fx-sparkle var(--fx-dur, 2s) ease-in-out var(--fx-delay, 0s) infinite;
}

.fx-sparkles > .fx-sparkles-content { position: relative; }

@keyframes fx-sparkle {
    0%, 100% { opacity: 0; transform: scale(0) rotate(0deg); }
    50% { opacity: 1; transform: scale(1) rotate(90deg); }
}

/* ── swipe to confirm ──────────────────────────────────── */

.fx-swipe {
    --fx-swipe-handle: 48px;
    --fx-swipe-pad: 4px;
    --fx-swipe-color: var(--bale-primary, #00A693);
    --fx-swipe-success: #17a672;
    position: relative;
    width: 100%;
    height: calc(var(--fx-swipe-handle) + var(--fx-swipe-pad) * 2);
    border: 1px solid var(--bale-border, #e6e6e6);
    border-radius: 999px;
    background: var(--bale-surface-alt, #f0f2f5);
    overflow: hidden;
    user-select: none;
    -webkit-user-select: none;
}

.fx-swipe-fill {
    position: absolute;
    top: 0;
    bottom: 0;
    inset-inline-start: 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--fx-swipe-color) 16%, transparent);
    transition: width .3s;
}

.fx-swipe-label,
.fx-swipe-done {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding-inline-start: calc(var(--fx-swipe-handle) + 8px);
    font-size: 14px;
    font-weight: 600;
    pointer-events: none;
}

.fx-swipe-label {
    color: var(--bale-text-secondary, #667781);
    transition: opacity .15s;
}

.fx-swipe-label svg { width: 16px; height: 16px; animation: fx-pulse-soft 1.6s ease-in-out infinite; }

.fx-swipe-done {
    padding-inline-start: 0;
    color: var(--fx-swipe-success);
    opacity: 0;
    transition: opacity .3s;
}

.fx-swipe-done svg { width: 16px; height: 16px; }

.fx-swipe-handle {
    position: absolute;
    top: var(--fx-swipe-pad);
    inset-inline-start: var(--fx-swipe-pad);
    display: flex;
    align-items: center;
    justify-content: center;
    width: var(--fx-swipe-handle);
    height: var(--fx-swipe-handle);
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--fx-swipe-color);
    color: #fff;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .18);
    cursor: grab;
    touch-action: none;
    outline: none;
    transition: inset-inline-start .3s cubic-bezier(.16, 1, .3, 1), background-color .3s;
}

.fx-swipe-handle svg { width: 20px; height: 20px; pointer-events: none; }
.fx-swipe-handle:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fx-swipe-color) 45%, transparent); }

.fx-swipe.is-dragging .fx-swipe-fill,
.fx-swipe.is-dragging .fx-swipe-handle { transition: none; }
.fx-swipe.is-dragging .fx-swipe-handle { cursor: grabbing; }

.fx-swipe.is-done .fx-swipe-fill { background: color-mix(in srgb, var(--fx-swipe-success) 25%, transparent); }
.fx-swipe.is-done .fx-swipe-handle { background: var(--fx-swipe-success); cursor: default; }
.fx-swipe.is-done .fx-swipe-label { opacity: 0 !important; }
.fx-swipe.is-done .fx-swipe-done { opacity: 1; }

.fx-swipe.is-disabled { opacity: .5; }
.fx-swipe.is-disabled .fx-swipe-handle { cursor: not-allowed; }

@keyframes fx-pulse-soft {
    0%, 100% { opacity: .55; }
    50% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .fx-shine::after,
    .fx-pulse::before,
    .fx-pulse::after,
    .fx-beam::after,
    .fx-sparkle,
    .fx-swipe-label svg { animation: none; }

    .fx-shine::after,
    .fx-pulse::before,
    .fx-pulse::after,
    .fx-sparkle { display: none; }
}