/* «جشن‌نامه» (scripts 92-95): the long page behind the sealed envelope. WeddingPage.razor.

   One narrow column of ivory paper, read top to bottom like a folded invitation; on a wide screen
   it stands in the middle of a blurred backdrop. Phone first: the browser inside Instagram and
   the messengers is where most guests open it.

   Everything is prefixed wp- and nothing here touches the card pages (guest.css), which load a
   different stylesheet. */

@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url('fonts/NotoNastaliqUrdu-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Noto Nastaliq Urdu';
    src: url('fonts/NotoNastaliqUrdu-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

.wp {
    --paper: #fbf7f0;
    --paper-deep: #f3ebdf;
    --ink: #3a302b;
    --ink-soft: #7a6c63;
    --gold: #b98a3e;
    --gold-light: #e6c98f;
    --line: rgba(185, 138, 62, .28);
    --script: 'Noto Nastaliq Urdu', 'Vazirmatn', serif;
    --body: 'Vazirmatn', Tahoma, sans-serif;
    position: relative;
    min-height: 100vh;
    background: #2a221d;
    color: var(--ink);
    font-family: var(--body);
    -webkit-tap-highlight-color: transparent;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

html:has(.wp) { background: #2a221d; scroll-behavior: smooth; }
html:has(.wp) body { margin: 0; }
html.wp-locked, html.wp-locked body { overflow: hidden; }

.wp *, .wp *::before, .wp *::after { box-sizing: border-box; }

.wp-hall {
    position: fixed;
    inset: 0;
    background: center / cover no-repeat;
    filter: blur(18px) brightness(.5);
    transform: scale(1.12);
}

.wp-page {
    position: relative;
    max-width: 480px;
    margin: 0 auto;
    background: var(--paper);
    box-shadow: 0 0 80px rgba(0, 0, 0, .45);
    overflow: hidden;
}

.wp-page section {
    padding: 56px max(24px, env(safe-area-inset-right, 0px)) 56px max(24px, env(safe-area-inset-left, 0px));
    text-align: center;
}

.wp-eyebrow { margin: 0 0 10px; font-size: 12px; letter-spacing: .12em; color: var(--gold); }

.wp h2 { margin: 0 0 18px; font: 400 25px/2 var(--script); color: var(--ink); text-wrap: balance; }

.wp p { margin: 0; line-height: 2.1; font-size: 15px; }

.wp-ornament {
    width: 120px;
    height: 14px;
    margin: 22px auto;
    background:
        radial-gradient(circle, var(--gold) 0 3px, transparent 3.5px) center / 14px 14px no-repeat,
        linear-gradient(var(--line), var(--line)) center / 100% 1px no-repeat;
}

/* ------------------------------------------------ the envelope at the door */

/* Only once the script is running: without it the page is simply open. */
.wp-gate { display: none; }
.wp.is-live .wp-gate { display: block; }

.wp-gate {
    position: fixed;
    inset: 0;
    z-index: 50;
    overflow: hidden;
    background: radial-gradient(70% 55% at 50% 45%, #fffaf0, #efe2cc 75%, #e2d0b2);
    transition: opacity 1s ease, visibility 0s 1s;
}

.wp-gate.is-gone { opacity: 0; visibility: hidden; pointer-events: none; }

/* The envelope's picture is 3:4. It covers the screen with the seal held at the same spot, so a
   tall phone loses only the outer margins of the ornament. */
.wp-env {
    position: absolute;
    left: 50%;
    top: 46%;
    width: max(100vw, 75vh);
    width: max(100vw, 75svh);
    aspect-ratio: 3 / 4;
    transform: translate(-50%, -45.14%);
    perspective: 1600px;
    transition: transform 1.6s cubic-bezier(.6, 0, .2, 1);
}

.wp-gate.is-open .wp-env { transform: translate(-50%, -45.14%) scale(1.08); }

/* A screen wider than the envelope (a computer, a phone turned sideways): the whole envelope,
   lying on the table, rather than its middle blown up to the width of the screen. */
@media (min-aspect-ratio: 3/4) {
    .wp-env {
        width: 66vh;
        width: 66svh;
        top: 48%;
        filter: drop-shadow(0 30px 50px rgba(80, 55, 30, .3));
    }
    .wp-gate-words { bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
}

.wp-flap {
    position: absolute;
    inset: 0;
    transform-style: preserve-3d;
    transition: transform 1.5s cubic-bezier(.55, 0, .25, 1), opacity .9s ease .7s;
}

.wp-sheet { position: absolute; inset: 0; filter: drop-shadow(0 0 6px rgba(80, 60, 30, .25)); }
.wp-sheet > div { position: absolute; inset: 0; }

.wp-flap img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    user-select: none;
    -webkit-user-select: none;
    -webkit-user-drag: none;
    pointer-events: none;
}

/* The gilding: the same picture with its ornaments in gold, uncovered from the seal outwards. */
.wp-gold {
    -webkit-mask: radial-gradient(circle at 50% 45.14%, #000 45%, transparent 55%) 50% 45.14% / 0% 0% no-repeat;
    mask: radial-gradient(circle at 50% 45.14%, #000 45%, transparent 55%) 50% 45.14% / 0% 0% no-repeat;
    transition: -webkit-mask-size 2.2s cubic-bezier(.3, .1, .3, 1), mask-size 2.2s cubic-bezier(.3, .1, .3, 1);
}

.wp-gate.is-lit .wp-gold { -webkit-mask-size: 340% 340%; mask-size: 340% 340%; }

/* Each flap is the whole picture cut to its own shape, so the four meet exactly as drawn. These
   points are where the white-peony envelope's folds are; another envelope brings its own. */
.wp-flap-top .wp-sheet > div    { clip-path: polygon(5.56% 0, 93.75% 0, 49.77% 39.67%); }
.wp-flap-left .wp-sheet > div   { clip-path: polygon(0 0, 5.56% 0, 49.77% 39.67%, 49.9% 46.18%, 0 94.18%); }
.wp-flap-right .wp-sheet > div  { clip-path: polygon(100% 0, 93.75% 0, 49.77% 39.67%, 49.9% 46.18%, 100% 94.97%); }
.wp-flap-bottom .wp-sheet > div { clip-path: polygon(0 94.18%, 49.9% 46.18%, 100% 94.97%, 100% 100%, 0 100%); }

.wp-flap-left   { transform-origin: 0 50%; }
.wp-flap-right  { transform-origin: 100% 50%; }
.wp-flap-top    { transform-origin: 50% 0; }
.wp-flap-bottom { transform-origin: 50% 100%; }

.wp-gate.is-open .wp-flap-left   { transform: rotateY(-115deg); opacity: 0; }
.wp-gate.is-open .wp-flap-right  { transform: rotateY(115deg); opacity: 0; }
.wp-gate.is-open .wp-flap-top    { transform: rotateX(115deg); opacity: 0; transition-delay: .25s, .95s; }
.wp-gate.is-open .wp-flap-bottom { transform: rotateX(-115deg); opacity: 0; transition-delay: .25s, .95s; }

/* The wax seal, in two halves that part where it breaks; each rides on its side flap. */
.wp-half {
    position: absolute;
    left: 50%;
    top: 45.14%;
    width: 33%;
    aspect-ratio: 647 / 665;
    transform: translate(-50%, -50%);
    background: center / 100% 100% no-repeat;
    filter: drop-shadow(0 8px 10px rgba(110, 50, 50, .35));
    transition: transform .5s cubic-bezier(.3, 1.4, .5, 1), filter .8s ease;
    pointer-events: none;
}

.wp-half-l { clip-path: polygon(0 0, 52% 0, 47% 30%, 53% 55%, 48% 78%, 51% 100%, 0 100%); }
.wp-half-r { clip-path: polygon(52% 0, 100% 0, 100% 100%, 51% 100%, 48% 78%, 53% 55%, 47% 30%); }

.wp-gate.is-lit .wp-half { filter: drop-shadow(0 0 18px rgba(255, 214, 140, .9)) drop-shadow(0 8px 10px rgba(110, 50, 50, .3)) brightness(1.08); }
.wp-gate.is-cracked .wp-half-l { transform: translate(-53%, -50%) rotate(-3deg); }
.wp-gate.is-cracked .wp-half-r { transform: translate(-47%, -50%) rotate(3deg); }

.wp-seal {
    position: absolute;
    left: 50%;
    top: 45.14%;
    z-index: 5;
    width: 33%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border: 0;
    border-radius: 50%;
    padding: 0;
    background: none;
    cursor: pointer;
}

.wp-seal::before {
    content: "";
    position: absolute;
    inset: -8%;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 236, 200, .9), 0 0 30px 6px rgba(240, 200, 130, .5);
    animation: wp-ring 2.4s ease-in-out infinite;
}

.wp-seal:focus-visible { outline: 2px solid var(--gold); outline-offset: 10px; }

@keyframes wp-ring {
    0%, 100% { opacity: .15; transform: scale(.94); }
    50%      { opacity: .9;  transform: scale(1.04); }
}

.wp-gate.is-lit .wp-seal::before { animation: none; opacity: 0; }

.wp-flash {
    position: absolute;
    left: 50%;
    top: 45.14%;
    width: 33%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%) scale(.4);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 246, 220, .95), rgba(255, 214, 140, .5) 35%, transparent 70%);
    opacity: 0;
    pointer-events: none;
}

.wp-gate.is-lit .wp-flash { animation: wp-flash 1.6s ease-out forwards; }

@keyframes wp-flash {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(.4); }
    25%  { opacity: 1; transform: translate(-50%, -50%) scale(1.6); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(4); }
}

.wp-gate-words {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(26px + env(safe-area-inset-bottom, 0px));
    z-index: 6;
    text-align: center;
    color: var(--ink-soft);
    font-size: 13px !important;
    transition: opacity .5s ease;
}

.wp-gate-words b {
    display: block;
    margin-bottom: 2px;
    padding-inline: 16px;
    font: 400 19px/2.1 var(--script);
    color: var(--ink);
}

.wp-gate-words span { animation: wp-hint 2.6s ease-in-out infinite; }

.wp-gate.is-lit .wp-gate-words { opacity: 0; }

@keyframes wp-hint {
    0%, 100% { opacity: .55; }
    50%      { opacity: 1; }
}

/* ------------------------------------------------ the couple */

.wp-page .wp-hero {
    position: relative;
    height: 100vh;
    height: 100svh;
    max-height: 860px;
    min-height: 520px;
    padding: 0;
    overflow: hidden;
    color: #fff;
    background: #3a302b;
}

.wp-slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 1.8s ease;
}

.wp-slide img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 22%;
}

/* A landscape photo on a tall screen (wedding.js sets is-wide): its middle, where the couple
   usually stand, filling the screen - with the same slow zoom-out as every slide. */
.wp-slide.is-wide img { object-position: center 35%; }

.wp-slide.is-on { opacity: 1; animation: wp-kenburns 9s ease-out both; }

@keyframes wp-kenburns {
    from { transform: scale(1.12) translateY(-1.5%); }
    to   { transform: scale(1); }
}

.wp-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(30, 20, 15, .25) 0%, transparent 30%, transparent 45%, rgba(30, 20, 15, .82) 100%);
}

/* No photos: the names on the paper's own colour. */
.wp-hero.is-plain { background: radial-gradient(80% 60% at 50% 40%, #fffaf2, #efe2cc); color: var(--ink); }
.wp-hero.is-plain::after { display: none; }
.wp-hero.is-plain .wp-hero-words { inset: 0; display: grid; align-content: center; }
.wp-hero.is-plain .wp-cue { border-color: rgba(58, 48, 43, .5); }
.wp-hero.is-plain .wp-cue::after { background: var(--ink); }

.wp-hero-words {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    padding: 0 24px calc(44px + env(safe-area-inset-bottom, 0px));
}

.wp-hero-words .wp-eyebrow { color: var(--gold-light); }
.wp-hero.is-plain .wp-eyebrow { color: var(--gold); }

.wp-names {
    margin: 0;
    font: 700 clamp(34px, 11vw, 46px)/2.2 var(--script);
    background: linear-gradient(100deg, #f7e2b0 0%, #fff6dc 40%, #d6ab5d 60%, #f7e2b0 100%) 0 0 / 200% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    filter: drop-shadow(0 2px 10px rgba(0, 0, 0, .45));
    animation: wp-shine 6s linear infinite;
    text-wrap: balance;
}

.wp-hero.is-plain .wp-names {
    background-image: linear-gradient(100deg, #9a6f2c 0%, #c99a4a 40%, #8a5f22 60%, #9a6f2c 100%);
    filter: none;
}

@keyframes wp-shine { to { background-position: -200% 0; } }

.wp-hero-date { font-size: 14px !important; letter-spacing: .04em; opacity: .92; }

.wp-cue {
    display: block;
    width: 22px;
    height: 34px;
    margin: 20px auto 0;
    border: 1.5px solid rgba(255, 255, 255, .7);
    border-radius: 12px;
    position: relative;
}

.wp-cue::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 7px;
    width: 3px;
    height: 7px;
    margin-left: -1.5px;
    border-radius: 2px;
    background: #fff;
    animation: wp-cue 1.8s ease-in-out infinite;
}

@keyframes wp-cue {
    0%   { opacity: 0; transform: translateY(0); }
    40%  { opacity: 1; }
    100% { opacity: 0; transform: translateY(12px); }
}

/* ------------------------------------------------ love, written */

.wp-page .wp-love { background: radial-gradient(60% 40% at 50% 0%, rgba(230, 201, 143, .25), transparent 70%), var(--paper); }

.wp-love-word {
    display: inline-block;
    margin: 0 !important;
    font: 700 88px/2.2 var(--script) !important;
    color: var(--ink);
    clip-path: inset(0 0 0 0);
}

/* Written from right to left once it scrolls into view - only where the script is there to do it. */
.wp.is-live .wp-love-word { clip-path: inset(0 0 0 100%); }
.wp.is-live .wp-love-word.is-written { animation: wp-write 2.4s cubic-bezier(.6, .1, .3, 1) forwards; }

@keyframes wp-write {
    from { clip-path: inset(0 0 0 100%); }
    to   { clip-path: inset(0 0 0 0); }
}

.wp-verse { font: 400 16px/2.5 var(--script) !important; color: var(--ink-soft); }
.wp-verse span { display: block; }
.wp-verse small { display: block; margin-top: 4px; font: 400 12px var(--body); color: var(--gold); }

.wp-intro { white-space: normal; }

/* ------------------------------------------------ the gold card to scratch */

.wp-scratch {
    position: relative;
    width: min(340px, 100%);
    aspect-ratio: 16 / 10;
    margin: 0 auto;
    border-radius: 14px;
    background: #fffdf8;
    box-shadow: 0 18px 40px rgba(110, 80, 40, .18), 0 0 0 1px var(--line) inset;
    display: grid;
    place-items: center;
    align-content: center;
    gap: 2px;
    overflow: hidden;
}

.wp-day { font: 400 26px/2 var(--script); color: var(--ink); }
.wp-date { font-size: 17px; font-weight: 700; color: var(--gold); }
.wp-hour { font-size: 13px; color: var(--ink-soft); }

.wp-foil {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    touch-action: none;
    cursor: grab;
    transition: opacity .8s ease;
}

.wp-scratch.is-open .wp-foil { opacity: 0; pointer-events: none; }

.wp .wp-scratch-note { margin-top: 16px; font-size: 13px; color: var(--ink-soft); }

.wp-count { display: flex; justify-content: center; gap: 10px; margin-top: 24px; }
.wp-count[hidden] { display: none; }

.wp-count div {
    width: 68px;
    padding: 12px 0 8px;
    border-radius: 12px;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line) inset;
}

.wp-count b { display: block; font-size: 24px; font-weight: 500; color: var(--ink); font-variant-numeric: tabular-nums; }
.wp-count span { font-size: 11px; color: var(--ink-soft); }

.wp-page .wp-when { background: var(--paper-deep); }

/* ------------------------------------------------ the evening, hour by hour */

.wp-plan ol {
    position: relative;
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 320px;
    text-align: right;
}

.wp-plan ol::before {
    content: "";
    position: absolute;
    right: 27px;
    top: 10px;
    bottom: 10px;
    width: 1px;
    background: linear-gradient(var(--gold-light), var(--gold), var(--gold-light));
}

.wp-plan li {
    position: relative;
    display: grid;
    grid-template-columns: 56px 1fr;
    align-items: center;
    gap: 14px;
    padding: 10px 0;
    transition: transform .8s cubic-bezier(.2, .8, .2, 1);
}

.wp.is-live .wp-plan li { transform: translateX(-14px); }
.wp.is-live .wp-plan li.is-in { transform: none; }

.wp-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--gold-light) inset, 0 6px 16px rgba(110, 80, 40, .12);
    color: var(--gold);
}

.wp-icon svg { width: 26px; height: 26px; }
.wp-plan time { display: block; font-size: 12px; color: var(--gold); font-variant-numeric: tabular-nums; }
.wp-plan strong { font-weight: 500; font-size: 15px; }

/* ------------------------------------------------ where */

.wp-page .wp-place { background: var(--paper-deep); }

.wp-place-pic {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 10;
    margin-bottom: 18px;
    border-radius: 14px;
    object-fit: cover;
    box-shadow: 0 18px 40px rgba(110, 80, 40, .2);
}

.wp-place h3 { margin: 0 0 4px; font: 400 22px/2 var(--script); }
.wp-place address { font-style: normal; font-size: 14px; line-height: 1.9; color: var(--ink-soft); }

/* The hall on a map: warm like the paper around it, the pin in the page's gold. */
.wp-map {
    height: 230px;
    margin-top: 18px;
    border-radius: 16px;
    overflow: hidden;
    direction: ltr;
    background: var(--paper);
    box-shadow: 0 0 0 1px var(--line), 0 14px 32px rgba(110, 80, 40, .14);
    isolation: isolate;
}
.wp-map[hidden] { display: none; }
.wp-map .leaflet-tile-pane { filter: sepia(.22) saturate(.85) brightness(1.03); }
.wp-map .leaflet-control-attribution { font-size: 9px; }
.wp-map .leaflet-bar { border: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(60, 40, 15, .18); }
.wp-map .leaflet-bar a { color: var(--ink); }
.wp-map .wp-pin { background: none; border: 0; filter: drop-shadow(0 4px 6px rgba(60, 40, 15, .35)); }
.wp-map .wp-pin svg { display: block; width: 40px; height: 52px; }

.wp-ways { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 20px; }

.wp-ways a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 48px;
    border-radius: 12px;
    background: var(--paper);
    color: var(--ink);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    box-shadow: 0 0 0 1px var(--line) inset;
}

.wp-ways a.wp-ride { grid-column: 1 / -1; background: #00b259; color: #fff; box-shadow: none; }
.wp-ways svg { width: 18px; height: 18px; flex: none; }
.wp-ways a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ------------------------------------------------ photos */

.wp-grid { columns: 2; column-gap: 8px; }

.wp-grid button {
    display: block;
    width: 100%;
    margin: 0 0 8px;
    break-inside: avoid;
    padding: 0;
    border: 0;
    border-radius: 10px;
    overflow: hidden;
    cursor: zoom-in;
    background: var(--paper-deep);
}

.wp-grid img { display: block; width: 100%; height: auto; min-height: 80px; transition: transform .6s ease; }
.wp-grid button:hover img { transform: scale(1.05); }
.wp-grid button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

.wp-lightbox {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: grid;
    place-items: center;
    padding: 16px;
    background: rgba(20, 14, 10, .94);
}

.wp-lightbox[hidden] { display: none; }

.wp-lightbox img { max-width: 100%; max-height: 80vh; max-height: 80svh; border-radius: 8px; box-shadow: 0 30px 80px rgba(0, 0, 0, .6); }

.wp-lb-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    display: flex;
    justify-content: center;
    gap: 10px;
}

.wp-lb-bar button, .wp-lb-close {
    height: 42px;
    padding: 0 18px;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font: 500 14px var(--body);
    cursor: pointer;
}

.wp-lb-close { position: absolute; top: calc(16px + env(safe-area-inset-top, 0px)); left: 16px; width: 42px; padding: 0; font-size: 22px; }

/* ------------------------------------------------ the answer */

.wp-page .wp-rsvp { background: radial-gradient(70% 60% at 50% 100%, rgba(217, 167, 160, .22), transparent 70%), var(--paper); }

.wp-sample { margin-top: 10px !important; font-size: 12.5px !important; color: var(--ink-soft); }

.wp-rsvp-form { max-width: 340px; margin: 20px auto 0; }
.wp-rsvp-form.is-done, .wp-thanks { display: none; }
.wp-rsvp-form.is-done + .wp-thanks { display: block; }

.wp-trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

.wp-field { display: grid; gap: 6px; text-align: right; font-size: 13px; color: var(--ink-soft); }

.wp-field input {
    height: 50px;
    padding: 0 16px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--line) inset;
    color: var(--ink);
    font: 400 16px var(--body);
}

.wp-field input:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; }

.wp-choice { display: flex; gap: 10px; margin-top: 16px; }

/* Specific enough to beat the site's own submit button (digicard.css, button[type=submit],
   hover included), which would paint these as the panel's blue pills. */
.wp .wp-rsvp .wp-choice button,
.wp .wp-rsvp .wp-choice button:hover {
    flex: 1;
    height: 52px;
    padding: 0 12px;
    border: 0;
    border-radius: 999px;
    font: 500 15px var(--body);
    cursor: pointer;
}

.wp .wp-rsvp .wp-choice button.wp-yes,
.wp .wp-rsvp .wp-choice button.wp-yes:hover { background: linear-gradient(135deg, #d4a85a, #b98a3e); color: #fff; box-shadow: 0 10px 24px rgba(185, 138, 62, .35); }
.wp .wp-rsvp .wp-choice button.wp-no,
.wp .wp-rsvp .wp-choice button.wp-no:hover { background: transparent; color: var(--ink-soft); box-shadow: 0 0 0 1px var(--line) inset; }
.wp-choice button:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px; }
.wp-rsvp-form.is-busy .wp-choice button { opacity: .6; pointer-events: none; }

.wp .wp-error { min-height: 1.8em; margin-top: 10px; font-size: 13px; color: #a2453b; }

.wp-thanks p { margin-top: 18px; font: 400 18px/2.3 var(--script); color: var(--gold); }

.wp-link { margin-top: 8px; border: 0; background: none; color: var(--ink-soft); font: 400 13px var(--body); text-decoration: underline; cursor: pointer; }

/* ------------------------------------------------ notes of congratulation */

.wp-page .wp-wishes { background: var(--paper-deep); }

.wp-wish-form { display: grid; gap: 12px; max-width: 340px; margin: 18px auto 0; }

.wp-field textarea {
    min-height: 96px;
    padding: 12px 16px;
    border: 0;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 0 0 1px var(--line) inset;
    color: var(--ink);
    font: 400 15px/1.9 var(--body);
    resize: vertical;
}

.wp-field textarea:focus { outline: 2px solid var(--gold-light); outline-offset: 1px; }

.wp .wp-wishes button.wp-send,
.wp .wp-wishes button.wp-send:hover {
    height: 50px;
    padding: 0 24px;
    border: 0;
    border-radius: 999px;
    background: var(--ink);
    color: var(--paper);
    font: 500 15px var(--body);
    cursor: pointer;
}

.wp-wish-form.is-busy .wp-send { opacity: .6; pointer-events: none; }

.wp .wp-wish-sent { margin-top: 14px; font: 400 16px/2.2 var(--script); color: var(--gold); }
.wp .wp-wish-sent[hidden] { display: none; }

.wp-foot {
    padding: 22px 24px calc(30px + env(safe-area-inset-bottom, 0px));
    text-align: center;
    font-size: 13px;
    background: var(--paper-deep);
}

.wp-foot a { color: var(--gold); text-decoration: none; }

/* ------------------------------------------------ the song and the gold in the air */

.wp-music {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    left: max(14px, calc(50% - 240px + 14px));
    z-index: 40;
    width: 42px;
    height: 42px;
    border: 0;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: rgba(255, 250, 240, .88);
    color: var(--gold);
    box-shadow: 0 6px 18px rgba(0, 0, 0, .2);
    cursor: pointer;
}

.wp-music svg { width: 20px; height: 20px; }
.wp-music.is-playing svg { animation: wp-spin 6s linear infinite; }
.wp-music:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }

@keyframes wp-spin { to { transform: rotate(360deg); } }

.wp-burst { position: fixed; inset: 0; z-index: 45; width: 100%; height: 100%; pointer-events: none; }

/* The owner's own controls (back to the panel, edit) sit over the page's top corner. */
.wp-owner {
    position: fixed;
    top: calc(14px + env(safe-area-inset-top, 0px));
    right: max(14px, calc(50% - 240px + 14px));
    z-index: 40;
    display: flex;
    gap: 8px;
}

.wp-owner a {
    display: inline-flex;
    align-items: center;
    height: 42px;
    padding: 0 16px;
    border-radius: 999px;
    background: rgba(58, 48, 43, .82);
    color: #fff;
    font: 500 13px var(--body);
    text-decoration: none;
}

@media (prefers-reduced-motion: reduce) {
    .wp *, .wp *::before, .wp *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
    .wp.is-live .wp-love-word { clip-path: none; }
}

@media print {
    .wp-gate, .wp-music, .wp-burst, .wp-owner { display: none !important; }
}