/* HasanTaVision Custom Styles */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom gradient animations */
@keyframes gradient {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

.animate-gradient {
    background-size: 200% 200%;
    animation: gradient 15s ease infinite;
}

/* Glassmorphism effect */
.glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

/* Hover effects */
.hover-lift {
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Floating animation for decorative elements */
@keyframes float-slow {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0);
    }
}

.float-slow {
    animation: float-slow 10s ease-in-out infinite;
}

/* Hero scroll indicator */
@keyframes bounce-soft {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-6px);
    }
}

.scroll-indicator-dot {
    animation: bounce-soft 1.6s ease-in-out infinite;
}

/* Extra floating / orbit-style animation */
@keyframes float-rotate {
    0% {
        transform: translateY(0) rotate(0deg);
    }
    50% {
        transform: translateY(-10px) rotate(4deg);
    }
    100% {
        transform: translateY(0) rotate(0deg);
    }
}

.float-rotate {
    animation: float-rotate 18s ease-in-out infinite;
}

/* Neural network background layer (hero) */
.neural-layer {
    position: absolute;
    inset: 0;
    opacity: 0.6;
    mix-blend-mode: screen;
}

.nn-node {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 9999px;
    background: radial-gradient(circle at 30% 30%, #f9fafb, #6366f1);
    box-shadow: 0 0 16px rgba(129, 140, 248, 0.75);
    animation: nn-pulse 4.2s ease-in-out infinite;
}

.nn-node-1 { top: 16%; left: 16%; animation-delay: 0s; }
.nn-node-2 { top: 30%; left: 40%; animation-delay: 0.6s; }
.nn-node-3 { top: 50%; left: 24%; animation-delay: 1.1s; }
.nn-node-4 { top: 24%; right: 10%; animation-delay: 0.9s; }
.nn-node-5 { top: 58%; right: 18%; animation-delay: 1.7s; }
.nn-node-6 { bottom: 14%; left: 52%; animation-delay: 1.3s; }

@keyframes nn-pulse {
    0% {
        transform: scale(0.9);
        opacity: 0.2;
    }
    40% {
        transform: scale(1.4);
        opacity: 0.95;
    }
    100% {
        transform: scale(0.9);
        opacity: 0.25;
    }
}

.nn-connection {
    position: absolute;
    height: 1px;
    background: linear-gradient(to right,
        rgba(129, 140, 248, 0.1),
        rgba(129, 140, 248, 0.9),
        rgba(129, 140, 248, 0.1)
    );
    transform-origin: left center;
    opacity: 0.6;
    box-shadow: 0 0 14px rgba(129, 140, 248, 0.55);
    animation: nn-flow 6s ease-in-out infinite;
}

.nn-connection-1 { top: 20%; left: 18%; width: 26%; transform: rotate(8deg); animation-delay: 0.2s; }
.nn-connection-2 { top: 34%; left: 20%; width: 30%; transform: rotate(18deg); animation-delay: 0.9s; }
.nn-connection-3 { top: 44%; left: 42%; width: 24%; transform: rotate(-12deg); animation-delay: 1.4s; }
.nn-connection-4 { top: 28%; right: 18%; width: 18%; transform: rotate(14deg); animation-delay: 0.5s; }
.nn-connection-5 { top: 52%; right: 12%; width: 22%; transform: rotate(-10deg); animation-delay: 1.9s; }

@keyframes nn-flow {
    0% {
        opacity: 0.1;
        box-shadow: 0 0 4px rgba(129, 140, 248, 0.3);
    }
    40% {
        opacity: 0.9;
        box-shadow: 0 0 18px rgba(129, 140, 248, 0.9);
    }
    100% {
        opacity: 0.15;
        box-shadow: 0 0 4px rgba(129, 140, 248, 0.35);
    }
}

.nn-equation {
    position: absolute;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    font-size: 0.65rem;
    letter-spacing: 0.08em;
    color: rgba(226, 232, 240, 0.85);
    opacity: 0;
    filter: blur(0.4px);
    text-shadow: 0 0 10px rgba(129, 140, 248, 0.8);
    animation: equation-fade 12s ease-in-out infinite;
}

.nn-equation-1 { top: 18%; right: 14%; animation-delay: 0s; }
.nn-equation-2 { top: 40%; right: 8%; animation-delay: 2.5s; }
.nn-equation-3 { bottom: 18%; left: 18%; animation-delay: 4.5s; }

@keyframes equation-fade {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    20% {
        opacity: 0.9;
        transform: translateY(0);
    }
    70% {
        opacity: 0.85;
        transform: translateY(-4px);
    }
    100% {
        opacity: 0;
        transform: translateY(-8px);
    }
}

/* Scroll reveal for sections */
.reveal-up {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 0.7s ease-out, transform 0.7s ease-out;
}

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

.reveal-delay-1 {
    transition-delay: 0.08s;
}

.reveal-delay-2 {
    transition-delay: 0.16s;
}

.reveal-delay-3 {
    transition-delay: 0.24s;
}

.reveal-delay-4 {
    transition-delay: 0.32s;
}

@media (prefers-reduced-motion: reduce) {
    .animate-gradient,
    .float-slow,
    .float-rotate,
    .scroll-indicator-dot,
    .nn-node,
    .nn-connection,
    .nn-equation {
        animation: none !important;
    }

    .reveal-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
}