/* Native fade animations — Animate.css yerine */
[data-anim] {
    opacity: 0;
    will-change: transform, opacity;
}
[data-anim].is-visible {
    animation-duration: 1s;
    animation-fill-mode: both;
}
[data-anim="fadeIn"].is-visible       { animation-name: fadeIn; }
[data-anim="fadeInUp"].is-visible     { animation-name: fadeInUp; }
[data-anim="fadeInDown"].is-visible   { animation-name: fadeInDown; }
[data-anim="fadeInLeft"].is-visible   { animation-name: fadeInLeft; }
[data-anim="fadeInRight"].is-visible  { animation-name: fadeInRight; }

@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes fadeInUp {
    from { opacity: 0; transform: translate3d(0, 100%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInDown {
    from { opacity: 0; transform: translate3d(0, -100%, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-100%, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translate3d(100%, 0, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (prefers-reduced-motion: reduce) {
    [data-anim] { opacity: 1 !important; animation: none !important; }
}