/* F4-style motion: soft fades, hover lerps */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

@keyframes floatOrb {
    0%, 100% { transform: translate(0, 0) scale(1); }
    33% { transform: translate(20px, -14px) scale(1.04); }
    66% { transform: translate(-14px, 10px) scale(0.97); }
}

@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 0 0 transparent; }
    50% { box-shadow: 0 0 0 0 transparent; }
}

@keyframes badgePulse {
    0%, 100% { box-shadow: none; }
    50% { box-shadow: none; }
}

@keyframes statusPop {
    0% {
        opacity: 0;
        transform: scale(0.5);
    }
    60% {
        transform: scale(1.08);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes statusRing {
    0% {
        opacity: 0.55;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.7);
    }
}

/* Soft purple orbs — subtle, not marketing-heavy */

.page-bg__orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    opacity: 0.22;
    will-change: transform;
}

.page-bg__orb--1 {
    top: -12%;
    left: 18%;
    width: 380px;
    height: 380px;
    background: radial-gradient(circle, rgba(201, 122, 232, 0.35) 0%, transparent 70%);
    animation: floatOrb 22s ease-in-out infinite;
}

.page-bg__orb--2 {
    top: 45%;
    right: -8%;
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, rgba(201, 122, 232, 0.18) 0%, transparent 70%);
    animation: floatOrb 26s ease-in-out infinite reverse;
    animation-delay: -6s;
}

.page-bg__orb--3 {
    bottom: 0;
    left: 30%;
    width: 260px;
    height: 260px;
    background: radial-gradient(circle, rgba(201, 122, 232, 0.12) 0%, transparent 70%);
    animation: floatOrb 30s ease-in-out infinite;
    animation-delay: -12s;
}

.site-header {
    animation: fadeInDown 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.site-footer {
    animation: fadeIn 0.7s ease 0.25s both;
}

.animate-in {
    animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.animate-in--delay-1 { animation-delay: 0.08s; }
.animate-in--delay-2 { animation-delay: 0.16s; }
.animate-in--delay-3 { animation-delay: 0.24s; }
.animate-in--delay-4 { animation-delay: 0.32s; }
.animate-in--delay-5 { animation-delay: 0.4s; }

.site-logo__mark {
    animation: pulseGlow 3.5s ease-in-out infinite;
    transition: transform 0.25s ease;
}

.site-logo:hover .site-logo__mark {
    transform: scale(1.06);
}

.f4-shell {
    animation: fadeInUp 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.card:hover {
    background: rgba(255, 255, 255, 0.07);
}

.card--legal:hover,
.card--status:hover {
    background: var(--white10);
}

.hero-badge {
    animation: none;
}

.feature-item:hover {
    background: var(--purple-a12);
    border-color: var(--purple-a35);
}

.input:focus {
    animation: none;
}

.preset:active {
    transform: scale(0.97);
}

.btn:hover {
    filter: brightness(1.05);
}

.status-mark {
    position: relative;
    animation: statusPop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.status-mark::after {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 2px solid currentColor;
    opacity: 0;
    animation: statusRing 1.1s ease-out 0.45s both;
}

.status-mark--ok::after { border-color: var(--green); }
.status-mark--fail::after { border-color: var(--error); }

.card--status .title {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.28s both;
}

.card--status .status-text {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.36s both;
}

.card--status .order-info {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.44s both;
}

.card--status .btn {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.52s both;
}

.pay-badge {
    transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}

.pay-badge--link:hover {
    transform: translateY(-1px);
}

.alert {
    animation: fadeInUp 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.legal-block {
    animation: fadeInUp 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.legal-block:nth-child(2) { animation-delay: 0.08s; }
.legal-block:nth-child(3) { animation-delay: 0.12s; }
.legal-block:nth-child(4) { animation-delay: 0.16s; }
.legal-block:nth-child(5) { animation-delay: 0.2s; }
.legal-block:nth-child(6) { animation-delay: 0.24s; }

.loader {
    animation: fadeIn 0.35s ease both;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .page-bg__orb {
        animation: none;
    }
}