/* Lentera Ceria (ramadan/lentera-ceria): a warm cartoon Ramadan poster, picture-first.
   Sizes inside the poster are in cqw of .lc-frame (the poster's width), so the link and the picture stage
   (360 px) show exactly the same composition. */

:root {
    --ec-bg: #6a2c9e;
    --ec-bg2: #ff8a5c;
    --ec-deep: #241052;
    --ec-ink: #fff8ec;
    --ec-title: #ffd84d;
    --ec-accent: #ffc93c;
    --ec-accent2: #ff5fa2;
    --ec-teal: #22c7b8;
    --ec-mosque: #f3e6ff;
    --ec-dome: #2bb3a3;
    --ec-ground: #3a1d6e;
    --ec-koko: #ff9f1c;
    --ec-dress: #7b61ff;
    --ec-hijab: #ff7eb6;
    --ec-cloth: #ff5fa2;
    --ec-paper: #fff6e3;
    --lc-script: 'Pacifico', 'Brush Script MT', cursive;
    --lc-display: 'Fredoka', 'Arial Rounded MT Bold', system-ui, sans-serif;
    --lc-text: 'Nunito', 'Segoe UI', system-ui, sans-serif;
    --lc-arabic: 'Amiri', 'Traditional Arabic', serif;
    --lc-sky:
        radial-gradient(120% 42% at 50% 100%, color-mix(in srgb, var(--ec-bg2) 80%, transparent), transparent 72%),
        linear-gradient(180deg, var(--ec-deep) 0%, color-mix(in srgb, var(--ec-deep) 40%, var(--ec-bg)) 32%, var(--ec-bg) 62%, color-mix(in srgb, var(--ec-bg) 55%, var(--ec-bg2)) 100%);
}

body.lc {
    margin: 0;
    font-family: var(--lc-text);
    color: var(--ec-ink);
    background: var(--lc-sky);
    background-color: var(--ec-deep);
    background-attachment: fixed;
}

.lc-fx { position: fixed; inset: 0; z-index: 70; pointer-events: none; overflow: hidden; }
.lc-fx > * { position: absolute; left: 0; top: 0; display: block; }

/* =================== cover: waiting for iftar =================== */
.lc-cover {
    flex-direction: column; gap: clamp(6px, 1.6vh, 14px);
    padding: clamp(96px, 16vh, 132px) 18px calc(18px + env(safe-area-inset-bottom));
    text-align: center; color: #fff; overflow: hidden;
    background-color: var(--ec-deep);
    --ec-open-ms: 700;
}
.lc-cover__day, .lc-cover__dusk, .lc-cover > svg[aria-hidden] { position: absolute; pointer-events: none; }
/* late afternoon: a warm sky; at maghrib the dusk of the card takes over */
.lc-cover__day { inset: 0; background:
    radial-gradient(70% 34% at 50% 92%, rgb(255 214 120 / .75), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--ec-deep) 45%, #3c7fc0) 0%, color-mix(in srgb, var(--ec-deep) 15%, #e7894a) 58%, #ffb057 100%); }
.lc-cover__dusk { inset: 0; background: var(--lc-sky); opacity: 0; transition: opacity 1.6s ease; }
.lc-cover__stars { inset: 0; width: 100%; height: 100%; opacity: .15; transition: opacity 1.6s ease; }
.lc-cover.is-dusk .lc-cover__dusk, .lc-cover.is-dusk .lc-cover__stars { opacity: 1; }
.lc-cover__hang { left: 50%; top: 0; width: min(100%, 520px); height: auto; translate: -50% 0; overflow: visible; }
.lc-cover__lamp use { filter: grayscale(.55) brightness(.62); transition: filter .7s ease calc(var(--i) * .16s); }
.lc-cover__glow { opacity: 0; transition: opacity .7s ease calc(var(--i) * .16s); }
.lc-cover.is-lit .lc-cover__lamp use { filter: none; }
.lc-cover.is-lit .lc-cover__glow { opacity: 1; }
.lc-cover__mosque { left: 50%; bottom: 0; width: min(100%, 560px); height: 24vh; max-height: 180px; translate: -50% 0; color: color-mix(in srgb, var(--ec-deep) 82%, black); opacity: .9; }
.lc-cover__windows { fill: #ffd76b; opacity: .12; transition: opacity 1.2s ease .5s; }
.lc-cover.is-lit .lc-cover__windows { opacity: 1; }
.lc-cover > :not(svg):not(.ec-tap):not(.lc-cover__day):not(.lc-cover__dusk) { position: relative; z-index: 1; }
.lc-cover > .ec-tap { z-index: 5; }

.lc-cover__from .ec-from__label { font-weight: 800; font-size: .72rem; letter-spacing: .22em; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.lc-cover__from .ec-from__name { font-family: var(--lc-script); font-size: clamp(1.4rem, 6.4vw, 1.9rem); line-height: 1.35; text-shadow: 0 2px 0 rgb(0 0 0 / .22); }

.lc-iftar {
    position: relative; width: min(84vw, 330px, 41vh); cursor: pointer; flex-shrink: 0;
    -webkit-tap-highlight-color: transparent; touch-action: manipulation; outline: none;
}
.lc-iftar:focus-visible { outline: 3px solid #fff; outline-offset: 6px; border-radius: 24px; }
.lc-iftar__art { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(0 14px 20px rgb(0 0 0 / .28)); }
.lc-date { transform-box: fill-box; transform-origin: 50% 50%; }
.lc-date.is-eaten { pointer-events: none; }
.lc-clock__min, .lc-clock__hour { transform-box: view-box; transform-origin: -4px -76px; }
.lc-clock__min { transform: rotate(306deg); transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }

.lc-hint { margin: 2.2rem 0 0; font-weight: 800; font-size: .95rem; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: .3rem .5rem; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.lc-hint__count { padding: .15rem .6rem; border-radius: 999px; background: var(--ec-accent); color: var(--ec-deep); font-weight: 800; font-size: .8rem; text-shadow: none; }
.lc-cover__to .ec-recipient__greeting { font-weight: 800; font-size: .7rem; letter-spacing: .2em; text-transform: uppercase; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }
.lc-cover__to .ec-recipient__name { font-family: var(--lc-script); font-size: clamp(1.6rem, 7.4vw, 2.2rem); line-height: 1.35; text-shadow: 0 2px 0 rgb(0 0 0 / .22); }
.lc-skip { border: 0; background: none; padding: .3rem; color: #fff; font: inherit; font-weight: 700; font-size: .82rem; text-decoration: underline; text-underline-offset: 3px; opacity: .92; cursor: pointer; text-shadow: 0 1px 2px rgb(0 0 0 / .35); }

.lc-crumb { border-radius: 50%; }
.lc-bite { font-family: var(--lc-script); font-size: 1.3rem; color: #fff3b0; text-shadow: 0 2px 0 rgb(0 0 0 / .3); white-space: nowrap; }

/* a wide screen (the link picture, a laptop): the phone-shaped star field would be stretched into blobs */
@media (min-aspect-ratio: 1/1) {
    .lc-cover__stars { display: none; }
    .lc-cover__dusk {
        background:
            radial-gradient(circle, rgb(255 255 255 / .85) 0 1.2px, transparent 1.8px) 0 0 / 97px 83px,
            radial-gradient(circle, rgb(255 255 255 / .55) 0 1px, transparent 1.6px) 40px 30px / 61px 71px,
            var(--lc-sky);
    }
}

@media (max-height: 680px) {
    .lc-cover { padding-top: clamp(84px, 14vh, 104px); gap: 6px; }
    .lc-iftar { width: min(74vw, 262px, 35vh); }
    .lc-cover__to .ec-recipient__name { font-size: 1.6rem; }
}

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

/* ---- the poster (also the picture) ---- */
.lc-frame { container-type: inline-size; width: 100%; max-width: 440px; margin: 0 auto; }
.lc-poster {
    position: relative; width: 100%;
    display: flex; flex-direction: column;
    padding: 23cqw 0 0;
    overflow: hidden;
    background: var(--lc-sky);
}
.lc-sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.lc-hang { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: auto; overflow: visible; pointer-events: none; filter: drop-shadow(0 1cqw 1cqw rgb(0 0 0 / .2)); }

.lc-body {
    position: relative; z-index: 2; flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
    padding: 0 7cqw 57cqw;
}

.lc-to {
    margin: 0 0 1.6cqw; display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: baseline; column-gap: 1.8cqw;
    max-width: 78cqw; padding: .6cqw 4.4cqw 1.2cqw; border-radius: 99px;
    background: var(--ec-paper); color: var(--ec-deep);
    box-shadow: 0 1.2cqw 0 color-mix(in srgb, var(--ec-accent2) 80%, black 10%), 0 2.6cqw 4cqw -1cqw rgb(0 0 0 / .35);
    rotate: -2deg;
}
.lc-to__label { font-weight: 800; font-size: 2.8cqw; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.lc-to { flex-wrap: nowrap; }
.lc-to__name { font-family: var(--lc-script); font-size: 5.4cqw; line-height: 1.35; color: var(--ec-accent2); white-space: nowrap; }
/* a long name may go on two lines (then the label sits above it) */
.lc-to--long { flex-wrap: wrap; border-radius: 5cqw; }
.lc-to--long .lc-to__name { font-size: 4.4cqw; white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }

.lc-title { margin: 0; display: flex; flex-direction: column; align-items: center; font-weight: 400; }
.lc-title__lead {
    font-family: var(--lc-script); font-size: 9cqw; line-height: 1.4; color: var(--ec-ink);
    rotate: -4deg; margin-bottom: -2.6cqw; text-shadow: 0 .6cqw 0 rgb(0 0 0 / .25);
}
.lc-title__main {
    font-family: var(--lc-display); font-weight: 700; font-size: 19cqw; line-height: 1; letter-spacing: .01em;
    color: var(--ec-title);
    text-shadow: 0 1.1cqw 0 var(--ec-accent2), 0 2.2cqw 0 color-mix(in srgb, var(--ec-deep) 70%, black), 0 0 6cqw color-mix(in srgb, var(--ec-title) 45%, transparent);
    text-wrap: balance; overflow-wrap: normal; word-break: keep-all;
}
.lc-title__main--m { font-size: 15cqw; }
.lc-title__main--l { font-size: 11cqw; line-height: 1.08; }
.lc-title__main--xl { font-size: 8.6cqw; line-height: 1.1; overflow-wrap: anywhere; }

.lc-arabic {
    margin: 3.4cqw 0 0; display: flex; align-items: center; gap: 2.4cqw;
    font-family: var(--lc-arabic); font-weight: 700; font-size: 7cqw; line-height: 1.5;
    color: var(--ec-accent); text-shadow: 0 .5cqw 0 rgb(0 0 0 / .25);
}
.lc-arabic__star { width: 3.6cqw; height: 3.6cqw; overflow: visible; }

.lc-message { max-width: 78cqw; margin-top: 1.4cqw; font-weight: 800; font-size: 4.1cqw; line-height: 1.45; color: var(--ec-ink); text-shadow: 0 .3cqw 1cqw rgb(0 0 0 / .4); }
.lc-message p { margin: 0 0 1.4cqw; }
.lc-message p:last-child { margin-bottom: 0; }
.lc-poster--msg-m .lc-message { font-size: 3.75cqw; max-width: 80cqw; }
.lc-poster--msg-l .lc-message { font-size: 3.4cqw; max-width: 82cqw; line-height: 1.42; }
/* with photos everything above and below them is a little tighter, so the poster keeps the story height */
.lc-poster.has-photos { padding-top: 20cqw; }
.has-photos .lc-body { padding-bottom: 50cqw; }
.has-photos .lc-to { margin-bottom: 1cqw; }
.has-photos .lc-title__lead { font-size: 7.8cqw; margin-bottom: -2.2cqw; }
.has-photos .lc-title__main { font-size: 15cqw; }
.has-photos .lc-title__main--m { font-size: 12cqw; }
.has-photos .lc-title__main--l { font-size: 9cqw; }
.has-photos .lc-title__main--xl { font-size: 7.4cqw; }
.has-photos .lc-arabic { margin-top: 1.4cqw; font-size: 5.6cqw; line-height: 1.35; }
.has-photos .lc-from { margin-top: 1.8cqw; }
.has-photos .lc-scene { height: 56cqw; }
.has-photos .lc-mosque { left: 7cqw; bottom: 10cqw; width: 86cqw; }
.has-photos .lc-boy { width: 23cqw; }
.has-photos .lc-girl { left: 17cqw; width: 23cqw; }
.has-photos .lc-table { width: 38cqw; }
.has-photos.lc-poster--msg-m .lc-message { font-size: 3.45cqw; }
.has-photos.lc-poster--msg-l .lc-message { font-size: 3.1cqw; line-height: 1.38; }
.lc-message .ec-initial { font: inherit; color: inherit; }

.lc-from { margin-top: 2.6cqw; display: flex; flex-direction: column; align-items: center; gap: .6cqw; }
.lc-from__closing { margin: 0; font-family: var(--lc-script); font-size: 4.4cqw; line-height: 1.4; color: var(--ec-ink); opacity: .92; }
.lc-from__line {
    margin: 0; display: inline-flex; flex-wrap: wrap; align-items: baseline; justify-content: center; column-gap: 1.8cqw;
    max-width: 82cqw; padding: .4cqw 4.4cqw 1.2cqw; border-radius: 99px;
    background: var(--ec-accent); color: var(--ec-deep);
    box-shadow: 0 1cqw 0 color-mix(in srgb, var(--ec-accent) 55%, black), 0 2.4cqw 4cqw -1cqw rgb(0 0 0 / .35);
    rotate: 1.5deg;
}
.lc-from__label { font-weight: 800; font-size: 2.8cqw; letter-spacing: .2em; text-transform: uppercase; opacity: .7; }
.lc-from__line { flex-wrap: nowrap; }
.lc-from__name { font-family: var(--lc-script); font-size: 5.2cqw; line-height: 1.35; white-space: nowrap; }
.lc-poster--mid-sender .lc-from__name { font-size: 4.5cqw; }
.lc-poster--long-sender .lc-from__name { font-size: 3.9cqw; }
.lc-poster--long-sender .lc-from__line { flex-wrap: wrap; border-radius: 5cqw; }
.lc-poster--long-sender .lc-from__name { white-space: normal; overflow-wrap: anywhere; text-wrap: balance; }

/* photos: round-cornered prints with a lantern-coloured edge, a little tilted */
.lc-photos { display: flex; justify-content: center; align-items: flex-start; gap: 2.6cqw; margin: 2cqw 0 1.4cqw; width: 100%; }
.lc-photos .ec-photos__item { margin: 0; padding: 1.2cqw; border-radius: 4cqw; background: var(--ec-paper); box-shadow: 0 0 0 1cqw var(--ec-accent2), 0 2.4cqw 4cqw -2cqw rgb(0 0 0 / .5); width: 26cqw; transform: rotate(-3deg); }
.lc-photos[data-count="2"] .ec-photos__item { width: 22cqw; }
.lc-photos[data-count="2"] .ec-photos__item:nth-child(2) { box-shadow: 0 0 0 1cqw var(--ec-teal), 0 2.4cqw 4cqw -2cqw rgb(0 0 0 / .5); }
.lc-photos[data-count="3"] .ec-photos__item { width: 18.5cqw; border-radius: 3cqw; }
.lc-photos[data-count="3"] .ec-photos__item:nth-child(2) { box-shadow: 0 0 0 1cqw var(--ec-teal), 0 2.4cqw 4cqw -2cqw rgb(0 0 0 / .5); }
.lc-photos[data-count="3"] .ec-photos__item:nth-child(3) { box-shadow: 0 0 0 1cqw var(--ec-accent), 0 2.4cqw 4cqw -2cqw rgb(0 0 0 / .5); }
.lc-photos .ec-photos__item:nth-child(2) { transform: rotate(3deg) translateY(1.6cqw); }
.lc-photos .ec-photos__item:nth-child(3) { transform: rotate(-1.5deg); }
.lc-photos img { display: block; width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 3cqw; }
.lc-photos[data-count="3"] img { border-radius: 2.2cqw; }

/* ---- the children, the mosque and the iftar table ---- */
.lc-scene { position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: 62cqw; pointer-events: none; }
.lc-scene svg { position: absolute; height: auto; overflow: visible; }
.lc-mosque { left: 4cqw; bottom: 11cqw; width: 92cqw; filter: drop-shadow(0 0 5cqw color-mix(in srgb, var(--ec-bg2) 60%, transparent)); }
.lc-ground { left: 0; bottom: 0; width: 100%; height: 17cqw !important; }
.lc-boy { left: -1.5cqw; bottom: 1.6cqw; width: 25cqw; filter: drop-shadow(0 1cqw 1.2cqw rgb(0 0 0 / .25)); }
.lc-girl { left: 18.5cqw; bottom: 1.8cqw; width: 25cqw; filter: drop-shadow(0 1cqw 1.2cqw rgb(0 0 0 / .25)); }
.lc-table { right: 1cqw; bottom: 2.2cqw; width: 41cqw; filter: drop-shadow(0 1cqw 1.2cqw rgb(0 0 0 / .25)); }
@media (prefers-reduced-motion: no-preference) {
    .ec-open .lc-lamp { animation: lc-sway 4.2s ease-in-out infinite; transform-box: fill-box; transform-origin: 50% 0; }
    .ec-open .lc-lamp:nth-of-type(2n) { animation-duration: 5s; animation-delay: -1.4s; }
    .ec-open .lc-boy { animation: lc-bounce 2.4s ease-in-out infinite; }
    .ec-open .lc-girl { animation: lc-bounce 2.4s ease-in-out -1.2s infinite; }
}
@keyframes lc-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes lc-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.2cqw); } }

/* ---- after the poster (link only) ---- */
.lc-actions { color: #fff; margin-top: 1.4rem; }
.lc-tap-hint { margin: .4rem 0 0; text-align: center; font-size: .8rem; font-weight: 700; opacity: .9; }
.lc-branding { color: #fff; }

/* =================== picture mode =================== */
/* the poster fills the stage edge to edge; only the small credit stays under it, on the colour of the ground */
.ec-image .lc-page { padding: 0 !important; min-height: 0; }
.ec-image body.lc { background: color-mix(in srgb, var(--ec-ground) 70%, black); }
.ec-image .lc-branding { padding: 0 8px 12px; background: color-mix(in srgb, var(--ec-ground) 70%, black); }
.ec-image--story .lc-poster { min-height: 598px; }

/* square picture: the text in the middle, the children in the left corner, the table in the right corner */
.ec-image--kotak .lc-poster { min-height: 310px; padding-top: 5cqw; }
.ec-image--kotak .lc-hang { top: -6cqw; }
.ec-image--kotak .lc-moon, .ec-image--kotak .lc-hang > path:nth-last-of-type(1) { display: none; }
.ec-image--kotak .lc-body { padding: 0 21cqw 24cqw; }
.ec-image--kotak .lc-to { margin-bottom: 2.2cqw; padding: .2cqw 3cqw .8cqw; max-width: 66cqw; }
.ec-image--kotak .lc-to__label, .ec-image--kotak .lc-from__label { font-size: 1.9cqw; }
.ec-image--kotak .lc-to__name { font-size: 3.6cqw; }
.ec-image--kotak .lc-to--long .lc-to__name { font-size: 3cqw; }
.ec-image--kotak .lc-title__lead { font-size: 5.4cqw; margin-bottom: -1.4cqw; }
.ec-image--kotak .lc-title__main { font-size: 12cqw; }
.ec-image--kotak .lc-title__main--m { font-size: 9.6cqw; }
.ec-image--kotak .lc-title__main--l { font-size: 7cqw; }
.ec-image--kotak .lc-title__main--xl { font-size: 5.6cqw; }
.ec-image--kotak .lc-arabic { font-size: 4.4cqw; margin-top: 1.6cqw; line-height: 1.4; }
.ec-image--kotak .lc-arabic__star { width: 2.4cqw; height: 2.4cqw; }
.ec-image--kotak .lc-message { font-size: 2.75cqw; max-width: 58cqw; margin-top: .4cqw; line-height: 1.42; }
.ec-image--kotak .lc-message p { margin-bottom: .6cqw; }
.ec-image--kotak .lc-poster--msg-m .lc-message { font-size: 2.55cqw; max-width: 58cqw; }
.ec-image--kotak .lc-poster--msg-l .lc-message { font-size: 2.3cqw; max-width: 60cqw; }
.ec-image--kotak .lc-from { margin-top: 1.2cqw; flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; column-gap: 1.6cqw; }
.ec-image--kotak .lc-from__closing { font-size: 3cqw; }
.ec-image--kotak .lc-from__line { padding: .2cqw 3cqw .8cqw; }
.ec-image--kotak .lc-from__name { font-size: 3.6cqw; }
.ec-image--kotak .lc-poster--mid-sender .lc-from__name { font-size: 3.3cqw; }
.ec-image--kotak .lc-poster--long-sender .lc-from__name { font-size: 2.8cqw; }
.ec-image--kotak .lc-photos { display: none; }
.ec-image--kotak .lc-scene { height: 36cqw; }
.ec-image--kotak .lc-mosque { width: 50cqw; left: 25cqw; bottom: 6cqw; }
.ec-image--kotak .lc-ground { height: 9cqw !important; }
.ec-image--kotak .lc-boy { width: 17.5cqw; left: -1.5cqw; bottom: .8cqw; }
.ec-image--kotak .lc-girl { width: 17.5cqw; left: 12cqw; bottom: 1cqw; }
.ec-image--kotak .lc-table { width: 27cqw; right: 0; bottom: 1.2cqw; }