@layer utilities {
    .content-auto {
        content-visibility: auto;
    }
    .text-shadow {
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    .transition-custom {
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }
    .section-fade {
        opacity: 0;
        transform: translateY(20px);
        transition: opacity 0.6s ease-out, transform 0.6s ease-out;
    }
    .section-visible {
        opacity: 1;
        transform: translateY(0);
    }
    .timeline-dot::before {
        content: '';
        position: absolute;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        background-color: theme('colors.primary');
        left: -10px;
        top: 5px;
        z-index: 10;
    }
    .timeline-line::before {
        content: '';
        position: absolute;
        width: 2px;
        height: 100%;
        background-color: theme('colors.gray-light');
        left: 0;
        top: 0;
    }
}