/* ════════════════════════════════════════════════════════════
   GregPlay — живые эффекты (вдохновлено 21st.dev)
   aurora, border-beam, shimmer, meteors, reveal, cursor-glow
   ════════════════════════════════════════════════════════════ */

/* ── Aurora: плывущие фиолетовые пятна на фоне всех страниц ── */

.fx-aurora {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.fx-aurora::before,
.fx-aurora::after {
    content: "";
    position: absolute;
    width: 56vw;
    height: 56vw;
    border-radius: 50%;
    filter: blur(90px);
    opacity: 0.2;
    will-change: transform;
}

.fx-aurora::before {
    left: -16vw;
    top: -14vw;
    background: radial-gradient(circle, #7c3aed 0%, transparent 62%);
    animation: fxAuroraA 26s ease-in-out infinite alternate;
}

.fx-aurora::after {
    right: -18vw;
    bottom: -18vw;
    background: radial-gradient(circle, #8a2dd0 0%, transparent 60%);
    animation: fxAuroraB 32s ease-in-out infinite alternate;
}

@keyframes fxAuroraA {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to   { transform: translate3d(9vw, 7vh, 0) scale(1.18); }
}

@keyframes fxAuroraB {
    from { transform: translate3d(0, 0, 0) scale(1.12); }
    to   { transform: translate3d(-8vw, -6vh, 0) scale(0.95); }
}

/* ── Border beam: луч, бегущий по рамке (панель серверов и др.) ── */

.fx-beam {
    position: relative;
}

.fx-beam::before {
    content: "";
    position: absolute;
    inset: -1px;
    z-index: 2;
    border-radius: inherit;
    padding: 1px;
    background: conic-gradient(from var(--fx-angle, 0deg),
        transparent 0%,
        transparent 78%,
        rgba(196, 165, 255, 0.95) 88%,
        rgba(124, 58, 237, 0.4) 94%,
        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, linear-gradient(#000 0 0);
    mask-composite: exclude;
    pointer-events: none;
    animation: fxBeamSpin 7s linear infinite;
}

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

@keyframes fxBeamSpin {
    to { --fx-angle: 360deg; }
}

/* ── Shimmer: блик, проходящий по главным кнопкам ── */

.btn-hero-primary,
.nav-start,
.srv-btn {
    position: relative;
    overflow: hidden;
}

.btn-hero-primary::after,
.nav-start::after,
.srv-btn::after {
    content: "";
    position: absolute;
    top: 0;
    left: -80%;
    width: 50%;
    height: 100%;
    background: linear-gradient(105deg,
        transparent 0%,
        rgba(255, 255, 255, 0.22) 50%,
        transparent 100%);
    transform: skewX(-20deg);
    animation: fxShimmer 4.2s ease-in-out infinite;
    pointer-events: none;
}

.nav-start::after { animation-delay: 1.4s; }
.srv-btn::after { animation-delay: 2.6s; }

@keyframes fxShimmer {
    0%, 64% { left: -80%; }
    88%, 100% { left: 130%; }
}

/* ── Meteors: падающие звёзды в hero ── */

.fx-meteor {
    position: absolute;
    top: 0;
    width: 2px;
    height: 2px;
    border-radius: 50%;
    background: #d8c9ff;
    box-shadow: 0 0 8px 1px rgba(196, 165, 255, 0.7);
    opacity: 0;
    transform: rotate(215deg);
    animation: fxMeteor var(--fx-md, 5.5s) linear infinite;
    animation-delay: var(--fx-mw, 0s);
    pointer-events: none;
    z-index: 2;
}

.fx-meteor::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 0;
    width: 110px;
    height: 1px;
    transform: translateY(-50%);
    background: linear-gradient(90deg, rgba(216, 201, 255, 0.85), transparent);
}

@keyframes fxMeteor {
    0%, 72% { opacity: 0; transform: rotate(215deg) translateX(0); }
    74% { opacity: 1; }
    96%, 100% { opacity: 0; transform: rotate(215deg) translateX(-46vw); }
}

/* ── Reveal: плавное появление при скролле ── */

.fx-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    transition-delay: var(--fx-delay, 0s);
}

.fx-reveal.fx-in {
    opacity: 1;
    transform: translateY(0);
}

/* ── Cursor glow: свечение, следящее за курсором на карточках ── */

.fx-glow {
    position: relative;
}

.fx-glow::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: radial-gradient(360px circle at var(--fx-mx, 50%) var(--fx-my, 50%),
        rgba(139, 92, 246, 0.13), transparent 42%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.fx-glow:hover::before {
    opacity: 1;
}

.fx-glow > * {
    position: relative;
    z-index: 1;
}

/* ── Подчёркнутая навигация: плавная линия под пунктами ── */

.nav-link {
    position: relative;
}

.nav-link::before {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 2px;
    width: 0;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, #8b5cf6, #c4a5ff);
    transform: translateX(-50%);
    transition: width 0.25s ease;
}

.nav-link:hover::before {
    width: 60%;
}

/* ── Reduced motion: всё отключается ── */

@media (prefers-reduced-motion: reduce) {
    .fx-aurora::before,
    .fx-aurora::after,
    .fx-beam::before,
    .btn-hero-primary::after,
    .nav-start::after,
    .srv-btn::after,
    .fx-meteor {
        animation: none !important;
    }

    .fx-meteor {
        display: none;
    }

    .fx-reveal {
        opacity: 1;
        transform: none;
    }
}