/**
 * Black & Maroon — motion & scroll reveals
 */

@keyframes cyber-gradient-flow {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes cyber-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

@keyframes cyber-glow-pulse {
    0%, 100% { opacity: 0.45; filter: blur(70px); }
    50% { opacity: 0.7; filter: blur(85px); }
}

@keyframes cyber-shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

@keyframes cyber-fade-up {
    from {
        opacity: 0;
        transform: translateY(32px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cyber-scale-in {
    from {
        opacity: 0;
        transform: scale(0.94);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes cyber-line-grow {
    from { transform: scaleX(0); }
    to { transform: scaleX(1); }
}

/* Ambient mesh drift on body */
body.site-cyber::after {
    content: "";
    position: fixed;
    inset: -20%;
    pointer-events: none;
    z-index: 0;
    background:
        radial-gradient(ellipse 40% 35% at 15% 20%, rgba(183, 49, 70, 0.06) 0%, transparent 55%),
        radial-gradient(ellipse 35% 40% at 85% 25%, rgba(255, 138, 154, 0.04) 0%, transparent 50%),
        radial-gradient(ellipse 45% 30% at 60% 90%, rgba(6, 8, 22, 0.5) 0%, transparent 55%);
    animation: cyber-mesh-drift 28s ease-in-out infinite alternate;
}

@keyframes cyber-mesh-drift {
    0% { transform: translate(0, 0) rotate(0deg); }
    100% { transform: translate(2%, -1.5%) rotate(2deg); }
}

/* Scroll reveal */
[data-cyber-reveal] {
    opacity: 0;
    transform: translateY(36px);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

[data-cyber-reveal].cyber-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-cyber-reveal="scale"] {
    transform: scale(0.96);
}

[data-cyber-reveal="scale"].cyber-visible {
    transform: scale(1);
}

/* Section titles — animated gradient + underline */
body.site-cyber .section-tittle {
    position: relative;
}

body.site-cyber .section-tittle h2 {
    position: relative;
    display: inline-block;
    background-size: 200% auto !important;
    animation: cyber-gradient-flow 6s ease infinite;
}

body.site-cyber .section-tittle h2::after {
    content: "";
    display: block;
    width: 72px;
    height: 3px;
    margin: 0.65rem auto 0;
    border-radius: 999px;
    background: var(--cyber-gradient);
    transform-origin: left center;
    animation: cyber-line-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.35s both;
}

body.site-cyber .section-tittle.cyber-visible h2::after {
    animation: cyber-line-grow 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Nav link hover */
body.site-cyber #navigation > li > a {
    position: relative;
    transition: color 0.3s ease;
}

body.site-cyber #navigation > li > a::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -4px;
    width: 100%;
    height: 2px;
    background: var(--cyber-gradient);
    border-radius: 2px;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

body.site-cyber #navigation > li > a:hover::after,
body.site-cyber #navigation > li:hover > a::after {
    transform: scaleX(1);
}

/* Cards — smooth hover + shimmer */
body.site-cyber .portfolio-card,
body.site-cyber .review-card,
body.site-cyber .categories-area .single-cat,
body.site-cyber .blog_item {
    transition:
        transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.45s ease,
        border-color 0.35s ease,
        background 0.35s ease !important;
    overflow: hidden;
}

body.site-cyber .portfolio-card::before,
body.site-cyber .review-card::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        105deg,
        transparent 40%,
        rgba(255, 255, 255, 0.06) 50%,
        transparent 60%
    );
    transform: translateX(-100%);
    pointer-events: none;
    z-index: 2;
    transition: transform 0.6s ease;
}

body.site-cyber .portfolio-card:hover::before,
body.site-cyber .review-card:hover::before {
    transform: translateX(100%);
}

body.site-cyber .portfolio-card,
body.site-cyber .review-card {
    position: relative;
}

/* Buttons — gradient shift on hover */
body.site-cyber .btn.header-btn,
body.site-cyber .btn.hero-btn,
body.site-cyber .btn.btn-primary,
body.site-cyber .btn.btn-black,
body.site-cyber .submit-btn2,
body.site-cyber .wantToWork-cta {
    background-size: 200% auto !important;
    transition:
        transform 0.3s ease,
        box-shadow 0.35s ease,
        background-position 0.5s ease !important;
}

body.site-cyber .btn.header-btn:hover,
body.site-cyber .btn.hero-btn:hover,
body.site-cyber .btn.btn-primary:hover,
body.site-cyber .btn.btn-black:hover,
body.site-cyber .submit-btn2:hover,
body.site-cyber .wantToWork-area .wantToWork-cta:hover {
    background-position: 100% center !important;
}

/* CTA band */
body.site-cyber .wantToWork-area {
    position: relative;
    overflow: hidden;
}

body.site-cyber .wantToWork-area::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.04),
        transparent
    );
    animation: cyber-shimmer 8s ease-in-out infinite;
    pointer-events: none;
}

/* Back to top float */
body.site-cyber #back-top a {
    animation: cyber-float 3s ease-in-out infinite;
}

/* Footer social icons */
body.site-cyber .footer-social a i {
    transition: transform 0.35s ease, color 0.35s ease;
}

body.site-cyber .footer-social a:hover i {
    transform: translateY(-4px) scale(1.1);
}

/* Hero badge pulse */
body.site-cyber .home-hero__badge {
    animation: cyber-fade-up 0.8s ease both;
}

/* Preloader ring */
body.site-cyber .preloader-circle {
    animation: cyber-spin 1s linear infinite;
}

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

/* Stagger children in visible sections */
[data-cyber-stagger] > * {
    opacity: 0;
    transform: translateY(20px);
    transition:
        opacity 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

[data-cyber-stagger].cyber-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-cyber-stagger].cyber-visible > *:nth-child(2) { transition-delay: 0.12s; }
[data-cyber-stagger].cyber-visible > *:nth-child(3) { transition-delay: 0.19s; }
[data-cyber-stagger].cyber-visible > *:nth-child(4) { transition-delay: 0.26s; }
[data-cyber-stagger].cyber-visible > *:nth-child(5) { transition-delay: 0.33s; }
[data-cyber-stagger].cyber-visible > *:nth-child(6) { transition-delay: 0.4s; }
[data-cyber-stagger].cyber-visible > *:nth-child(n+7) { transition-delay: 0.47s; }

[data-cyber-stagger].cyber-visible > * {
    opacity: 1;
    transform: translateY(0);
}

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

    [data-cyber-reveal] {
        opacity: 1;
        transform: none;
    }

    body.site-cyber::after {
        animation: none;
    }
}

/* Home slider portfolio cards — image zoom on hover (matches the grid variant used on /projects) */
body.site-cyber .js-portfolio-card-slider img {
    transition: transform 0.45s ease;
}

body.site-cyber .portfolio-card:hover .js-portfolio-card-slider img {
    transform: scale(1.05);
}

/* Section reveal defaults for wow.js — keep entrances quick and subtle */
.wow {
    animation-duration: 0.7s;
    animation-fill-mode: both;
}

/* Skills grid — icon + label cards */
body.site-cyber .skill-card {
    padding: 1.75rem 1rem;
    border-radius: 14px;
    border: 1px solid var(--cyber-glass-border);
    background: var(--cyber-glass);
    height: 100%;
    transition:
        transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
        box-shadow 0.35s ease,
        border-color 0.35s ease,
        background 0.35s ease;
}

body.site-cyber .skill-card:hover {
    transform: translateY(-4px);
    border-color: var(--cyber-violet);
    background: var(--cyber-glass-hover);
    box-shadow: var(--shadow);
}

body.site-cyber .skill-card__icon {
    font-size: 2rem;
    line-height: 1;
    margin-bottom: 0.75rem;
    color: var(--cyber-cyan);
    transition: transform 0.35s ease;
}

body.site-cyber .skill-card:hover .skill-card__icon {
    transform: scale(1.1);
}

body.site-cyber .skill-card__name {
    color: var(--cyber-heading);
}

body.site-cyber .skill-card__category {
    display: block;
    font-size: 0.8rem;
    margin-top: 0.15rem;
}