/* Pindah Tali (wisuda/pindah-tali): a bold modern graduation poster with colour blocks and foil balloons, picture-first */

:root {
    --ec-bg: #ffe6d4;
    --ec-bg2: #ffb994;
    --ec-blob: #f5916c;
    --ec-ink: #2a1c15;
    --ec-muted: #7d4c39;
    --ec-dark: #171311;
    --ec-gold: #dba43c;
    --ec-glow: #ffd877;
    --ec-flag: #ef6a47;
    --ec-flag2: #fff4e8;
    --ec-title: #171311;
    --ec-caps: #df5534;
    --ec-paper: #fffaf4;
    --pt-script: 'Kaushan Script', 'Pacifico', cursive;
    --pt-caps: 'Anton', 'Impact', 'Arial Narrow', sans-serif;
    --pt-text: 'Outfit', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --pt-gold: linear-gradient(135deg, #9b6714, #ffe7a2 30%, #d6a138 52%, #fff0c0 74%, #8f5c10);
}

body.pt {
    background: var(--ec-bg);
    color: var(--ec-ink);
    font-family: var(--pt-text);
    font-size: 1.05rem;
    line-height: 1.5;
}
.pt-defs { position: absolute; }

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

/* ---- the ground shared by the cover and the poster: organic colour blocks, line-art rings, a dot grid ---- */
.pt-blob { position: absolute; display: block; aspect-ratio: 1; }
.pt-blob--a { top: -9%; right: -32%; width: 90%; background: var(--ec-bg2); border-radius: 47% 53% 58% 42% / 49% 41% 59% 51%; }
.pt-blob--b { bottom: -30%; left: -34%; width: 94%; background: var(--ec-blob); border-radius: 58% 42% 38% 62% / 52% 58% 42% 48%; }
.pt-blob--c { top: 37%; left: -18%; width: 36%; background: var(--ec-bg2); opacity: .75; border-radius: 41% 59% 52% 48% / 58% 44% 56% 42%; }
.pt-ring { position: absolute; display: block; aspect-ratio: 1; border-radius: 50%; }
.pt-ring--1 { top: 19%; right: 5%; width: 5.4rem; border: 2px solid color-mix(in srgb, var(--ec-dark) 30%, transparent); }
.pt-ring--2 { bottom: 25%; left: -1.1rem; width: 3rem; border: 2.5px solid var(--ec-gold); }
.pt-ring--cover { top: 24%; left: -2.4rem; width: 8rem; border: 2px solid color-mix(in srgb, var(--ec-dark) 25%, transparent); }
.pt-dots {
    position: absolute; top: 43%; right: -1.6rem; width: 4.4rem; height: 3.2rem; opacity: .32;
    background: radial-gradient(circle, var(--ec-dark) 0 1.6px, transparent 2.2px) 0 0 / 11px 11px;
}
.pt-squiggle { position: absolute; bottom: 33%; right: -1.4rem; width: 4.4rem; height: auto; opacity: .38; }

/* ---- the moving touches ---- */
.pt-bob, .pt-twinkle { transform-box: fill-box; transform-origin: 50% 100%; }
.pt-twinkle { transform-origin: 50% 50%; }
@media (prefers-reduced-motion: no-preference) {
    .pt-bob { animation: pt-bob 4.4s ease-in-out var(--d, 0s) infinite; }
    .pt-twinkle { animation: pt-twinkle 2.2s ease-in-out var(--d, 0s) infinite; }
    .pt-cover__ground i { animation: pt-float 6s ease-in-out var(--d) infinite; }
    .pt-capfront__halo { animation: pt-glow 2.6s ease-in-out infinite; }
    .pt-hint__arrow { animation: pt-nudge 1.4s ease-in-out infinite; }
}
@keyframes pt-bob { 0%, 100% { translate: 0 0; rotate: -2deg; } 50% { translate: 0 -7px; rotate: 2deg; } }
@keyframes pt-twinkle { 0%, 100% { opacity: 1; scale: 1; } 50% { opacity: .35; scale: .6; } }
@keyframes pt-float { 0%, 100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(40deg); } }
@keyframes pt-glow { 50% { opacity: .55; } }
@keyframes pt-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }

/* ===================== cover ===================== */
.pt-cover {
    --ec-open-ms: 650;
    flex-direction: column; gap: .35rem;
    padding: 4.2rem 1rem 1.3rem;
    background: var(--ec-bg);
    text-align: center;
    transition: opacity .65s ease;
}
.ec-js [data-ec-cover].pt-cover { justify-content: center; }
.ec-opening .pt-cover { opacity: 0; }
/* clipped: the blocks and balloons run off the screen without making the cover scroll */
.pt-cover__ground { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.pt-cover__ground i {
    position: absolute; width: var(--s); height: calc(var(--s) * 2); border-radius: 2px; background: var(--c); opacity: .85;
}
.pt-cover__flags { position: absolute; top: 0; left: -2%; width: 104%; height: auto; }
.pt-cover__balloons { position: absolute; top: 2.4rem; width: min(32vw, 8.4rem); height: auto; overflow: visible; }
.pt-cover__balloons--l { left: -1.8rem; }
.pt-cover__balloons--r { right: -1.8rem; }
.pt-cover__from { position: relative; z-index: 2; }
.pt-cover__from .ec-from__label { font-family: var(--pt-caps); letter-spacing: .24em; font-size: .7rem; opacity: 1; color: var(--ec-muted); }
.pt-cover__from .ec-from__name { font-family: var(--pt-script); font-size: 2.1rem; line-height: 1.15; color: var(--ec-title); }

.pt-cap-button {
    position: relative; z-index: 2; display: block;
    width: min(88vw, 21rem, 42svh); margin: .3rem auto 0; padding: 0; border: 0; background: none; cursor: grab;
    touch-action: pan-y; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none;
}
.pt-cap-button:focus-visible { outline: 2px solid var(--ec-gold); outline-offset: 6px; border-radius: 1rem; }
.pt-capfront { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 16px 22px rgb(0 0 0 / .32)); }
/* the tassel turns around the button (160, 112): card.js mirrors it from the left side to the right */
.pt-tassel {
    transform-box: view-box; transform-origin: 160px 112px;
    transition: transform .85s cubic-bezier(.3, 1.35, .5, 1);
}
.pt-cap-button.is-dragging .pt-tassel { transition: none; }
.pt-cap-button.is-moved .pt-tassel { transform: scaleX(-1); }
.pt-cap-button.is-moved { cursor: default; }
.pt-cap-button.is-bump .pt-capfront { animation: pt-hop .6s ease; }
@keyframes pt-hop { 30% { transform: translateY(-14px) rotate(-3deg); } 60% { transform: translateY(2px) rotate(2deg); } }

.pt-hint { position: relative; z-index: 2; margin: .3rem 0 0; font-weight: 600; font-size: 1.05rem; color: var(--ec-ink); }
.pt-hint__arrow { display: inline-block; margin-left: .2rem; color: var(--ec-caps); font-weight: 700; }
.pt-cover__to { position: relative; z-index: 2; margin-top: .2rem; }
.pt-cover__to .ec-recipient__greeting { font-family: var(--pt-caps); letter-spacing: .24em; font-size: .7rem; opacity: 1; color: var(--ec-muted); }
.pt-cover__to .ec-recipient__name { font-family: var(--pt-script); font-size: 2.1rem; line-height: 1.15; color: var(--ec-title); }
.pt-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;
}

/* short screens (360×640): a smaller cap and corners, so the whole cover fits */
@media (max-height: 720px) {
    .pt-cover { padding-top: 3.4rem; gap: .2rem; }
    .pt-cap-button { width: min(80vw, 20rem, 38svh); }
    .pt-cover__balloons { width: min(26vw, 7rem); top: 2rem; }
    .pt-cover__from .ec-from__name, .pt-cover__to .ec-recipient__name { font-size: 1.8rem; }
}

/* ===================== the poster ===================== */
.pt-page { max-width: 27rem; margin: 0 auto; padding: 0 0 1rem; overflow: hidden; }
.pt-poster {
    position: relative; isolation: isolate; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    min-height: max(40rem, 100svh);
    padding: 5.6rem 1.5rem 8.4rem;
    background: var(--ec-bg);
}
.pt-ground { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.pt-confetti { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.pt-confetti i { position: absolute; border-radius: 2px; background: var(--c); }
.pt-confetti i.is-dot { border-radius: 50%; }
.pt-flags { position: absolute; z-index: 1; top: -.2rem; left: -3%; width: 106%; height: auto; pointer-events: none; }

.pt-deco { position: absolute; z-index: 1; height: auto; overflow: visible; pointer-events: none; }
.pt-deco--tr { right: -15%; top: 1.4rem; width: 44%; }
.pt-deco--tl { left: -11%; top: 3rem; width: 26%; }
.pt-deco--bl { left: -9%; bottom: -1.2rem; width: 42%; }
.pt-deco--br { right: -4%; bottom: 1.4rem; width: 50%; }

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

/* "Untuk": a dark tag, tipped a little */
.pt-to {
    display: inline-flex; flex-wrap: nowrap; white-space: nowrap; justify-content: center; align-items: baseline; column-gap: .5rem;
    max-width: 92%; margin: 0 0 1.5rem; padding: .32rem 1rem .38rem; border-radius: .6rem;
    background: var(--ec-dark); color: var(--ec-paper); rotate: -2.5deg;
    box-shadow: 4px 4px 0 var(--ec-gold);
}
.pt-to__label { font-family: var(--pt-caps); font-size: .78rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ec-gold); }
.pt-to__name { font-weight: 600; font-size: 1.15rem; line-height: 1.2; overflow-wrap: anywhere; }
.pt-to--long { flex-wrap: wrap; white-space: normal; }
.pt-to--long .pt-to__name { font-size: .98rem; }

/* the title: bold caps, then a big bold script word with a gold offset shadow; a mortarboard tipped onto it */
.pt-title { position: relative; margin: 0; font-weight: 400; display: flex; flex-direction: column; align-items: center; line-height: 1; }
.pt-title__cap { position: absolute; left: -1.7rem; top: -1.75rem; width: 4.4rem; height: auto; overflow: visible; rotate: -18deg; z-index: 1; filter: drop-shadow(0 4px 4px rgb(0 0 0 / .25)); }
.pt-title__script > .pt-title__cap { left: -.6rem; top: -1.4rem; }
.pt-title__caps {
    position: relative; z-index: 2;
    font-family: var(--pt-caps); font-size: 2.6rem; letter-spacing: .1em; text-transform: uppercase; line-height: 1.02;
    color: var(--ec-caps); padding-left: .1em;
}
.pt-title__caps--long { font-size: 1.8rem; letter-spacing: .06em; }
.pt-title__script {
    position: relative; z-index: 2; display: block; margin-top: -.15rem; padding: 0 .2em .12em;
    font-family: var(--pt-script); font-size: 5.3rem; line-height: 1.05; white-space: nowrap;
    color: var(--ec-title); text-shadow: 3px 4px 0 var(--ec-gold);
}
.pt-title__script--long { font-size: 4rem; }
.pt-title__script--xlong { font-size: 3rem; white-space: normal; }

/* photos: white prints, tipped, with a gold sticker */
.pt-photos { position: relative; z-index: 2; display: flex; justify-content: center; margin: .9rem auto 0; }
.pt-photos .ec-photos__item {
    position: relative; width: 8.4rem; margin: 0; padding: .32rem .32rem 1rem; border-radius: .25rem; background: var(--ec-paper);
    box-shadow: 0 12px 22px -10px rgb(0 0 0 / .55);
}
.pt-photos .ec-photos__item::after {
    content: ''; position: absolute; right: -.45rem; top: -.45rem; width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: var(--pt-gold); box-shadow: 0 2px 4px rgb(0 0 0 / .3);
}
.pt-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: .12rem; }
.pt-photos[data-count="1"] .ec-photos__item { width: 10rem; rotate: 3deg; }
.pt-photos[data-count="2"] .ec-photos__item { width: 7.4rem; }
.pt-photos[data-count="2"] .ec-photos__item:nth-child(1) { rotate: -6deg; margin-right: -.5rem; }
.pt-photos[data-count="2"] .ec-photos__item:nth-child(2) { rotate: 5deg; margin-top: .6rem; }
.pt-photos[data-count="3"] .ec-photos__item { width: 6.2rem; }
.pt-photos[data-count="3"] .ec-photos__item:nth-child(1) { rotate: -8deg; margin-right: -.9rem; margin-top: .6rem; }
.pt-photos[data-count="3"] .ec-photos__item:nth-child(2) { z-index: 1; }
.pt-photos[data-count="3"] .ec-photos__item:nth-child(3) { rotate: 7deg; margin-left: -.9rem; margin-top: .6rem; }
.pt-photos .ec-photos__item:not(:first-child)::after { display: none; }

.pt-message { position: relative; z-index: 2; max-width: 18rem; margin: 1rem auto 0; font-weight: 500; font-size: 1.08rem; line-height: 1.5; color: var(--ec-ink); }
.pt-poster--md .pt-message { font-size: 1rem; }
.pt-poster--lg .pt-message { font-size: .94rem; max-width: 19rem; }
.pt-poster--xl .pt-message { font-size: .87rem; max-width: 20rem; }
.pt-message p { margin-bottom: .5em; }

.pt-from { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; margin-top: .85rem; max-width: 100%; }
.pt-from__closing { margin: 0; font-style: italic; font-size: .98rem; color: var(--ec-muted); }
.pt-from__name { margin: .05rem 0 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: .5rem; line-height: 1.15; }
.pt-from__label { font-family: var(--pt-caps); font-size: .76rem; letter-spacing: .22em; text-transform: uppercase; color: var(--ec-caps); }
.pt-from__sender { font-family: var(--pt-script); font-size: 1.9rem; color: var(--ec-title); overflow-wrap: anywhere; }
.pt-from__name--long .pt-from__sender { font-size: 1.45rem; }

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

@media (max-width: 370px) {
    .pt-title__script { font-size: 4.8rem; }
    .pt-title__script--long { font-size: 3.6rem; }
    .pt-title__caps { font-size: 2.3rem; }
}

/* ===================== the picture (?gambar=story|kotak) ===================== */
/* the poster fills the stage edge to edge; the credit sits on its bottom edge */
.ec-image .pt-page[data-ec-card] { position: relative; padding: 0 !important; overflow: hidden; }
.ec-image .pt-poster { min-height: 0; padding: 5.3rem 1.4rem 7.6rem; }
.ec-image--story .pt-poster { min-height: 640px; }
.ec-image .pt-message { max-width: 17.5rem; }
.ec-image .pt-photos { margin-top: .6rem; }
.ec-image .pt-photos[data-count="1"] .ec-photos__item { width: 6rem; }
.ec-image .pt-photos[data-count="2"] .ec-photos__item { width: 5rem; }
.ec-image .pt-photos[data-count="3"] .ec-photos__item { width: 4.3rem; }
/* the corner pieces go lower in the picture, out of the text's way; the long sender one size down */
.ec-image .pt-deco--br { bottom: .2rem; width: 46%; }
.ec-image .pt-poster:has(.pt-photos) .pt-deco--br { bottom: -1.3rem; }
.ec-image .pt-from__name--long .pt-from__sender { font-size: 1.25rem; }
.ec-image .pt-poster:has(.pt-photos) .pt-squiggle, .ec-image .pt-poster--lg .pt-squiggle, .ec-image .pt-poster--xl .pt-squiggle { display: none; }
.ec-image--story .pt-poster:has(.pt-photos) { padding-top: 4.6rem; padding-bottom: 6.8rem; }
.ec-image--story .pt-poster:has(.pt-photos) .pt-to { margin-bottom: 1.2rem; }
.ec-image--story .pt-poster:has(.pt-photos) .pt-title__script { font-size: 4.1rem; }
.ec-image--story .pt-poster:has(.pt-photos) .pt-title__script--long { font-size: 3.3rem; }
.ec-image--story .pt-poster:has(.pt-photos) .pt-title__caps { font-size: 2.2rem; }
.ec-image--story .pt-poster:has(.pt-photos) .pt-message { margin-top: .7rem; }
.ec-image--story .pt-poster--lg:has(.pt-photos), .ec-image--story .pt-poster--xl:has(.pt-photos) { padding-top: 4.6rem; padding-bottom: 6rem; }
.ec-image--story .pt-poster--lg:has(.pt-photos) .pt-title__script, .ec-image--story .pt-poster--xl:has(.pt-photos) .pt-title__script { font-size: 3.6rem; }
.ec-image--story .pt-poster--lg:has(.pt-photos) .pt-title__caps, .ec-image--story .pt-poster--xl:has(.pt-photos) .pt-title__caps { font-size: 1.9rem; }
.ec-image--story .pt-poster--lg:has(.pt-photos) .pt-message, .ec-image--story .pt-poster--xl:has(.pt-photos) .pt-message { font-size: .82rem; line-height: 1.42; }
.ec-image .pt-branding { position: absolute; z-index: 3; left: 0; right: 0; bottom: 0; padding: 0 8px 9px; }
.ec-image .pt-branding a {
    flex-direction: row; gap: .45rem; padding: 3px 12px; border-radius: 999px; opacity: 1;
    color: var(--ec-paper); background: color-mix(in srgb, var(--ec-dark) 82%, transparent);
}
.ec-image .ec-branding__label { font-size: .62rem; }

/* square: corner pieces smaller, the title one size down, the tag in one line, no photos */
.ec-image--kotak .pt-poster { min-height: 360px; padding: 2.9rem 3rem 2.6rem; }
.ec-image--kotak .pt-flags { top: -.8rem; left: 4%; width: 92%; }
.ec-image--kotak .pt-deco--tr { width: 30%; right: -10%; top: .4rem; }
.ec-image--kotak .pt-deco--tl { width: 19%; left: -7%; top: 1.6rem; }
.ec-image--kotak .pt-deco--bl { width: 28%; left: -8%; bottom: -1.6rem; }
.ec-image--kotak .pt-deco--br { width: 27%; right: -4%; bottom: 2.4rem; }
.ec-image--kotak .pt-blob--a { width: 70%; right: -26%; top: -16%; }
.ec-image--kotak .pt-blob--b { width: 62%; left: -28%; bottom: -44%; }
.ec-image--kotak .pt-blob--c, .ec-image--kotak .pt-dots, .ec-image--kotak .pt-squiggle, .ec-image--kotak .pt-ring--2 { display: none; }
.ec-image--kotak .pt-ring--1 { width: 3.6rem; top: 24%; right: 3%; }
.ec-image--kotak .pt-to { margin-bottom: .9rem; padding: .2rem .8rem .26rem; }
.ec-image--kotak .pt-to__name { font-size: .95rem; }
.ec-image--kotak .pt-to--long .pt-to__name { font-size: .82rem; }
.ec-image--kotak .pt-title__cap { width: 3rem; left: -1.2rem; top: -1.25rem; }
.ec-image--kotak .pt-title__caps { font-size: 1.75rem; }
.ec-image--kotak .pt-title__caps--long { font-size: 1.3rem; }
.ec-image--kotak .pt-title__script { font-size: 3.6rem; text-shadow: 2px 3px 0 var(--ec-gold); }
.ec-image--kotak .pt-title__script--long { font-size: 2.8rem; }
.ec-image--kotak .pt-title__script--xlong { font-size: 2.2rem; }
.ec-image--kotak .pt-photos { display: none; }
.ec-image--kotak .pt-message { margin-top: .45rem; font-size: .84rem; line-height: 1.38; max-width: 16.5rem; }
.ec-image--kotak .pt-poster--md .pt-message { font-size: .78rem; }
.ec-image--kotak .pt-poster--lg .pt-message, .ec-image--kotak .pt-poster--xl .pt-message { font-size: .7rem; line-height: 1.3; max-width: 17.5rem; }
.ec-image--kotak .pt-from { margin-top: .35rem; }
.ec-image--kotak .pt-from__closing { font-size: .78rem; }
.ec-image--kotak .pt-from__sender { font-size: 1.4rem; }
.ec-image--kotak .pt-from__name--long .pt-from__sender { font-size: 1.1rem; }
.ec-image--kotak .pt-from__label { font-size: .64rem; }
.ec-image--kotak .pt-poster--lg, .ec-image--kotak .pt-poster--xl { padding: 2.5rem 2.8rem 2.2rem; }
.ec-image--kotak .pt-poster--lg .pt-title__script, .ec-image--kotak .pt-poster--xl .pt-title__script { font-size: 3rem; }
.ec-image--kotak .pt-poster--lg .pt-title__caps, .ec-image--kotak .pt-poster--xl .pt-title__caps { font-size: 1.45rem; }
.ec-image--kotak .pt-poster--lg .pt-to, .ec-image--kotak .pt-poster--xl .pt-to { margin-bottom: .7rem; }
.ec-image--kotak .pt-branding { padding-bottom: 5px; }
/* square with long names: the tag in one line, the sender smaller, the bottom corner piece out of the way */
.ec-image--kotak .pt-to--long { flex-wrap: nowrap; white-space: nowrap; }
.ec-image--kotak .pt-to--long .pt-to__name { font-size: .74rem; }
.ec-image--kotak .pt-from__name--long .pt-from__sender { font-size: .98rem; line-height: 1.05; }
.ec-image--kotak .pt-poster:has(.pt-from__name--long) .pt-deco--br { display: none; }
.ec-image--kotak .pt-poster--lg, .ec-image--kotak .pt-poster--xl { padding-bottom: 2.7rem; }

/* wide screens (the WhatsApp link picture, a computer): the flags and blocks keep a phone-like size */
@media (min-width: 640px) {
    .pt-cover__flags { left: 50%; width: 44rem; translate: -50% 0; }
    .pt-cover .pt-blob--a { width: 30rem; right: -6rem; top: -12rem; }
    .pt-cover .pt-blob--b { width: 30rem; left: -8rem; bottom: -14rem; }
    .pt-cover__balloons { width: 8.4rem; }
}