/* menu */
.title-glow {
    background: linear-gradient(90deg, #10b981, #3b82f6, #f59e0b);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 12px rgba(16, 185, 129, 0.3),
        0 0 18px rgba(59, 130, 246, 0.25);
    animation: gradient-move 4s ease infinite, fadeSlide 0.8s ease forwards;
    opacity: 0;
    transform: translateY(10px);
}
@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}
@keyframes fadeSlide {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Menu cards ===== */
.glow-card {
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
}
.glow-card:hover {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4),
        0 0 30px rgba(59, 130, 246, 0.3), 0 0 40px rgba(245, 158, 11, 0.25);
}
.glow-card::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 0.75rem;
    background: linear-gradient(
        120deg,
        rgba(255, 255, 255, 0.25),
        transparent 60%
    );
    opacity: 0;
    transition: opacity 0.25s, transform 0.4s;
    pointer-events: none;
}
.glow-card:hover::after {
    opacity: 1;
    transform: translateX(100%);
}

/* === Active glow for mobile click === */
.glow-card.active-glow {
    transform: translateY(-4px) scale(1.03);
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.4),
        0 0 30px rgba(59, 130, 246, 0.3), 0 0 40px rgba(245, 158, 11, 0.25);
}
.glow-card.active-glow::after {
    opacity: 1;
    transform: translateX(100%);
}

/* Remove persistent focus */
#menu a:focus,
#menu a:focus-visible,
#menu .glow-card:focus,
#menu .group:focus .glow-card,
#menu .group:focus-visible .glow-card {
    outline: none;
    box-shadow: none !important;
    transform: none !important;
}

/* ===== Category buttons ===== */
.cat-btn {
    padding: 0.5rem 1rem;
    border-radius: 9999px;
    border: 1px solid #e5e7eb;
    background: #fff;
    color: #374151;
    font-size: 0.875rem;
    white-space: nowrap;
    transition: 0.2s;
}
.cat-btn:hover {
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08);
}
.cat-btn:focus {
    outline: none;
}

.cat-btn.active {
    background: linear-gradient(90deg, #0d9488, #6b7280);
    color: #fff;
    border: none;
    box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3);
}

/* Hide scrollbar in nav */
.no-scrollbar {
    scrollbar-width: none;
}
.no-scrollbar::-webkit-scrollbar {
    display: none;
}

@keyframes spin360 {
    to {
        transform: rotate(360deg);
    }
}
.spin-slow {
    animation: spin360 10s linear infinite;
    will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
    .spin-slow {
        animation: none;
    }
}

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

.spin-slow {
    animation: spin360 10s linear infinite;
    will-change: transform;
}

.group:hover .spin-slow {
    animation-duration: 1.2s;
}

@media (prefers-reduced-motion: reduce) {
    .spin-slow,
    .group:hover .spin-slow {
        animation: none;
    }
}

.dir-swap {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
}
[dir="rtl"] .dir-swap {
    flex-direction: row-reverse;
}

.social-rail {
    display: flex;
    gap: 1rem;
}

.social-rail {
    justify-content: flex-start;
}
[dir="rtl"] .social-rail {
    justify-content: flex-end;
}

/* footer */
.ink-underline {
    position: relative;
    display: inline-block;
}
.ink-underline::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: -3px;
    width: 0;
    height: 2px;
    border-radius: 9999px;
    background: linear-gradient(90deg, #facc15, #fde047, #facc15);
    transform: translateX(-50%);
    transition: width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
        height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}
.ink-underline:hover::after,
.ink-underline:focus-visible::after {
    width: 100%;
    height: 3px;
}

[data-reveal] {
    opacity: 0;
    will-change: transform, opacity;
}
@keyframes revealLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}
@keyframes revealRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.is-inview[data-reveal="left"] {
    animation: revealLeft 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.is-inview[data-reveal="right"] {
    animation: revealRight 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}

.is-inview {
    animation-delay: var(--rv-delay, 0s);
}

@media (prefers-reduced-motion: reduce) {
    .ink-underline::after {
        transition: none;
    }
    [data-reveal] {
        opacity: 1 !important;
        transform: none !important;
        animation: none !important;
    }
}

.footer-link {
    transition: all 0.3s ease;
    text-decoration: none;
}
.footer-link:hover {
    color: #facc15;
    text-decoration: underline;
}