/* Projection wall – identity colours at night: deep slate with sand and blush light, so photos pop on a projector. */
body { margin: 0; background: #1F222B; overflow: hidden; }

.live {
    --live-bg-1: #1F222B;
    --live-bg-2: #3B4457;
    --live-sky: #D4C1A0;
    --live-mint: #E7A9B8;
    --live-text: #F6F5F1;
    position: fixed;
    inset: 0;
    display: grid;
    grid-template-rows: auto 1fr auto;
    gap: 1.5vh;
    padding: 2.5vh 2.5vw;
    color: var(--live-text);
    font-family: "Montserrat", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
    background:
        radial-gradient(ellipse at 15% 0%, rgba(212, 193, 160, .22) 0%, transparent 45%),
        radial-gradient(ellipse at 90% 100%, rgba(231, 169, 184, .18) 0%, transparent 45%),
        linear-gradient(160deg, var(--live-bg-2), var(--live-bg-1) 70%);
    box-sizing: border-box;
}

.live-bokeh { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.live-bokeh span {
    position: absolute;
    left: calc((var(--i) * 7.3%) + 2%);
    bottom: -12vh;
    width: calc(3vh + (var(--i) * 0.45vh));
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 193, 160, .35), rgba(231, 169, 184, 0) 70%);
    animation: live-float calc(18s + var(--i) * 1.7s) linear infinite;
    animation-delay: calc(var(--i) * -2.3s);
}
@keyframes live-float {
    from { transform: translateY(0) scale(1); opacity: 0; }
    15% { opacity: 1; }
    to { transform: translateY(-115vh) scale(1.4); opacity: 0; }
}

.live-header { position: relative; text-align: center; z-index: 1; }
.live-swallows { display: block; height: clamp(2.2rem, 6vh, 4.4rem); width: auto; margin: 0 auto .4vh; }
.live-names {
    font-family: "Brittany Signature", "Brittany", "Allison", cursive;
    font-style: normal;
    letter-spacing: 0;
    font-size: clamp(3rem, 8.5vh, 6.6rem);
    line-height: 1;
    color: #fff;
    text-shadow: 0 2px 30px rgba(212, 193, 160, .45);
}
.live-sub {
    margin-top: .6vh;
    font-size: clamp(.9rem, 1.8vh, 1.3rem);
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--live-sky);
}
.live-hashtag { margin-left: 1.2em; color: var(--live-mint); letter-spacing: .1em; text-transform: none; }

.live-stage {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: minmax(0, 2.2fr) minmax(0, 1fr);
    gap: 2vw;
    min-height: 0;
}

/* ---------- photos ---------- */
.live-photos {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    background: rgba(0, 0, 0, .3);
    box-shadow: 0 30px 80px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.live-slide {
    position: absolute;
    inset: 0;
    margin: 0;
    display: grid;
    place-items: center;
    opacity: 0;
    transition: opacity 1.6s ease;
}
.live-slide.is-visible { opacity: 1; }
.live-slide.is-leaving { opacity: 0; }
.live-slide-backdrop {
    position: absolute;
    inset: -40px;
    background-size: cover;
    background-position: center;
    filter: blur(40px) brightness(.45) saturate(1.2);
}
.live-slide img {
    position: relative;
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    transform: scale(1);
}
.live-slide.is-visible img { animation: live-kenburns 9s ease-out forwards; }
@keyframes live-kenburns {
    to { transform: scale(1.06) translate(var(--kb-x, 0), var(--kb-y, 0)); }
}
.live-slide.is-new.is-visible img { animation: live-pop 1.2s cubic-bezier(.2, .9, .3, 1.2), live-kenburns 9s 1.2s ease-out forwards; }
@keyframes live-pop {
    from { transform: scale(.85); filter: brightness(1.6); }
    to { transform: scale(1); filter: brightness(1); }
}
.live-slide figcaption {
    position: absolute;
    left: 2vw;
    bottom: 2vh;
    display: flex;
    align-items: center;
    gap: .8em;
    padding: .7em 1.2em;
    border-radius: 999px;
    font-size: clamp(.9rem, 2vh, 1.4rem);
    background: rgba(31, 34, 43, .55);
    backdrop-filter: blur(10px);
}
.live-badge {
    padding: .25em .8em;
    border-radius: 999px;
    font-size: .75em;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: #3A1E28;
    background: var(--live-mint);
    animation: live-glow 1.6s ease-in-out infinite alternate;
}
@keyframes live-glow { to { box-shadow: 0 0 24px rgba(231, 169, 184, .9); } }

.live-empty {
    position: absolute;
    inset: 0;
    display: grid;
    place-content: center;
    text-align: center;
    font-size: clamp(1.1rem, 2.6vh, 2rem);
    font-family: "Cormorant Garamond", Georgia, serif;
    opacity: .9;
}
.live-empty[hidden] { display: none; }
.live-empty-heart {
    font-size: clamp(3rem, 10vh, 7rem);
    color: var(--live-sky);
    animation: live-heartbeat 1.8s ease-in-out infinite;
}
@keyframes live-heartbeat {
    0%, 100% { transform: scale(1); }
    15% { transform: scale(1.15); }
    30% { transform: scale(1); }
    45% { transform: scale(1.1); }
}

/* ---------- side: messages + join QR ---------- */
.live-side { display: grid; grid-template-rows: 1fr auto; gap: 1.6vh; min-height: 0; }
.live-messages {
    display: flex;
    flex-direction: column;
    gap: 1.6vh;
    overflow: hidden;
    min-height: 0;
    mask-image: linear-gradient(to bottom, #000 80%, transparent);
}
.live-message {
    padding: 2vh 1.4vw;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .05));
    border: 1px solid rgba(255, 255, 255, .12);
    backdrop-filter: blur(12px);
    opacity: 0;
    transform: translateX(60px) scale(.96);
    transition: opacity .8s ease, transform .8s cubic-bezier(.2, .9, .3, 1.1);
}
.live-message.is-visible { opacity: 1; transform: none; }
.live-message.is-leaving { opacity: 0; transform: translateY(20px); }
.live-message.is-new { border-color: rgba(231, 169, 184, .7); box-shadow: 0 0 40px rgba(231, 169, 184, .2); }
.live-message p {
    margin: 0 0 1vh;
    font-family: "Cormorant Garamond", Georgia, serif;
    font-size: clamp(1.05rem, 2.5vh, 2rem);
    font-style: italic;
    line-height: 1.3;
}
.live-message span {
    font-size: clamp(.8rem, 1.6vh, 1.1rem);
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--live-mint);
}

.live-join {
    display: flex;
    align-items: center;
    gap: 1.2vw;
    padding: 1.4vh 1.2vw;
    border-radius: 20px;
    background: rgba(255, 255, 255, .95);
    color: #2E3240;
    box-shadow: 0 20px 50px rgba(0, 0, 0, .35);
}
.live-join .qr-code { flex: none; border-radius: 10px; overflow: hidden; line-height: 0; }
.live-join .qr-code svg { width: 100%; height: auto; display: block; }
.live-join div:last-child { display: flex; flex-direction: column; gap: .3vh; }
.live-join strong { font-family: "Cormorant Garamond", Georgia, serif; font-size: clamp(1rem, 2.4vh, 1.8rem); }
.live-join span { font-size: clamp(.75rem, 1.6vh, 1.1rem); color: #6D6860; }
.live-code b { color: #9A5C4A; letter-spacing: .15em; }

/* ---------- status ---------- */
.live-status {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: .5em;
    font-size: .8rem;
    opacity: .6;
}
.live-status-dot { width: .6em; height: .6em; border-radius: 50%; background: var(--live-sky); }
.live-status[data-state="online"] .live-status-dot { background: var(--live-mint); animation: live-glow 1.6s ease-in-out infinite alternate; }
.live-status[data-state="offline"] .live-status-dot { background: #CF4375; }

/* Portrait screens / phones: stack photos over messages. */
@media (max-aspect-ratio: 1/1) {
    .live-stage { grid-template-columns: 1fr; grid-template-rows: 1.5fr 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .live-bokeh span, .live-slide.is-visible img, .live-empty-heart, .live-badge { animation: none !important; }
}

/* Readable ampersand in the couple names */
.live-names .amp { display: inline-block; margin: 0 .14em; font-family: "Cormorant Garamond", Georgia, serif; font-style: normal; font-weight: 300; font-size: .5em; vertical-align: .25em; color: var(--live-mint); -webkit-text-fill-color: var(--live-mint); }
.live-names .couple-second { white-space: nowrap; }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; }