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

/* --- Custom CSS for 3D Flip Box Effect --- */

.flip-box {
    perspective: 1000px;
    position: relative;
}

.flip-box-front,
.flip-box-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    transition: transform 0.6s;
    border-radius: 15px;
}

.flip-box-back {
    transform: rotateY(180deg);
    /* Background color defined in HTML using bg-flip-overlay */
}

/* Flip effect on hover, focus (keyboard access), and JS class (touch/click) */
.flip-box:hover .flip-box-front,
.flip-box:focus .flip-box-front,
.flip-box.is-flipped .flip-box-front {
    transform: rotateY(-180deg);
}

.flip-box:hover .flip-box-back,
.flip-box:focus .flip-box-back,
.flip-box.is-flipped .flip-box-back {
    transform: rotateY(0deg);
}

/* --- Custom Components and Utilities (Using @apply) --- */
@layer components {
    .cta-button {
        /* Reusing common CTA styles for TikTok and Payment buttons */
        @apply bg-cta-button text-white text-[28px] font-risque font-medium rounded-full py-2 px-6;
        transition: background-color 0.3s;
        border: none;
    }
    .cta-button:hover {
        @apply bg-cta-hover;
    }
    .cashapp-btn {
        @apply bg-[#00e767]; /* Cash App color */
    }
    .cashapp-btn:hover {
        @apply bg-[#00c057];
    }
    
    /* Custom styles for image background section overlay */
    .carousel-section-bg {
         background-image: url("https://1072studio.com/wp-content/uploads/2022/08/mbg.jpg");
         background-blend-mode: multiply;
         background-attachment: scroll; 
    }
    @media (min-width: 1025px) {
        .carousel-section-bg {
            background-attachment: fixed;
        }
    }
}

/* Custom CSS for Hamburger Menu Animation */
.menu-toggle.is-active .bar:nth-child(2) {
    opacity: 0;
}
.menu-toggle.is-active .bar:nth-child(1) {
    transform: rotate(45deg) translate(5px, 8px);
}
.menu-toggle.is-active .bar:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -8px);
}
/* Mobile menu slide-out is handled by JS toggling translate-x-full/0 */