/* Animation */
@keyframes fadeSlideIn {
    0% {
        opacity: 0;
        transform: translateY(30px);
        filter: blur(8px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
        filter: blur(0);
    }
}

/* Visibility override */
.invisible {
    visibility: hidden !important;
}

/* Dynamic fonts */
.font-geist {
    font-family: 'Geist', sans-serif !important;
}

.font-roboto {
    font-family: 'Roboto', sans-serif !important;
}

.font-montserrat {
    font-family: 'Montserrat', sans-serif !important;
}

.font-poppins {
    font-family: 'Poppins', sans-serif !important;
}

.font-playfair {
    font-family: 'Playfair Display', serif !important;
}

.font-instrument-serif {
    font-family: 'Instrument Serif', serif !important;
}

.font-merriweather {
    font-family: 'Merriweather', serif !important;
}

.font-bricolage {
    font-family: 'Bricolage Grotesque', sans-serif !important;
}

.font-jakarta {
    font-family: 'Plus Jakarta Sans', sans-serif !important;
}

.font-manrope {
    font-family: 'Manrope', sans-serif !important;
}

.font-space-grotesk {
    font-family: 'Space Grotesk', sans-serif !important;
}

.font-work-sans {
    font-family: 'Work Sans', sans-serif !important;
}

.font-pt-serif {
    font-family: 'PT Serif', serif !important;
}

.font-geist-mono {
    font-family: 'Geist Mono', monospace !important;
}

.font-space-mono {
    font-family: 'Space Mono', monospace !important;
}

.font-quicksand {
    font-family: 'Quicksand', sans-serif !important;
}

.font-nunito {
    font-family: 'Nunito', sans-serif !important;
}

/* Animation control */
.animate-on-scroll {
    animation-play-state: paused !important;
}

.animate-on-scroll.animate {
    animation-play-state: running !important;
}


/* Mask for first background component */
.aura-mask {
    mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent);
    -webkit-mask-image: linear-gradient(to bottom, transparent, black 0%, black 80%, transparent);
}

/* Fade mask for inner background */
.aura-fade-mask {
    -webkit-mask-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 80%,
            rgba(255, 255, 255, 0) 100%);
    mask-image: linear-gradient(to bottom,
            rgba(255, 255, 255, 1) 0%,
            rgba(255, 255, 255, 1) 80%,
            rgba(255, 255, 255, 0) 100%);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
}

/* Background logo */
.logo-img {
    background-image: url("https://hoirqrkdgbmvpwutwuwj.supabase.co/storage/v1/object/public/assets/assets/f7466370-2832-4fdd-84c2-0932bb0dd850_800w.png");
}

/* Base style for all cards */
.card-base {
    position: absolute;
    inset: 0;
    margin: auto;
    height: 100%;
    width: 100%;
    object-fit: cover;
    border-radius: 0.75rem;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    ring: 1px solid rgba(255, 255, 255, 0.1);
    cursor: grab;
    transition: all 0.3s ease-out;
    transform-origin: center center;
    touch-action: none;
}

/* Initial transforms */
#card1 {
    transform: rotate(-6deg) translateX(1.5rem) translateY(0.75rem);
}

#card2 {
    transform: rotate(4deg) translateX(-0.75rem) translateY(-0.5rem);
}

#card3 {
    transform: rotate(0.5deg);
}