/*
 * Shared styles of every greeting card design (loaded by x-ecard.head before the design's CSS).
 * Only mechanics and neutral defaults: the opening cover, the open button reset, and the credit.
 * Designs set their own colors (--ec-*), fonts, and the look of every part.
 */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; overflow-x: hidden; }
img { max-width: 100%; display: block; }

/* ---- opening: the cover stays over the card until "Buka kartu" (only when the script runs) ---- */
.ec-js [data-ec-cover] {
    position: fixed; inset: 0; z-index: 50;
    display: flex; align-items: center; justify-content: center;
    overflow: hidden;
}
.ec-js:not(.ec-open) body { overflow: hidden; }
.ec-js:not(.ec-open) [data-ec-card] { visibility: hidden; }
.ec-js.ec-open [data-ec-cover] { display: none; }
[data-ec-card]:focus { outline: none; }

.ec-open-button {
    font: inherit; color: inherit; cursor: pointer;
    border: 0; background: none; padding: 0;
    -webkit-tap-highlight-color: transparent;
}
.ec-open-button:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }

/* the card page appears softly after the cover */
@media (prefers-reduced-motion: no-preference) {
    .ec-js.ec-open [data-ec-card] { animation: ec-appear .8s ease-out both; }
}
@keyframes ec-appear { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ---- the recipient's name and the message ---- */
.ec-recipient { display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; }
.ec-recipient__greeting { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.ec-recipient__name { overflow-wrap: anywhere; }
.ec-message p { margin: 0 0 .9em; overflow-wrap: break-word; }
.ec-message p:last-child { margin-bottom: 0; }

/* ---- who sent it (cover) ---- */
.ec-from { margin: 0; display: flex; flex-direction: column; align-items: center; gap: .15rem; text-align: center; }
.ec-from__label { font-size: .78rem; letter-spacing: .2em; text-transform: uppercase; opacity: .75; }
.ec-from__name { overflow-wrap: anywhere; }

/* ---- the safety note and the platform credit ---- */
.ec-branding { padding: 2rem 1rem calc(1.5rem + env(safe-area-inset-bottom)); text-align: center; font-size: .72rem; }
.ec-branding__safe { max-width: 22rem; margin: 0 auto 1rem; opacity: .7; line-height: 1.5; }
.ec-branding a { display: inline-flex; flex-direction: column; align-items: center; gap: .4rem; color: inherit; text-decoration: none; opacity: .8; }
.ec-branding a:hover { opacity: 1; }
.ec-branding__label { letter-spacing: .06em; }
.ec-branding__logo {
    display: block; width: 7.6rem; height: .56rem; overflow: hidden; font-size: 0; line-height: 0;
    background: currentColor;
    -webkit-mask: var(--ec-logo) center / contain no-repeat; mask: var(--ec-logo) center / contain no-repeat;
}
@supports not ((mask-image: url("")) or (-webkit-mask-image: url(""))) {
    .ec-branding__logo { width: auto; height: auto; background: none; font-size: .75rem; line-height: 1; letter-spacing: .08em; }
}
.ec-branding__cta { text-decoration: underline; text-underline-offset: 3px; }

/* ---- picture mode (?gambar=story|kotak, resources/js/ecard-image.js) ---- */
.ec-image body { min-height: 0; overflow-x: hidden; }
.ec-image [data-ec-cover],
.ec-image [data-ec-fx],
.ec-image [data-ec-hint],
.ec-image .ec-branding__safe,
.ec-image .ec-branding__cta { display: none !important; }
.ec-image *, .ec-image *::before, .ec-image *::after { animation: none !important; transition: none !important; }
.ec-image [data-ec-card] { visibility: visible !important; min-height: 0 !important; padding: 22px 16px 10px !important; cursor: default; }
.ec-image .ec-branding { padding: 12px 8px 16px; }

.ec-image-panel {
    box-sizing: border-box; max-width: 420px; margin: 0 auto; padding: 18px 16px 28px;
    font: 14px/1.5 system-ui, -apple-system, 'Segoe UI', sans-serif; color: inherit; text-align: center;
}
.ec-image-panel__title { margin: 0; font-weight: 600; font-size: 15px; }
.ec-image-panel__status { margin: 4px 0 14px; opacity: .8; font-size: 13px; }
.ec-image-panel__preview { width: 100%; max-width: 360px; height: auto; margin: 0 auto; border-radius: 10px; box-shadow: 0 18px 40px -20px rgb(0 0 0 / .55); }
.ec-image-panel__actions { display: flex; justify-content: center; gap: 10px; margin-top: 16px; }
.ec-image-panel__button {
    display: inline-flex; align-items: center; height: 44px; padding: 0 20px; border: 0; border-radius: 999px;
    background: #111; color: #fff; font: 600 14px/1 system-ui, sans-serif; text-decoration: none; cursor: pointer;
}
.ec-image-panel__button--soft { background: rgb(255 255 255 / .9); color: #111; box-shadow: inset 0 0 0 1px rgb(0 0 0 / .15); }
.ec-image-panel [hidden] { display: none !important; }

.ec-stage-wrap { display: flex; justify-content: center; background: inherit; }
/* the picture itself: the page background goes along (inherited from body, not fixed) */
.ec-stage { position: relative; width: 360px; height: 640px; overflow: hidden; background: inherit; background-attachment: scroll !important; }
.ec-image--kotak .ec-stage { height: 360px; }
.ec-stage-wrap, .ec-image-panel { background: inherit; }
.ec-stage__content { transform-origin: top center; }

/* not paid yet: a large "PRATINJAU" across the picture */
.ec-image[data-ec-watermark="pratinjau"] .ec-stage::after {
    content: ''; position: absolute; inset: 0; z-index: 5; pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140'%3E%3Ctext x='10' y='80' transform='rotate(-24 110 70)' font-family='sans-serif' font-weight='700' font-size='26' letter-spacing='4' fill='%23888' fill-opacity='.38'%3EPRATINJAU%3C/text%3E%3C/svg%3E");
}

/* ---- shared touches of the luxe cards (ecard-lux.js) ---- */
/* parts that appear as they scroll into view; --ec-delay staggers neighbours */
.ec-js [data-ec-reveal] {
    opacity: 0; transform: translateY(22px);
    transition: opacity 1s ease var(--ec-delay, 0s), transform 1.1s cubic-bezier(.2, .7, .2, 1) var(--ec-delay, 0s);
}
.ec-js [data-ec-reveal].is-in { opacity: 1; transform: none; }

/* a message that appears word by word */
.ec-js .ec-w { opacity: 0; filter: blur(5px); transition: opacity .7s ease, filter .7s ease; transition-delay: calc(var(--i) * 38ms + .2s); }
.ec-js .is-in .ec-w, .ec-js .is-in.ec-w { opacity: 1; filter: none; }

/* gold (or silver) foil text with a slow moving shine; the design may set --ec-foil-1..3 */
.ec-foil {
    background: linear-gradient(100deg,
        var(--ec-foil-1, #9c6b22) 0%, var(--ec-foil-2, #f6e3a1) 18%, var(--ec-foil-1, #9c6b22) 36%,
        var(--ec-foil-3, #d9b25f) 55%, var(--ec-foil-2, #f6e3a1) 72%, var(--ec-foil-1, #9c6b22) 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text; background-clip: text; color: transparent;
}
@media (prefers-reduced-motion: no-preference) {
    .ec-foil { animation: ec-sheen 7s linear infinite; }
}
@keyframes ec-sheen { to { background-position: -260% 0; } }

/* the sender's signature, drawn like a pen stroke then filled */
.ec-signature { display: block; width: 100%; max-width: 22rem; height: auto; margin: 0 auto; overflow: visible; }
.ec-signature text { font-size: 84px; fill: currentColor; }
.ec-js .ec-signature text { fill: transparent; stroke: currentColor; stroke-width: .9; stroke-dasharray: 1400; stroke-dashoffset: 1400; }
.ec-js .ec-signature.is-in text { animation: ec-sign 3s ease .3s forwards; }
@keyframes ec-sign {
    70% { stroke-dashoffset: 0; fill: transparent; }
    100% { stroke-dashoffset: 0; fill: currentColor; stroke-width: 0; }
}

/* a pile of photos: the top one goes to the back on a tap */
[data-ec-stack] { position: relative; display: grid; cursor: pointer; -webkit-tap-highlight-color: transparent; }
[data-ec-stack] > * { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.3, .7, .3, 1), opacity .38s ease; }
[data-ec-stack] > *:nth-child(1) { z-index: 3; }
[data-ec-stack] > *:nth-child(2) { z-index: 2; transform: rotate(5deg) translate(10px, 6px); }
[data-ec-stack] > *:nth-child(3) { z-index: 1; transform: rotate(-6deg) translate(-10px, 10px); }
[data-ec-stack] > .is-leaving { transform: translate(115%, -10%) rotate(18deg); opacity: 0; }

/* paper grain for stationery surfaces (add class ec-paper) */
.ec-paper { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 .45 0 0 0 0 .38 0 0 0 0 .3 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }

/* end of the card: play again, share */
.ec-actions { display: flex; justify-content: center; gap: .6rem; margin: 2rem 0 .5rem; }
.ec-actions__button {
    display: inline-flex; align-items: center; gap: .45rem;
    height: 2.6rem; padding: 0 1.1rem; border-radius: 999px;
    border: 1px solid currentColor; background: transparent; color: inherit;
    font: inherit; font-size: .8rem; letter-spacing: .08em; cursor: pointer; opacity: .85;
}
.ec-actions__button:hover { opacity: 1; }
.ec-actions__button svg { width: 1rem; height: 1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* picture mode: everything in place, no motion */
.ec-image [data-ec-reveal] { opacity: 1 !important; transform: none !important; }
.ec-image .ec-w { opacity: 1 !important; filter: none !important; }
.ec-image .ec-signature text { fill: currentColor !important; stroke-width: 0 !important; }
.ec-image [data-ec-section] { min-height: 0 !important; }

@media (prefers-reduced-motion: reduce) {
    .ec-js [data-ec-reveal] { opacity: 1; transform: none; }
    .ec-js .ec-w { opacity: 1; filter: none; }
    .ec-js .ec-signature text { fill: currentColor; stroke-width: 0; }
}
/* the paper grain is an SVG filter the picture maker cannot draw: plain paper in pictures */
.ec-image .ec-paper { background-image: none !important; }

/* ---- fit and guidance (all designs) ---- */
/* the cover is exactly the visible screen: 100vh is taller than it on phones with a bottom toolbar
   (Chrome/Safari on iPhone), which cut off the bottom of the frames; when the content is taller, it scrolls */
.ec-js [data-ec-cover] { min-height: 0 !important; overflow-y: auto; overscroll-behavior: contain; }
/* the card's first section is as tall as its content, not a whole screen of empty space */
[data-ec-section] { min-height: 0 !important; }

/* "tap here": a pulsing ring, a hand, and a label over what the recipient should touch (ecard-lux.js) */
.ec-tap {
    position: absolute; z-index: 40; width: 0; height: 0; pointer-events: none;
    transition: opacity .35s ease;
}
.ec-tap.is-gone { opacity: 0; }
.ec-tap__ring {
    position: absolute; left: -28px; top: -28px; width: 56px; height: 56px; border-radius: 50%;
    border: 2px solid #ffe9a6; box-shadow: 0 0 12px rgb(255 214 120 / .8), inset 0 0 10px rgb(255 214 120 / .5);
}
.ec-tap__ring + .ec-tap__ring { animation-delay: .8s; }
.ec-tap__hand {
    position: absolute; left: -4px; top: 6px; width: 34px; height: 34px;
    filter: drop-shadow(0 3px 4px rgb(0 0 0 / .45));
}
.ec-tap__hand path { fill: #fff; stroke: #3a2a12; stroke-width: 1.4; stroke-linejoin: round; }
.ec-tap__label {
    position: absolute; left: 0; top: 46px; translate: -50% 0;
    padding: .38rem .85rem; border-radius: 999px; white-space: nowrap;
    background: linear-gradient(135deg, #a8741a, #f6d27a 45%, #c9962e);
    color: #2b1a05; font: 600 .78rem/1 system-ui, -apple-system, 'Segoe UI', sans-serif; letter-spacing: .02em;
    box-shadow: 0 6px 14px -4px rgb(0 0 0 / .45), inset 0 0 0 1px rgb(255 255 255 / .45);
}
.ec-tap--above .ec-tap__label { top: auto; bottom: 34px; }
@media (prefers-reduced-motion: no-preference) {
    .ec-tap__ring { animation: ec-tap-ring 1.6s ease-out infinite; }
    .ec-tap__hand { animation: ec-tap-hand 1.6s ease-in-out infinite; }
    .ec-tap--rub .ec-tap__hand { animation: ec-tap-rub 1.4s ease-in-out infinite; }
    .ec-tap__label { animation: ec-tap-bob 1.6s ease-in-out infinite; }
}
@keyframes ec-tap-ring { 0% { transform: scale(.45); opacity: 1; } 100% { transform: scale(1.5); opacity: 0; } }
@keyframes ec-tap-hand { 0%, 100% { transform: translate(0, 0) scale(1); } 40% { transform: translate(-2px, -6px) scale(1.06); } 55% { transform: translate(0, 0) scale(.92); } }
@keyframes ec-tap-rub { 0%, 100% { transform: translateX(-26px) rotate(-8deg); } 50% { transform: translateX(26px) rotate(8deg); } }
@keyframes ec-tap-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(3px); } }
.ec-image .ec-tap { display: none; }

/* iPhone & iPad (Safari and Chrome are both WebKit there) zoom the page in when a field with text smaller than 16px
   is tapped, and the page stays zoomed. Fields get at least 16px on those devices only; elsewhere the design is
   unchanged and pinch-zoom still works everywhere. */
@supports (-webkit-touch-callout: none) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
    select,
    textarea {
        font-size: max(16px, 1em) !important;
    }
}