/* Bunga Matahari (wisuda/bunga-matahari): a warm watercolour sunflower poster, the picture first.
   Sizes inside the poster are in cqw (the frame's width), so the link and the picture stage (360 px) match. */

:root {
    --ec-paper: #fff7e6;
    --ec-wash1: #ffc93c;
    --ec-wash2: #9fd36a;
    --ec-title: #5a2e0c;
    --ec-ink: #3a2614;
    --ec-muted: #7d5634;
    --ec-ray: #ffd23f;
    --ec-ray2: #f39200;
    --ec-disc: #5b2d0d;
    --ec-leaf: #5aa548;
    --ec-leaf2: #1f5e2c;
    --ec-babys: #ffffff;
    --ec-ribbon: #d7262e;
    --ec-cap: #1d1d2b;
    --ec-tassel: #f2b632;
    --ec-tape: #f6a3b5;
    --ec-sky1: #ffe08a;
    --ec-sky2: #f0961e;
    --ec-dusk: #6b2c07;
    --bm-script: 'Playball', 'Cormorant Garamond', cursive;
    --bm-serif: 'Cormorant Garamond', Georgia, serif;
    --bm-sans: 'Montserrat', 'Segoe UI', sans-serif;
}

/* the paper (also the picture's side bands when a long card is shrunk to fit) */
body.bm {
    margin: 0;
    color: var(--ec-ink);
    font-family: var(--bm-serif);
    background:
        radial-gradient(60% 40% at 0% 0%, color-mix(in srgb, var(--ec-wash1) 35%, transparent), transparent 75%),
        radial-gradient(60% 40% at 100% 100%, color-mix(in srgb, var(--ec-wash1) 30%, transparent), transparent 75%),
        var(--ec-paper);
}

/* =================== cover: the diploma =================== */
.bm-cover {
    flex-direction: column; gap: 8px; padding: 22px 18px 18vh;
    color: #fff;
    background:
        radial-gradient(70% 46% at 50% 40%, color-mix(in srgb, var(--ec-sky1) 75%, transparent), transparent 75%),
        linear-gradient(180deg, color-mix(in srgb, var(--ec-sky2) 55%, var(--ec-dusk)) 0%, var(--ec-sky2) 50%, color-mix(in srgb, var(--ec-sky2) 70%, var(--ec-dusk)) 100%);
    --ec-open-ms: 900;
}
.bm-cover > *:not(.bm-cover__glow, .bm-cover__drift, .bm-cover__flowers, .ec-tap) { position: relative; z-index: 2; }
/* sized by the screen, but never larger than the cover itself: it must not make the cover scroll */
.bm-cover__glow {
    position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(circle at 50% 42%, color-mix(in srgb, #fff 45%, transparent) 0, color-mix(in srgb, var(--ec-sky1) 35%, transparent) 26vmin, transparent 58vmin);
}
.bm-cover__from { text-shadow: 0 2px 14px color-mix(in srgb, var(--ec-dusk) 60%, transparent); }
.bm-cover__from .ec-from__label { font-family: var(--bm-sans); font-weight: 600; font-size: .66rem; letter-spacing: .28em; opacity: .92; }
.bm-cover__from .ec-from__name { font-family: var(--bm-script); font-size: 2.1rem; line-height: 1.15; max-width: 20rem; text-wrap: balance; }

/* the flowers sit on the edges (never past them: the cover must not scroll); the drawings run out of their boxes */
.bm-cover__flowers { position: absolute; bottom: 0; z-index: 1; width: min(72vw, 340px, 40vh); height: auto; overflow: visible; pointer-events: none; }
.bm-cover__flowers--l { left: -8vw; }
.bm-cover__flowers--r { right: -8vw; }
.bm-cover__flowers--tl, .bm-cover__flowers--tr { top: 0; bottom: auto; width: min(40vw, 190px, 23vh); }
.bm-cover__flowers--tl { left: 0; }
.bm-cover__flowers--tr { right: 0; transform: scaleX(-1); }

/* the stage holds the scroll, and the unrolled sheet in the same place */
.bm-stage { position: relative; width: min(88vw, 360px); height: min(40vh, 300px); flex-shrink: 0; display: grid; place-items: center; }
.bm-scroll { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 10px 16px color-mix(in srgb, var(--ec-dusk) 45%, transparent)); transform: rotate(-6deg); }
.bm-scroll__bow, .bm-scroll__tails, .bm-scroll__band, .bm-loop, .bm-tail, .bm-knot { transform-box: view-box; transform-origin: 0 0; }
.bm-untie {
    position: absolute; left: 30%; top: 22%; width: 40%; height: 56%;
    border: 0; padding: 0; border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.bm-untie:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* the loosening knot: each tap the loops sag a little more */
.bm-stage[data-step="1"] .bm-loop--l { transform: rotate(-10deg) scale(.86); }
.bm-stage[data-step="1"] .bm-loop--r { transform: rotate(8deg) scale(.86); }
.bm-stage[data-step="2"] .bm-loop--l { transform: rotate(-26deg) scale(.66); }
.bm-stage[data-step="2"] .bm-loop--r { transform: rotate(22deg) scale(.66); }
.bm-stage[data-step="2"] .bm-tail--l { transform: rotate(12deg); }
.bm-stage[data-step="2"] .bm-tail--r { transform: rotate(-10deg); }
.bm-loop, .bm-tail { transition: transform .45s cubic-bezier(.3, 1.6, .5, 1); }

/* the diploma, unrolled */
.bm-sheet {
    position: absolute; left: 50%; top: 50%; width: min(52vw, 214px); height: 86%; translate: -50% -50%;
    border-radius: 6px; opacity: 0; transform: scaleY(.1);
    background: linear-gradient(180deg, #fffaf0, #fbeed4 60%, #f2dcb2);
    box-shadow: 0 18px 30px -12px color-mix(in srgb, var(--ec-dusk) 70%, transparent);
}
.bm-sheet::before, .bm-sheet::after {
    content: ''; position: absolute; left: -10px; right: -10px; height: 18px; border-radius: 9px;
    background: linear-gradient(180deg, #fffaf0, #e8cfa3 60%, #c9a671);
}
.bm-sheet::before { top: -9px; }
.bm-sheet::after { bottom: -9px; }
.bm-sheet svg { display: block; width: 100%; height: 100%; padding: 12px 8px; }

.bm-hint { margin: 2px 0 0; font-family: var(--bm-serif); font-style: italic; font-weight: 600; font-size: 1.12rem; text-align: center; text-shadow: 0 2px 12px color-mix(in srgb, var(--ec-dusk) 70%, transparent); }
.bm-hint__count {
    display: inline-block; margin-left: .3rem; padding: .08rem .55rem; border-radius: 999px; font-family: var(--bm-sans); font-style: normal; font-size: .74rem; font-weight: 700;
    color: var(--ec-title); background: #fff; text-shadow: none;
}
.bm-cover__to { margin-top: 2px; }
.bm-cover__to .ec-recipient__greeting { font-family: var(--bm-sans); font-weight: 600; font-size: .64rem; letter-spacing: .3em; opacity: .92; }
.bm-cover__to .ec-recipient__name { font-family: var(--bm-script); font-size: 2.4rem; line-height: 1.1; max-width: 20rem; text-wrap: balance; text-shadow: 0 2px 16px color-mix(in srgb, var(--ec-dusk) 70%, transparent); }
.bm-skip { margin-top: 2px; border: 0; background: none; color: #fff; font: italic 600 1rem var(--bm-serif); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; text-shadow: 0 1px 8px color-mix(in srgb, var(--ec-dusk) 70%, transparent); }

/* sunflower petals drifting by (cover only) */
.bm-cover__drift { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bm-cover__drift i {
    position: absolute; top: -20px; width: 12px; height: 20px; border-radius: 50% 50% 50% 50% / 70% 70% 30% 30%;
    background: linear-gradient(180deg, var(--ec-ray), var(--ec-ray2)); opacity: 0;
}
@media (prefers-reduced-motion: no-preference) {
    .bm-cover__drift i { animation: bm-drift 10s linear var(--d) infinite; }
    .bm-stage:not([data-step="3"]) .bm-scroll__bow { animation: bm-sway 3.2s ease-in-out infinite; }
    .bm-stage.is-tug .bm-scroll { animation: bm-tug .4s ease; }
}
@keyframes bm-drift { 0% { transform: translate(0, 0) rotate(0deg); opacity: 0; } 10% { opacity: .9; } 100% { transform: translate(-14vw, 110vh) rotate(540deg); opacity: 0; } }
@keyframes bm-sway { 0%, 100% { rotate: -2deg; } 50% { rotate: 2deg; } }
@keyframes bm-tug { 30% { transform: rotate(-9deg) scale(1.03); } 65% { transform: rotate(-4deg) scale(.99); } }

/* =================== the card: one poster =================== */
.bm-page { position: relative; padding: 0 0 8px; min-height: 100vh; }
.bm-defs { position: absolute; width: 0; height: 0; overflow: hidden; }

.bm-frame { container-type: inline-size; width: 100%; max-width: 460px; margin: 0 auto; }
.bm-poster {
    position: relative; width: 100%;
    min-height: 177.8cqw; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 35cqw 0 40cqw;
    text-align: center;
    background:
        radial-gradient(52% 26% at 6% 6%, color-mix(in srgb, var(--ec-wash1) 55%, transparent), transparent 72%),
        radial-gradient(40% 20% at 96% 6%, color-mix(in srgb, var(--ec-wash2) 45%, transparent), transparent 72%),
        radial-gradient(58% 28% at 100% 96%, color-mix(in srgb, var(--ec-wash1) 50%, transparent), transparent 72%),
        radial-gradient(44% 22% at 0% 94%, color-mix(in srgb, var(--ec-wash2) 45%, transparent), transparent 72%),
        radial-gradient(60% 34% at 50% 52%, color-mix(in srgb, #fff 75%, transparent), transparent 76%),
        var(--ec-paper);
}
.bm-speckles { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }

.bm-corner { position: absolute; z-index: 1; height: auto; overflow: visible; pointer-events: none; }
.bm-corner--tl { left: -13cqw; top: -10cqw; width: 92cqw; }
.bm-corner--tr { right: -6cqw; top: -3cqw; width: 50cqw; }
.bm-corner--bl { left: -9cqw; bottom: 3cqw; width: 66cqw; }
.bm-corner--br { right: -12cqw; bottom: -2cqw; width: 100cqw; }
.bm-corner--ml { left: -6cqw; top: 47%; width: 22cqw; }
.bm-corner--mr { right: -5cqw; top: 40%; width: 22cqw; }

.bm-poster__text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; width: 100%; padding: 0 8cqw; }

.bm-to { flex-direction: column; gap: .4cqw; margin-bottom: 1.6cqw; max-width: 82cqw; }
.bm-to .ec-recipient__greeting { font-family: var(--bm-sans); font-weight: 600; font-size: 2.9cqw; letter-spacing: .32em; text-transform: uppercase; opacity: 1; color: var(--ec-muted); }
.bm-to .ec-recipient__name { font-family: var(--bm-serif); font-style: italic; font-weight: 700; font-size: 6.6cqw; line-height: 1.1; color: var(--ec-title); text-wrap: balance; }

.bm-title {
    margin: 0; max-width: 88cqw;
    font-family: var(--bm-script); font-weight: 400; font-size: 15.4cqw; line-height: 1.04;
    color: var(--ec-title); text-wrap: balance;
    text-shadow: 0 .5cqw 0 color-mix(in srgb, var(--ec-ray) 55%, transparent), 0 0 5cqw color-mix(in srgb, var(--ec-paper) 95%, transparent);
}
.bm-poster--title-m .bm-title { font-size: 12.6cqw; }
.bm-poster--title-l .bm-title { font-size: 10.4cqw; line-height: 1.08; }

.bm-rule { display: block; width: 48cqw; height: auto; margin: .6cqw auto 1.8cqw; overflow: visible; }

.bm-message { max-width: 72cqw; font-weight: 600; font-size: 4.75cqw; line-height: 1.46; color: var(--ec-ink); text-wrap: pretty; }
.bm-poster--msg-m .bm-message { font-size: 4.3cqw; max-width: 74cqw; }
.bm-poster--msg-l .bm-message { font-size: 3.9cqw; max-width: 76cqw; line-height: 1.42; }
.bm-message .ec-initial { font: inherit; color: inherit; }
.bm-message p:last-child { margin-bottom: 0; }

/* photos: polaroids held by washi tape */
.bm-photos { display: flex; justify-content: center; align-items: flex-start; gap: 3cqw; width: 100%; margin: 4.6cqw 0 0; }
.bm-photos .ec-photos__item {
    position: relative; margin: 0; width: 40cqw; padding: 1.8cqw 1.8cqw 6cqw; background: #fff;
    box-shadow: 0 1.6cqw 3.2cqw -1.4cqw rgb(60 30 10 / .5); transform: rotate(-3.5deg);
}
.bm-photos .ec-photos__item:nth-child(2) { transform: rotate(3deg) translateY(2.4cqw); }
.bm-photos .ec-photos__item:nth-child(3) { transform: rotate(-2deg) translateY(.6cqw); }
.bm-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
/* the tape: a translucent strip with a little pattern of dots */
.bm-photos .ec-photos__item::before {
    content: ''; position: absolute; left: 50%; top: -2.4cqw; z-index: 1; width: 16cqw; height: 5cqw; margin-left: -8cqw; transform: rotate(-5deg);
    background: radial-gradient(circle, color-mix(in srgb, #fff 70%, transparent) 0 .5cqw, transparent .6cqw) 0 0 / 2.4cqw 2.4cqw, color-mix(in srgb, var(--ec-tape) 78%, transparent);
}
.bm-photos[data-count="2"] .ec-photos__item { width: 31cqw; padding-bottom: 5cqw; }
.bm-photos[data-count="3"] .ec-photos__item { width: 23cqw; padding: 1.4cqw 1.4cqw 4cqw; }
.bm-photos[data-count="3"] .ec-photos__item::before { width: 11cqw; margin-left: -5.5cqw; height: 4cqw; }
/* with photos the words get a little smaller and the corners leave less room, so the poster still fits the picture */
.bm-poster:is(.bm-poster--photos-1, .bm-poster--photos-2, .bm-poster--photos-3) { padding: 31cqw 0 34cqw; }
.bm-poster--photos-1 .bm-photos .ec-photos__item { width: 34cqw; }
.bm-poster--photos-1:is(.bm-poster--msg-m, .bm-poster--msg-l) .bm-photos .ec-photos__item { width: 27cqw; padding-bottom: 4.6cqw; }
.bm-poster--title-s:is(.bm-poster--photos-1, .bm-poster--photos-2, .bm-poster--photos-3) .bm-title { font-size: 13cqw; }
.bm-poster--photos-1 .bm-message, .bm-poster--photos-2 .bm-message, .bm-poster--photos-3 .bm-message { font-size: 4.1cqw; }
.bm-poster--photos-1.bm-poster--msg-l .bm-message, .bm-poster--photos-2.bm-poster--msg-l .bm-message, .bm-poster--photos-3.bm-poster--msg-l .bm-message { font-size: 3.6cqw; }

.bm-sign { margin-top: 3cqw; display: flex; flex-direction: column; align-items: center; }
.bm-sign__closing { margin: 0; font-style: italic; font-weight: 600; font-size: 4.6cqw; color: var(--ec-muted); }
.bm-signature { width: 52cqw; margin-top: -1.4cqw; color: var(--ec-title); }
.bm-signature text { font-family: var(--bm-script); }

.bm-actions { color: var(--ec-ink); margin-top: 1.2rem; }
.bm-tap-hint { margin: .6rem 0 0; text-align: center; font-style: italic; font-size: .95rem; color: var(--ec-muted); }
.bm-branding { color: var(--ec-muted); }

/* sunflower petals that fall on a tap */
.bm-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.bm-fx i { position: absolute; left: 0; top: 0; display: block; }

/* short phones: the cover keeps the scroll and the recipient in one screen */
@media (max-height: 700px) {
    .bm-cover { gap: 4px; padding-top: 12px; padding-bottom: 15vh; }
    .bm-stage { height: min(34vh, 230px); }
    .bm-cover__from .ec-from__name { font-size: 1.8rem; }
    .bm-cover__to .ec-recipient__name { font-size: 2rem; }
    .bm-hint { font-size: 1rem; }
    .bm-cover__flowers { width: min(50vw, 220px, 30vh); }
    .bm-cover__flowers--tl, .bm-cover__flowers--tr { width: min(34vw, 150px, 20vh); }
}

/* a wide screen (the link picture of WhatsApp, a laptop): bigger flowers, closer to the corners */
@media (min-aspect-ratio: 4/3) {
    .bm-cover__flowers { width: min(30vw, 62vh); }
    .bm-cover__flowers--l { left: -2vw; }
    .bm-cover__flowers--r { right: -2vw; }
    .bm-cover__flowers--tl, .bm-cover__flowers--tr { width: min(20vw, 40vh); }
}

/* =================== picture mode =================== */
/* the poster fills the whole stage; the credit is a small pill on its lower edge */
.ec-image .bm-page { position: relative; padding: 0 !important; min-height: 0; }
.ec-image .bm-poster { min-height: 177.8cqw; }
.ec-image .bm-branding { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 8px 9px; }
.ec-image .bm-branding a { flex-direction: row; gap: .45rem; padding: 3px 12px; border-radius: 999px; opacity: 1; color: var(--ec-title); background: color-mix(in srgb, var(--ec-paper) 86%, transparent); }
.ec-image .bm-branding .ec-branding__label { font-size: .62rem; }

/* a square picture: the corners shrink, the words sit in the middle, no photos */
.ec-image--kotak .bm-poster { min-height: 100cqw; padding: 11cqw 0 12cqw; }
.ec-image--kotak .bm-branding { padding-bottom: 5px; }
.ec-image--kotak .bm-corner--tl { width: 48cqw; left: -9cqw; top: -8cqw; }
.ec-image--kotak .bm-corner--tr { width: 30cqw; right: -3cqw; top: -2cqw; }
.ec-image--kotak .bm-corner--bl { width: 40cqw; left: -6cqw; bottom: 4cqw; }
.ec-image--kotak .bm-corner--br { width: 58cqw; right: -8cqw; bottom: -2cqw; }
.ec-image--kotak .bm-corner--ml { width: 15cqw; left: -4cqw; top: 36%; }
.ec-image--kotak .bm-corner--mr { width: 15cqw; right: -3cqw; top: 34%; }
.ec-image--kotak .bm-poster__text { padding: 0 17cqw; }
.ec-image--kotak .bm-to { margin-bottom: .8cqw; }
.ec-image--kotak .bm-to .ec-recipient__greeting { font-size: 2.2cqw; }
.ec-image--kotak .bm-to .ec-recipient__name { font-size: 4.4cqw; }
/* (.bm-poster in the selector: stronger than the smaller sizes used with photos, which the square leaves out) */
.ec-image--kotak .bm-poster .bm-title { font-size: 10.4cqw; max-width: 66cqw; }
.ec-image--kotak .bm-poster--title-m .bm-title { font-size: 8.8cqw; }
.ec-image--kotak .bm-poster--title-l .bm-title { font-size: 7.4cqw; }
.ec-image--kotak .bm-rule { width: 30cqw; margin: .2cqw auto .8cqw; }
.ec-image--kotak .bm-poster .bm-message { font-size: 3.3cqw; max-width: 62cqw; line-height: 1.4; }
.ec-image--kotak .bm-poster--msg-m .bm-message { font-size: 3cqw; max-width: 64cqw; }
.ec-image--kotak .bm-poster--msg-l .bm-message { font-size: 2.7cqw; max-width: 66cqw; }
.ec-image--kotak .bm-photos { display: none; }
.ec-image--kotak .bm-sign { margin-top: 1.4cqw; }
.ec-image--kotak .bm-sign__closing { font-size: 3.2cqw; }
.ec-image--kotak .bm-signature { width: 38cqw; }