/**
 * WebGL Effects Stylesheet
 * Advanced 3D visual effects and animations
 */

/* ===== 3D Transforms ===== */
.mehta-3d-flip {
    perspective: 1000px;
    transform-style: preserve-3d;
    transition: transform 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.mehta-3d-flip:hover {
    transform: rotateY(180deg);
}

.mehta-3d-flip-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transform-style: preserve-3d;
}

.mehta-3d-flip-front,
.mehta-3d-flip-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

.mehta-3d-flip-back {
    transform: rotateY(180deg);
}

/* ===== Cube Rotation ===== */
.mehta-3d-cube {
    perspective: 1000px;
    width: 200px;
    height: 200px;
    position: relative;
    transform-style: preserve-3d;
    animation: mehta-cube-rotate 10s infinite linear;
}

.mehta-3d-cube-face {
    position: absolute;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(45, 90, 61, 0.1);
    border: 2px solid rgba(212, 165, 116, 0.3);
    font-weight: bold;
    font-size: 20px;
}

.mehta-3d-cube-face-1 { transform: rotateY(0deg) translateZ(100px); }
.mehta-3d-cube-face-2 { transform: rotateY(90deg) translateZ(100px); }
.mehta-3d-cube-face-3 { transform: rotateY(180deg) translateZ(100px); }
.mehta-3d-cube-face-4 { transform: rotateY(270deg) translateZ(100px); }
.mehta-3d-cube-face-5 { transform: rotateX(90deg) translateZ(100px); }
.mehta-3d-cube-face-6 { transform: rotateX(-90deg) translateZ(100px); }

@keyframes mehta-cube-rotate {
    0% {
        transform: rotateX(0deg) rotateY(0deg);
    }
    100% {
        transform: rotateX(360deg) rotateY(360deg);
    }
}

/* ===== Morphing Shapes ===== */
.mehta-morph {
    position: relative;
    width: 100px;
    height: 100px;
    background: linear-gradient(135deg, #D4A574, #2D5A3D);
    border-radius: 30%;
    animation: mehta-morph 8s ease-in-out infinite;
}

@keyframes mehta-morph {
    0% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
    25% {
        border-radius: 70% 30% 30% 70% / 70% 70% 30% 30%;
    }
    50% {
        border-radius: 70% 30% 70% 30% / 30% 70% 30% 70%;
    }
    75% {
        border-radius: 30% 70% 30% 70% / 70% 30% 70% 30%;
    }
    100% {
        border-radius: 30% 70% 70% 30% / 30% 30% 70% 70%;
    }
}

/* ===== Particle Effect ===== */
.mehta-particles {
    position: relative;
    overflow: hidden;
}

.mehta-particle {
    position: absolute;
    pointer-events: none;
    opacity: 0.6;
}

.mehta-particle-1 { animation: mehta-particle-float 15s infinite ease-in-out; }
.mehta-particle-2 { animation: mehta-particle-float 20s infinite ease-in-out; }
.mehta-particle-3 { animation: mehta-particle-float 25s infinite ease-in-out; }
.mehta-particle-4 { animation: mehta-particle-float 18s infinite ease-in-out; }
.mehta-particle-5 { animation: mehta-particle-float 22s infinite ease-in-out; }

@keyframes mehta-particle-float {
    0% {
        transform: translateY(0) translateX(0) scale(1);
        opacity: 0;
    }
    10% {
        opacity: 0.6;
    }
    90% {
        opacity: 0.6;
    }
    100% {
        transform: translateY(-100vh) translateX(100px) scale(0);
        opacity: 0;
    }
}

/* ===== Liquid Swipe ===== */
.mehta-liquid-swipe {
    position: relative;
    overflow: hidden;
}

.mehta-liquid-swipe::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 165, 116, 0.3), transparent);
    animation: mehta-liquid-swipe 3s infinite;
}

@keyframes mehta-liquid-swipe {
    0% {
        left: -100%;
    }
    100% {
        left: 100%;
    }
}

/* ===== Neon Glow ===== */
.mehta-neon {
    color: #D4A574;
    text-shadow: 0 0 10px #D4A574, 0 0 20px #D4A574, 0 0 30px #D4A574;
    animation: mehta-neon-flicker 0.15s infinite;
}

@keyframes mehta-neon-flicker {
    0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
        text-shadow: 0 0 10px #D4A574, 0 0 20px #D4A574, 0 0 30px #D4A574;
    }
    20%, 24%, 55% {
        text-shadow: 0 0 5px #D4A574;
    }
}

/* ===== Holographic Effect ===== */
.mehta-holographic {
    background: linear-gradient(45deg, #2D5A3D, #D4A574, #E8DCC8, #D4A574, #2D5A3D);
    background-size: 400% 400%;
    animation: mehta-holographic 8s ease infinite;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

@keyframes mehta-holographic {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===== Blur In ===== */
.mehta-blur-in {
    animation: mehta-blur-in 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

@keyframes mehta-blur-in {
    0% {
        opacity: 0;
        filter: blur(10px);
    }
    100% {
        opacity: 1;
        filter: blur(0);
    }
}

/* ===== Slide In ===== */
.mehta-slide-in-left {
    animation: mehta-slide-in-left 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

@keyframes mehta-slide-in-left {
    0% {
        opacity: 0;
        transform: translateX(-100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.mehta-slide-in-right {
    animation: mehta-slide-in-right 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

@keyframes mehta-slide-in-right {
    0% {
        opacity: 0;
        transform: translateX(100px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

/* ===== Bounce ===== */
.mehta-bounce {
    animation: mehta-bounce 1s cubic-bezier(0.68, -0.55, 0.265, 1.55) infinite;
}

@keyframes mehta-bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* ===== Pulse ===== */
.mehta-pulse {
    animation: mehta-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes mehta-pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

/* ===== Rotate ===== */
.mehta-rotate {
    animation: mehta-rotate 4s linear infinite;
}

@keyframes mehta-rotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

/* ===== Scale Pulse ===== */
.mehta-scale-pulse {
    animation: mehta-scale-pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes mehta-scale-pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.1);
    }
}

/* ===== Fade In Up ===== */
.mehta-fade-in-up {
    animation: mehta-fade-in-up 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

@keyframes mehta-fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(30px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ===== Rainbow Border ===== */
.mehta-rainbow-border {
    position: relative;
    background: white;
    border-radius: 10px;
}

.mehta-rainbow-border::before {
    content: '';
    position: absolute;
    top: -2px;
    left: -2px;
    right: -2px;
    bottom: -2px;
    background: linear-gradient(45deg, #2D5A3D, #D4A574, #E8DCC8, #D4A574, #2D5A3D);
    border-radius: 10px;
    z-index: -1;
    animation: mehta-rainbow-rotate 3s linear infinite;
}

@keyframes mehta-rainbow-rotate {
    0% {
        filter: hue-rotate(0deg);
    }
    100% {
        filter: hue-rotate(360deg);
    }
}

/* ===== Gradient Shift ===== */
.mehta-gradient-shift {
    background: linear-gradient(-45deg, #2D5A3D, #D4A574, #E8DCC8, #2D5A3D);
    background-size: 400% 400%;
    animation: mehta-gradient-shift 15s ease infinite;
}

@keyframes mehta-gradient-shift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* ===== Stagger Animation ===== */
.mehta-stagger-item {
    animation: mehta-fade-in-up 0.8s cubic-bezier(0.23, 1, 0.320, 1) forwards;
}

.mehta-stagger-item:nth-child(1) { animation-delay: 0.1s; }
.mehta-stagger-item:nth-child(2) { animation-delay: 0.2s; }
.mehta-stagger-item:nth-child(3) { animation-delay: 0.3s; }
.mehta-stagger-item:nth-child(4) { animation-delay: 0.4s; }
.mehta-stagger-item:nth-child(5) { animation-delay: 0.5s; }
.mehta-stagger-item:nth-child(n+6) { animation-delay: 0.6s; }