/*
Theme Name: Happy Grins Custom
Theme URI: https://happygrins.com
Author: Your Name
Author URI: https://yourwebsite.com
Description: Custom WordPress theme with ACF and Gutenberg blocks.
Version: 1.0.0
Text Domain: happygrins-theme
*/

/* Reset or Base styles can go here if not using a build process */

/* Custom Utilities from Design */
.smile-curve-bottom {
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
}

.smile-shape-btn {
    border-bottom-left-radius: 40px 25px;
    border-bottom-right-radius: 40px 25px;
    transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.smile-shape-btn:hover {
    transform: translateY(-2px);
}

.pulse-badge {
    animation: pulse-slow 3s infinite;
}

@keyframes pulse-slow {

    0%,
    100% {
        opacity: 1;
        transform: scale(1);
    }

    50% {
        opacity: 0.9;
        transform: scale(1.05);
    }
}

.smile-curve {
    border-bottom-left-radius: 6rem;
    border-bottom-right-radius: 1rem;
}

.slanted-card {
    transform: rotate(-2deg);
    transition: transform 0.3s ease;
}

.slanted-card:hover {
    transform: rotate(0deg) scale(1.02);
}

.massive-text {
    line-height: 0.85;
    letter-spacing: -0.05em;
}

.text-glow-orange {
    text-shadow: 0 0 20px color-mix(in srgb, var(--theme-orange), transparent 40%), 4px 4px 0px var(--theme-blue);
}

/* Ensure images in service tiles don't overflow the curve */
.service-tile .smile-curve-bottom img {
    border-bottom-left-radius: 50% 20%;
    border-bottom-right-radius: 50% 20%;
}

body {
    background: #fff;
    color: #000;
}

/* Mascot Popup */
#happy-mascot.is-visible {
    transform: translateY(0) !important;
    transition-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* Testimonial Page Utilities */
.smile-button {
    border-bottom-left-radius: 50% 80px;
    border-bottom-right-radius: 50% 80px;
}

.text-shadow-pop {
    text-shadow: 4px 4px 0px #1e3a8a;
}

.explosive-burst {
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

.smile-bg-pattern-testimonial {
    background-image: linear-gradient(to bottom, rgba(30, 58, 138, 0.6), rgba(30, 58, 138, 0.9));
}