/* A grown-up cosmic house party: jewel nebulae, champagne light, tactile CTAs. */
html, body { background: #171235; }
body { background: radial-gradient(ellipse at 12% 18%, #553060, transparent 58%), radial-gradient(ellipse at 90% 85%, #10444d, transparent 62%), #171235; }
.aurora { opacity: .65; filter: blur(45px); }
.aurora-one { background: conic-gradient(from 40deg at 35% 45%, transparent 0 12%, #b3487955 20%, transparent 34%, #388f9966 51%, transparent 67%, #8753b877 82%, transparent 100%); }
.invite-card { background: linear-gradient(145deg, #29203bc9, #152636c9 55%, #41243ac9); backdrop-filter: blur(16px); }
.reveal-rays { opacity: .85; }
.invite-card h2 #guestName { display: block; }
.invite-card h2 .celebration-letter, .celebration-letter { display: inline-block; font: inherit; color: inherit; background: none; letter-spacing: inherit; }
.is-visible .celebration-letter { animation: constellationArrival 1.3s cubic-bezier(.16,1,.3,1) both; animation-delay: calc(.55s + var(--letter) * .045s); }
.mega-word { position: relative; overflow: visible; background: none; color: #e8cd91; }
.mega-word .celebration-letter { background: linear-gradient(130deg, #fff0c4, #bd9459 65%, #f5dc9f); background-clip: text; -webkit-background-clip: text; color: transparent; }
.mega-word::after { content: '✦'; position: absolute; right: 3%; top: 5%; font-size: .24em; color: #fff0ca; animation: goldOrbit 5s ease-in-out infinite; }
.is-visible #guestName { filter: drop-shadow(0 0 20px #daba7866); }
.is-visible .event-grid { animation-name: detailsArrive; animation-duration: 1s; }
.party-console { margin-top: 1.4rem; }
.party-console > p { color: #f6d6a3; font-size: .83rem; letter-spacing: .17em; }
.party-actions { grid-template-columns: 1fr; gap: .8rem; }
.party-action { --party-color: #be93e5; min-height: 112px; padding: 1.1rem 2rem 1.1rem 3.8rem; text-align: left; place-items: start; align-content: center; gap: .25rem; border: 1px solid color-mix(in srgb, var(--party-color), transparent 28%); background: linear-gradient(125deg, color-mix(in srgb, var(--party-color), transparent 78%), #ffffff08); box-shadow: 0 8px 22px #04051533, inset 0 1px 0 #ffffff15; border-radius: 14px; }
.party-action[data-party=cheers] { --party-color: #e8cd91; }
.party-action[data-party=laugh] { --party-color: #91d3ca; }
.party-icon { position: absolute; left: 1.1rem; top: 1.45rem; width: 1.9rem; color: var(--party-color); }
.party-action strong { font-size: 1.1rem; letter-spacing: .02em; }
.party-action small { font-size: .75rem; line-height: 1.4; color: #ede3f2; }
.cta-arrow { position: absolute; top: .85rem; right: .85rem; color: var(--party-color); font-size: 1.15rem; }
.party-action:hover, .party-action:focus-visible { border-color: #fff0c4; box-shadow: 0 0 28px color-mix(in srgb, var(--party-color), transparent 70%); outline: 2px solid #fff0c4; outline-offset: 3px; }
.party-footnote { font-size: .72rem; color: #d5c3d9; margin: .8rem 0; }
.standalone-toast { border-top: 1px solid #dfbe7930; padding-top: 1.2rem; margin: 1.3rem 0 1.4rem; }
.toast-dedication { display: block; color: #dbc6a2; font: italic .95rem Georgia, serif; margin-bottom: .7rem; }
.party-action.toast-button { display: inline-flex; align-items: center; gap: .6rem; min-height: 48px; padding: .8rem 1.2rem; border-radius: 999px; background: #dfbe7912; text-align: center; }
.toast-button .party-icon { position: static; width: 1.4rem; }
.toast-button strong { font-size: .85rem; }
.is-visible .standalone-toast { animation-delay: 1.15s; }
.party-dialog { padding: 0; width: min(850px, calc(100% - 24px)); max-height: calc(100svh - 24px); overflow: auto; border: 1px solid #dfbe7977; border-radius: 22px; background: #1c1931; color: #f6f0e5; box-shadow: 0 30px 100px #0009; }
.party-dialog::backdrop { background: #130e28c7; backdrop-filter: blur(9px); }
.party-dialog[open] { animation: loungeArrival .35s ease both; }
.video-lounge { padding: 1.3rem; background: radial-gradient(ellipse at 0 0, #60345c77, transparent 65%), radial-gradient(ellipse at 100% 100%, #27677455, transparent 65%); }
.lounge-header { display: flex; align-items: start; justify-content: space-between; gap: 1rem; }
.lounge-kicker { margin: 0 0 .4rem; color: #dfbe79; font-size: .65rem; letter-spacing: .12em; text-transform: uppercase; }
.lounge-header h2 { font-family: Georgia, serif; font-size: clamp(1.3rem, 4vw, 2rem); font-weight: normal; margin: 0; }
.lounge-close { flex-shrink: 0; border: 1px solid #ffffff44; border-radius: 50%; width: 44px; height: 44px; background: #ffffff0a; color: white; font-size: 1.7rem; cursor: pointer; }
.lounge-switches { display: flex; gap: .5rem; margin: 1rem 0; flex-wrap: wrap; }
.lounge-switches button { border: 1px solid #ffffff33; border-radius: 999px; background: transparent; color: #ddd2e6; padding: .5rem 1rem; cursor: pointer; min-height: 40px; }
.lounge-switches button[aria-pressed=true] { background: #dfbe79; color: #211725; border-color: #dfbe79; }
.video-stage { width: 100%; aspect-ratio: 16 / 9; min-height: 200px; margin: 1.2rem auto 0; background: #100d1c; border: 1px solid #ffffff22; border-radius: 12px; overflow: hidden; }
.video-stage iframe { display: block; width: 100%; height: 100%; border: 0; }
.is-short .video-stage { width: min(290px, 100%); height: min(47svh, 480px); min-height: 240px; aspect-ratio: 9 / 16; }
.video-caption { margin: .9rem 0 .4rem; font-size: .85rem; }
.video-status { color: #c6b9d4; font-size: .75rem; line-height: 1.5; min-height: 1.5em; margin: 0 0 1rem; }
.lounge-footer { display: flex; justify-content: space-between; gap: 1rem; align-items: center; border-top: 1px solid #ffffff22; padding-top: 1rem; }
.lounge-footer > span { font-size: .75rem; color: #c6b9d4; }
.lounge-footer button { background: #efd19a; color: #27182b; border: 0; border-radius: 999px; padding: .8rem 1.2rem; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.party-dialog button:focus-visible { outline: 2px solid #fff0c4; outline-offset: 3px; }
.cosmic-toast { position: fixed; left: 50%; top: 50%; width: min(440px, calc(100% - 32px)); transform: translate(-50%, -50%); padding: 1.5rem 1.5rem 2rem; border: 1px solid #dfbe7988; border-radius: 24px; text-align: center; color: #fff0ca; background: radial-gradient(ellipse at top, #74563fe8, #22182aef 70%); backdrop-filter: blur(14px); box-shadow: 0 0 90px #dfbe7944; animation: toastEntrance 4s ease both; overflow: hidden; }
.cosmic-toast strong { display: block; font: normal clamp(1.5rem, 5vw, 2.1rem)/1.1 Georgia, serif; position: relative; z-index: 1; }
.cosmic-toast p { font-size: .85rem; line-height: 1.5; color: #e2cfd4; margin-bottom: 0; position: relative; z-index: 1; }
.toast-glasses { position: relative; display: flex; justify-content: center; height: 180px; }
.glass { width: 80px; height: 160px; fill: #ffffff0d; stroke: #ffe9b9; stroke-width: 2; stroke-linecap: round; transform-origin: bottom center; }
.champagne { fill: #dfbe7955; stroke: none; }
.glass-left { animation: glassClinkLeft 1.2s ease-in-out both; }
.glass-right { animation: glassClinkRight 1.2s ease-in-out both; }
.clink-star { position: absolute; top: 25px; left: calc(50% - 12px); font-size: 24px; animation: clinkSpark 1.2s ease-in-out both; }
.toast-bubble { position: absolute; left: var(--bubble-x); bottom: 0; width: 5px; height: 5px; border: 1px solid #ffe6a9; border-radius: 50%; animation: champagneBubble 2s var(--bubble-delay) ease-out infinite; }
.toast-style-1 { background: radial-gradient(ellipse at top, #235e64ee, #211830ef 70%); }
.toast-style-1 .toast-glasses { animation: toastSway 1.1s ease-in-out infinite alternate; }
.toast-style-2 { background: radial-gradient(ellipse at top, #6f3355ee, #25162fef 70%); }
.toast-style-2 .clink-star { animation: goldOrbit 1s infinite; }
@keyframes constellationArrival { 0% { opacity: 0; transform: translateY(36px) rotate(8deg) scale(.7); filter: blur(8px); } 45% { text-shadow: 0 0 30px #f4d398; } 100% { opacity: 1; transform: none; filter: blur(0); text-shadow: 0 0 0 transparent; } }
@keyframes goldOrbit { 50% { transform: translate(12px,-15px) rotate(120deg); text-shadow: 0 0 20px #fff0ca; } }
@keyframes detailsArrive { from { opacity: 0; transform: perspective(600px) rotateX(25deg) translateY(20px); filter: blur(6px); } to { opacity: 1; transform: none; filter: blur(0); } }
@keyframes loungeArrival { from { opacity: 0; transform: translateY(16px) scale(.96); } to { opacity: 1; transform: none; } }
@keyframes toastEntrance { 0% { opacity: 0; transform: translate(-50%, -40%) scale(.85); } 12%, 85% { opacity: 1; transform: translate(-50%, -50%) scale(1); } 100% { opacity: 0; transform: translate(-50%, -60%) scale(1.02); } }
@keyframes glassClinkLeft { 0%,100% { transform: rotate(-15deg) translateX(-8px); } 45%,65% { transform: rotate(12deg) translateX(4px); } }
@keyframes glassClinkRight { 0%,100% { transform: rotate(15deg) translateX(8px); } 45%,65% { transform: rotate(-12deg) translateX(-4px); } }
@keyframes clinkSpark { 0%,35%,100% { opacity: 0; transform: scale(.3); } 50%,65% { opacity: 1; transform: scale(1.8) rotate(60deg); } }
@keyframes champagneBubble { to { transform: translateY(-340px); opacity: 0; } }
@keyframes toastSway { to { transform: rotate(5deg); } }
@media (max-width: 520px) {
  .party-action { padding: 3.5rem .7rem .9rem; text-align: center; place-items: center; min-height: 135px; }
  .party-icon { top: 1rem; left: calc(50% - .95rem); }
  .party-action small { font-size: .7rem; }
  .party-action strong { font-size: 1rem; }
  .video-lounge { padding: 1rem; }
  .lounge-footer > span { max-width: 110px; }
  .lounge-header h2 { font-size: 1.35rem; }
}
.directions-link { display: inline-flex; align-items: center; justify-content: center; gap: .6rem; min-height: 44px; margin-top: .5rem; padding: .45rem .9rem; border: 1px solid #dfbe7966; border-radius: 999px; color: #f2d49a; font-size: .75rem; text-decoration: none; transition: background .2s, box-shadow .2s; }
.directions-link:hover, .directions-link:focus-visible { background: #dfbe791c; outline: 2px solid #fff0c4; outline-offset: 3px; }
.portrait-button img.gift-portrait { inset: auto; left: 50%; top: 48%; width: 180%; height: 150%; transform: translate(-50%, -50%); }
.party-action.laughter-portrait-button { display: flex; align-items: center; justify-content: center; gap: 1.3rem; padding: .9rem 1.3rem 0; min-height: 220px; text-align: left; border-radius: 22px; background: radial-gradient(ellipse at 15% 80%, #317e7966, transparent 65%), linear-gradient(125deg, #573a6577, #142536bb); }
.laughter-portrait { align-self: flex-end; width: 145px; height: 215px; object-fit: contain; object-position: bottom; flex-shrink: 0; filter: drop-shadow(0 0 18px #dfbe7933); transition: transform .35s ease; }
.laughter-copy { display: grid; gap: .55rem; padding-bottom: 1rem; position: relative; z-index: 1; }
.laughter-label { color: #b8d6d1; text-transform: uppercase; font-size: .61rem; letter-spacing: .17em; }
.party-action .laughter-copy strong { font: normal clamp(1.5rem, 5vw, 2rem)/1.05 Georgia, serif; color: #f2d49a; letter-spacing: -.02em; }
.laughter-play { display: inline-flex; align-items: center; gap: .5rem; color: #fff0ca; font-size: .7rem; margin-top: .35rem; border-bottom: 1px solid #dfbe7966; padding-bottom: .3rem; }
.laughter-portrait-button:hover .laughter-portrait, .laughter-portrait-button:focus-visible .laughter-portrait { transform: rotate(-2deg) translateY(-4px); }
@media (max-width: 520px) {
  .party-action.laughter-portrait-button { gap: .85rem; padding: .8rem .8rem 0; min-height: 185px; }
  .laughter-portrait { width: 115px; height: 180px; }
  .laughter-copy { gap: .45rem; }
  .laughter-label { font-size: .55rem; letter-spacing: .11em; }
  .laughter-play { font-size: .65rem; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .celebration-letter { opacity: 1 !important; transform: none !important; filter: none !important; }
  .cosmic-toast { animation: none; }
  .party-dialog[open] { animation: none; }
}

/* A persistent invitation to reach the private birthday wish. */
.wish-float-cta { position: fixed; right: max(1rem, env(safe-area-inset-right)); bottom: max(1rem, env(safe-area-inset-bottom)); z-index: 35; display: inline-flex; align-items: center; gap: .75rem; min-height: 52px; padding: .55rem .65rem .55rem 1.2rem; border: 1px solid #fff0ca; border-radius: 999px; color: #25182f; background: linear-gradient(125deg, #fff0c4, #d9b36e); box-shadow: 0 10px 32px #08051188, 0 0 0 0 #f2d49a55; font: 700 .78rem/1.2 inherit; letter-spacing: .02em; cursor: pointer; opacity: 0; transition: opacity .25s ease, box-shadow .25s ease, translate .25s ease; translate: 0 10px; animation: wishFloatPulse 2.4s ease-in-out infinite; }
.wish-float-cta[hidden] { display: none; }
.wish-float-cta.is-visible { opacity: 1; translate: 0 0; }
.wish-float-cta:hover, .wish-float-cta:focus-visible { box-shadow: 0 12px 38px #08051199, 0 0 24px #f2d49a66; outline: 2px solid #fff0ca; outline-offset: 3px; }
.wish-float-arrow { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; color: #f6ddb0; background: #281b32; font-size: 1.1rem; animation: wishArrowBounce 1.35s ease-in-out infinite; }
@keyframes wishFloatPulse { 50% { box-shadow: 0 12px 38px #08051199, 0 0 0 8px #f2d49a00; } }
@keyframes wishArrowBounce { 50% { transform: translateY(4px); } }

/* Private birthday wishes: a keepsake card, not a public guestbook. */
.wish-card { position: relative; scroll-margin-top: 1rem; margin: 1.8rem 0 1.2rem; padding: 1.6rem; text-align: left; border: 1px solid #dfbe7955; border-radius: 22px; background: radial-gradient(ellipse at 0 0, #74475b55, transparent 70%), #101b2c77; overflow: hidden; }
.wish-kicker { margin: 0 0 .6rem; color: #dfbe79; font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; }
.wish-card h3 { margin: 0; color: #f2d49a; font: normal clamp(1.55rem, 5vw, 2.2rem)/1.15 Georgia, serif; }
.wish-intro { margin: .9rem 0 1.3rem; color: #d9cddb; font-size: .8rem; line-height: 1.65; }
#birthdayWishForm { position: relative; display: grid; gap: .65rem; }
#birthdayWishForm label { color: #f6f0e5; font-size: .74rem; }
#birthdayWishForm input, #birthdayWishForm textarea { width: 100%; box-sizing: border-box; min-height: 46px; border: 1px solid #b9c6d14d; border-radius: 12px; padding: .85rem; font: inherit; font-size: 16px; color: #f6f0e5; background: #0b142a88; }
#birthdayWishForm textarea { resize: vertical; line-height: 1.6; min-height: 130px; }
#birthdayWishForm input::placeholder, #birthdayWishForm textarea::placeholder { color: #ada0b9; font-size: .8rem; }
#birthdayWishForm input:focus, #birthdayWishForm textarea:focus { outline: 2px solid #dfbe79; outline-offset: 2px; }
.wish-counter { text-align: right; font-size: .65rem; color: #baacc9; }
.wish-spam-trap { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.wish-send { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: .95rem 1.2rem; min-height: 48px; border: 1px solid #fff0ca; border-radius: 999px; background: linear-gradient(125deg, #f2d49a, #d4ab68); color: #261a31; font-family: inherit; font-size: .82rem; font-weight: 700; cursor: pointer; transition: box-shadow .2s, transform .2s; }
.wish-send:hover:not(:disabled), .wish-send:focus-visible { box-shadow: 0 0 24px #dfbe7944; outline: 2px solid #fff0ca; outline-offset: 3px; }
.wish-send:disabled { cursor: default; opacity: .75; }
.wish-privacy { margin: .2rem 0 0; font-size: .68rem; line-height: 1.6; color: #c2b2c9; }
.wish-status { min-height: 1.6em; margin: .2rem 0 0; font-size: .78rem; line-height: 1.6; }
.wish-status[data-state=success] { color: #a8e5cb; }
.wish-status[data-state=error] { color: #ffd0cd; }
.wish-sent::after { content: '✦'; pointer-events: none; position: absolute; top: 40%; right: 8%; color: #f2d49a; font-size: 3rem; animation: wishSpark 1.4s ease both; }
@keyframes wishSpark { 0% { opacity: 0; transform: translateY(20px) scale(.3) rotate(-40deg); } 40% { opacity: 1; transform: translateY(-20px) scale(1.1) rotate(35deg); } 100% { opacity: 0; transform: translateY(-100px) scale(.4) rotate(120deg); } }
@media (max-width: 520px) {
  .wish-float-cta { right: auto; left: 50%; bottom: max(.8rem, env(safe-area-inset-bottom)); width: max-content; max-width: calc(100% - 24px); transform: translateX(-50%); white-space: nowrap; }
  .wish-card { padding: 1.2rem; }
}