/* Fun, bold comic font for “COMING SOON”, plus a fallback for the rest */
@import url('https://fonts.googleapis.com/css2?family=Comic+Neue:wght@700&family=Luckiest+Guy&display=swap');

:root {
    --primary-pink: #ff6f91;
    --text-shadow: 2px 2px 4px rgba(255,255,255,0.5);
    --curve-bg: #fff; /* bottom curve color */
}

/* Reset & Base */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden; /* Hide scroll if large images exceed viewport */
    background: #ffd7e0; /* fallback color if swirl-bg not found */
    font-family: 'Comic Neue', cursive;
}

/* Hero Section */
.hero {
    position: relative;
    width: 100%;
    height: 100vh;
}

/* Pastel swirl background */
.hero-bg {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: url('./assets/bg.jpg') center/cover no-repeat;
    opacity: 0.9;
    z-index: 0;
}

/* Optional curved shape at the bottom for layering */
.bottom-curve {
    position: absolute;
    bottom: 0; left: 0;
    width: 100%;
    height: 20vh;
    background: var(--curve-bg);
    border-top-left-radius: 100% 50%;
    border-top-right-radius: 100% 50%;
    opacity: 0.3;
    z-index: 1;
}

/* Centered Content (Logo + Coming Soon) */
.center-content {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
    z-index: 2;
}

/* Logo */
.logo {
    width: 650px;
    max-width: 80%;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* “COMING SOON” in a big, thick comic style */
.coming-soon {
    margin-top: 1rem;
    font-family: 'Luckiest Guy', sans-serif;
    font-size: 3rem;
    color: var(--primary-pink);
    -webkit-text-stroke: 2px #fff; /* White outline */
    text-shadow: var(--text-shadow);
}

/* Character on bottom-right */
.character-container {
    position: absolute;
    right: 2%;
    bottom: 0;
    z-index: 2;
}

.character {
    max-height: 90vh;
    width: auto;
    transform: translateY(20%);
    animation: slideUp 1.2s ease-out forwards;
    opacity: 0;
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Slide character up from bottom */
@keyframes slideUp {
    0% {
        transform: translateY(20%);
        opacity: 0;
    }
    100% {
        transform: translateY(0);
        opacity: 1;
    }
}

/* Responsive Adjustments */
@media (max-width: 768px) {

    .center-content .logo {
        width: 250px;
    }

    .center-content {
        width: 100%
    }

    .center-content .coming-soon {
        font-size: 2rem;
        -webkit-text-stroke: 1px #fff;
    }
    .character {
        visibility: hidden;
        max-height: 60vh;
        right: 10px;
    }

    .bottom-curve {
        height: 15vh;
    }

    .center-content .beating-letter {
        font-size: 2rem;
    }
}

.beating-letter {
    display: inline-block; /* so transform applies */
    animation: heartbeat 2s infinite;
    font-size: 3rem;
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    25% {
        transform: scale(1.2);
    }
    50% {
        transform: scale(0.9);
    }
    75% {
        transform: scale(1.2);
    }
}