@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,500;0,600;1,500&family=Caveat:wght@500;600&display=swap');

/* =========================================
   1. ROOT VARIABLES
========================================= */

:root {
    --cream: #fffaf5;
    --paper: #fffdfb;
    --pink: #e9a7b0;
    --deep-pink: #bd6d82;
    --soft-pink: #f8e3e5;
    --brown: #654d50;
    --muted: #a18b8c;

    --border-pink: rgba(226, 195, 190, 0.8);
    --shadow-soft: 0 25px 80px rgba(125, 81, 87, 0.07);
    --transition-smooth: 0.3s ease;
}

/* =========================================
   2. GLOBAL RESET
========================================= */

*,
*::before,
*::after {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    min-height: 100%;
    overflow-x: clip;
    scroll-behavior: smooth;
}

body {
    min-height: 100vh;
    min-height: 100svh;
    height: auto;

    display: grid;
    place-items: center;

    padding: 36px 20px 70px;

    position: relative;

    overflow-x: clip;
    overflow-y: auto;

    background:
        radial-gradient(
            ellipse at 12% 15%,
            #f9e5e6 0%,
            transparent 32%
        ),
        radial-gradient(
            ellipse at 90% 85%,
            #f7e8d9 0%,
            transparent 34%
        ),
        var(--cream);

    color: var(--brown);
    font-family: "DM Sans", sans-serif;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    -webkit-overflow-scrolling: touch;
}
.next-link,
.next-link:visited,
.next-link:active {
    display: inline-block;
    padding: 14px 22px;
    margin-top: 20px;

    background-color: #fff0f5 !important;
    color: #e75480 !important;

    border: 2px solid #ffb6c1;
    border-radius: 15px;

    font-size: 16px;
    font-weight: bold;
    text-decoration: none !important;

    box-shadow: 0 4px 12px rgba(255,105,150,0.2);
}

img,
video,
canvas,
svg {
    max-width: 100%;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}

a:focus-visible,
button:focus-visible {
    outline: 2px solid var(--deep-pink);
    outline-offset: 4px;
}

::selection {
    background: #f1ccd5;
    color: var(--brown);
}

/* =========================================
   3. DECORATIVE PAGE BORDER
========================================= */

body::before {
    content: "";

    position: fixed;
    inset: 12px;

    border: 1px solid rgba(207, 157, 160, 0.35);
    border-radius: 22px;

    pointer-events: none;
    z-index: 20;
}

/* =========================================
   4. BACKGROUND GLOW
========================================= */

.background-glow {
    position: absolute;

    width: 300px;
    height: 300px;

    border-radius: 50%;

    filter: blur(75px);
    opacity: 0.4;

    pointer-events: none;
    z-index: 0;
}

.glow-one {
    top: -150px;
    left: -110px;

    background: #f4cbd2;
}

.glow-two {
    bottom: -150px;
    right: -100px;

    background: #f5ddc5;
}

/* Keep decorative elements behind content */

.background-glow,
.floating-decorations {
    pointer-events: none;
}

/* =========================================
   5. WELCOME CARD
========================================= */

.welcome-card {
    position: relative;
    z-index: 1;

    width: min(100%, 470px);
    flex-shrink: 0;

    padding: 40px 34px 31px;

    text-align: center;

    background: rgba(255, 253, 251, 0.78);

    border: 1px solid var(--border-pink);
    border-radius: 220px 220px 24px 24px;

    box-shadow:
        var(--shadow-soft),
        0 4px 14px rgba(125, 81, 87, 0.035);

    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    transform-origin: center;

    animation: appear 1s ease both;
}

/* =========================================
   6. TOP LABEL
========================================= */

.top-label {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;

    max-width: 100%;
    padding: 9px 14px;

    border: 1px solid #f0dcda;
    border-radius: 30px;

    color: #a68b8e;

    font-size: 9px;
    font-weight: 600;
    letter-spacing: 1.8px;

    overflow-wrap: anywhere;
}

.label-dot {
    width: 6px;
    height: 6px;

    flex-shrink: 0;

    border-radius: 50%;

    background: #d88e9c;

    box-shadow: 0 0 0 4px #f9e8e9;
}

/* =========================================
   7. MAIN FLOWER
========================================= */

.main-flower {
    position: relative;

    display: grid;
    place-items: center;

    width: 100px;
    height: 100px;

    margin: 27px auto 0;

    border: 1px solid #f0d8d7;
    border-radius: 50%;

    background: linear-gradient(
        145deg,
        #fff7f5,
        #f9e8e8
    );

    box-shadow: 0 9px 28px rgba(191, 128, 138, 0.1);

    font-size: 44px;

    animation: flowerFloat 4s ease-in-out infinite;
}

.main-flower::before,
.main-flower::after {
    content: "✦";

    position: absolute;

    color: #c99b75;
    font-size: 15px;
}

.main-flower::before {
    top: 8px;
    right: -5px;
}

.main-flower::after {
    bottom: 8px;
    left: -4px;

    font-size: 12px;
}

/* =========================================
   8. HEADINGS AND TEXT
========================================= */

.eyebrow {
    margin-top: 22px;

    color: var(--deep-pink);

    font-family: "Caveat", cursive;
    font-size: 23px;
}

h1 {
    max-width: 100%;

    margin-top: 13px;

    font-family: "Playfair Display", Georgia, serif;
    font-size: clamp(32px, 7vw, 42px);
    font-weight: 500;

    line-height: 1.3;
    letter-spacing: -1.2px;

    overflow-wrap: anywhere;
}

h1 span {
    color: var(--deep-pink);
    font-style: italic;
}

.description {
    max-width: 315px;

    margin: 19px auto 0;

    color: #947f80;

    font-size: 12px;
    line-height: 2;

    overflow-wrap: anywhere;
}

/* =========================================
   9. SURPRISE BUTTON
========================================= */

.surprise-button {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    width: 100%;
    max-width: 100%;
    min-height: 56px;

    margin-top: 27px;
    padding: 13px 18px;

    border: 1px solid #c98493;
    border-radius: 13px;

    background: linear-gradient(
        110deg,
        #c98493,
        #b96f83
    );

    color: white;

    font-family: "DM Sans", sans-serif;
    font-size: 12px;
    font-weight: 600;

    cursor: pointer;

    box-shadow: 0 8px 22px rgba(185, 111, 131, 0.18);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.surprise-button::before {
    content: "";

    position: absolute;
    z-index: -1;
    inset: 0;

    background: linear-gradient(
        110deg,
        rgba(255, 255, 255, 0.13),
        transparent 55%
    );

    opacity: 0;

    transition: opacity 0.3s ease;
}

.surprise-button:hover {
    transform: translateY(-3px);

    box-shadow: 0 13px 27px rgba(185, 111, 131, 0.25);
}

.surprise-button:hover::before {
    opacity: 1;
}

.surprise-button:active {
    transform: scale(0.98);
}

.button-arrow {
    flex-shrink: 0;

    font-size: 18px;

    transition: transform 0.25s ease;
}

.surprise-button:hover .button-arrow {
    transform: translate(3px, -3px);
}

/* =========================================
   10. SMALL NOTES AND DECORATIONS
========================================= */

.tiny-note {
    margin-top: 19px;

    color: #b39b9d;

    font-family: "Caveat", cursive;
    font-size: 18px;
}

.bottom-decoration {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;

    margin-top: 24px;

    color: #d5a0a7;
    font-size: 12px;
}

.decoration {
    position: absolute;
    z-index: 0;

    pointer-events: none;
    user-select: none;

    animation: drift 6s ease-in-out infinite;
}

.flower {
    color: #d5a0a7;
    font-size: 35px;
}

.heart {
    color: #d69aa6;
    font-size: 31px;
}

.star {
    color: #c6a17b;
    font-size: 23px;
}

.flower-one {
    top: 12%;
    left: 12%;
}

.flower-two {
    top: 19%;
    right: 12%;

    animation-delay: -2s;
}

.flower-three {
    right: 14%;
    bottom: 14%;

    font-size: 28px;
    animation-delay: -3s;
}

.heart-one {
    top: 44%;
    left: 7%;

    animation-delay: -1s;
}

.heart-two {
    bottom: 19%;
    left: 12%;

    animation-delay: -2.5s;
}

.star-one {
    top: 23%;
    left: 29%;

    animation-delay: -1.5s;
}

.star-two {
    right: 28%;
    bottom: 25%;

    animation-delay: -3.5s;
}

/* =========================================
   11. FOOTER
========================================= */

.page-footer {
    position: absolute;
    z-index: 1;

    right: 20px;
    bottom: 25px;
    left: 20px;

    text-align: center;

    color: #ad9697;

    font-family: "Caveat", cursive;
    font-size: 17px;
}

/* =========================================
   12. ANIMATIONS
========================================= */

@keyframes appear {
    from {
        opacity: 0;
        transform: translateY(18px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes flowerFloat {
    0%,
    100% {
        transform: translateY(0) rotate(-4deg);
    }

    50% {
        transform: translateY(-7px) rotate(4deg);
    }
}

@keyframes drift {
    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-13px) rotate(7deg);
    }
}

/* =========================================
   13. MOBILE RESPONSIVENESS
========================================= */

@media (max-width: 480px) {
    body {
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        padding: 40px 18px 85px;
    }

    .welcome-card {
        width: min(100%, 470px);

        margin-top: 15px;
        margin-bottom: 20px;

        padding: 38px 22px 28px;

        border-radius: 180px 180px 23px 23px;
    }

    .top-label {
        font-size: 8px;
        letter-spacing: 1.4px;
    }

    .main-flower {
        width: 88px;
        height: 88px;

        font-size: 39px;
    }

    .description {
        font-size: 12px;
        line-height: 1.8;
    }

    .surprise-button {
        min-height: 52px;
        padding: 14px;
    }

    .flower-one {
        left: 4%;
    }

    .flower-two {
        right: 4%;
    }

    .heart-one {
        left: 2%;
    }

    .heart-two {
        left: 5%;
    }

    .page-footer {
        position: relative;

        right: auto;
        bottom: auto;
        left: auto;

        margin-top: auto;
        padding-top: 12px;
        padding-bottom: 5px;
    }
}

/* =========================================
   14. SHORT SCREENS AND LANDSCAPE PHONES
========================================= */

@media (max-height: 650px) {
    body {
        align-items: flex-start;
    }

    .welcome-card {
        margin-top: 10px;
        margin-bottom: 20px;
    }
}

/* =========================================
   15. REDUCED MOTION ACCESSIBILITY
========================================= */

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;

        scroll-behavior: auto !important;

        transition-duration: 0.01ms !important;
    }

    .surprise-button:hover {
        transform: none;
    }

    .surprise-button::before {
        transition: none;
    }
}

/* ===== COLORFUL BIRTHDAY EDITION / RESPONSIVE POLISH ===== */
:root {
  --cream: #fff9f3;
  --paper: #fffefa;
  --pink: #f3a6bd;
  --deep-pink: #c65383;
  --soft-pink: #ffe2ec;
  --brown: #49394f;
  --muted: #75677e;
  --border-pink: rgba(220, 153, 185, .55);
  --shadow-soft: 0 22px 65px rgba(115, 69, 112, .11);
}
body {
  background:
    radial-gradient(ellipse at 8% 8%, rgba(255,190,211,.42), transparent 34%),
    radial-gradient(ellipse at 92% 18%, rgba(255,220,159,.38), transparent 32%),
    radial-gradient(ellipse at 80% 92%, rgba(195,190,255,.28), transparent 34%),
    linear-gradient(135deg,#fffaf4 0%,#fff5f8 48%,#f8f5ff 100%);
  color: #49394f;
}
body::before {
  border-color: rgba(197, 119, 164, .24);
  border-radius: 18px;
}
a, button { touch-action: manipulation; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font-family: inherit; }
::selection { background:#f7c6da; color:#49394f; }
@media (max-width: 600px) {
  body::before { inset: 5px; border-radius: 13px; }
  h1 { overflow-wrap: anywhere; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior:auto !important; }
}


/* =========================================================
   FINAL VISUAL POLISH — RESPONSIVE, COLOURFUL & MOBILE FIRST
   Content and wording are intentionally untouched.
========================================================= */
:root {
  --bd-ink: #493b58;
  --bd-muted: #786b82;
  --bd-pink: #df679b;
  --bd-purple: #9571d2;
  --bd-peach: #f2a477;
  --bd-mint: #75b9a7;
  --bd-gold: #d9ad55;
  --bd-line: rgba(174, 126, 174, .22);
}
html {
  width: 100%;
  min-width: 320px;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
body {
  width: 100%;
  min-width: 320px;
  overflow-x: clip;
  color: var(--bd-ink);
  -webkit-font-smoothing: antialiased;
}
main, section, article, header, footer, nav {
  min-width: 0;
}
p, h1, h2, h3, a, button, span {
  overflow-wrap: break-word;
}
a, button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
button, a {
  outline-offset: 4px;
}
button:focus-visible, a:focus-visible {
  outline: 3px solid rgba(149, 113, 210, .55);
}
@media (max-width: 600px) {
  body::before { pointer-events: none; }
  p { text-wrap: pretty; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}