/* public/css/style.css */
@import url('variables.css');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body {
    background-color: var(--background-light);
    color: var(--text-main);
    line-height: 1.6;
    overflow-x: hidden; /* Smoke ko screen se bahar jane se rokne ke liye */
}

/* 3D Button Style */
.btn-3d {
    display: inline-block;
    padding: 12px 24px;
    background: var(--gradient-primary);
    color: var(--white);
    border: none;
    border-radius: var(--radius-md);
    font-weight: 600;
    text-decoration: none;
    cursor: pointer;
    box-shadow: 0 4px 6px rgba(37, 99, 235, 0.2);
    transition: var(--transition-smooth);
    transform: translateY(0);
}

.btn-3d:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 15px rgba(124, 58, 237, 0.3);
}

.btn-outline {
    display: inline-block;
    padding: 10px 20px;
    border: 2px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: var(--radius-md);
    text-decoration: none;
    font-weight: 600;
    transition: var(--transition-fast);
}

.btn-outline:hover { background: var(--primary-color); color: var(--white); }

/* 3D Card Style */
.card-3d {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 24px;
    box-shadow: var(--shadow-card);
    transition: var(--transition-smooth);
    position: relative;
    border: 1px solid transparent;
    z-index: 1;
}

/* 3D Multi-color Hover Cards */
.card-multi {
    background: var(--white);
    border-radius: var(--radius-lg);
    padding: 30px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    position: relative;
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    z-index: 1;
}

/* BUG FIX: pointer-events: none; added to let you click the forms! */
.card-3d::before, .card-multi::before {
    content: "";
    position: absolute;
    top: -3px; left: -3px; right: -3px; bottom: -3px;
    background: linear-gradient(270deg, #ff007f, #7c3aed, #2563eb, #00d2ff);
    background-size: 400% 400%;
    z-index: -1;
    border-radius: calc(var(--radius-lg) + 3px);
    opacity: 0;
    transition: opacity 0.4s ease;
    animation: gradientMove 3s ease infinite;
    pointer-events: none; /* YEH LINE FORMS KO CLICKABLE BANAYEGI */
}

.card-3d:hover, .card-multi:hover {
    transform: translateY(-10px) rotateX(2deg);
    box-shadow: 0 20px 40px rgba(124, 58, 237, 0.3);
}

.card-3d:hover::before, .card-multi:hover::before { opacity: 1; }

/* Animated Multi-Color Gradient Backgrounds */
.gradient-text {
    background: linear-gradient(270deg, #ff007f, #7c3aed, #2563eb, #00d2ff);
    background-size: 400% 400%;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: gradientMove 5s ease infinite;
}

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

/* PROPER MULTI-COLOR SMOKE EFFECT */
.cursor-smoke {
    position: absolute;
    width: 35px;
    height: 35px;
    border-radius: 50%;
    pointer-events: none; /* Yeh bhi click ko block nahi karega */
    transform: translate(-50%, -50%);
    animation: smokeAnim 0.9s ease-out forwards;
    z-index: 9999;
    filter: blur(8px); /* Real dhuan jaisa feel dega */
}

@keyframes smokeAnim {
    0% { transform: translate(-50%, -50%) scale(1); opacity: 0.8; }
    /* Yahan -150px dhuan ko uper ki taraf le jayega */
    100% { transform: translate(-50%, -150px) scale(3.5); opacity: 0; }
}