/* ==========================================================================
   Share showcase — "Some ayahs are too beautiful to keep" (experimental)
   A slow, grabbable marquee of shareable poster artifacts. Posters render
   in the OPPOSITE theme to the page (dark poster on a light page, light
   poster on a dark page) so they always pop as beautiful shareable images.
   ========================================================================== */

/* Top padding restores breathing room: the section above (Built with care)
   has a bottom border, and section-pad-tight gives 0 top, so without this
   the kicker sat flush against that line. */
.share-section {
    text-align: center;
    overflow: hidden;
    padding-top: clamp(76px, 10vw, 124px);
}
.share-section .kicker { justify-content: center; }

.share-marquee {
    margin: 56px 0 28px;
    overflow-x: auto;              /* native horizontal scroll = buttery touch */
    overflow-y: hidden;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.share-marquee::-webkit-scrollbar { display: none; }
/* Fade in with opacity ONLY — a transform/blur on a scrolling container
   fights the scroll position and jolts as the animation settles. */
.share-marquee.reveal { transform: none !important; filter: none !important; transition: opacity 1.1s var(--ease); }
.share-track {
    display: flex;
    width: max-content;
    gap: 20px;
    will-change: transform;
    align-items: stretch;
}

/* ---------- The poster (default = moonlit night, for a light page) ---------- */
.share-poster {
    flex: 0 0 auto;
    width: 270px;
    border-radius: 20px;
    padding: 30px 26px 24px;
    text-align: center;
    position: relative;
    overflow: hidden;
    color: #ECEFF6;
    background:
        radial-gradient(1px 1px at 20% 24%, rgba(255,255,255,0.5), transparent),
        radial-gradient(1px 1px at 72% 16%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1.2px 1.2px at 54% 60%, rgba(255,255,255,0.45), transparent),
        radial-gradient(1px 1px at 30% 82%, rgba(255,255,255,0.4), transparent),
        radial-gradient(1px 1px at 86% 74%, rgba(255,255,255,0.35), transparent),
        linear-gradient(165deg, #0C0F1E 0%, #161B34 52%, #0B0D17 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 26px 54px -26px rgba(0, 0, 0, 0.65), 0 5px 16px rgba(0, 0, 0, 0.3);
}
.share-poster::before {   /* silver thread */
    content: "";
    position: absolute;
    top: 0; left: 50%;
    transform: translateX(-50%);
    width: 74px; height: 2px;
    background: linear-gradient(90deg, transparent, #C9D0DC, transparent);
}

/* ---------- Inverse: on a dark page, posters turn to daylight paper ---------- */
body.dark-mode .share-poster {
    color: #1B1D1E;
    background:
        radial-gradient(120% 90% at 50% 0%, rgba(37,99,235,0.05), transparent 60%),
        linear-gradient(165deg, #FFFFFF 0%, #F4F6FA 60%, #FAFBFC 100%);
    border: 1px solid #E4E7EC;
    box-shadow: 0 26px 54px -28px rgba(27,29,30,0.30), 0 5px 16px rgba(27,29,30,0.08);
}
body.dark-mode .share-poster::before { background: linear-gradient(90deg, transparent, #B99859, transparent); }

.sp-asked {
    font-family: 'General Sans', 'Inter', sans-serif;
    font-size: 10px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase;
    color: #B7BECC;
}
body.dark-mode .sp-asked { color: #8A8E94; }
.sp-query {
    font-family: 'Instrument Serif', Georgia, serif;
    font-style: italic; font-size: 18px; line-height: 1.35; margin-top: 10px;
    color: #EAF0FA;
}
body.dark-mode .sp-query { color: #1B1D1E; }
.sp-divider { width: 34px; height: 1px; margin: 18px auto; background: rgba(201,208,220,0.4); }
body.dark-mode .sp-divider { background: rgba(185,152,89,0.5); }
.sp-ref {
    font-family: 'General Sans', 'Inter', sans-serif;
    font-size: 10px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase;
    color: #C9D0DC;
}
body.dark-mode .sp-ref { color: #B99859; }
.sp-arabic {
    font-family: 'Amiri', serif; direction: rtl;
    font-size: 24px; line-height: 1.95; margin-top: 14px; color: #F4F7FC;
}
body.dark-mode .sp-arabic { color: #1B1D1E; }
.sp-translation {
    font-family: 'Instrument Serif', Georgia, serif;
    font-size: 16px; line-height: 1.5; margin-top: 12px; color: #DCE3EF;
}
body.dark-mode .sp-translation { color: #52565C; }
.sp-foot {
    margin-top: 20px; padding-top: 15px;
    border-top: 1px solid rgba(255,255,255,0.1);
    font-family: 'General Sans', 'Inter', sans-serif;
    font-size: 11px; letter-spacing: 0.08em; color: #A8B0C0;
    display: flex; align-items: center; justify-content: center; gap: 7px;
}
body.dark-mode .sp-foot { border-top-color: #E4E7EC; color: #8A8E94; }
.sp-foot .sp-mark { color: #C9D0DC; font-size: 12px; }
body.dark-mode .sp-foot .sp-mark { color: #B99859; }

.share-note {
    max-width: 470px; margin: 8px auto 0;
    font-size: 14.5px; color: var(--ink-soft);
}
.share-note .sp-inline-mark { color: var(--gold); }