/*
 * Custom styles for the xniux portfolio templates.  These rules
 * approximate the Tailwind utilities used in the React/Vite project
 * without requiring a full Tailwind build.  They cover gradient
 * backgrounds, gradient text, card shadows, hover effects and simple
 * reveal animations.  If your theme already includes a CSS utility
 * framework you can remove or override these definitions.
 */

/* Gradient helpers */
.gradient-text {
    background: linear-gradient(90deg,#059669,#06b6d4);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.gradient-bg {
    background: linear-gradient(90deg,#059669,#06b6d4);
}

/* Bubble backgrounds (used in hero) */
.blur-3xl {
    filter: blur(48px);
}

/* Card shadows and hover states */
.shadow-xl {
    box-shadow: 0 10px 25px rgba(0,0,0,0.1);
}
.hover\:shadow-2xl:hover {
    box-shadow: 0 20px 40px rgba(0,0,0,0.15);
}

/* Fade animations to echo framer motion effects */
.fade-up,
.fade-left,
.fade-right {
    opacity: 0;
    transform: translateY(30px);
    animation-fill-mode: forwards;
    animation-duration: .8s;
    animation-timing-function: ease;
}
.fade-left {
    transform: translateX(-20px);
    animation-name: fadeLeft;
}
.fade-right {
    transform: translateX(20px);
    animation-name: fadeRight;
}
.fade-up {
    animation-name: fadeUp;
}
.delay-1 { animation-delay: .2s; }
.delay-2 { animation-delay: .4s; }

@keyframes fadeUp {
    to { opacity:1; transform:none; }
}
@keyframes fadeLeft {
    to { opacity:1; transform:none; }
}
@keyframes fadeRight {
    to { opacity:1; transform:none; }
}

/* Basic utility classes for spacing and layout (subset of Tailwind) */
.min-h-screen { min-height: 100vh; }
.pt-20 { padding-top: 5rem; }
.py-20 { padding-top: 5rem; padding-bottom: 5rem; }
.py-12 { padding-top: 3rem; padding-bottom: 3rem; }
.mb-12 { margin-bottom: 3rem; }
.mb-16 { margin-bottom: 4rem; }
.text-center { text-align: center; }
.text-xl { font-size: 1.25rem; }
.text-4xl { font-size: 2.25rem; }
.text-5xl { font-size: 3rem; }
.font-bold { font-weight: 700; }
.rounded-2xl { border-radius: 1rem; }
.rounded-full { border-radius: 9999px; }
.text-gray-800 { color: #1f2937; }
.text-gray-700 { color: #374151; }
.text-gray-600 { color: #4b5563; }
.text-emerald-600 { color: #059669; }
.bg-gray-50 { background-color: #f9fafb; }
.bg-white { background-color: #ffffff; }
.bg-emerald-50 { background-color: #ecfdf5; }
.bg-emerald-100 { background-color: #d1fae5; }
.bg-cyan-100 { background-color: #cffafe; }
.bg-gray-100 { background-color: #f3f4f6; }
.transition-all { transition: all .3s ease; }
.duration-300 { transition-duration: .3s; }
.hover\:scale-105:hover { transform: scale(1.05); }
.hover\:text-emerald-600:hover { color: #059669; }
/* Responsive grid definitions (mimic Tailwind) */
.grid { display: grid; }
.gap-8 { gap: 2rem; }
.md\:grid-cols-2 { grid-template-columns: repeat(1,1fr); }
@media (min-width: 768px) { .md\:grid-cols-2 { grid-template-columns: repeat(2,1fr); } }
.lg\:grid-cols-3 { grid-template-columns: repeat(1,1fr); }
@media (min-width: 1024px) { .lg\:grid-cols-3 { grid-template-columns: repeat(3,1fr); } .lg\:text-5xl { font-size: 3rem; } }