/* ============================================================
   FenixClient — Smooth & Modern Animations
   ============================================================ */

/* ---- Smooth scroll for in-page anchors ---- */
html {
    scroll-behavior: smooth;
}

/* ---- Global smooth transitions ----
   Раньше здесь был селектор `*` с transition-duration: он навешивал
   анимацию на каждый элемент страницы и заставлял браузер пересчитывать
   переходы при любом изменении стилей — на слабых машинах это заметно
   лагало. Ниже оставлен точечный список элементов, которым переход реально
   нужен. */
button,
.btn,
a,
.card,
.plan,
input,
select,
textarea,
.badge {
    transition:
        transform 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1),
        opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Prevent transition on initial page load for elements that
   will get entrance animations */
body:not(.loaded) .card,
body:not(.loaded) .plan,
body:not(.loaded) .stat > div,
body:not(.loaded) h1,
body:not(.loaded) h2,
body:not(.loaded) .hero,
body:not(.loaded) nav,
body:not(.loaded) .flash {
    transition: none;
}

/* ---- Accessibility: Respect reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition-duration: 0.01ms !important; }
    [data-aos] { opacity: 1 !important; transform: none !important; }
}

/* ============================================================
   KEYFRAMES
   ============================================================ */

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

@keyframes fadeOut {
    to { opacity: 0; }
}

@keyframes slideInUp {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInDown {
    to { opacity: 1; transform: translateY(0); }
}

@keyframes slideInLeft {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes slideInRight {
    to { opacity: 1; transform: translateX(0); }
}

@keyframes scaleIn {
    to { opacity: 1; transform: scale(1); }
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Gentle floating animation for decorative elements */
@keyframes float {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    50%      { transform: translateY(-10px) rotate(1deg); }
}

/* Shimmer effect (for skeleton loaders) */
@keyframes shimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================================
   BACKGROUND ANIMATION
   ============================================================ */

body {
    background:
        radial-gradient(circle at 20% 50%, rgba(79, 195, 247, 0.03) 0%, transparent 50%),
        radial-gradient(circle at 80% 80%, rgba(126, 226, 168, 0.02) 0%, transparent 50%),
        var(--bg);
}

/* ============================================================
   INTERSECTION OBSERVER ENTRANCE ANIMATIONS (data-aos)
   ============================================================ */

[data-aos] {
    opacity: 0;
    transition: opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Default: fade up */
[data-aos="fade-up"] {
    transform: translateY(30px);
}
[data-aos="fade-up"].in-view {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="fade-down"] {
    transform: translateY(-30px);
}
[data-aos="fade-down"].in-view {
    opacity: 1;
    transform: translateY(0);
}

[data-aos="fade-left"] {
    transform: translateX(-30px);
}
[data-aos="fade-left"].in-view {
    opacity: 1;
    transform: translateX(0);
}

[data-aos="fade-right"] {
    transform: translateX(30px);
}
[data-aos="fade-right"].in-view {
    opacity: 1;
    transform: translateX(0);
}

[data-aos="fade"] {
    /* Only opacity */
}
[data-aos="fade"].in-view {
    opacity: 1;
}

[data-aos="scale"] {
    transform: scale(0.9);
}
[data-aos="scale"].in-view {
    opacity: 1;
    transform: scale(1);
}

/* Staggered children: animate each child with incremental delay */
[data-aos-stagger] {
    display: grid;
}
[data-aos-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}
[data-aos-stagger].in-view > * {
    opacity: 1;
    transform: translateY(0);
}

/* Individual stagger delays */
[data-aos-delay="0"]   { transition-delay:   0ms; }
[data-aos-delay="50"]  { transition-delay:  50ms; }
[data-aos-delay="100"] { transition-delay: 100ms; }
[data-aos-delay="150"] { transition-delay: 150ms; }
[data-aos-delay="200"] { transition-delay: 200ms; }
[data-aos-delay="250"] { transition-delay: 250ms; }
[data-aos-delay="300"] { transition-delay: 300ms; }

/* ============================================================
   HOVER ENHANCEMENTS
   ============================================================ */

/* Buttons — smooth scale + neon glow */
button:hover,
.btn:hover {
    transform: translateY(-2px) scale(1.03);
    filter: brightness(1.05);
}

button:active,
.btn:active {
    transform: scale(0.98);
}

/* Ghost buttons — glow on hover */
button.ghost:hover,
.btn.ghost:hover {
    box-shadow: 0 0 12px rgba(79, 195, 247, 0.3);
    border-color: var(--accent);
}

/* Danger buttons */
button.danger:hover,
.btn.danger:hover {
    box-shadow: 0 0 12px rgba(208, 56, 43, 0.4);
}

/* Cards — subtle lift + shadow on hover */
.card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 32px -8px rgba(0, 0, 0, 0.4);
    border-color: var(--accent);
}

/* Plan cards — featured glow + lift */
.plan:hover {
    transform: translateY(-5px);
    border-color: var(--accent);
}
.plan.featured:hover {
    box-shadow: 0 6px 24px -8px rgba(79,195,247,.45),
                0 0 0 2px var(--accent);
}

/* Featured badge — статичнее без бесконечной анимации box-shadow */
.plan .badge {
    box-shadow: 0 6px 20px -10px rgba(34, 211, 238, 0.4);
}

/* Nav links — underline reveal */
nav a.link {
    position: relative;
    display: inline-block;
}
nav a.link::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 1px;
    background: var(--accent);
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
nav a.link:hover::after {
    width: 100%;
}
nav a.link.active::after {
    width: 100%;
}

/* Logo — subtle glow on hover */
nav .logo:hover {
    text-shadow: 0 0 8px rgba(79, 195, 247, 0.5);
}

/* Feature items — hover lift */
.grid > div:hover h3 {
    transform: translateX(4px);
    color: var(--accent);
}

/* Steps — number circle hover effect */
.steps li:hover::before {
    background: var(--accent);
    box-shadow: 0 0 10px rgba(79, 195, 247, 0.4);
}

/* Key/stat elements — color transition */
.num.accent,
.num.ok {
    color: var(--ok);
}

/* ============================================================
   PAGE LOAD ANIMATION
   ============================================================ */

body {
    overflow-x: hidden;
}

/* Hero entrance — staggered */
.hero h1 {
    opacity: 0;
    animation: fadeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}
.hero p {
    opacity: 0;
    animation: fadeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
}
.hero .btn {
    opacity: 0;
    animation: fadeSlideUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
}
.hero .btn:nth-child(2) {
    animation-delay: 0.55s;
}

/* ============================================================
   FLASH / TOAST ANIMATIONS
   ============================================================ */

.flash {
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1),
                transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.flash.show {
    opacity: 1;
    transform: translateY(0);
}

/* Fade out before disappearing (used by toast) */
.flash.fade-out {
    opacity: 0 !important;
    transform: translateY(-10px) !important;
}

/* ============================================================
   TABLE ROW HOVER
   ============================================================ */

tr {
    transition: background-color 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
tr:hover td {
    background: #222736 !important;
}

/* ============================================================
   STAT COUNTER
   ============================================================ */

.counter {
    display: inline-block;
}
.counter > span {
    display: inline-block;
}

/* ============================================================
    Z-INDEX MANAGEMENT
   ============================================================ */

nav { z-index: 10; }
.flash { z-index: 100; }
.wrap { z-index: 1; }