/* Tales — Luxury. Buku cerita bergambar: diorama menempel di atas, mempelai berjalan ke rumah adat seiring halaman digulir. */
.tpl-tales{
  --bg:var(--t-paper);--bg2:var(--t-mist);--ink:var(--t-ink);--muted:color-mix(in srgb,var(--t-ink) 60%,var(--t-paper));
  --accent:var(--t-tone);--on-accent:var(--t-paper);--hair:var(--t-metal);--backdrop:color-mix(in srgb,var(--t-ink) 90%,#000);
}
.tpl-tales .names{font-size:50px;flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 .24em}
.tpl-tales .names .amp{color:var(--accent);font-size:.8em}
.tpl-tales.names-caps .names{font-size:32px;letter-spacing:.2em}

/* warna gambar */
.s-sun{fill:color-mix(in srgb,var(--t-metal) 46%,var(--t-paper))}
.s-mount{fill:color-mix(in srgb,var(--t-tone) 30%,var(--t-paper))}
.s-mount2{fill:color-mix(in srgb,var(--t-tone) 15%,var(--t-paper))}
.s-cloud path{fill:#fff;opacity:.8}
.s-line{fill:none;stroke:color-mix(in srgb,var(--t-ink) 62%,transparent);stroke-width:1.5;stroke-linecap:round}
.s-trunk{fill:color-mix(in srgb,var(--t-ink) 72%,var(--t-tone))}
.s-leaf{fill:color-mix(in srgb,var(--t-tone) 62%,var(--t-paper))}
.s-leaf2{fill:color-mix(in srgb,var(--t-tone) 86%,var(--t-ink))}
.s-flag{fill:var(--t-metal)}
.s-ground{fill:var(--t-grass,color-mix(in srgb,var(--t-tone) 34%,var(--t-paper)))} /* --t-grass: warna rumput pilihan admin (opsional) */
.s-dot{fill:#fff;stroke:none}
.h-roof{fill:color-mix(in srgb,var(--t-ink) 84%,var(--t-tone))}
.h-roof2{fill:color-mix(in srgb,var(--t-tone) 82%,var(--t-ink))}
.h-wall{fill:color-mix(in srgb,var(--t-paper) 78%,var(--t-metal))}
.h-dark{fill:var(--t-ink)}
.h-line{fill:none;stroke:var(--t-metal);stroke-width:1.6}
.h-tone{stroke:var(--t-tone);stroke-width:2.2}
.h-tone-fill{fill:var(--t-tone)}
.f-skin{fill:#c9a184}.f-ink{fill:var(--t-ink)}.f-tone{fill:var(--t-tone)}.f-metal{fill:var(--t-metal)}.f-paper{fill:#fff}
.f-metal-s{fill:none;stroke:var(--t-metal);stroke-width:1.2}.f-paper-s{fill:none;stroke:var(--t-paper);stroke-width:1}.f-veil{fill:#fff;opacity:.62}

/* sampul */
.tpl-tales .cover{align-items:start;background:linear-gradient(var(--t-mist),var(--t-paper) 58%)}
.tpl-tales .cover-scene{position:absolute;left:0;right:0;bottom:0;width:100%;height:46%}
.tpl-tales .cover-inner{padding-top:clamp(56px,10dvh,110px)}
.tpl-tales .cover-date{letter-spacing:.24em;font-size:12.5px;color:var(--muted)}
.tpl-tales .cover{transition:transform 1.1s cubic-bezier(.7,0,.2,1)}
.tpl-tales.is-open .cover{transform:translateX(-50%) translateY(-102%)}

/* diorama */
.diorama{position:sticky;top:0;z-index:30;height:38dvh;min-height:230px;max-height:330px;overflow:hidden;background:linear-gradient(var(--t-mist),var(--t-paper));border-bottom:1px solid var(--t-metal)}
.dio{position:absolute;left:0;bottom:0;height:100%;width:auto;max-width:none;will-change:transform}
.dio-near{height:20%}
.travelers{position:absolute;left:20%;bottom:10.5%;height:29%;display:flex;align-items:flex-end;z-index:2}
.fig{height:100%;width:auto;display:block}
.fig-bride{margin-left:-7%}
.fig .leg-a,.fig .leg-b,.fig-dress{transform-box:fill-box;transform-origin:50% 0}
.travelers.is-walking .fig{animation:tBob .42s ease-in-out infinite}
.travelers.is-walking .leg-a{animation:tLeg .42s ease-in-out infinite alternate}
.travelers.is-walking .leg-b{animation:tLeg .42s ease-in-out infinite alternate-reverse}
.travelers.is-walking .fig-dress{animation:tSway .84s ease-in-out infinite alternate}
.travelers.is-back{transform:scaleX(-1)}
@keyframes tBob{50%{transform:translateY(-2.5%)}}
@keyframes tLeg{from{transform:rotate(-16deg)}to{transform:rotate(16deg)}}
@keyframes tSway{from{transform:skewX(-2.5deg)}to{transform:skewX(2.5deg)}}

/* isi: halaman-halaman cerita */
.tpl-tales .sec{scroll-margin-top:38dvh}
.tpl-tales .hero{min-height:0;padding-top:20px}
.tpl-tales .hero-photo{display:none}
.tpl-tales .hero-text{padding:44px 28px 60px}
.tpl-tales .hero-date{color:var(--muted)}
.tpl-tales .events,.tpl-tales .rsvp{background:var(--bg2)}
.tpl-tales .portrait{border-radius:120px 120px 4px 4px;outline:1px solid var(--hair);outline-offset:6px}
.tpl-tales .event{background:var(--bg);border-color:color-mix(in srgb,var(--hair) 70%,transparent)}
.tpl-tales .gift-card{background:var(--bg2);border-color:transparent}
.tpl-tales .story-list li::before{border-radius:50%;transform:none}
.tpl-tales .closing .names{font-size:40px}
@media (prefers-reduced-motion:reduce){.travelers.is-walking .fig,.travelers.is-walking .leg-a,.travelers.is-walking .leg-b,.travelers.is-walking .fig-dress{animation:none}}