/* ========================================
   INVESTOR-WOW EFFECTS
   Mind-blowing interactions that raise millions
   ======================================== */

/* Custom Magnetic Cursor */
body {
    cursor: none;
    /* Hide default cursor */
}

.custom-cursor {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gold);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10000;
    transition: transform 0.15s ease;
    mix-blend-mode: difference;
}

.custom-cursor-follower {
    width: 8px;
    height: 8px;
    background: var(--gold);
    border-radius: 50%;
    position: fixed;
    pointer-events: none;
    z-index: 10001;
    transition: transform 0.3s ease;
}

/* 3D Tilt Effect for Cards */
.tilt-3d {
    transform-style: preserve-3d;
    transition: transform 0.1s ease;
}

/* Liquid Morphing Background */
@keyframes morph {

    0%,
    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
}

.liquid-blob {
    position: absolute;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.2) 0%, rgba(218, 165, 32, 0.1) 50%, transparent 70%);
    animation: morph 12s ease-in-out infinite, pulse-glow 4s ease-in-out infinite;
    z-index: 1;
}

/* Particle Explosion Effect - Enhanced with Reduced Glow */
.particle-explosion {
    position: fixed;
    width: 6px;
    height: 6px;
    background: var(--gold);
    border-radius: 50%;
    pointer-events: none;
    box-shadow: 0 0 5px rgba(184, 134, 11, 0.6), 0 0 10px rgba(184, 134, 11, 0.3);
    animation: explode 1.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes explode {
    to {
        transform: translate(var(--tx), var(--ty)) scale(0);
        opacity: 0;
    }
}

/* Text Scramble Effect */
.scramble-text {
    position: relative;
    display: inline-block;
}

.scramble-text::before {
    content: attr(data-text);
    position: absolute;
    left: 0;
    animation: scramble 0.8s ease forwards;
}

@keyframes scramble {
    0% {
        content: "█████████";
        opacity: 0.8;
    }

    20% {
        content: "▓▓▓▓▓▓▓▓▓";
        opacity: 0.6;
    }

    40% {
        content: "▒▒▒▒▒▒▒▒▒";
        opacity: 0.4;
    }

    60% {
        content: "░░░░░░░░░";
        opacity: 0.2;
    }

    100% {
        content: attr(data-text);
        opacity: 0;
    }
}

/* 3D Rotating Product Showcase */
@keyframes float-rotate {

    0%,
    100% {
        transform: perspective(1000px) rotateY(-5deg) rotateX(2deg) translateY(0px);
    }

    50% {
        transform: perspective(1000px) rotateY(5deg) rotateX(-2deg) translateY(-20px);
    }
}

.product-3d {
    animation: float-rotate 6s ease-in-out infinite;
    transform-style: preserve-3d;
    transition: transform 0.3s ease;
}

.product-3d:hover {
    animation-play-state: paused;
    transform: perspective(1000px) rotateY(var(--rotate-y, 0deg)) rotateX(var(--rotate-x, 0deg)) scale(1.05) !important;
}

/* Cinematic Reveal */
@keyframes cinematic-reveal {
    0% {
        clip-path: inset(0 100% 0 0);
    }

    100% {
        clip-path: inset(0 0 0 0);
    }
}

.cinematic-reveal {
    animation: cinematic-reveal 1.2s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

/* Glitch Text Effect */
@keyframes glitch-1 {

    0%,
    100% {
        transform: translate(0);
    }

    33% {
        transform: translate(-2px, 2px);
    }

    66% {
        transform: translate(2px, -2px);
    }
}

@keyframes glitch-2 {

    0%,
    100% {
        transform: translate(0);
    }

    33% {
        transform: translate(2px, -2px);
    }

    66% {
        transform: translate(-2px, 2px);
    }
}

.glitch-text {
    position: relative;
    display: inline-block;
}

.glitch-text::before,
.glitch-text::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 0;
    opacity: 0.8;
}

.glitch-text::before {
    color: #ff00ff;
    animation: glitch-1 0.3s infinite;
    clip-path: polygon(0 0, 100% 0, 100% 45%, 0 45%);
}

.glitch-text::after {
    color: #00ffff;
    animation: glitch-2 0.3s infinite;
    clip-path: polygon(0 55%, 100% 55%, 100% 100%, 0 100%);
}

.glitch-text:hover::before,
.glitch-text:hover::after {
    opacity: 0;
}

/* Scroll Timeline Effect */
.scroll-timeline {
    position: relative;
}

.scroll-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom,
            transparent 0%,
            var(--gold) 10%,
            var(--gold) 90%,
            transparent 100%);
    transform: scaleY(var(--progress, 0));
    transform-origin: top;
    transition: transform 0.3s ease;
}

/* Magnetic Button Effect */
.magnetic-button {
    position: relative;
    transition: transform 0.3s cubic-bezier(0.23, 1, 0.32, 1);
}

/* Ripple Water Effect */
.water-ripple {
    position: relative;
    overflow: hidden;
}

.water-ripple::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(184, 134, 11, 0.4) 0%, transparent 70%);
    transform: translate(-50%, -50%);
    opacity: 0;
}

.water-ripple:hover::after {
    animation: ripple-expand 1.5s ease-out;
}

@keyframes ripple-expand {
    0% {
        width: 0;
        height: 0;
        opacity: 0.8;
    }

    100% {
        width: 500px;
        height: 500px;
        opacity: 0;
    }
}

/* Perspective Depth Cards */
.depth-card {
    transform-style: preserve-3d;
    transition: transform 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.depth-card:hover {
    transform: translateZ(50px);
}

.depth-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(184, 134, 11, 0.1) 0%, transparent 100%);
    transform: translateZ(-1px);
    opacity: 0;
    transition: opacity 0.3s;
}

.depth-card:hover::before {
    opacity: 1;
}

/* Infinite Scroll Marquee */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

.marquee {
    display: flex;
    overflow: hidden;
    user-select: none;
}

.marquee-content {
    display: flex;
    animation: marquee 30s linear infinite;
    white-space: nowrap;
}

/* Aurora Background Effect */
@keyframes pulse-glow {

    0%,
    100% {
        opacity: 0.15;
        filter: blur(50px);
    }

    50% {
        opacity: 0.25;
        filter: blur(70px);
    }
}

@keyframes aurora {

    0%,
    100% {
        opacity: 0.5;
        transform: rotate(0deg) scale(1);
    }

    50% {
        opacity: 0.8;
        transform: rotate(180deg) scale(1.2);
    }
}

.aurora {
    position: absolute;
    width: 200%;
    height: 200%;
    background: conic-gradient(from 0deg,
            var(--gold) 0deg,
            transparent 60deg,
            transparent 300deg,
            var(--gold) 360deg);
    filter: blur(100px);
    opacity: 0.3;
    animation: aurora 20s ease-in-out infinite;
}

/* Text Reveal on Scroll */
.text-reveal {
    clip-path: polygon(0 0, 0 0, 0 100%, 0 100%);
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.text-reveal.visible {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

/* Split Text Animation */
.split-text {
    display: inline-block;
    overflow: hidden;
}

.split-text span {
    display: inline-block;
    transform: translateY(100%);
    opacity: 0;
    animation: slideUpText 0.8s cubic-bezier(0.77, 0, 0.175, 1) forwards;
}

@keyframes slideUpText {
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Hover Glow Spread */
.glow-spread {
    position: relative;
    overflow: hidden;
}

.glow-spread::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: radial-gradient(circle, var(--gold) 0%, transparent 70%);
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: all 0.6s ease;
}

.glow-spread:hover::before {
    width: 300%;
    height: 300%;
    opacity: 0.2;
}

/* Stagger Animation Delay */
.stagger-1 {
    animation-delay: 0.1s;
}

.stagger-2 {
    animation-delay: 0.2s;
}

.stagger-3 {
    animation-delay: 0.3s;
}

.stagger-4 {
    animation-delay: 0.4s;
}

.stagger-5 {
    animation-delay: 0.5s;
}

.stagger-6 {
    animation-delay: 0.6s;
}