/* Custom styles that extend beyond Tailwind */

body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Smooth focus outlines */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible {
    outline: 2px solid #6EE7B7;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Selection color */
::selection {
    background: rgba(110, 231, 183, 0.3);
    color: #fff;
}

/* Image optimization */
img {
    max-width: 100%;
    height: auto;
}

/* Hide scrollbar for mobile menu on some browsers */
#mobile-menu::-webkit-scrollbar {
    display: none;
}

/* Subtle parallax on hero */
#hero {
    perspective: 1px;
}

/* Gradient text utility */
.text-gradient {
    background: linear-gradient(135deg, #6EE7B7 0%, #34D399 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Decorative line animation on hover */
a.group:hover .deco-line {
    width: 100%;
}

/* Form input autofill styling */
input:-webkit-autofill,
textarea:-webkit-autofill {
    -webkit-box-shadow: 0 0 0 30px rgba(255, 255, 255, 0.05) inset !important;
    -webkit-text-fill-color: #fff !important;
    transition: background-color 5000s ease-in-out 0s;
}

/* Mobile link hover */
.mobile-link {
    position: relative;
}

.mobile-link::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 0;
    height: 1px;
    background: #6EE7B7;
    transition: width 0.3s ease;
}

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

/* Gallery image overlay transition */
.group .absolute {
    transition: background-color 0.5s ease;
}

/* Counter animation preparation */
.font-serif.text-4xl {
    display: inline-block;
}