:root {
    --pink: #ff2f92;
    --pink-soft: #ffd0e7;
    --blue: #79d8ff;
    --blue-soft: #d8f3ff;
    --cream: #fff7eb;
    --mint: #dcffe9;
    --ink: #49304a;
    --paper: rgba(255, 255, 255, 0.82);
    --shadow: 0 28px 70px rgba(103, 67, 105, 0.18);
}

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    min-height: 100vh;
    overflow-x: hidden;
    font-family: "Segoe UI", system-ui, sans-serif;
    color: var(--ink);
    background:
        radial-gradient(circle at 10% 15%, rgba(255, 217, 232, 0.85), transparent 22rem),
        radial-gradient(circle at 85% 15%, rgba(216, 243, 255, 0.9), transparent 24rem),
        linear-gradient(135deg, #fffaf1, #fff5fb 45%, #f5fdff);
}

.hero,
.section {
    max-width: 1180px;
    margin: 3rem auto;
    padding: 0 5vw;
}

.hero {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 2rem;
    align-items: center;
}

.baby-hero,
.form-card,
.card,
.baby-reveal-card {
    background: var(--paper);
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 34px;
    box-shadow: var(--shadow);
    backdrop-filter: blur(16px);
}

.baby-hero {
    padding: clamp(2rem, 5vw, 3.4rem);
}

.form-card,
.card {
    padding: 1.5rem;
}

.card {
    min-width: 0;
    min-height: 100%;
}

.cards-grid .card h2 {
    margin: 0 0 0.8rem;
    max-width: 10ch;
    padding-right: 0.75rem;
    font-size: clamp(1.9rem, 2.2vw, 2.6rem);
    line-height: 1.02;
    letter-spacing: -0.04em;
    overflow-wrap: normal;
    word-break: normal;
    hyphens: manual;
    text-wrap: balance;
}

.cards-grid .card p {
    margin: 0;
    max-width: 24ch;
}

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--pink), var(--blue));
    color: #fff;
    font-weight: 800;
    box-shadow: 0 12px 26px rgba(255, 122, 182, 0.24);
}

h1 {
    margin: 0.7rem 0 1rem;
    font-size: clamp(2.6rem, 6vw, 5.3rem);
    line-height: 0.95;
    letter-spacing: -0.03em;
}

h2 {
    margin: 0 0 0.8rem;
    font-size: clamp(1.8rem, 3.5vw, 3rem);
}

h3 {
    margin: 0 0 0.4rem;
    font-size: clamp(1.4rem, 3vw, 2rem);
}

p {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.7;
}

.eyebrow {
    display: inline-block;
    margin-bottom: 0.7rem;
    color: #b95e85;
    font-size: 0.78rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.button,
button {
    border: 0;
    border-radius: 999px;
    padding: 1rem 1.35rem;
    font: inherit;
    font-weight: 800;
    color: #fff;
    text-decoration: none;
    cursor: pointer;
    background: linear-gradient(90deg, var(--pink), #ffbf85);
    box-shadow: 0 16px 30px rgba(255, 122, 182, 0.24);
    transition: transform 180ms ease, box-shadow 180ms ease, opacity 180ms ease;
}

.button.secondary {
    background: linear-gradient(90deg, #6ecaff, #96f4ca);
    box-shadow: 0 16px 30px rgba(121, 216, 255, 0.22);
}

.button:hover,
button:hover {
    transform: translateY(-2px);
}

.button-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    margin-top: 1.5rem;
}

.countdown {
    display: grid;
    grid-template-columns: repeat(4, minmax(80px, 1fr));
    gap: 0.8rem;
    margin: 1.6rem 0 0;
}

.countdown span {
    padding: 1rem 0.8rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.92);
    text-align: center;
    box-shadow: 0 14px 30px rgba(73, 48, 74, 0.08);
    font-weight: 700;
}

.countdown b {
    display: block;
    margin-bottom: 0.25rem;
    font-size: 2rem;
}

.hero-visual {
    position: relative;
    min-height: 420px;
}

.moon,
.stork,
.baby-bottle,
.balloon {
    position: absolute;
    filter: drop-shadow(0 14px 28px rgba(73, 48, 74, 0.16));
    animation: babyFloat 5.8s ease-in-out infinite;
}

.moon {
    top: 8%;
    left: 8%;
    font-size: 7rem;
}

.stork {
    top: 24%;
    right: 10%;
    font-size: 5rem;
    animation-delay: 0.8s;
}

.baby-bottle {
    top: 52%;
    left: 35%;
    font-size: 6rem;
    animation-delay: 1.4s;
}

.b1 {
    right: 16%;
    bottom: 8%;
    font-size: 4.8rem;
    animation-delay: 1.9s;
}

.b2 {
    left: 12%;
    bottom: 10%;
    font-size: 4.6rem;
    animation-delay: 2.5s;
}

@keyframes babyFloat {
    50% {
        transform: translateY(-20px) rotate(5deg);
    }
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 1rem;
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 5vw;
}

.narrow {
    max-width: 900px;
}

.reveal-card {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.65s ease, transform 0.65s ease;
}

.reveal-card.visible {
    opacity: 1;
    transform: translateY(0);
}

.baby-choice-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.4rem 0 1rem;
}

.baby-choice-button {
    min-height: 72px;
    background: rgba(255, 255, 255, 0.88);
    color: var(--ink);
    border: 2px solid transparent;
    box-shadow: none;
}

.baby-choice-button:hover {
    transform: translateY(-2px);
}

.baby-choice-button:disabled {
    cursor: default;
    opacity: 0.95;
}

.baby-choice-boy {
    border-color: rgba(121, 216, 255, 0.4);
    background: linear-gradient(180deg, rgba(216, 243, 255, 0.9), rgba(255, 255, 255, 0.95));
}

.baby-choice-girl {
    border-color: rgba(255, 47, 146, 0.34);
    background: linear-gradient(180deg, rgba(255, 208, 231, 0.92), rgba(255, 255, 255, 0.96));
}

.baby-choice-button.is-active {
    color: #fff;
    box-shadow: 0 18px 34px rgba(73, 48, 74, 0.16);
}

.baby-choice-boy.is-active {
    background: linear-gradient(90deg, #5ebbf4, #84dfff);
}

.baby-choice-girl.is-active {
    background: linear-gradient(90deg, #ff2f92, #ff73b6);
}

.hint {
    margin-top: 0.6rem;
    color: rgba(73, 48, 74, 0.8);
}

.hint.is-success {
    color: #22724f;
    font-weight: 700;
}

.hint.is-error {
    color: #bb4d73;
    font-weight: 700;
}

.baby-vote-bars {
    display: grid;
    gap: 1rem;
    margin-top: 1.4rem;
}

.baby-vote-track {
    position: relative;
    display: flex;
    width: 100%;
    height: 26px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    box-shadow: inset 0 0 0 1px rgba(73, 48, 74, 0.05);
}

.baby-vote-fill-boy,
.baby-vote-fill-girl {
    display: block;
    height: 100%;
    transition: width 260ms ease;
}

.baby-vote-fill-boy {
    background: linear-gradient(90deg, #6bbef7, #8be3ff);
}

.baby-vote-fill-girl {
    background: linear-gradient(90deg, #ff2f92, #ff7cbd);
}

.baby-vote-stats {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
}

.baby-vote-stats div {
    padding: 1rem 1.1rem;
    border-radius: 24px;
    background: rgba(255, 255, 255, 0.78);
}

.baby-vote-stats strong {
    display: block;
    font-size: 1.45rem;
    margin-bottom: 0.2rem;
}

.baby-reveal-shell {
    text-align: center;
}

.baby-gift-box {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: min(240px, 68vw);
    aspect-ratio: 1 / 1;
    margin: 1.6rem auto 0;
    border: 0;
    border-radius: 32px;
    background: transparent;
    box-shadow: none;
    isolation: isolate;
    overflow: visible;
    filter: drop-shadow(0 24px 36px rgba(103, 67, 105, 0.18));
}

.baby-gift-box::before {
    content: "";
    position: absolute;
    inset: auto 14% 2% 14%;
    height: 14%;
    border-radius: 999px;
    background: radial-gradient(circle, rgba(123, 91, 141, 0.28), rgba(123, 91, 141, 0));
    filter: blur(10px);
    z-index: -1;
}

.baby-gift-box.is-ready {
    animation: giftBounce 1.4s ease-in-out infinite;
}

.baby-gift-box.is-opened {
    animation: none;
}

.baby-gift-lid,
.baby-gift-body,
.baby-gift-ribbon {
    position: absolute;
    pointer-events: none;
}

.baby-gift-lid {
    top: 16%;
    left: 50%;
    width: 76%;
    height: 21%;
    border-radius: 30px;
    background: linear-gradient(90deg, #ff4aa2 0 50%, #8fd8ff 50% 100%);
    box-shadow:
        inset 0 -8px 0 rgba(255, 255, 255, 0.18),
        0 16px 26px rgba(103, 67, 105, 0.16);
    transform: translateX(-50%);
    transform-origin: 18% 85%;
    transition: transform 420ms ease;
    z-index: 3;
}

.baby-gift-lid::before {
    content: "";
    position: absolute;
    inset: 14% 7%;
    border-radius: 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.34), rgba(255, 255, 255, 0));
}

.baby-gift-body {
    bottom: 11%;
    left: 50%;
    width: 69%;
    height: 50%;
    transform: translateX(-50%);
    border-radius: 0 0 30px 30px;
    background: linear-gradient(90deg, #ff6ab3 0 50%, #9bdcff 50% 100%);
    color: #fff;
    font-size: 3rem;
    display: grid;
    place-items: center;
    box-shadow:
        inset 0 -12px 0 rgba(255, 255, 255, 0.14),
        0 20px 32px rgba(103, 67, 105, 0.14);
    z-index: 1;
}

.baby-gift-body::before {
    content: "";
    position: absolute;
    inset: 10% 9% 12%;
    border-radius: 0 0 24px 24px;
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0.04));
}

.baby-gift-ribbon {
    display: none;
}

.baby-gift-box::after {
    content: "";
    position: absolute;
    top: 34%;
    left: 50%;
    width: 20%;
    height: 20%;
    transform: translate(-50%, -50%);
    border-radius: 999px;
    background:
        radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.95) 0 28%, rgba(255, 255, 255, 0) 72%),
        conic-gradient(from 0deg, #ff56a8 0 50%, #a7ddff 50% 100%);
    box-shadow: 0 8px 16px rgba(103, 67, 105, 0.14);
    opacity: 0.98;
    z-index: 4;
    pointer-events: none;
}


.baby-gift-box.is-opened .baby-gift-lid {
    transform: translateX(-50%) translate(-28px, -34px) rotate(-18deg);
}

.baby-reveal-card {
    margin-top: 1.8rem;
    padding: 1.6rem;
    text-align: center;
}

.confetti-piece {
    position: fixed;
    z-index: 999;
    width: 10px;
    height: 16px;
    border-radius: 4px;
    pointer-events: none;
    transform: translate(-50%, -50%);
    animation: babyConfetti var(--duration, 5s) ease-out forwards;
}

@keyframes giftBounce {
    50% {
        transform: translateY(-8px);
    }
}

@keyframes babyConfetti {
    0% {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.35) rotate(0deg);
    }

    12% {
        opacity: 1;
    }

    to {
        transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(var(--scale, 1)) rotate(var(--rotation, 980deg));
        opacity: 0;
    }
}

@media (max-width: 820px) {
    .hero {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 280px;
    }

    .countdown {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cards-grid .card h2 {
        font-size: clamp(1.8rem, 7vw, 2.35rem);
    }
}

@media (max-width: 640px) {
    .baby-choice-grid,
    .baby-vote-stats {
        grid-template-columns: 1fr;
    }

    .hero,
    .section {
        margin: 2rem auto;
    }
}