/* Base */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    background: #403040;
    overflow: hidden;
    margin: 0;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

/* Planet */
.planet {
    width: 100%;
    height: 100%;
    position: absolute;
    bottom: -75%;
    left: 0;
    background-color: #fc3a51;
    border-radius: 50%;
    z-index: 0;
}

/* The wrapper is animated so the button follows the cow */
.cow-wrap {
    width: 20%;
    margin: 0 auto;
    position: relative;
    z-index: 2;
    animation: bounce 2s infinite alternate ease-in-out;
}

/* Cow itself is static inside the animated wrapper */
.cow {
    width: 100%;
    display: block;
}

/* Circular button that sits just below the cow and moves with it */
.follow-btn {
    position: absolute;
    top: calc(100% + 12px);   /* directly beneath the cow */
    left: 50%;
    transform: translateX(-50%);
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 2px solid #fff;
    background: #0E2430;
    color: #fff;
    font-weight: 700;
    font-size: 16px;
    line-height: 1.1;
    text-align: center;
    padding: 0 12px;
    box-shadow: 0 8px 20px rgba(0,0,0,.35);
    cursor: pointer;
    z-index: 3;
}
.follow-btn:hover { transform: translateX(-50%) scale(1.03); }
.follow-btn:active { transform: translateX(-50%) scale(.98); }

/* Bounce motion */
@keyframes bounce {
    from { transform: translateY(0); }
    to   { transform: translateY(40vh); }
}

/* Optional stars: simple styling so they don't break the layout.
   (This is plain CSS, not Sass.) */
.stars {
    list-style: none;
    margin: 0;
    padding: 0;
}
.stars li {
    position: absolute;
    width: 2px;
    height: 2px;
    background: #e8d5b7;
    opacity: 0.9;
    z-index: 1;
    animation: twinkle 3s infinite ease-in-out;
}
/* Scatter a bunch of them with coarse buckets */
.stars li:nth-child(10n+1) { top: 5%;  left: 10%; }
.stars li:nth-child(10n+2) { top: 15%; left: 40%; }
.stars li:nth-child(10n+3) { top: 25%; left: 70%; }
.stars li:nth-child(10n+4) { top: 35%; left: 20%; }
.stars li:nth-child(10n+5) { top: 45%; left: 55%; }
.stars li:nth-child(10n+6) { top: 55%; left: 80%; }
.stars li:nth-child(10n+7) { top: 65%; left: 5%;  }
.stars li:nth-child(10n+8) { top: 75%; left: 35%; }
.stars li:nth-child(10n+9) { top: 85%; left: 65%; }
.stars li:nth-child(10n+10){ top: 92%; left: 85%; }
/* size variations */
.stars li:nth-child(3n)     { width: 3px; height: 3px; }
.stars li:nth-child(5n)     { width: 4px; height: 4px; }
/* animation offsets */
.stars li:nth-child(7n)     { animation-delay: .5s; }
.stars li:nth-child(11n)    { animation-delay: 1s; }
.stars li:nth-child(13n)    { animation-delay: 1.5s; }

@keyframes twinkle {
    0%, 100% { opacity: .9; }
    50%      { opacity: .2; }
}

/* Responsive tweak */
@media (max-width: 600px) {
    .cow-wrap { width: 40%; }
    .follow-btn { width: 96px; height: 96px; font-size: 14px; }
}