/* Custom CSS for Juan Carlos Cantú Portfolio */

/* ===== Base Styles ===== */
:root {
    --primary: #3B82F6;
    --secondary: #10B981;
    --accent: #F59E0B;
    --dark: #0F172A;
    --gray: #64748B;
    --light: #F8FAFC;
}

* {
    scroll-behavior: smooth;
}

/* ===== Typography ===== */
.section-title {
    @apply text-4xl md:text-5xl font-bold text-center mb-12;
    background: linear-gradient(135deg, var(--primary), var(--secondary));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ===== Buttons ===== */
.btn {
    @apply inline-flex items-center px-6 py-3 rounded-lg font-semibold transition-all duration-300 transform hover:scale-105;
}

.btn-primary {
    @apply bg-primary text-white hover:bg-primary/90 hover:shadow-lg;
}

.btn-secondary {
    @apply bg-secondary text-white hover:bg-secondary/90 hover:shadow-lg;
}

.btn-outline {
    @apply border-2 border-primary text-primary hover:bg-primary hover:text-white;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* ===== Navigation ===== */
.nav-link {
    @apply relative font-medium text-gray-700 dark:text-gray-300;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: var(--primary);
    transition: width 0.3s ease;
}

.nav-link:hover::after {
    width: 100%;
}

/* ===== Hero Section ===== */
.typing-text::after {
    content: '|';
    animation: blink 1s infinite;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}

/* ===== Timeline ===== */
.timeline {
    @apply relative pl-8;
}

.timeline::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 2px;
    background: linear-gradient(to bottom, var(--primary), var(--secondary));
}

.timeline-item {
    @apply relative mb-8;
}

.timeline-dot {
    @apply absolute -left-10 top-1 w-4 h-4 bg-primary rounded-full;
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

.timeline-content {
    @apply bg-white dark:bg-gray-800 p-6 rounded-lg shadow-lg hover:shadow-xl transition-shadow;
}

/* ===== Skills ===== */
.skill-category {
    @apply bg-white dark:bg-gray-900 p-6 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300;
}

.skill-bar {
    @apply w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden;
}

.skill-progress {
    @apply h-full bg-gradient-to-r from-primary to-secondary rounded-full transition-all duration-1000 ease-out;
    width: 0;
}

.skill-tag {
    @apply px-3 py-1 bg-primary/10 text-primary rounded-full text-sm font-medium hover:bg-primary/20 transition-colors;
}

/* ===== Experience Cards ===== */
.experience-card {
    @apply bg-white dark:bg-gray-900 p-8 rounded-lg shadow-lg hover:shadow-xl transition-all duration-300;
}

.experience-card.featured {
    @apply border-2 border-primary;
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.05), rgba(16, 185, 129, 0.05));
}

.tech-tag {
    @apply px-3 py-1 bg-gray-100 dark:bg-gray-800 text-gray-700 dark:text-gray-300 rounded-md text-sm font-medium;
}

/* ===== Projects ===== */
.project-card {
    @apply bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300;
}

.project-image {
    @apply relative h-48 overflow-hidden;
}

.project-overlay {
    @apply absolute inset-0 bg-dark/80 flex items-center justify-center opacity-0 group-hover:opacity-100 transition-opacity duration-300;
}

.project-link {
    @apply w-12 h-12 bg-white rounded-full flex items-center justify-center text-dark hover:bg-primary hover:text-white transition-all duration-300 transform hover:scale-110;
}

.project-tag {
    @apply px-2 py-1 bg-primary/10 text-primary rounded text-xs font-medium;
}

/* ===== Blog Cards ===== */
.blog-card {
    @apply bg-white dark:bg-gray-900 rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-all duration-300 hover:-translate-y-2;
}

.blog-card img {
    @apply w-full h-48 object-cover;
}

.blog-meta {
    @apply flex items-center space-x-4 text-sm text-gray-600 dark:text-gray-400;
}

/* ===== Social Links ===== */
.social-link {
    @apply w-12 h-12 bg-gray-100 dark:bg-gray-800 rounded-lg flex items-center justify-center text-gray-600 dark:text-gray-400 hover:bg-primary hover:text-white transition-all duration-300 transform hover:scale-110;
}

/* ===== Contact Form ===== */
input:focus,
textarea:focus {
    outline: none;
}

/* ===== Animations ===== */
.fade-in {
    animation: fadeIn 0.6s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.slide-in-left {
    animation: slideInLeft 0.6s ease-out;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.slide-in-right {
    animation: slideInRight 0.6s ease-out;
}

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.scale-in {
    animation: scaleIn 0.6s ease-out;
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== Gradient Animations ===== */
.gradient-animate {
    background-size: 200% 200%;
    animation: gradientShift 5s ease infinite;
}

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

/* ===== Particles Background ===== */
#particles-js {
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 1;
}

/* ===== Loading States ===== */
.skeleton {
    @apply bg-gray-300 dark:bg-gray-700 animate-pulse rounded;
}

/* ===== Scroll Progress Bar ===== */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--primary), var(--secondary));
    z-index: 100;
    transition: width 0.3s ease;
}

/* ===== Custom Scrollbar ===== */
::-webkit-scrollbar {
    width: 12px;
}

::-webkit-scrollbar-track {
    background: var(--light);
}

.dark ::-webkit-scrollbar-track {
    background: var(--dark);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--primary), var(--secondary));
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--primary);
}

/* ===== Responsive Utilities ===== */
@media (max-width: 768px) {
    .section-title {
        @apply text-3xl;
    }
    
    .timeline::before {
        left: 15px;
    }
    
    .timeline-dot {
        left: 8px;
    }
    
    .timeline-content {
        margin-left: 40px;
    }
}

/* ===== Print Styles ===== */
@media print {
    header,
    #particles-js,
    .social-link,
    .btn,
    #theme-toggle {
        display: none !important;
    }
    
    body {
        color: black !important;
        background: white !important;
    }
    
    .section-title {
        color: black !important;
        -webkit-text-fill-color: black !important;
    }
}

/* ===== Accessibility ===== */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

/* Focus styles for keyboard navigation */
a:focus,
button:focus,
input:focus,
textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ===== Dark Mode Transitions ===== */
.dark-mode-transition,
.dark-mode-transition * {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease !important;
}

/* ===== Force Dark Mode Colors ===== */
.dark .nav-link {
    color: rgb(209 213 219) !important;
}

.dark .nav-link:hover {
    color: var(--primary) !important;
}

.dark body {
    background-color: rgb(17 24 39) !important;
    color: rgb(243 244 246) !important;
}

/* ===== Line Clamp Utilities ===== */
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== Blog Articles Styles ===== */
.aspect-video {
    aspect-ratio: 16 / 9;
}

/* ===== Developer Aesthetic Animations ===== */
@keyframes float {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-20px);
    }
}

@keyframes float-delayed {
    0%, 100% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-15px) rotate(5deg);
    }
}

@keyframes spin-slow {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.animate-float {
    animation: float 6s ease-in-out infinite;
}

.animate-float-delayed {
    animation: float-delayed 8s ease-in-out infinite;
    animation-delay: 2s;
}

.animate-spin-slow {
    animation: spin-slow 8s linear infinite;
}

/* ===== Terminal Cursor ===== */
.terminal-cursor {
    display: inline-block;
    width: 8px;
    height: 16px;
    background-color: #10B981;
    animation: blink 1s infinite;
}

.terminal-cursor::after {
    content: '';
}

/* ===== Code Syntax Highlighting ===== */
.code-syntax .keyword {
    color: #C792EA;
}

.code-syntax .string {
    color: #C3E88D;
}

.code-syntax .comment {
    color: #546E7A;
    font-style: italic;
}

.code-syntax .function {
    color: #82AAFF;
}

/* ===== Developer Theme Overrides ===== */
.hero-dark {
    background: linear-gradient(135deg, #0F172A 0%, #1E293B 50%, #0F172A 100%);
}

/* ===== Glitch Effect for Hero ===== */
@keyframes glitch {
    0% {
        text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
    }
    15% {
        text-shadow: 0.05em 0 0 #00fffc, -0.03em -0.04em 0 #fc00ff, 0.025em 0.04em 0 #fffc00;
    }
    16% {
        text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00;
    }
    49% {
        text-shadow: -0.05em -0.025em 0 #00fffc, 0.025em 0.035em 0 #fc00ff, -0.05em -0.05em 0 #fffc00;
    }
    50% {
        text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00;
    }
    99% {
        text-shadow: 0.05em 0.035em 0 #00fffc, 0.03em 0 0 #fc00ff, 0 -0.04em 0 #fffc00;
    }
    100% {
        text-shadow: -0.05em 0 0 #00fffc, -0.025em -0.04em 0 #fc00ff, -0.04em -0.025em 0 #fffc00;
    }
}

.glitch:hover {
    animation: glitch 1s linear infinite;
}

/* ===== WhatsApp Button ===== */
#whatsapp-btn {
    animation: pulse-whatsapp 2s infinite;
}

@keyframes pulse-whatsapp {
    0% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.7);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(34, 197, 94, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(34, 197, 94, 0);
    }
}

#whatsapp-btn:hover {
    animation: none;
}

/* WhatsApp Button Responsive */
@media (max-width: 768px) {
    #whatsapp-btn {
        bottom: 1rem;
        right: 1rem;
    }
    
    #whatsapp-btn a {
        width: 3.5rem;
        height: 3.5rem;
    }
    
    #whatsapp-btn i {
        font-size: 1.5rem;
    }
}