/* ==========================================
   HATS Lab Website - Custom Styles
   Tailwind CSS supplements
   ========================================== */

/* Smooth scroll behavior */
html {
    scroll-behavior: smooth;
}

/* Line clamp utilities (for older browser support) */
.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;
}

/* Custom selection color */
::selection {
    background-color: rgba(12, 135, 242, 0.2);
    color: #0054a8;
}

/* Animations for staggered reveals */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

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

.animate-fade-in {
    animation: fadeIn 0.6s ease-out forwards;
}

.animate-slide-up {
    opacity: 0;
    animation: slideUp 0.6s ease-out forwards;
}

/* Focus states for accessibility */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #0c87f2;
    outline-offset: 2px;
    border-radius: 4px;
}

/* Image placeholder fallback */
img {
    background-color: #f1f5f9;
}

/* Print styles */
@media print {
    header,
    footer {
        display: none;
    }
    
    main {
        padding: 0;
    }
    
    a {
        text-decoration: underline;
    }
    
    .animate-fade-in,
    .animate-slide-up {
        animation: none;
        opacity: 1;
    }
}