* {
    font-family: 'Poppins', sans-serif;
}

html {
    scroll-behavior: smooth;
}

body {
    background: #f8fafc;
}

#three-background,
#three-canvas {
    width: 100%;
    height: 100%;
}

#three-canvas {
    display: block;
}

.bg-portfolio-gradient {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.20), transparent 32%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.20), transparent 35%),
        radial-gradient(circle at bottom, rgba(236, 72, 153, 0.16), transparent 35%),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 45%, #fdf2f8 100%);
}

.bg-primary-purple {
    background-color: #7c3aed;
}

.text-primary-purple {
    color: #7c3aed;
}

.border-primary-purple {
    border-color: #7c3aed;
}

.glass-card {
    background: rgba(255, 255, 255, 0.72);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border: 1px solid rgba(255, 255, 255, 0.65);
    box-shadow:
        0 20px 60px rgba(15, 23, 42, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.dark-glass {
    background: rgba(15, 23, 42, 0.82);
    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);
    border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.card-3d {
    transform-style: preserve-3d;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-3d:hover {
    box-shadow: 0 30px 80px rgba(79, 70, 229, 0.22);
}

.depth-1 {
    transform: translateZ(30px);
}

.depth-2 {
    transform: translateZ(60px);
}

.scroll-animate {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
}

.animate-blink {
    animation: blink 0.8s infinite;
}

@keyframes blink {
    0%, 50%, 100% {
        opacity: 1;
    }

    25%, 75% {
        opacity: 0;
    }
}

.animate-wave {
    animation: wave 0.8s ease-in-out infinite;
    display: inline-block;
    transform-origin: 70% 70%;
}

@keyframes wave {
    0% {
        transform: rotate(0deg);
    }

    20% {
        transform: rotate(18deg);
    }

    40% {
        transform: rotate(-12deg);
    }

    60% {
        transform: rotate(14deg);
    }

    80% {
        transform: rotate(-8deg);
    }

    100% {
        transform: rotate(0deg);
    }
}

.shine-effect {
    position: relative;
    overflow: hidden;
}

.shine-effect::before {
    content: "";
    position: absolute;
    top: 0;
    left: -120%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        120deg,
        transparent,
        rgba(255, 255, 255, 0.5),
        transparent
    );
    transform: skewX(-20deg);
    transition: 0.8s;
}

.shine-effect:hover::before {
    left: 130%;
}

@keyframes slideRight {
    from {
        transform: translateX(-50%);
    }

    to {
        transform: translateX(0);
    }
}

.animate-slide-right {
    animation: slideRight 25s linear infinite;
}

.group:hover .group-hover\:pause {
    animation-play-state: paused;
}

.bg-portfolio-gradient {
    background:
        radial-gradient(circle at top left, rgba(124, 58, 237, 0.22), transparent 34%),
        radial-gradient(circle at top right, rgba(14, 165, 233, 0.20), transparent 34%),
        radial-gradient(circle at bottom center, rgba(236, 72, 153, 0.16), transparent 38%),
        linear-gradient(135deg, #f8fafc 0%, #eef2ff 45%, #fdf2f8 100%);
}

.bg-portfolio-grid {
    background-image:
        linear-gradient(rgba(124, 58, 237, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(124, 58, 237, 0.08) 1px, transparent 1px);
    background-size: 44px 44px;
    mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, black 65%, transparent 100%);
}

.bg-portfolio-noise {
    background-image:
        repeating-radial-gradient(circle at 0 0, rgba(15, 23, 42, 0.35) 0, rgba(15, 23, 42, 0.35) 1px, transparent 1px, transparent 6px);
}

.bg-portfolio-vignette {
    background:
        radial-gradient(circle at center, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.65) 100%);
}

#three-background,
#three-canvas {
    width: 100%;
    height: 100%;
}

#three-canvas {
    display: block;
}


/* ================================
   Toy Car City Background
================================ */

.bg-toy-car-world {
    background:
        radial-gradient(circle at 18% 20%, rgba(96, 165, 250, 0.22), transparent 34%),
        radial-gradient(circle at 82% 18%, rgba(168, 85, 247, 0.18), transparent 32%),
        radial-gradient(circle at 50% 82%, rgba(244, 114, 182, 0.18), transparent 38%),
        linear-gradient(135deg, #f8fbff 0%, #eff6ff 36%, #f5f3ff 68%, #fdf2f8 100%);
}

.toy-city-grid {
    background-image:
        linear-gradient(rgba(59, 130, 246, 0.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(168, 85, 247, 0.07) 1px, transparent 1px);
    background-size: 46px 46px;
    transform: perspective(900px) rotateX(62deg) scale(1.9);
    transform-origin: center top;
    mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.68) 48%, transparent 86%);
    -webkit-mask-image: linear-gradient(to bottom, black 0%, rgba(0,0,0,0.68) 48%, transparent 86%);
}

.toy-light-layer {
    background:
        conic-gradient(
            from 180deg at 50% 52%,
            transparent 0deg,
            rgba(59,130,246,0.09) 48deg,
            transparent 98deg,
            rgba(168,85,247,0.08) 168deg,
            transparent 238deg,
            rgba(244,114,182,0.09) 318deg,
            transparent 360deg
        );
    filter: blur(28px);
}

.toy-vignette {
    background:
        radial-gradient(circle at center, transparent 0%, transparent 55%, rgba(255, 255, 255, 0.72) 100%);
}

@keyframes orbFloat {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(26px, -34px, 0) scale(1.08);
    }
}

@keyframes orbFloatDelay {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(-32px, 24px, 0) scale(1.12);
    }
}

@keyframes orbFloatSlow {
    0%, 100% {
        transform: translate3d(0, 0, 0) scale(1);
    }

    50% {
        transform: translate3d(18px, -28px, 0) scale(1.06);
    }
}

.animate-orb-float {
    animation: orbFloat 8s ease-in-out infinite;
}

.animate-orb-float-delay {
    animation: orbFloatDelay 10s ease-in-out infinite;
}

.animate-orb-float-slow {
    animation: orbFloatSlow 13s ease-in-out infinite;
}

/* ================================
   Three.js Preloader Fixed
================================ */

#portfolio-preloader {
    position: fixed;
    inset: 0;
    z-index: 9999;
    transform-origin: center;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
        opacity 0.85s ease,
        visibility 0.85s ease,
        transform 0.85s ease;
    will-change: opacity, transform, visibility;
}

#preloader-canvas {
    width: 100%;
    height: 100%;
    display: block;
    pointer-events: none;
}

#preloader-bar {
    width: 0%;
    transition: width 0.25s ease;
    will-change: width;
}

#preloader-percent {
    transition: opacity 0.25s ease;
}

.preloader-hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: scale(1.04);
    pointer-events: none !important;
}

@media (prefers-reduced-motion: reduce) {
    #portfolio-preloader,
    #preloader-bar {
        transition: none;
    }
}