/*
 * Cospe Christmas Party: site-level styles.
 *
 * Only the gaps not covered by wonder-image/lib:
 * full-viewport video hero (dvh, object-fit, fixed media layer), marquee strip,
 * editorial grids with uneven columns, 
 * scroll reveals, focus and press states.
 * Every color comes from the generated tokens in set-up/root.css.
 */

html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; }

:focus-visible { outline: 2px solid var(--accent-color); outline-offset: 3px; }

[data-num] { font-variant-numeric: tabular-nums; }
h1, h2, [data-balance] { text-wrap: balance; }
p { text-wrap: pretty; }

/* Skip link */
[data-skip] { position: absolute; left: 16px; top: -120px; z-index: 30; border-radius: 999px; }
[data-skip]:focus { top: 16px; }

/* Buttons: larger hit area, press feedback */
.btn { padding: 14px 28px !important; transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
.btn:active { transform: scale(.98); }

/* Underlined text links */
[data-link] { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; text-decoration-color: currentColor; transition: text-decoration-color .25s ease, opacity .25s ease; }
[data-link]:hover { opacity: .75; }

/* ---------- Hero ---------- */
[data-hero] {
    min-height: 100svh;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    isolation: isolate;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
/* Fallback when no video is uploaded: warm market lights on a night-fir base (bg-primary keeps the base color) */
[data-hero].bg-primary {
    background-image:
        radial-gradient(38% 30% at 14% 72%, rgba(var(--accent-color-rgb), .38), transparent 70%),
        radial-gradient(30% 26% at 86% 64%, rgba(var(--accent-color-rgb), .28), transparent 70%),
        radial-gradient(26% 22% at 50% 38%, rgba(var(--secondary-color-rgb), .22), transparent 70%),
        radial-gradient(60% 50% at 50% 110%, rgba(var(--primary-color-rgb), .9), transparent 70%) !important;
}
/* Hero photo / video: fixed behind the whole page. Sections marked data-over-media
   (hero, invitation, form) are transparent and let it show through. */
body:has([data-site-media]) { background: transparent !important; }
[data-site-media] { position: fixed; inset: 0; z-index: -1; }
[data-site-media] :is(video, picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; }
[data-over-media] :is(h1, h2, p, .text, .subtitle):not([data-invite] *, [data-surface] *) { text-shadow: 0 2px 14px rgba(var(--primary-color-rgb), .7); }
/* Form section: green veil at 50% with a light blur between the fixed photo and the form card */
#rsvp[data-over-media] {
    background: rgba(var(--primary-color-rgb), .5);
    -webkit-backdrop-filter: blur(6px);
    backdrop-filter: blur(6px);
}

[data-hero-bar] { box-shadow: none !important; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
[data-hero-logo] { width: clamp(104px, 12vw, 160px); }

[data-pill] {
    width: auto !important;
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    border: 1px solid rgba(var(--secondary-color-rgb), .45);
    border-radius: 999px;
    background: rgba(var(--primary-color-rgb), .25);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: background-color .25s ease, color .25s ease, border-color .25s ease;
}
[data-pill]:hover { background: var(--secondary-color); color: var(--primary-color) !important; border-color: var(--secondary-color); }

[data-hero-title] { width: 100%; text-align: center; text-shadow: 0 4px 24px rgba(var(--primary-color-rgb), .65); }
[data-hero-title].title-big { letter-spacing: -.035em; }
[data-hero-title] em { color: var(--accent-color); }

[data-hero-toggle] {
    right: 20px;
    bottom: 20px;
    width: 44px;
    height: 44px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    border: 1px solid rgba(var(--secondary-color-rgb), .45);
    background: rgba(var(--primary-color-rgb), .35);
    cursor: pointer;
    transition: background-color .25s ease;
}
[data-hero-toggle]:hover { background: rgba(var(--primary-color-rgb), .7); }

/* ---------- Marquee ---------- */
[data-marquee-track] { width: max-content; animation: marquee 38s linear infinite; }
[data-marquee]:hover [data-marquee-track] { animation-play-state: paused; }
[data-marquee-group] { flex-shrink: 0; margin: 0; padding: 0; list-style: none; }
[data-marquee-group] li {
    display: flex;
    align-items: center;
    white-space: nowrap;
    font-family: var(--title-font-family);
    font-style: italic;
    font-size: clamp(1.5rem, 3vw, 2.5rem);
    line-height: 1.1;
}
[data-marquee-group] li::after { content: "\2726"; font-style: normal; font-size: .45em; margin: 0 .9em; opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* Invitation card: printed-card frame, centered prose instead of a table */
[data-invite] {
    position: relative;
    max-width: 780px;
    margin: 0 auto;
    padding: clamp(56px, 8vw, 104px) clamp(28px, 7vw, 88px);
    border-radius: 6px;
    box-shadow: 0 50px 100px -60px rgba(var(--primary-color-rgb), .55);
}
[data-invite]::before {
    content: "";
    position: absolute;
    inset: clamp(10px, 1.6vw, 16px);
    border: 1px solid rgba(var(--primary-color-rgb), .28);
    border-radius: 3px;
    pointer-events: none;
}
[data-invite] .title-big { letter-spacing: -.025em; }
[data-invite] .text { max-width: 46ch; margin-left: auto; margin-right: auto; }
/* lib text classes float left at 100% width: centered card content needs normal flow */
[data-invite] :is(p, h2, div, a) { float: none !important; }
[data-invite] .btn { display: inline-block; }
[data-invite-script] { font-family: var(--title-font-family); font-style: italic; color: var(--accent-color); }
[data-invite-ornament] {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 16px;
    width: 100%;
    color: var(--accent-color);
    font-size: 12px;
}
[data-invite-ornament]::before, [data-invite-ornament]::after {
    content: "";
    width: 56px;
    height: 1px;
    background: rgba(var(--primary-color-rgb), .3);
}

[data-surface] { border-radius: 28px; box-shadow: 0 40px 90px -50px rgba(var(--primary-color-rgb), .45); }

/* ---------- Footer ---------- */
[data-footer-mark] em { color: var(--accent-color); }
/* lib text classes float left at 100% width: keep footer rows in normal flow so they do not overlap the links */
[data-footer] :is(p, div) { float: none !important; }
[data-footer] .bt-1 { border-color: rgba(var(--secondary-color-rgb), .25) !important; }

/* ---------- Reveal (only once JS is ready, so content is never hidden without it) ---------- */
html[data-reveal-ready] [data-reveal] {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .9s cubic-bezier(.2, .7, .2, 1), transform .9s cubic-bezier(.2, .7, .2, 1);
}
html[data-reveal-ready] [data-reveal].is-visible { opacity: 1; transform: none; }

/* ---------- Tablet / phone ---------- */
@media (max-width: 768px) {
    /* Large titles at half the backend size on phones */
    .title-big { font-size: calc(var(--title-big-font-size) * .7) !important; line-height: calc(var(--title-big-line-height) * .7) !important; }
    [data-hero-toggle] { right: 16px; bottom: 16px; }
    [data-surface] { border-radius: 20px; }
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    [data-marquee-track] { animation: none; }
    html[data-reveal-ready] [data-reveal] { opacity: 1; transform: none; transition: none; }
    .btn, [data-pill], [data-link] { transition: none; }
}