/* ============================================
   CV Portfolio Styles
   Alejandro Restrepo López
   ============================================ */

/* Print Styles */
@media print {
    .no-print { 
        display: none !important; 
    }
    .print-only { 
        display: block !important; 
    }
    body { 
        background-color: white; 
        color: black; 
    }
    a { 
        text-decoration: none; 
        color: black; 
    }
}

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

::-webkit-scrollbar-track { 
    background: transparent; 
}

::-webkit-scrollbar-thumb { 
    background-color: #e4e4e7; 
    border-radius: 20px; 
}

.dark ::-webkit-scrollbar-thumb { 
    background-color: #27272a; 
}

/* Iconify Alignment */
iconify-icon {
    display: inline-block;
    vertical-align: middle;
}

/* Language Toggle Animation */
#lang-toggle,
#theme-toggle {
    transition: all 0.2s ease;
}

#lang-toggle:hover,
#theme-toggle:hover {
    transform: scale(1.02);
}

#lang-toggle:active,
#theme-toggle:active {
    transform: scale(0.98);
}

/* Smooth transitions for translated content */
[data-i18n] {
    transition: opacity 0.15s ease;
}

/* Profile Image Hover Effect Enhancement */
figure .grayscale {
    transition: filter 0.5s ease, transform 0.3s ease;
}

figure:hover .grayscale {
    transform: scale(1.02);
}

/* Card Hover Effects */
.group:hover {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.05);
}

.dark .group:hover {
    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.3);
}

/* Skill Tags Animation */
.flex.items-center.gap-1\.5.px-3 {
    transition: all 0.2s ease;
}

/* Focus States for Accessibility */
button:focus-visible,
a:focus-visible {
    outline: 2px solid #71717a;
    outline-offset: 2px;
}

.dark button:focus-visible,
.dark a:focus-visible {
    outline-color: #a1a1aa;
}

/* Link underline animation */
a[href^="http"]:not(.p-2):hover {
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* Top Header Bar */
header {
    transition: background-color 0.3s ease, border-color 0.3s ease;
}

/* Subtle center diffusion on dark theme */
.dark body {
    background-image:
        radial-gradient(circle at 50% 50%, rgba(190, 190, 190, 0.04) 0%, rgba(90, 90, 90, 0.015) 24%, rgba(0, 0, 0, 0) 46%),
        linear-gradient(to bottom, #070707 0%, #000000 100%);
    background-repeat: no-repeat;
    background-size: 100% 100%, 100% 100%;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    footer {
        flex-direction: column;
        align-items: center;
        gap: 1rem;
    }
}

/* Selection color */
::selection {
    background-color: #e4e4e7;
}

.dark ::selection {
    background-color: #27272a;
}

/* Smooth page load animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

main {
    animation: fadeIn 0.4s ease-out;
}

/* Trophy icon pulse on hover */
.group:hover iconify-icon[icon="lucide:trophy"] {
    animation: pulse 0.6s ease;
}

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