/* Premium Visual Effects */

/* 3D Tilt Cards */
.portfolio-item, .blog-item {
    transition: transform 0.1s ease-out, box-shadow 0.3s ease;
    transform-style: preserve-3d;
    perspective: 1000px;
    border-radius: 12px;
    overflow: hidden;
}

.portfolio-item:hover, .blog-item:hover {
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
}

.portfolio-item img, .blog-item img {
    transition: transform 0.4s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Magnetic Button Utility */
.magnetic-wrap {
    display: inline-block;
    cursor: pointer;
}

/* Floating Decorative Elements (Background) */
.bg-glass-shape {
    position: absolute;
    pointer-events: none;
    z-index: -1;
    filter: blur(40px);
    opacity: 0.15;
    animation: float 20s infinite ease-in-out;
}

.shape-1 {
    width: 300px;
    height: 300px;
    background: radial-gradient(circle, #3490dc, transparent);
    top: 10%;
    right: -150px;
}

.shape-2 {
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, #6574cd, transparent);
    bottom: 20%;
    left: -200px;
    animation-delay: -5s;
}

.shape-3 {
    width: 250px;
    height: 250px;
    background: radial-gradient(circle, #f66d9b, transparent);
    top: 50%;
    left: 40%;
    animation-delay: -10s;
}

@keyframes float {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(50px, -50px) rotate(10deg); }
    66% { transform: translate(-30px, 40px) rotate(-10deg); }
}

/* Section Heading Enhancements (GSAP Reveal) */
.heading-h2.gsap-reveal-premium {
    opacity: 1;
    overflow: hidden;
}

.heading-h2.gsap-reveal-premium span {
    display: inline-block;
}

/* Custom Interactive Cursor (subtle) */
.custom-cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 50%;
    pointer-events: none;
    z-index: 99999;
    mix-blend-mode: difference;
    transform: translate(-50%, -50%);
    transition: width 0.3s, height 0.3s, background 0.3s;
    display: none; /* Will show via JS if mouse detected */
}

@media (pointer: fine) {
    .custom-cursor { display: block; }
}

.custom-cursor.active {
    width: 60px;
    height: 60px;
    background: rgba(255, 255, 255, 0.1);
}

/* Smooth Image Entrance */
.gsap-reveal-img-premium {
    opacity: 0;
    transform: translateY(50px);
}