/**
 * Pearl Sky — سماء اللؤلؤ
 * Pearl white · dusty blue · silver. No intro film: a sealed cover opens
 * when the guest releases the doves.
 */

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

:root {
    --pearl: #fdfcfb;
    --mist: #f3f6f8;
    --sky: #e7eff4;
    --sky-2: #d7e4ec;
    --haze: #c2d3e0;
    --blue: #6d92ad;
    --blue-soft: #9db8cb;
    --blue-deep: #3f6480;
    --silver: #b8c5ce;
    --silver-deep: #8ea0ad;
    --sand: #ead9c3;
    --ink: #33424d;
    --ink-soft: #6f8090;
    --glow: rgba(109, 146, 173, .22);
}

html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    max-width: 100%;
}

body.pearl-sky {
    font-family: 'Cormorant Garamond', 'Amiri', Georgia, serif;
    color: var(--ink);
    background:
        radial-gradient(ellipse 95% 40% at 50% 0%, rgba(231, 239, 244, .95), transparent 62%),
        radial-gradient(ellipse 60% 38% at 0% 62%, rgba(109, 146, 173, .1), transparent 58%),
        radial-gradient(ellipse 60% 34% at 100% 88%, rgba(234, 217, 195, .22), transparent 60%),
        linear-gradient(180deg, var(--pearl) 0%, var(--mist) 45%, #eef3f6 100%);
    min-height: 100vh;
    min-height: var(--app-vh, 100svh);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;

    /* Shared feature sections — pearl & dusty blue */
    --rsvp-accent: var(--blue-deep);
    --rsvp-text: var(--ink);
    --rsvp-muted: var(--ink-soft);
    --rsvp-border: rgba(109, 146, 173, .3);
    --rsvp-field: var(--pearl);
    --if-accent: var(--blue-deep);
    --if-accent-text: var(--pearl);
    --if-text: var(--ink);
    --if-muted: var(--ink-soft);
    --if-border: rgba(109, 146, 173, .26);
    --if-field: var(--pearl);
    --if-surface: rgba(109, 146, 173, .06);
    --if-punch: var(--sky);
    --if-rsvp-bg: transparent;
    --if-lang-bg: rgba(253, 252, 251, .94);
}

html[dir="rtl"] body.pearl-sky {
    font-family: var(--inv-font-ar-body), 'Noto Naskh Arabic', serif;
}

a { color: inherit; text-decoration: none; }

body.pearl-sky .ps-kicker,
body.pearl-sky .ps-word-kicker,
body.pearl-sky .ps-gate-kicker,
body.pearl-sky .ps-band,
body.pearl-sky .ps-monogram,
body.pearl-sky .ps-open-btn,
body.pearl-sky .ps-scroll-cue,
body.pearl-sky .ps-cta,
body.pearl-sky .ps-bead-label,
body.pearl-sky .ps-footer-mono {
    font-family: 'Jost', 'Cormorant Garamond', sans-serif;
}

html[dir="rtl"] body.pearl-sky .ps-kicker,
html[dir="rtl"] body.pearl-sky .ps-word-kicker,
html[dir="rtl"] body.pearl-sky .ps-gate-kicker,
html[dir="rtl"] body.pearl-sky .ps-band,
html[dir="rtl"] body.pearl-sky .ps-open-btn,
html[dir="rtl"] body.pearl-sky .ps-scroll-cue,
html[dir="rtl"] body.pearl-sky .ps-cta,
html[dir="rtl"] body.pearl-sky .ps-bead-label {
    font-family: var(--inv-font-ar-body), 'Noto Naskh Arabic', serif;
}

/* ── Reveal ── */
[data-reveal] {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity 1s cubic-bezier(.22, 1, .36, 1), transform 1s cubic-bezier(.22, 1, .36, 1);
}
[data-reveal].is-visible { opacity: 1; transform: none; }

/* ── Shared type ── */
.ps-kicker,
.ps-word-kicker,
.ps-gate-kicker {
    font-size: .66rem;
    letter-spacing: .42em;
    text-transform: uppercase;
    color: var(--blue-deep);
    text-align: center;
}
html[dir="rtl"] .ps-kicker,
html[dir="rtl"] .ps-word-kicker,
html[dir="rtl"] .ps-gate-kicker {
    letter-spacing: .1em;
    text-transform: none;
    font-size: .92rem;
}

.ps-dove-svg { display: block; width: 100%; height: auto; }

/* Section rule: hairline · dove · hairline */
.ps-rule {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .9rem;
    max-width: 22rem;
    margin: 3.4rem auto 2.6rem;
    color: var(--silver);
}
.ps-rule i {
    display: block;
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--silver), transparent);
}
.ps-rule .ps-dove-svg { flex: none; width: 30px; color: var(--blue-soft); }

/* ── Drifting clouds (shared by the cover and the sky) ── */
.ps-cloud {
    position: absolute;
    border-radius: 50%;
    filter: blur(38px);
    opacity: .8;
    pointer-events: none;
}
.ps-cloud--a {
    width: 58vw; height: 34vw;
    top: 6%; inset-inline-start: -12%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(215, 228, 236, 0) 70%);
    animation: ps-drift-cloud 26s ease-in-out infinite alternate;
}
.ps-cloud--b {
    width: 46vw; height: 28vw;
    bottom: 12%; inset-inline-end: -10%;
    background: radial-gradient(circle, rgba(255, 255, 255, .85), rgba(194, 211, 224, 0) 72%);
    animation: ps-drift-cloud 34s ease-in-out infinite alternate-reverse;
}
.ps-cloud--c {
    width: 40vw; height: 22vw;
    top: 44%; inset-inline-start: 24%;
    background: radial-gradient(circle, rgba(234, 217, 195, .5), rgba(234, 217, 195, 0) 72%);
    animation: ps-drift-cloud 42s ease-in-out infinite alternate;
}
@keyframes ps-drift-cloud {
    from { transform: translate3d(0, 0, 0) scale(1); }
    to { transform: translate3d(6%, -4%, 0) scale(1.12); }
}

/* ══════════════════════════════════════════════════
   1 · Sealed cover
   ══════════════════════════════════════════════════ */
.ps-gate {
    position: fixed;
    inset: 0;
    z-index: 90;
    display: grid;
    place-items: center;
    padding: 2rem 1.5rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 55% at 50% 18%, rgba(255, 255, 255, .96), transparent 62%),
        linear-gradient(180deg, var(--pearl) 0%, var(--sky) 55%, var(--sky-2) 100%);
    transition: opacity .9s ease, transform 1.2s cubic-bezier(.22, 1, .36, 1);
}
.ps-gate.is-open {
    opacity: 0;
    transform: scale(1.08);
    pointer-events: none;
}
.ps-gate.is-hidden { display: none; }

.ps-gate-sky { position: absolute; inset: 0; }

.ps-gate-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    display: grid;
    justify-items: center;
    gap: .1rem;
    animation: ps-gate-in 1.1s cubic-bezier(.22, 1, .36, 1) both;
}
@keyframes ps-gate-in {
    from { opacity: 0; transform: translateY(18px); }
    to { opacity: 1; transform: none; }
}
.ps-gate.is-open .ps-gate-inner {
    animation: ps-gate-out .7s ease forwards;
}
@keyframes ps-gate-out {
    to { opacity: 0; transform: translateY(-16px); }
}

/* Medallion holding the dove */
.ps-medallion {
    position: relative;
    width: clamp(148px, 44vw, 208px);
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    margin-bottom: 1.9rem;
}
.ps-medallion-face {
    position: relative;
    z-index: 2;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    display: grid;
    place-items: center;
    overflow: hidden;
    background:
        radial-gradient(circle at 34% 26%, #ffffff 0%, var(--sky) 58%, var(--sky-2) 100%);
    box-shadow:
        0 22px 48px rgba(63, 100, 128, .18),
        inset 0 2px 10px rgba(255, 255, 255, .9);
}
.ps-medallion-face .ps-dove-svg {
    width: 62%;
    color: var(--pearl);
    filter: drop-shadow(0 8px 16px rgba(63, 100, 128, .3));
}
.ps-medallion-ring {
    position: absolute;
    inset: -9px;
    border-radius: 50%;
    border: 1px solid rgba(184, 197, 206, .8);
    box-shadow: 0 0 0 8px rgba(255, 255, 255, .55);
}
.ps-medallion-dashes {
    position: absolute;
    inset: -22px;
    border-radius: 50%;
    border: 1px dashed rgba(109, 146, 173, .5);
    animation: ps-spin 44s linear infinite;
}
@keyframes ps-spin { to { transform: rotate(360deg); } }

.ps-gate.is-open .ps-medallion-face {
    transform: scale(1.22);
    opacity: 0;
    transition: transform 1s cubic-bezier(.22, 1, .36, 1), opacity .8s ease;
}

.ps-gate-names {
    margin-top: .55rem;
    font-family: 'Great Vibes', 'Cormorant Garamond', cursive;
    font-size: clamp(2.3rem, 9vw, 3.4rem);
    font-weight: 400;
    line-height: 1.25;
    color: var(--ink);
    display: flex;
    align-items: center;
    gap: .6rem;
    flex-wrap: wrap;
    justify-content: center;
}
.ps-gate-names em {
    font-style: normal;
    font-size: .58em;
    color: var(--blue);
}
html[dir="rtl"] .ps-gate-names { font-size: clamp(1.9rem, 7.6vw, 2.9rem); }

.ps-gate-date {
    margin-top: .5rem;
    font-size: .82rem;
    letter-spacing: .22em;
    color: var(--ink-soft);
}
html[dir="rtl"] .ps-gate-date { letter-spacing: .06em; font-size: .95rem; }

/* The single call to action */
.ps-open-btn {
    position: relative;
    margin-top: 2rem;
    padding: .95rem 3.1rem;
    border: 0;
    border-radius: 999px;
    cursor: pointer;
    overflow: hidden;
    font-size: .95rem;
    letter-spacing: .12em;
    color: #fff;
    background: linear-gradient(135deg, var(--blue-soft) 0%, var(--blue) 45%, var(--blue-deep) 100%);
    box-shadow:
        0 14px 30px rgba(63, 100, 128, .28),
        inset 0 1px 0 rgba(255, 255, 255, .45);
    transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
    animation: ps-btn-breathe 3.4s ease-in-out infinite;
}
.ps-open-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(63, 100, 128, .34); }
.ps-open-btn:active { transform: translateY(1px) scale(.98); }
.ps-open-btn-label { position: relative; z-index: 2; }
.ps-open-btn-shine {
    position: absolute;
    top: 0;
    inset-inline-start: -40%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
    animation: ps-shine 3.6s ease-in-out infinite;
}
@keyframes ps-shine {
    0%, 55% { transform: translateX(0); opacity: 0; }
    65% { opacity: 1; }
    100% { transform: translateX(360%); opacity: 0; }
}
@keyframes ps-btn-breathe {
    0%, 100% { box-shadow: 0 14px 30px rgba(63, 100, 128, .26), inset 0 1px 0 rgba(255, 255, 255, .45); }
    50% { box-shadow: 0 16px 40px rgba(63, 100, 128, .4), inset 0 1px 0 rgba(255, 255, 255, .5); }
}

.ps-gate-hint {
    margin-top: 1rem;
    font-size: .78rem;
    letter-spacing: .06em;
    color: var(--ink-soft);
    opacity: .9;
    animation: ps-hint 2.8s ease-in-out infinite;
}
@keyframes ps-hint {
    0%, 100% { opacity: .55; transform: translateY(0); }
    50% { opacity: 1; transform: translateY(-2px); }
}

/* ── Released flock ── */
.ps-flock {
    position: fixed;
    inset: 0;
    z-index: 95;
    pointer-events: none;
    overflow: hidden;
}
.ps-dove {
    position: absolute;
    left: var(--ps-x, 50%);
    top: var(--ps-y, 42%);
    width: var(--ps-size, 44px);
    margin-left: calc(var(--ps-size, 44px) / -2);
    color: #fff;
    opacity: 0;
    filter: drop-shadow(0 8px 18px rgba(63, 100, 128, .3));
    animation: ps-release var(--ps-dur, 1.8s) cubic-bezier(.2, .65, .3, 1) var(--ps-delay, 0s) forwards;
}
.ps-dove-inner { display: block; }
.ps-dove-inner.is-mirror { transform: scaleX(-1); }
@keyframes ps-release {
    0% { transform: translate3d(0, 0, 0) rotate(0deg) scale(.4); opacity: 0; }
    14% { opacity: 1; }
    70% { opacity: 1; }
    100% {
        transform: translate3d(var(--ps-dx, 0), var(--ps-dy, -60vh), 0) rotate(var(--ps-rot, 0deg)) scale(1.15);
        opacity: 0;
    }
}
.ps-dove .ps-dove-wing--front,
.ps-drift .ps-dove-wing--front {
    transform-box: fill-box;
    transform-origin: 24% 94%;
    animation: ps-flap .34s ease-in-out infinite alternate;
}
.ps-dove .ps-dove-wing--back,
.ps-drift .ps-dove-wing--back {
    transform-box: fill-box;
    transform-origin: 24% 94%;
    animation: ps-flap .34s ease-in-out .08s infinite alternate-reverse;
}
@keyframes ps-flap {
    from { transform: rotate(-20deg) scaleY(.9); }
    to { transform: rotate(16deg) scaleY(1.05); }
}

/* ══════════════════════════════════════════════════
   2 · Invitation body
   ══════════════════════════════════════════════════ */
.ps-scroll {
    position: relative;
    z-index: 1;
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 1.2s ease .1s, transform 1.4s cubic-bezier(.22, 1, .36, 1) .1s;
}
body.pearl-sky.is-open .ps-scroll { opacity: 1; transform: none; }

/* Open sky hero */
.ps-sky {
    position: relative;
    min-height: 94svh;
    min-height: var(--app-vh, 94svh);
    display: grid;
    place-items: center;
    padding: 5rem 1.5rem 4rem;
    overflow: hidden;
    background:
        radial-gradient(ellipse 80% 50% at 50% 8%, rgba(255, 255, 255, .95), transparent 60%),
        linear-gradient(180deg, var(--sky) 0%, var(--pearl) 78%);
}
.ps-sky-veil { position: absolute; inset: 0; pointer-events: none; }

.ps-drift {
    position: absolute;
    width: 54px;
    color: rgba(157, 184, 203, .55);
}
.ps-drift--1 { top: 18%; left: -12%; animation: ps-glide-1 38s linear infinite; }
.ps-drift--2 { top: 58%; left: -18%; width: 34px; animation: ps-glide-2 52s linear infinite; }
@keyframes ps-glide-1 {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    12% { opacity: .8; }
    88% { opacity: .8; }
    100% { transform: translate3d(130vw, -16vh, 0); opacity: 0; }
}
@keyframes ps-glide-2 {
    0% { transform: translate3d(0, 0, 0); opacity: 0; }
    16% { opacity: .6; }
    84% { opacity: .6; }
    100% { transform: translate3d(140vw, -26vh, 0); opacity: 0; }
}
.ps-sky-inner {
    position: relative;
    z-index: 2;
    text-align: center;
    display: grid;
    justify-items: center;
}

.ps-name {
    font-family: 'Great Vibes', 'Cormorant Garamond', cursive;
    font-size: clamp(2.7rem, 12vw, 4.6rem);
    font-weight: 400;
    line-height: 1.12;
    color: var(--ink);
}
html[dir="rtl"] .ps-name { font-size: clamp(2.1rem, 9.5vw, 3.6rem); line-height: 1.5; }

.ps-amp {
    display: flex;
    align-items: center;
    gap: .8rem;
    width: min(72%, 15rem);
    margin: .7rem 0;
    color: var(--blue);
}
.ps-amp i {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--silver), transparent);
}
.ps-amp b {
    font-family: 'Cormorant Garamond', serif;
    font-weight: 500;
    font-size: 1.25rem;
    color: var(--blue);
}

.ps-tagline {
    margin-top: 1.15rem;
    max-width: 26rem;
    font-size: 1.02rem;
    line-height: 1.9;
    color: var(--ink-soft);
}

.ps-band {
    margin-top: 1.9rem;
    padding: .7rem 1.6rem;
    display: flex;
    align-items: center;
    gap: .8rem;
    flex-wrap: wrap;
    justify-content: center;
    font-size: .8rem;
    letter-spacing: .16em;
    color: var(--blue-deep);
    border-top: 1px solid rgba(109, 146, 173, .28);
    border-bottom: 1px solid rgba(109, 146, 173, .28);
    background: rgba(255, 255, 255, .5);
}
html[dir="rtl"] .ps-band { letter-spacing: 0; font-size: .92rem; }
.ps-band em { font-style: normal; color: var(--silver-deep); }

.ps-scroll-cue {
    margin-top: 2.4rem;
    display: grid;
    justify-items: center;
    gap: .55rem;
    font-size: .7rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--ink-soft);
}
html[dir="rtl"] .ps-scroll-cue { letter-spacing: .08em; text-transform: none; font-size: .88rem; }
.ps-scroll-cue i {
    display: block;
    width: 1px;
    height: 42px;
    background: linear-gradient(180deg, var(--silver), transparent);
    animation: ps-cue 2.6s ease-in-out infinite;
}
@keyframes ps-cue {
    0%, 100% { transform: scaleY(.6); opacity: .5; transform-origin: top; }
    50% { transform: scaleY(1); opacity: 1; transform-origin: top; }
}

/* The invitation word — open composition, no cards */
.ps-word {
    max-width: 34rem;
    margin: 0 auto;
    padding: 1rem 1.5rem 3rem;
    text-align: center;
    display: grid;
    justify-items: center;
}
.ps-word-copy {
    margin-top: 1.3rem;
    font-size: 1.08rem;
    line-height: 2.05;
    color: var(--ink);
}
.ps-names-line {
    margin-top: 1.8rem;
    font-family: 'Great Vibes', 'Cormorant Garamond', cursive;
    font-size: clamp(1.9rem, 8vw, 2.8rem);
    font-weight: 400;
    display: flex;
    align-items: center;
    gap: .7rem;
    flex-wrap: wrap;
    justify-content: center;
    color: var(--ink);
}
.ps-names-line em { font-style: normal; color: var(--blue); font-size: .6em; }
html[dir="rtl"] .ps-names-line { font-size: clamp(1.6rem, 6.6vw, 2.3rem); }

.ps-monogram {
    margin-top: .9rem;
    font-size: .78rem;
    letter-spacing: .4em;
    color: var(--silver-deep);
}
html[dir="rtl"] .ps-monogram { letter-spacing: .18em; }

.ps-cta {
    margin-top: 2rem;
    display: inline-block;
    padding: .85rem 2.6rem;
    border-radius: 999px;
    font-size: .84rem;
    letter-spacing: .16em;
    color: #fff;
    background: linear-gradient(135deg, var(--blue) 0%, var(--blue-deep) 100%);
    box-shadow: 0 12px 26px rgba(63, 100, 128, .24);
    transition: transform .3s ease, box-shadow .3s ease;
}
.ps-cta:hover { transform: translateY(-2px); box-shadow: 0 16px 32px rgba(63, 100, 128, .3); }
html[dir="rtl"] .ps-cta { letter-spacing: 0; font-size: .95rem; }

/* Portrait inside a pearl */
.ps-portrait {
    padding: 2rem 1.5rem 3rem;
    display: grid;
    justify-items: center;
}
.ps-portrait-pearl {
    position: relative;
    width: clamp(210px, 62vw, 310px);
    aspect-ratio: 1;
    border-radius: 50%;
    overflow: hidden;
    background: var(--sky);
    box-shadow:
        0 26px 60px rgba(63, 100, 128, .2),
        0 0 0 1px rgba(184, 197, 206, .9),
        0 0 0 12px rgba(255, 255, 255, .6),
        0 0 0 13px rgba(184, 197, 206, .45);
}
.ps-portrait-pearl img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: saturate(.92) contrast(1.02);
}
.ps-portrait-arc {
    position: absolute;
    inset: -34px;
    border-radius: 50%;
    border: 1px solid rgba(109, 146, 173, .3);
    border-inline-end-color: transparent;
    border-bottom-color: transparent;
    animation: ps-spin 60s linear infinite;
    z-index: 3;
}
.ps-portrait-caption {
    margin-top: 1.6rem;
    font-size: 1rem;
    color: var(--ink-soft);
    text-align: center;
}

/* Details strung as a pearl necklace */
.ps-strand-wrap {
    padding: 0 1.5rem 3rem;
    display: grid;
    justify-items: center;
}
.ps-strand {
    position: relative;
    list-style: none;
    margin-top: 2.6rem;
    width: min(52rem, 100%);
    display: flex;
    justify-content: center;
    gap: clamp(1rem, 5vw, 3.2rem);
    flex-wrap: nowrap;
}
.ps-strand::before {
    content: '';
    position: absolute;
    top: 34px;
    inset-inline: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--silver) 18%, var(--silver) 82%, transparent);
}
.ps-strand-item {
    position: relative;
    flex: 1 1 0;
    max-width: 12rem;
    text-align: center;
    display: grid;
    justify-items: center;
}
.ps-pearl {
    position: relative;
    z-index: 2;
    width: 68px;
    height: 68px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: radial-gradient(circle at 34% 28%, #ffffff, var(--sky) 62%, var(--sky-2) 100%);
    box-shadow:
        0 10px 22px rgba(63, 100, 128, .16),
        inset 0 1px 6px rgba(255, 255, 255, .95),
        0 0 0 1px rgba(184, 197, 206, .7);
}
.ps-pearl b {
    font-family: 'Jost', sans-serif;
    font-weight: 400;
    font-size: 1.3rem;
    color: var(--blue-deep);
}
.ps-pearl--mark .ps-dove-svg { width: 30px; color: var(--blue); }
.ps-strand-item h3 {
    margin-top: 1.1rem;
    font-size: .68rem;
    letter-spacing: .28em;
    text-transform: uppercase;
    font-weight: 400;
    color: var(--silver-deep);
}
html[dir="rtl"] .ps-strand-item h3 { letter-spacing: .06em; text-transform: none; font-size: .88rem; }
.ps-strand-item p {
    margin-top: .5rem;
    font-size: 1rem;
    line-height: 1.7;
    color: var(--ink);
}
.ps-strand-item small {
    display: block;
    margin-top: .3rem;
    font-size: .82rem;
    color: var(--ink-soft);
}

/* Countdown as pearls on a thread */
.ps-countdown-wrap {
    padding: 1rem 1.5rem 3.5rem;
    display: grid;
    justify-items: center;
}
.ps-countdown {
    position: relative;
    margin-top: 2.2rem;
    display: flex;
    justify-content: center;
    gap: clamp(.65rem, 3.5vw, 1.9rem);
}
.ps-countdown::before {
    content: '';
    position: absolute;
    top: 30px;
    inset-inline: 6%;
    height: 34px;
    border-top: 1px solid rgba(184, 197, 206, .75);
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
}
.ps-bead {
    position: relative;
    display: grid;
    justify-items: center;
    gap: .6rem;
}
.ps-bead-value {
    position: relative;
    z-index: 2;
    width: clamp(56px, 16vw, 72px);
    height: clamp(56px, 16vw, 72px);
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-family: 'Jost', sans-serif;
    font-size: clamp(1.1rem, 4.4vw, 1.5rem);
    color: var(--blue-deep);
    background: radial-gradient(circle at 32% 26%, #ffffff, var(--mist) 58%, var(--sky-2) 100%);
    box-shadow:
        0 12px 24px rgba(63, 100, 128, .15),
        inset 0 1px 6px rgba(255, 255, 255, .95),
        0 0 0 1px rgba(184, 197, 206, .65);
}
.ps-bead-label {
    font-size: .66rem;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--silver-deep);
}
html[dir="rtl"] .ps-bead-label { letter-spacing: 0; text-transform: none; font-size: .82rem; }
.ps-count-done {
    font-size: 1.2rem;
    color: var(--blue-deep);
    text-align: center;
}

/* ══════════════════════════════════════════════════
   3 · Shared feature sections, pearl-styled
   ══════════════════════════════════════════════════ */
body.pearl-sky .inv-if-kicker { color: var(--blue-deep); }
body.pearl-sky .inv-if-title {
    font-family: 'Cormorant Garamond', 'Amiri', serif;
    color: var(--ink);
}
html[dir="rtl"] body.pearl-sky .inv-if-title {
    font-family: var(--inv-font-ar-body), serif;
}

/* Open sections instead of cards */
body.pearl-sky .inv-if-welcome,
body.pearl-sky .inv-if-gratitude {
    border: 0;
    background: transparent;
}
body.pearl-sky .inv-if-notes-body,
body.pearl-sky .inv-if-guestbook-entry {
    border: 0;
    background: rgba(255, 255, 255, .58);
    border-radius: 1.2rem;
    box-shadow: 0 10px 26px rgba(63, 100, 128, .08);
}
body.pearl-sky .inv-if-welcome-text,
body.pearl-sky .inv-if-gratitude-text { color: var(--ink); }

/* Programme as a flight path */
body.pearl-sky .inv-if-programme-list {
    position: relative;
    margin-top: 2.2rem;
    padding-inline-start: 2.6rem;
    gap: 1.6rem;
    max-width: 34rem;
    margin-inline: auto;
}
body.pearl-sky .inv-if-programme-list::before {
    content: '';
    position: absolute;
    top: .6rem;
    bottom: .6rem;
    inset-inline-start: .62rem;
    width: 1px;
    background: linear-gradient(180deg, transparent, var(--silver) 12%, var(--silver) 88%, transparent);
}
body.pearl-sky .inv-if-programme-item,
html[dir="rtl"] body.pearl-sky .inv-if-programme-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: .35rem;
    padding: 0;
    border: 0;
    background: none;
    text-align: start;
}

html[dir="rtl"] body.pearl-sky .inv-if-programme-item .inv-if-programme-time {
    text-align: start;
}
body.pearl-sky .inv-if-programme-item::before {
    content: '';
    position: absolute;
    inset-inline-start: -2.6rem;
    top: .45rem;
    width: 15px;
    height: 15px;
    border-radius: 50%;
    background: radial-gradient(circle at 34% 28%, #fff, var(--sky-2) 100%);
    box-shadow: 0 0 0 1px rgba(184, 197, 206, .9), 0 4px 10px rgba(63, 100, 128, .16);
}
body.pearl-sky .inv-if-programme-time {
    font-family: 'Jost', sans-serif;
    font-size: .78rem;
    letter-spacing: .16em;
    color: var(--blue-deep);
}
body.pearl-sky .inv-if-programme-name {
    font-size: 1.08rem;
    color: var(--ink);
}
body.pearl-sky .inv-if-programme-desc {
    font-size: .9rem;
    color: var(--ink-soft);
}

/* Album gallery */
body.pearl-sky .inv-if-album-book { filter: drop-shadow(0 22px 44px rgba(63, 100, 128, .18)); }
body.pearl-sky .inv-if-album-page img {
    border-radius: 1.4rem;
    border: 6px solid rgba(255, 255, 255, .92);
}
body.pearl-sky .inv-if-album-nav {
    color: var(--blue-deep);
    border-color: rgba(109, 146, 173, .35);
    background: rgba(255, 255, 255, .8);
}
body.pearl-sky .inv-if-album-hint,
body.pearl-sky .inv-if-album-counter { color: var(--ink-soft); }

/* Map */
body.pearl-sky .inv-if-map-frame {
    border-radius: 1.6rem;
    border-color: rgba(109, 146, 173, .3);
    box-shadow: 0 18px 40px rgba(63, 100, 128, .14);
}

/* Music toggle */
.ps-mute-btn {
    position: fixed;
    inset-inline-end: 1rem;
    bottom: 1.1rem;
    z-index: 40;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    border: 1px solid rgba(109, 146, 173, .35);
    background: rgba(255, 255, 255, .88);
    color: var(--blue-deep);
    font-size: 1.1rem;
    cursor: pointer;
    box-shadow: 0 10px 24px rgba(63, 100, 128, .16);
}

/* Footer */
.ps-footer {
    padding: 3.5rem 1.5rem 4.5rem;
    text-align: center;
    color: var(--ink-soft);
    display: grid;
    justify-items: center;
    gap: .5rem;
    background: linear-gradient(180deg, transparent, rgba(215, 228, 236, .55));
}
.ps-footer-dove { display: block; width: 42px; color: var(--blue-soft); margin-bottom: .6rem; }
.ps-footer-mono {
    font-size: .8rem;
    letter-spacing: .4em;
    color: var(--silver-deep);
}
html[dir="rtl"] .ps-footer-mono { letter-spacing: .16em; }
.ps-footer-tag {
    font-size: .72rem;
    letter-spacing: .3em;
    text-transform: uppercase;
    color: var(--silver-deep);
}
html[dir="rtl"] .ps-footer-tag { letter-spacing: .08em; text-transform: none; font-size: .85rem; }

/* ── Responsive ── */
@media (max-width: 560px) {
    .ps-strand {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
    }
    .ps-strand::before {
        top: 10%;
        bottom: 10%;
        height: auto;
        inset-inline: auto;
        inset-inline-start: 50%;
        width: 1px;
        background: linear-gradient(180deg, transparent, var(--silver) 14%, var(--silver) 86%, transparent);
    }
    .ps-strand-item { max-width: 20rem; }
    .ps-countdown { gap: .5rem; }
    .ps-countdown::before { top: 26px; inset-inline: 12%; height: 26px; }
    .ps-rule { margin: 2.6rem auto 2rem; }
}

@media (max-height: 660px) {
    .ps-medallion {
        width: clamp(104px, 30vh, 150px);
        margin-bottom: 1.1rem;
    }
    .ps-medallion-dashes { inset: -14px; }
    .ps-open-btn { margin-top: 1.3rem; padding: .8rem 2.6rem; }
    .ps-gate-hint { margin-top: .7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .ps-cloud,
    .ps-medallion-dashes,
    .ps-portrait-arc,
    .ps-open-btn,
    .ps-open-btn-shine,
    .ps-gate-hint,
    .ps-scroll-cue i,
    .ps-drift,
    .ps-dove-wing--front,
    .ps-dove-wing--back {
        animation: none !important;
    }
    .ps-drift { display: none; }
    [data-reveal] { opacity: 1 !important; transform: none !important; }
    .ps-scroll { transition: none; }
}