/* styles.css */
@tailwind base;
@tailwind components;
@tailwind utilities;

/* Additional styles for Editorial Theme */
html {
    scroll-behavior: smooth;
}

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

/* Hide scrollbar for carousels */
.scrollbar-hide::-webkit-scrollbar {
    display: none;
}
.scrollbar-hide {
    -ms-overflow-style: none;
    scrollbar-width: none;
}

/* Hero Background Image */
.hero-img {
    background-image: url('images/header.jpg');
    background-size: cover;
    background-position: center 30%;
    background-attachment: fixed;
}

/* Animations - Native CSS Fade-In */
.fade-in-section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

.fade-in-section.is-visible {
    opacity: 1;
    transform: translateY(0);
}

@keyframes fade-up {
    0% { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.animate-fade-up {
    animation: fade-up 2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
    opacity: 0;
}

.delay-200 { animation-delay: 200ms; transition-delay: 200ms; }
.delay-300 { animation-delay: 300ms; transition-delay: 300ms; }

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

@keyframes spin {
    to { transform: rotate(360deg); }
}