@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {

    html,
    body,
    #root {
        @apply h-full overflow-hidden;
    }
}

@layer utilities {
    .snap-always {
        scroll-snap-stop: always;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        /* IE and Edge */
        scrollbar-width: none;
        /* Firefox */
    }

    .scrollbar-hide::-webkit-scrollbar {
        display: none;
        /* Chrome, Safari and Opera */
    }
}

@layer utilities {
    .scrollbar-hide::-webkit-scrollbar {
        display: none;
    }

    .scrollbar-hide {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    25% {
        transform: translateX(-4px);
    }

    75% {
        transform: translateX(4px);
    }
}

.animate-shake {
    animation: shake 0.2s ease-in-out 0s 2;
}

@keyframes heart-float {
    0% {
        opacity: 1;
        transform: scale(0) rotate(-15deg);
    }

    25% {
        opacity: 1;
        transform: scale(1.2) rotate(10deg);
    }

    50% {
        opacity: 0.8;
        transform: scale(1) translateY(-30px) rotate(-5deg);
    }

    100% {
        opacity: 0;
        transform: scale(0.6) translateY(-80px) rotate(15deg);
    }
}

.animate-heart-float {
    animation: heart-float 1s ease-out forwards;
}

body {
    @apply bg-black antialiased;
    color-scheme: dark;
}

.artplayer-app {
    @apply rounded-none !important;
}