/* Bulan Sabit (ramadan/bulan-sabit): a giant gold crescent over a deep night, a Ramadan poster made picture-first */

:root {
    --ec-bg: #112266;
    --ec-bg2: #2f50c2;
    --ec-deep: #040a2a;
    --ec-ink: #fff8e6;
    --ec-muted: #d9e1ff;
    --ec-gold: #e9b94f;
    --ec-glow: #ffe08a;
    --ec-cloud: #a9bcff;
    --bs-foil: linear-gradient(135deg, #a8741a, #ffe9a6 28%, #d4a63c 50%, #fff1c2 72%, #9a6614);
    --bs-script: 'Great Vibes', 'Cormorant Garamond', cursive;
    --bs-caps: 'Cinzel', 'Times New Roman', serif;
    --bs-text: 'Cormorant Garamond', Georgia, serif;
    --bs-arabic: 'Amiri', 'Traditional Arabic', serif;
    /* the night: a lit band in the middle, deep at the edges, a few fine stars */
    --bs-night:
        radial-gradient(ellipse 80% 40% at 70% 18%, color-mix(in srgb, var(--ec-glow) 14%, transparent), transparent 70%),
        radial-gradient(ellipse 75% 45% at 45% 55%, color-mix(in srgb, var(--ec-bg2) 62%, transparent), transparent 72%),
        radial-gradient(ellipse 120% 90% at 50% 45%, var(--ec-bg) 36%, var(--ec-deep));
    --bs-dust: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 120 120'%3E%3Cg fill='%23fff6d6'%3E%3Ccircle cx='14' cy='22' r='1' opacity='.7'/%3E%3Ccircle cx='76' cy='12' r='.8' opacity='.5'/%3E%3Ccircle cx='98' cy='64' r='1.2' opacity='.6'/%3E%3Ccircle cx='40' cy='88' r='.8' opacity='.5'/%3E%3Ccircle cx='60' cy='50' r='.6' opacity='.4'/%3E%3Ccircle cx='108' cy='104' r='.9' opacity='.6'/%3E%3C/g%3E%3C/svg%3E");
}

body.bs {
    background: var(--bs-dust), var(--bs-night);
    background-color: var(--ec-bg);
    background-attachment: fixed;
    color: var(--ec-ink);
    font-family: var(--bs-text);
    font-size: 1.1rem;
    line-height: 1.5;
}
.bs-defs { position: absolute; }

.bs-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.bs-fx i { position: absolute; left: 0; top: 0; display: block; will-change: transform, opacity; }

/* ===================== cover ===================== */
.bs-cover {
    --ec-open-ms: 600;
    flex-direction: column; gap: .35rem;
    padding: 4.6rem 1rem 1.4rem;
    background: var(--bs-dust), var(--bs-night); background-color: var(--ec-bg);
    text-align: center;
    transition: opacity .6s ease;
}
.ec-js [data-ec-cover].bs-cover { justify-content: center; }
.ec-opening .bs-cover { opacity: 0; }
.bs-cover__dots { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bs-cover__dots i { position: absolute; width: var(--s); height: var(--s); border-radius: 50%; background: #fff6d6; box-shadow: 0 0 6px #fff6d6; opacity: .7; }
/* the lanterns wait above the screen; they come down on their chains once the crescent is painted */
.bs-cover__lanterns { position: absolute; left: 0; top: 0; width: 100%; height: auto; max-height: 30svh; pointer-events: none; overflow: visible; }
.bs-drop { transform: translateY(-190px); transition: transform 1.3s cubic-bezier(.3, 1.35, .5, 1) var(--d, 0s); }
.bs-cover.is-lit .bs-drop { transform: none; }
.bs-cover__city { position: absolute; left: 0; bottom: 0; width: 100%; height: 15svh; pointer-events: none; fill: var(--ec-deep); opacity: .9; }
.bs-cover__from { position: relative; z-index: 2; }
.bs-cover__from .ec-from__label { color: var(--ec-muted); font-size: .7rem; }
.bs-cover__from .ec-from__name { font-family: var(--bs-script); font-size: 2.2rem; line-height: 1.1; color: var(--ec-ink); text-shadow: 0 2px 12px rgb(0 0 0 / .45); }

/* the sky: a faint promise of the crescent, the gold line that paints it through the three stars, then the moon */
.bs-sky {
    --p: 100;
    position: relative; z-index: 2; display: block;
    width: min(80vw, 19rem, 40svh); aspect-ratio: 1; margin: 0 auto; padding: 0; border: 0; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent; touch-action: none;
}
.bs-sky svg { display: block; width: 100%; height: 100%; overflow: visible; }
.bs-sky__halo { opacity: .2; transition: opacity 1.2s ease; }
.bs-sky__ghost { fill: none; stroke: var(--ec-glow); stroke-opacity: .34; stroke-width: 1.6; stroke-dasharray: 2 7; }
.bs-sky__moon { opacity: 0; transition: opacity 1.1s ease .5s; filter: drop-shadow(0 0 16px color-mix(in srgb, var(--ec-glow) 70%, transparent)); }
.bs-sky__edge, .bs-sky__outline {
    fill: none; stroke: url(#bsc-gold); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round;
    stroke-dasharray: 100; filter: drop-shadow(0 0 5px var(--ec-glow));
}
.bs-sky__edge { stroke-dashoffset: var(--p); transition: stroke-dashoffset .9s cubic-bezier(.4, 0, .2, 1); }
.bs-sky__outline { stroke-dashoffset: 100; stroke-width: 3; transition: stroke-dashoffset 1.1s ease; }
.bs-sky__star { fill: #fff8e6; transition: scale .5s cubic-bezier(.3, 1.6, .5, 1), fill .5s ease; filter: drop-shadow(0 0 4px #fff6d6); }
.bs-sky__ring { fill: none; stroke: var(--ec-glow); stroke-width: 1.6; opacity: .7; }
.bs-sky__star.is-lit { scale: 1.45; fill: var(--ec-glow); filter: drop-shadow(0 0 8px var(--ec-glow)); }
.bs-sky__star.is-lit .bs-sky__ring { opacity: 0; }
.bs-sky__inner { opacity: 0; transition: opacity .9s ease 1s, scale .9s ease 1s; transform-box: fill-box; transform-origin: center; scale: .4; }
.bs-cover.is-lit .bs-sky__halo { opacity: 1; }
.bs-cover.is-lit .bs-sky__moon { opacity: 1; }
.bs-cover.is-lit .bs-sky__outline { stroke-dashoffset: 0; }
.bs-cover.is-lit .bs-sky__ghost { opacity: 0; }
.bs-cover.is-lit .bs-sky__inner { opacity: 1; scale: 1; }
.bs-cover.is-lit .bs-sky__star { opacity: 0; transition: opacity .8s ease .6s; }
.bs-sky.is-step { animation: bs-pulse .45s ease; }
@keyframes bs-pulse { 40% { transform: scale(1.025); } }

.bs-hint { position: relative; z-index: 2; margin: .3rem 0 0; font-style: italic; font-size: 1.08rem; color: var(--ec-ink); }
.bs-hint__count {
    display: inline-block; margin-left: .3rem; padding: .05rem .55rem; border-radius: 999px; font-style: normal;
    font-family: var(--bs-caps); font-size: .78rem; color: #3a2405; background: var(--bs-foil);
}
.bs-cover__to { position: relative; z-index: 2; }
.bs-cover__to .ec-recipient__greeting { color: var(--ec-muted); font-size: .7rem; }
.bs-cover__to .ec-recipient__name { font-family: var(--bs-script); font-size: 2.3rem; line-height: 1.1; color: var(--ec-ink); text-shadow: 0 2px 12px rgb(0 0 0 / .45); }
.bs-skip {
    position: relative; z-index: 2; margin-top: .1rem; padding: .3rem .6rem; border: 0; background: none; cursor: pointer;
    font: inherit; font-size: .9rem; color: var(--ec-muted); text-decoration: underline; text-underline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
    .bs-cover__dots i { animation: bs-blink 4.6s ease-in-out var(--d) infinite; }
    .bs-swing { animation: bs-swing 4.2s ease-in-out var(--d, 0s) infinite; }
    .bs-twinkle { animation: bs-twinkle 2.8s ease-in-out var(--d, 0s) infinite; }
    .bs-cover:not(.is-lit) .bs-sky__ring { animation: bs-ring 1.8s ease-out infinite; }
}
@media (prefers-reduced-motion: reduce) {
    .bs-drop, .bs-sky__edge, .bs-sky__outline, .bs-sky__moon, .bs-sky__inner { transition-duration: .2s; transition-delay: 0s; }
}
@keyframes bs-blink { 0%, 100% { opacity: .15; } 50% { opacity: .9; } }
@keyframes bs-swing { 0%, 100% { rotate: -3deg; } 50% { rotate: 3deg; } }
@keyframes bs-twinkle { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .55; scale: .8; } }
@keyframes bs-ring { 0% { scale: .7; opacity: .9; } 100% { scale: 1.5; opacity: 0; } }
.bs-swing { transform-box: fill-box; transform-origin: 50% 0; }
.bs-twinkle, .bs-sky__ring { transform-box: fill-box; transform-origin: 50% 50%; }

/* short screens (360×640) */
@media (max-height: 720px) {
    .bs-cover { padding-top: 3.8rem; gap: .2rem; }
    .bs-cover__lanterns { max-height: 22svh; }
    .bs-sky { width: min(76vw, 19rem, 37svh); }
    .bs-cover__from .ec-from__name { font-size: 1.9rem; }
    .bs-cover__to .ec-recipient__name { font-size: 1.85rem; }
    .bs-hint { font-size: 1rem; }
}

/* ===================== the poster ===================== */
.bs-page { max-width: 27rem; margin: 0 auto; padding: 0 0 1rem; overflow: hidden; }
.bs-poster {
    position: relative; isolation: isolate;
    display: flex; flex-direction: column; align-items: center; text-align: center;
    min-height: max(41rem, 100svh);
    padding: 9.4rem 2.2rem 8.4rem;
}

/* the art layer: everything is sized from its width (container units of .bs-art, not of the poster itself) */
.bs-art { position: absolute; z-index: -1; inset: 0; overflow: hidden; container-type: inline-size; pointer-events: none; }
.bs-moon { position: absolute; width: 66cqw; right: -7cqw; top: -16cqw; height: auto; overflow: visible; }
.bs-moon__body { filter: drop-shadow(0 0 14px color-mix(in srgb, var(--ec-glow) 75%, transparent)) drop-shadow(0 0 40px color-mix(in srgb, var(--ec-glow) 35%, transparent)); }
.bs-top { position: absolute; left: 0; top: 0; width: 100%; height: auto; overflow: visible; }
.bs-star { position: absolute; height: auto; translate: -50% -50%; overflow: visible; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--ec-glow) 60%, transparent)); }
.bs-star--soft { opacity: .55; }
.bs-bottom { position: absolute; left: -2%; bottom: 0; width: 104%; height: auto; overflow: visible; }

.bs-head { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; }

/* "Untuk" and "Dari": gold ribbons with notched ends */
.bs-ribbon {
    display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .45rem; max-width: 100%; text-align: center;
    margin: 0; padding: .3rem 1.6rem .36rem;
    background: var(--bs-foil); color: #3a1f05;
    clip-path: polygon(0 0, 100% 0, calc(100% - .7rem) 50%, 100% 100%, 0 100%, .7rem 50%);
    filter: drop-shadow(0 4px 6px rgb(0 0 0 / .3));
}
.bs-ribbon__label { font-family: var(--bs-caps); font-weight: 700; font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; opacity: .8; }
.bs-ribbon__name { font-weight: 700; font-size: 1.12rem; line-height: 1.15; overflow-wrap: anywhere; }

/* the title: big gold foil script, two lines at most */
.bs-title {
    margin: .35rem 0 0; padding: .05em .25em .12em;
    font-family: var(--bs-script); font-weight: 400; line-height: 1.02; text-wrap: balance; overflow-wrap: anywhere;
    --ec-foil-1: #c48a26; --ec-foil-2: #fff3c8; --ec-foil-3: #f0c35c;
    filter: drop-shadow(0 3px 0 rgb(0 0 0 / .3)) drop-shadow(0 10px 18px rgb(0 0 0 / .35));
}
.bs-title--xl { font-size: 4.3rem; }
.bs-title--lg { font-size: 3.6rem; }
.bs-title--md { font-size: 3rem; }
.bs-title--sm { font-size: 2.45rem; }

.bs-arabic {
    margin: .15rem 0 0; font-family: var(--bs-arabic); font-weight: 700; font-size: 1.85rem; line-height: 1.55;
    --ec-foil-1: #c48a26; --ec-foil-2: #fff1c2; --ec-foil-3: #e6b84e;
}

.bs-photos { position: relative; z-index: 2; display: flex; justify-content: center; gap: .5rem; margin: .5rem auto 0; }
.bs-photos .ec-photos__item {
    width: 9.4rem; margin: 0; padding: .28rem; border-radius: 50%; background: var(--bs-foil);
    box-shadow: 0 10px 22px -8px rgb(0 0 0 / .6);
}
.bs-photos[data-count="2"] .ec-photos__item { width: 7.6rem; }
.bs-photos[data-count="3"] .ec-photos__item { width: 6.2rem; }
.bs-photos[data-count="3"] { margin-bottom: .7rem; }
.bs-photos[data-count="3"] .ec-photos__item:nth-child(2) { translate: 0 .7rem; }
.bs-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; }

.bs-message {
    position: relative; z-index: 2; max-width: 19.5rem; margin: .45rem auto 0;
    font-weight: 600; font-size: 1.2rem; line-height: 1.42; color: var(--ec-ink);
    text-shadow: 0 1px 8px rgb(0 0 0 / .5);
}
.bs-poster--md .bs-message { font-size: 1.1rem; }
.bs-poster--lg .bs-message { font-size: 1rem; max-width: 20rem; }
.bs-poster--xl .bs-message { font-size: .93rem; max-width: 21rem; }
.bs-message p { margin-bottom: .5em; }

.bs-from { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .3rem; margin-top: .8rem; }
.bs-from__closing { margin: 0; font-style: italic; font-size: 1.05rem; color: var(--ec-muted); }

.bs-actions { position: relative; z-index: 2; color: var(--ec-ink); margin-top: 1.2rem; }
.bs-tap-hint { margin: .3rem 0 0; text-align: center; font-style: italic; font-size: .85rem; color: var(--ec-muted); }
.bs-branding { color: var(--ec-muted); }

/* ===================== the picture (?gambar=story|kotak) ===================== */
/* the poster fills the stage exactly (360×640 or 360×360) */
.ec-image .bs-page[data-ec-card] { padding: 6px 12px 4px !important; overflow: visible; }
.ec-image .bs-poster { min-height: 0; padding: 8.6rem 1.8rem 6.8rem; justify-content: center; }
.ec-image--story .bs-poster { min-height: 598px; }
.ec-image .bs-title--xl { font-size: 3.9rem; }
.ec-image .bs-title--lg { font-size: 3.3rem; }
.ec-image .bs-title--md { font-size: 2.75rem; }
.ec-image .bs-title--sm { font-size: 2.25rem; }
.ec-image .bs-arabic { font-size: 1.6rem; }
.ec-image .bs-message { margin-top: .3rem; max-width: none; font-size: 1.08rem; }
.ec-image .bs-poster--md .bs-message { font-size: 1rem; }
.ec-image .bs-poster--lg .bs-message { font-size: .92rem; }
.ec-image .bs-poster--xl .bs-message { font-size: .84rem; }
.ec-image .bs-from { margin-top: .5rem; }
.ec-image .bs-photos { margin-top: .3rem; }
.ec-image .bs-photos .ec-photos__item { width: 6.6rem; }
.ec-image .bs-photos[data-count="2"] .ec-photos__item { width: 5.6rem; }
.ec-image .bs-photos[data-count="3"] .ec-photos__item { width: 4.8rem; }
.ec-image .bs-branding { padding: 0 8px 2px; }
.ec-image .bs-branding a { flex-direction: row; gap: .45rem; }
.ec-image .ec-branding__label { font-size: .62rem; }
/* square: the moon and the lanterns smaller in the corners, the text one size down, no photos */
.ec-image--kotak .bs-poster { padding: 4.3rem 4.4rem 3.4rem; min-height: 336px; }
.ec-image--kotak .bs-moon { width: 42cqw; right: -5cqw; top: -11cqw; }
.ec-image--kotak .bs-top { width: 70%; }
.ec-image--kotak .bs-bottom { left: 24%; width: 52%; }
.ec-image--kotak .bs-ribbon { padding: .2rem 1.3rem .24rem; }
.ec-image--kotak .bs-ribbon__name { font-size: .92rem; }
.ec-image--kotak .bs-title { margin-top: .1rem; }
.ec-image--kotak .bs-title--xl { font-size: 2.9rem; }
.ec-image--kotak .bs-title--lg { font-size: 2.45rem; }
.ec-image--kotak .bs-title--md { font-size: 2.05rem; }
.ec-image--kotak .bs-title--sm { font-size: 1.7rem; }
.ec-image--kotak .bs-arabic { font-size: 1.15rem; line-height: 1.5; margin-top: 0; }
.ec-image--kotak .bs-message { font-size: .86rem; margin-top: .1rem; line-height: 1.35; }
.ec-image--kotak .bs-poster--md .bs-message { font-size: .8rem; }
.ec-image--kotak .bs-poster--lg .bs-message, .ec-image--kotak .bs-poster--xl .bs-message { font-size: .72rem; }
.ec-image--kotak .bs-from { margin-top: .3rem; gap: .15rem; }
.ec-image--kotak .bs-from__closing { font-size: .82rem; }
.ec-image--kotak .bs-photos { display: none; }
.ec-image--kotak .bs-branding { position: relative; z-index: 3; margin-top: -.1rem; }