/* Amplop Gading (terima-kasih/dasar), luxe: an envelope as fine stationery */

:root {
    --ec-bg: #3f0a1a;
    --ec-bg2: #7a1530;
    --ec-stock: #8e1b36;
    --ec-paper: #fff9f0;
    --ec-ink: #3d0a18;
    --ec-muted: #8a4a5a;
    --ec-light: #f8e6c8;
    --ec-seal: #b3122e;
    --amg-foil: linear-gradient(135deg, #a8741a, #ffe9a6 28%, #d4a63c 50%, #fff1c2 72%, #9a6614);
    --amg-gold: #c9962e;
    --amg-serif: 'Cormorant Garamond', 'Times New Roman', serif;
    --amg-script: 'Pinyon Script', 'Cormorant Garamond', cursive;
    --amg-text: 'Lora', Georgia, serif;
    /* damask in fine gold lines over the deep ground */
    --amg-damask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='96' height='96'%3E%3Cg fill='none' stroke='%23e8c674' stroke-opacity='.2' stroke-width='1'%3E%3Cpath d='M48 8c10 12 10 22 0 32-10-10-10-20 0-32Z'/%3E%3Cpath d='M48 88c10-12 10-22 0-32-10 10-10 20 0 32Z'/%3E%3Cpath d='M8 48c12-10 22-10 32 0-10 10-20 10-32 0Z'/%3E%3Cpath d='M88 48c-12-10-22-10-32 0 10 10 20 10 32 0Z'/%3E%3Cpath d='M30 30c6 2 10 6 12 12M66 30c-6 2-10 6-12 12M30 66c6-2 10-6 12-12M66 66c-6-2-10-6-12-12'/%3E%3C/g%3E%3Cg fill='%23e8c674' fill-opacity='.3'%3E%3Ccircle cx='48' cy='48' r='2.4'/%3E%3Ccircle cx='0' cy='0' r='2'/%3E%3Ccircle cx='96' cy='0' r='2'/%3E%3Ccircle cx='0' cy='96' r='2'/%3E%3Ccircle cx='96' cy='96' r='2'/%3E%3C/g%3E%3C/svg%3E");
}

body.amg {
    background:
        var(--amg-damask) 0 0 / 96px 96px,
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ec-bg2) 85%, #ffd36b), transparent 60%),
        linear-gradient(180deg, var(--ec-bg2) 0%, var(--ec-bg) 70%);
    background-attachment: fixed;
    color: var(--ec-light);
    font-family: var(--amg-text);
    font-size: 1.04rem;
    line-height: 1.85;
}
.amg-defs { position: absolute; }

/* warm light drifting behind everything */
.amg-wash { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
.amg-wash span { position: absolute; border-radius: 50%; filter: blur(50px); }
.amg-wash span:nth-child(1) { width: 70vmax; height: 70vmax; left: -30vmax; top: -30vmax; background: radial-gradient(circle, color-mix(in srgb, #ffcf6b 45%, transparent), transparent 70%); opacity: .45; }
.amg-wash span:nth-child(2) { width: 60vmax; height: 60vmax; right: -30vmax; bottom: -26vmax; background: radial-gradient(circle, color-mix(in srgb, var(--ec-seal) 70%, transparent), transparent 70%); opacity: .55; }
@media (prefers-reduced-motion: no-preference) {
    .amg-wash span { animation: amg-drift 20s ease-in-out infinite alternate; }
    .amg-wash span:nth-child(2) { animation-duration: 26s; animation-delay: -8s; }
}
@keyframes amg-drift { to { transform: translate(5vw, 5vh) scale(1.08); } }

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

/* ---------- shared ornaments ---------- */
.amg-filigree { position: absolute; width: 4.4rem; height: 4.4rem; overflow: visible; pointer-events: none; }
.amg-filigree--tl { top: 0; left: 0; }
.amg-filigree--tr { top: 0; right: 0; transform: scaleX(-1); }
.amg-filigree--bl { bottom: 0; left: 0; transform: scaleY(-1); }
.amg-filigree--br { bottom: 0; right: 0; transform: scale(-1); }
.amg-flourish { display: block; width: 11rem; height: auto; margin: .2rem auto; overflow: visible; }
.amg-flourish--small { width: 8.5rem; }

/* ---------- cover ---------- */
.amg-cover {
    --ec-open-ms: 600;
    position: relative; z-index: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: .6rem;
    min-height: 100vh;
    padding: 2.6rem 1.4rem;
    text-align: center;
    transition: opacity .6s ease;
}
.ec-js .amg-cover {
    background:
        var(--amg-damask) 0 0 / 96px 96px,
        radial-gradient(ellipse at 50% 0%, color-mix(in srgb, var(--ec-bg2) 85%, #ffd36b), transparent 60%),
        linear-gradient(180deg, var(--ec-bg2) 0%, var(--ec-bg) 70%);
}
.amg-frame { position: absolute; inset: 12px; pointer-events: none; }
.amg-frame::before { content: ''; position: absolute; inset: 6px; border: 2px solid transparent; border-image: var(--amg-foil) 1; }
.amg-frame::after { content: ''; position: absolute; inset: 12px; border: 1px solid transparent; border-image: var(--amg-foil) 1; opacity: .7; }
.amg-frame .amg-filigree { width: 5rem; height: 5rem; }

.amg-glints { position: absolute; inset: 0; pointer-events: none; }
.amg-glints span {
    position: absolute; left: var(--x); top: var(--y);
    width: var(--s); height: var(--s);
    background: var(--amg-foil);
    clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%);
    opacity: .8;
}
@media (prefers-reduced-motion: no-preference) {
    .amg-glints span { animation: amg-twinkle 3.4s ease-in-out var(--d) infinite; }
}
@keyframes amg-twinkle { 0%, 100% { opacity: .15; transform: scale(.5) rotate(0); } 50% { opacity: 1; transform: scale(1.1) rotate(45deg); } }

.amg-cover__from .ec-from__label { font-family: var(--amg-serif); font-size: .74rem; letter-spacing: .36em; color: color-mix(in srgb, var(--ec-light) 80%, transparent); opacity: 1; }
.amg-cover__from .ec-from__name { font-family: var(--amg-script); font-size: 2.3rem; line-height: 1.15; color: #f6d27a; }
.amg-cover__to { margin-top: 1rem; }
.amg-cover__to .ec-recipient__greeting { font-family: var(--amg-serif); letter-spacing: .36em; color: color-mix(in srgb, var(--ec-light) 80%, transparent); }
.amg-cover__to .ec-recipient__name { max-width: 20rem; font-family: var(--amg-script); font-size: clamp(2.5rem, 11vw, 3.2rem); line-height: 1.1; color: var(--ec-light); text-wrap: balance; }

/* the envelope: layers on top of one another (back, card, pocket, flap, seal) */
.amg-envelope {
    position: relative;
    width: min(82vw, 330px);
    aspect-ratio: 320 / 220;
    margin-top: 1.6rem;
    perspective: 1000px;
    filter: drop-shadow(0 26px 30px rgb(0 0 0 / .45));
}
.amg-env { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.amg-env--back { z-index: 1; }
.amg-inner { z-index: 2; display: flex; justify-content: center; }
.amg-inner__card {
    position: absolute; left: 9%; right: 9%; top: 7%; height: 86%;
    display: flex; flex-direction: column; align-items: center; gap: 6%;
    padding: 7% 12% 0;
    background: var(--ec-paper);
    border-radius: 3px;
    box-shadow: inset 0 0 0 3px #d4a63c, inset 0 0 0 5px var(--ec-paper), inset 0 0 0 6px #d4a63c;
    transition: transform 1s cubic-bezier(.2, .7, .2, 1) .55s;
}
.amg-inner__card svg { width: 30%; height: auto; overflow: visible; }
.amg-inner__line { display: block; width: 80%; height: 3px; border-radius: 2px; background: color-mix(in srgb, #d4a63c 45%, transparent); }
.amg-inner__line--short { width: 55%; }
.amg-env--front { z-index: 3; }
.amg-env--flap { z-index: 4; transition: z-index 0s linear .45s; }
.amg-flap { transform-origin: 160px 2px; transform-box: view-box; transition: transform .7s ease-in-out .15s; }
.amg-flap__liner { opacity: 0; transition: opacity 0s linear .45s; }

/* the seal: two halves of one wax disc */
.amg-seal {
    position: absolute; z-index: 5; left: 50%; top: 68%;
    width: 4.2rem; height: 4.2rem; margin: -2.1rem 0 0 -2.1rem;
    padding: 0; border: 0; background: none; cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.amg-seal:focus-visible { outline: 1px solid #f6d27a; outline-offset: 6px; border-radius: 50%; }
.amg-seal__half { position: absolute; inset: 0; transition: transform .6s cubic-bezier(.3, .7, .2, 1), opacity .5s ease .2s; }
.amg-seal__half--left { clip-path: polygon(0 0, 54% 0, 44% 30%, 56% 52%, 46% 74%, 52% 100%, 0 100%); }
.amg-seal__half--right { clip-path: polygon(54% 0, 100% 0, 100% 100%, 52% 100%, 46% 74%, 56% 52%, 44% 30%); }
.amg-seal__wax {
    position: absolute; inset: 0;
    display: grid; place-items: center;
    border-radius: 48% 52% 50% 50% / 52% 48% 52% 48%;
    background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--ec-seal) 60%, white), var(--ec-seal) 55%, color-mix(in srgb, var(--ec-seal) 65%, black));
    box-shadow: 0 6px 12px -4px rgb(0 0 0 / .55), inset 0 0 0 5px color-mix(in srgb, var(--ec-seal) 80%, black), inset 0 0 0 7px color-mix(in srgb, #d4a63c 55%, transparent);
}
.amg-seal__wax span { font-family: var(--amg-script); font-size: 2.1rem; line-height: 1; color: #fff1d6; text-shadow: 0 1px 0 rgb(0 0 0 / .35); }
@media (prefers-reduced-motion: no-preference) {
    .ec-js:not(.ec-opening) .amg-envelope:not(.is-open) .amg-seal { animation: amg-pulse 2.6s ease-in-out infinite; }
}
@keyframes amg-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* open: the seal cracks, the flap turns over showing its liner, the card rises */
.amg-envelope.is-open .amg-seal__half--left { transform: translate(-26px, 18px) rotate(-28deg); opacity: 0; }
.amg-envelope.is-open .amg-seal__half--right { transform: translate(26px, 18px) rotate(28deg); opacity: 0; }
.amg-envelope.is-open .amg-flap { transform: rotateX(180deg); }
.amg-envelope.is-open .amg-flap__liner { opacity: 1; }
.amg-envelope.is-open .amg-env--flap { z-index: 0; }
.amg-envelope.is-open .amg-inner__card { transform: translateY(-46%); }

.amg-hint { margin: .6rem 0 0; font-family: var(--amg-serif); font-style: italic; font-size: 1.12rem; color: color-mix(in srgb, var(--ec-light) 85%, transparent); }
.amg-skip { padding: .3rem .8rem; border: 0; background: none; cursor: pointer; color: color-mix(in srgb, var(--ec-light) 75%, transparent); font: inherit; font-size: .78rem; text-decoration: underline; text-underline-offset: 3px; }
.ec-opening .amg-cover { opacity: 0; }

/* ---------- the card: a short scroll ---------- */
.amg-page { position: relative; z-index: 1; width: 100%; max-width: 32rem; margin: 0 auto; padding: 0 1.1rem; }

/* letterpress sheets with deckled edges (the edge is a clip-path, the shadow sits on the wrapper) */
.amg-sheet-wrap, .amg-letter-wrap { position: relative; filter: drop-shadow(0 26px 32px rgb(0 0 0 / .45)); }
.amg-sheet {
    position: relative;
    background-color: var(--ec-paper);
    color: var(--ec-ink);
    text-align: center;
}
.amg-sheet::before { content: ''; position: absolute; inset: 14px; border: 1px solid #c9962e; pointer-events: none; }
.amg-sheet .amg-filigree { width: 4rem; height: 4rem; }
.amg-sheet .amg-filigree--tl { top: 8px; left: 8px; }
.amg-sheet .amg-filigree--tr { top: 8px; right: 8px; }
.amg-sheet .amg-filigree--bl { bottom: 8px; left: 8px; }
.amg-sheet .amg-filigree--br { bottom: 8px; right: 8px; }

.amg-hero { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: center; padding: 3rem 0 3.4rem; }
.amg-sheet--hero { padding: 3.2rem 2rem 3rem; }
.amg-crest { display: block; width: 5.6rem; height: 5.6rem; margin: 0 auto 1rem; overflow: visible; }
.amg-hero__to .ec-recipient__greeting { font-family: var(--amg-serif); letter-spacing: .42em; color: var(--ec-muted); opacity: 1; }
.amg-hero__to .ec-recipient__name { font-family: var(--amg-script); font-size: clamp(2.1rem, 9.5vw, 2.7rem); line-height: 1.15; color: var(--ec-ink); }
.amg-hero__title {
    --ec-foil-1: #6e4206;
    --ec-foil-2: #e2ad3f;
    --ec-foil-3: #9c6410;
    filter: drop-shadow(0 1px 0 #fff8e6) drop-shadow(0 3px 4px color-mix(in srgb, var(--ec-ink) 25%, transparent));
    margin: .5rem 0 .2rem;
    font-family: var(--amg-serif); font-style: italic; font-weight: 500;
    font-size: clamp(2.6rem, 12.5vw, 3.6rem); line-height: .98;
    text-wrap: balance; overflow-wrap: break-word;
    padding: 0 .1em .1em;
}
.amg-scroll { position: absolute; bottom: 1rem; left: 0; right: 0; margin: 0; text-align: center; font-family: var(--amg-serif); font-style: italic; color: color-mix(in srgb, var(--ec-light) 80%, transparent); }
@media (prefers-reduced-motion: no-preference) {
    .amg-scroll span { display: inline-block; animation: amg-bob 1.8s ease-in-out infinite; }
}
@keyframes amg-bob { 50% { transform: translateY(5px); } }

/* photos: gilt frames with a pearl border */
.amg-gallery { padding: .4rem 0 3rem; text-align: center; }
.amg-gallery .amg-flourish { margin-bottom: 1.6rem; }
.amg-photos { width: min(72%, 16rem); margin: 0 auto; }
.amg-photos .ec-photos__item {
    margin: 0; padding: 8px;
    background: radial-gradient(circle, #fff1c2 1.4px, transparent 1.8px) 0 0 / 9px 9px, linear-gradient(135deg, #a8741a, #ffe9a6 30%, #d4a63c 55%, #fff1c2 80%, #9a6614);
    box-shadow: 0 22px 36px -18px rgb(0 0 0 / .65);
}
.amg-photos img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 3px solid var(--ec-paper); }
.amg-gallery__hint { margin: 1.4rem 0 0; font-family: var(--amg-serif); font-style: italic; color: color-mix(in srgb, var(--ec-light) 80%, transparent); }

/* the letter */
.amg-letter-wrap { margin-top: .6rem; }
.amg-sheet--letter { padding: 3.4rem clamp(1.7rem, 8vw, 2.8rem) 4.4rem; text-align: left; }
.amg-letter__watermark { position: absolute; left: 50%; top: 50%; width: 13rem; translate: -50% -50%; opacity: .06; pointer-events: none; }
.amg-letter__message { position: relative; font-size: 1.08rem; color: color-mix(in srgb, var(--ec-ink) 92%, transparent); }
/* an illuminated initial, as in old manuscripts */
.amg-letter__message .ec-initial {
    float: left; margin: .12em .16em 0 0; padding: .06em .14em .02em;
    font-family: var(--amg-serif); font-weight: 600; font-size: 3.1em; line-height: .9;
    color: #fff6e6;
    background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--ec-stock) 60%, white), var(--ec-stock) 70%);
    border: 2px solid #d4a63c;
    outline: 1px solid #d4a63c; outline-offset: 2px;
    border-radius: 3px;
}
.amg-letter__sign { position: relative; margin-top: 2rem; text-align: center; }
.amg-letter__closing { margin: .4rem 0 0; font-family: var(--amg-serif); font-style: italic; font-size: 1.2rem; color: var(--ec-muted); }
.amg-signature { color: var(--ec-ink); }
.amg-signature text { font-family: var(--amg-script); }

/* wax seal on two ribbon ends, over the bottom edge of the letter */
.amg-seal-end { position: absolute; left: 50%; bottom: -2.2rem; width: 4.4rem; height: 4.4rem; translate: -50% 0; }
.amg-seal-end__ribbon { position: absolute; top: 2.2rem; width: 1.6rem; height: 3.2rem; background: linear-gradient(90deg, var(--ec-seal), color-mix(in srgb, var(--ec-seal) 65%, white) 50%, var(--ec-seal)); clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 82%, 0 100%); }
.amg-seal-end__ribbon--left { left: .6rem; transform: rotate(16deg); }
.amg-seal-end__ribbon--right { right: .6rem; transform: rotate(-16deg); }
.amg-seal-end__wax span { font-size: 2.2rem; }

.amg-actions { margin-top: 4.4rem; color: var(--ec-light); }
.amg-actions .ec-actions__button { border-color: #d4a63c; background: color-mix(in srgb, var(--ec-bg) 50%, transparent); }
.amg-tap-hint { margin: .6rem 0 0; text-align: center; font-size: .78rem; color: color-mix(in srgb, var(--ec-light) 75%, transparent); }
.amg-branding { color: color-mix(in srgb, var(--ec-light) 80%, transparent); }

@media (min-width: 768px) {
    .amg-page { max-width: 34rem; }
}

/* picture mode: no gradient border-image (the picture maker fills it), tighter hero */
.ec-image .amg-hero { padding: 2rem 0 1.2rem; }
.ec-image .amg-letter-wrap { margin-bottom: 3rem; }

/* the opened flap rises over the sender line: let it step aside */
.amg-cover__from, .amg-cover__from + .amg-flourish { transition: opacity .5s ease, transform .6s ease; }
.amg-cover:has(.is-open) .amg-cover__from,
.amg-cover:has(.is-open) .amg-cover__from + .amg-flourish { opacity: 0; transform: translateY(-.8rem); }