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

/* HTMX Loading States for AI Search */
.htmx-indicator {
    display: none;
}

.htmx-request .htmx-indicator {
    display: inline-flex;
}

.htmx-request input[type="search"] {
    opacity: 0.7;
}

.htmx-request .search-icon {
    opacity: 0.5;
}


@font-face {
    font-family: Caveat;
    src: url("/static/fonts/Caveat/Caveat-VariableFont_wght.7519ccd6f7c0.ttf");
}


h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: Caveat;
}

.custom-font {
    font-family: Caveat;
}

/* Background image styles */
.bg-dance-image {
    background-image: url("/static/images/ardian-lumi-6Woj_wozqmA-unsplash.138b0ce79647.jpg");
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    min-height: 100vh;
}

/* Background image that anchors to the top and prioritizes width */
html.bg-dance-image {
    min-height: 100vh;
    overflow-x: hidden;
    position: relative;
}

html.bg-dance-image::after {
    content: '';
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 15vh;
    background: linear-gradient(to bottom, transparent, rgba(0,0,0,0.5));
    pointer-events: none;
}

/* Ensure the image always covers the full viewport height */
@media (max-aspect-ratio: 16/9) {
    html.bg-dance-image {
        background-size: auto 100vh;
        background-position: center center;
    }
}

/* For when the image is wider than the screen */
@media (min-aspect-ratio: 16/9) {
    html.bg-dance-image {
        background-size: 100vw auto;
        background-position: center top;
    }
}

.htmx-indicator {
    opacity: 0;
    z-index: 0;
    transition: opacity 500ms ease-in;
}

.htmx-request .htmx-indicator {
    opacity: 1;
    z-index: 3;

}

.htmx-request.htmx-indicator {
    opacity: 1;
    z-index: 3;
}

.transition-land {
    transition: transform 0.3s ease-in-out;
    animation: shrink-down 0.5s ease-out;
}

.transition-rise {
    transition: transform 0.3s ease-in-out;
    animation: rise-up 0.5s ease-out;
}

@keyframes shrink-down {
    0% {
        transform: scale(1.5);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes rise-up {
    0% {
        transform: translateY(100%);
    }

    100% {
        transform: translateY(0%);
    }
}