/* Lapisan adat — dipakai Klasik (Regular) dan Sinematik (Premium).
   Variabel dari invitation.php: --kain (ubin motif warna logam), --kain2 (ubin warna tema),
   --kain-w/--kain-h (ukuran ubin), --mask (siluet bangunan adat). Semua garis tipis, satu rumpun warna. */

/* ---------- lambang adat ---------- */
.crest{display:block;width:100%;height:auto;overflow:visible}
.crest .fill{fill:currentColor;stroke:none}
.crest-wrap{width:min(156px,44%);margin:0 auto 30px;color:var(--hair)}
.js .crest-wrap .ln{stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 2.8s cubic-bezier(.6,0,.2,1) .2s}
.js .crest-wrap.in .ln{stroke-dashoffset:0}
.js .crest-wrap .fill{opacity:0;transition:opacity 1s ease 2.2s}
.js .crest-wrap.in .fill{opacity:1}

/* ---------- kata adat berongga (Dhaup, Baralek, Horas, ...) ---------- */
.ghost{font-family:var(--f-names);font-weight:400;font-size:clamp(54px,17vw,86px);line-height:.92;letter-spacing:-.025em;white-space:nowrap;
  color:transparent;-webkit-text-stroke:1px color-mix(in srgb,var(--hair) 85%,transparent);pointer-events:none;user-select:none}
.names-italic .ghost{font-style:italic}
.names-caps .ghost{text-transform:uppercase;letter-spacing:.06em;font-weight:300;font-size:clamp(40px,12vw,62px)}
.ghost--thanks{white-space:normal;font-size:clamp(46px,14vw,70px);margin:0 auto 26px;max-width:9ch}
.names-caps .ghost--thanks{max-width:none;font-size:clamp(34px,10vw,48px)}
.cover-inner .ghost,.hero-text .ghost{margin:-2px 0 -.7em;position:relative;z-index:0;opacity:.6}
.cover-inner .names,.hero-text .names{position:relative;z-index:1}

/* ---------- pita teks berjalan ---------- */
.ticker{position:relative;overflow:hidden;padding:13px 0;background:var(--bg2);border-block:1px solid var(--line)}
.ticker-track{display:flex;width:max-content;animation:ticker 42s linear infinite}
.ticker-track>div{display:flex;align-items:center;flex:none}
.ticker span{font-family:var(--f-names);font-size:25px;line-height:1;padding:0 16px;white-space:nowrap}
.names-italic .ticker span{font-style:italic}
.ticker span:nth-of-type(2n){font-family:var(--f-body);font-style:normal;font-size:11px;font-weight:600;letter-spacing:.32em;text-transform:uppercase;color:var(--muted)}
.ticker i{flex:none;width:calc(var(--kain-w) * .7);height:calc(var(--kain-h) * .7);background:var(--kain2) center/contain no-repeat}
@keyframes ticker{to{transform:translateX(-50%)}}

/* ---------- motif kain sebagai penanda ---------- */
.sec-head::after{content:"";display:block;width:calc(var(--kain-w) * 4);height:calc(var(--kain-h) * .6);margin:18px auto 0;background:var(--kain2) 0 50%/auto 100% repeat-x;opacity:.85}
.events::before,.rsvp::before,.reel-sec::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--kain-h) * .75);background:var(--kain2) 0 0/auto 100% repeat-x;opacity:.5}

/* ---------- siluet rumah adat (wayang kulit) ---------- */
.sil-wrap{width:min(250px,68%);margin:0 auto 18px}
.sil{display:block;width:100%;height:auto;color:color-mix(in srgb,var(--accent) 60%,var(--bg))}
.sil *{fill:currentColor!important;stroke:none!important}
.sil .h-line,.sil .h-tone{fill:none!important;stroke:var(--bg)!important;stroke-width:2.2!important}

/* ---------- stempel berputar ---------- */
.stamp{display:block;overflow:visible}
.stamp-bg{fill:var(--bg)}
.stamp-ring{fill:none;stroke:var(--hair);stroke-width:.8}
.stamp text{font-family:var(--f-body);font-size:9.4px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;fill:var(--ink)}
.stamp .stamp-mono{font-family:var(--f-names);font-size:21px;font-weight:400;letter-spacing:0;text-transform:none;fill:var(--accent)}
.stamp-spin{transform-box:view-box;transform-origin:50% 50%;animation:spin 26s linear infinite}

/* ---------- jendela berbentuk bangunan adat ---------- */
.window-kain,.window-photo,.adat-on .portrait,.adat-on .portrait img,.tpl-klasik .reel-frame,.tpl-klasik .reel-video{
  -webkit-mask:var(--mask) 0 0/100% 100% no-repeat;mask:var(--mask) 0 0/100% 100% no-repeat}

/* ======================= KLASIK ======================= */
.tpl-klasik .cover::before{display:none}
.tpl-klasik .cover-kain{position:absolute;left:0;right:0;height:var(--kain-h);background:var(--kain2) 0 0/auto 100% repeat-x;opacity:.75}
.tpl-klasik .cover-kain-t{top:0}
.tpl-klasik .cover-kain-b{bottom:0;transform:scaleY(-1)}
.tpl-klasik .window{position:absolute;left:50%;top:calc(var(--kain-h) + clamp(18px,3.5dvh,40px));height:clamp(176px,calc(100dvh - 500px),420px);aspect-ratio:3/4;transform:translateX(-50%)}
.tpl-klasik .window-kain{position:absolute;inset:0;background:var(--bg2) var(--kain2) 0 0/calc(var(--kain-w) * .5) auto}
.tpl-klasik .window-photo{position:absolute;inset:9px;background-size:cover;background-position:center 30%}
.tpl-klasik .window-empty{display:grid;place-items:center;background:var(--bg);color:var(--hair);padding:22%}
.tpl-klasik .window .stamp{position:absolute;right:-40px;bottom:5%;width:96px;height:96px;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--ink) 16%,transparent))}
.tpl-klasik .cover-inner{padding-bottom:calc(var(--kain-h) + 24px + env(safe-area-inset-bottom));gap:10px}
.js .tpl-klasik .window-photo{animation:windowIn 1.6s cubic-bezier(.2,.7,.2,1) both}
@keyframes windowIn{from{opacity:0;transform:scale(1.08)}}

.tpl-klasik .hero-photo{height:60dvh}
.tpl-klasik .portrait{width:206px;padding:8px;background:var(--bg2) var(--kain2) 0 0/calc(var(--kain-w) * .5) auto;border-radius:0}
.tpl-klasik .people-amp{font-size:30px}
.tpl-klasik .reel-frame{width:min(292px,76%);padding:10px;border-radius:0;background:var(--bg2) var(--kain2) 0 0/calc(var(--kain-w) * .5) auto}
.tpl-klasik .reel-video{inset:10px;width:calc(100% - 20px);height:calc(100% - 20px)}
.tpl-klasik .reel-rec{display:none}
.tpl-klasik .reel-tc{left:50%;transform:translateX(-50%);bottom:20px}
.tpl-klasik .closing .ghost--thanks{-webkit-text-stroke-color:color-mix(in srgb,var(--accent) 70%,transparent)}

/* ======================= SINEMATIK ======================= */
.tpl-sinema .bar{background:#000 var(--kain) 0 50%/auto 62% repeat-x;z-index:1}
.tpl-sinema .crest-cover{position:absolute;left:50%;top:calc(7dvh + 2.5dvh);width:min(50%,25dvh);transform:translateX(-50%);color:var(--hair);opacity:.62}
.tpl-sinema .crest-cover .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.4s cubic-bezier(.6,0,.2,1) .5s forwards}
.tpl-sinema .crest-cover .fill{opacity:0;animation:fadeIn 1s ease 3s forwards}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes fadeIn{to{opacity:1}}
.tpl-sinema .side-label{position:absolute;left:14px;top:50%;z-index:2;writing-mode:vertical-rl;transform:translateY(-50%) rotate(180deg);font-size:10px;letter-spacing:.42em;text-transform:uppercase;color:var(--hair);white-space:nowrap;opacity:.85}
.tpl-sinema .ghost{-webkit-text-stroke-color:color-mix(in srgb,var(--hair) 70%,transparent)}
.tpl-sinema .ticker{background:#000;border-color:color-mix(in srgb,var(--hair) 40%,transparent)}
.tpl-sinema .ticker i{background-image:var(--kain)}
.tpl-sinema .ticker span:nth-of-type(2n){color:var(--hair)}
.tpl-sinema .sec-head::after{background-image:var(--kain)}
.tpl-sinema .sambutan .crest-wrap{width:min(130px,38%);margin-bottom:auto;padding-top:20px}
.tpl-sinema .sambutan{justify-content:space-between}

/* potret: siluet adat bergaris logam */
.tpl-sinema .portrait{padding:1.5px;background:var(--hair);aspect-ratio:3/4}
.tpl-sinema .portrait img{filter:grayscale(1)}

/* acara: blok warna tema dengan pinggiran kain */
.tpl-sinema .events{padding-top:96px;padding-bottom:96px}
.tpl-sinema .events::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--kain-h) * .75);background:var(--kain2) 0 0/auto 100% repeat-x;opacity:.6;transform:scaleY(-1)}
.tpl-sinema .events::before{opacity:.6}

/* video: layar penuh, bingkai bioskop */
.tpl-sinema .reel-sec{padding-inline:0;background:#000}
.tpl-sinema .reel-sec .sec-head{padding-inline:28px}
.tpl-sinema .reel-frame{width:100%;max-height:88dvh;border-radius:0}
.tpl-sinema .reel-video{filter:contrast(1.1) saturate(.62) sepia(.14)}
.tpl-sinema .reel-bar{display:block;background:#000 var(--kain) 0 50%/auto 58% repeat-x;z-index:1}
.tpl-sinema .reel-tc{bottom:calc(7% + 12px)}
.tpl-sinema .reel-rec{top:calc(7% + 12px)}
.tpl-sinema .sil{color:color-mix(in srgb,var(--hair) 70%,transparent)}
.tpl-sinema .sil .h-line,.tpl-sinema .sil .h-tone{stroke:var(--t-night)!important}
.tpl-sinema .closing .sil-wrap{width:min(220px,60%)}

@media (prefers-reduced-motion:reduce){
  .ticker-track,.stamp-spin,.js .tpl-klasik .window-photo{animation:none}
  .js .crest-wrap .ln,.tpl-sinema .crest-cover .ln{stroke-dashoffset:0;animation:none;transition:none}
  .js .crest-wrap .fill,.tpl-sinema .crest-cover .fill{opacity:1;animation:none;transition:none}
}

/* ======================= TALES (Luxury) ======================= */
/* warna properti adat di diorama */
.d-tone{fill:var(--t-tone)}.d-metal{fill:var(--t-metal)}.d-ink{fill:var(--t-ink)}.d-paper{fill:#fff}
.d-pale{fill:color-mix(in srgb,var(--t-tone) 28%,var(--t-paper))}
.d-stone{fill:color-mix(in srgb,var(--t-ink) 52%,var(--t-paper))}.d-stone2{fill:color-mix(in srgb,var(--t-ink) 64%,var(--t-paper))}
.d-line{fill:none;stroke:color-mix(in srgb,var(--t-ink) 72%,transparent);stroke-width:1.6;stroke-linecap:round}
.d-mline{fill:none;stroke:var(--t-metal);stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.d-pstroke{fill:none;stroke:color-mix(in srgb,var(--t-paper) 85%,transparent);stroke-width:1.4}
.d-bamboo{fill:none;stroke:color-mix(in srgb,var(--t-tone) 55%,#7d8a5a);stroke-width:4;stroke-linecap:round}
.d-glow{fill:color-mix(in srgb,var(--t-metal) 35%,transparent)}
.dio .wave{transform-box:fill-box;transform-origin:0 0;animation:flag 2.6s ease-in-out infinite alternate}
.dio .sway{transform-box:fill-box;transform-origin:50% 100%}
@keyframes flag{from{transform:skewY(-4deg)}to{transform:skewY(5deg) scaleX(.92)}}

.tpl-tales .diorama{border-bottom:0}
.tpl-tales .diorama::after{content:"";position:absolute;left:0;right:0;bottom:0;height:calc(var(--kain-h) * .6);background:var(--bg) var(--kain2) 0 50%/auto 100% repeat-x;border-top:1px solid var(--hair);z-index:3}

/* sampul buku cerita */
.tpl-tales .cover-kain{position:absolute;left:0;right:0;height:var(--kain-h);background:var(--kain2) 0 0/auto 100% repeat-x;opacity:.8;z-index:2}
.tpl-tales .cover-kain-t{top:0}
.tpl-tales .cover-kain-b{bottom:0;transform:scaleY(-1);background-color:var(--t-paper)}
.tpl-tales .cover-inner{padding-top:calc(var(--kain-h) + clamp(18px,4dvh,48px));gap:10px}
.tpl-tales .crest-mini{width:74px;color:var(--hair);margin-bottom:4px}
.tpl-tales .crest-mini .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.6s cubic-bezier(.6,0,.2,1) .3s forwards}
.tpl-tales .crest-mini .fill{opacity:0;animation:fadeIn 1s ease 2s forwards}
.tpl-tales .cover .s-sun{opacity:0}
.tpl-tales .cover .stamp{position:absolute;right:5%;bottom:24%;width:84px;height:84px;z-index:1;filter:drop-shadow(0 6px 14px color-mix(in srgb,var(--ink) 14%,transparent))}
.tpl-tales .cover .ghost{opacity:.6}

/* bab-bab cerita: urutan bagian adalah alur cerita */
.tpl-tales .inv{counter-reset:bab}
.tpl-tales .sec-head .eyebrow::before{counter-increment:bab;content:"Bab " counter(bab,upper-roman) "  ·  ";color:var(--hair)}
.tpl-tales .portrait{outline:0;width:206px;padding:8px;border-radius:0;background:var(--bg2) var(--kain2) 0 0/calc(var(--kain-w) * .5) auto}

/* ======================= KAMPUNG (Luxury) ======================= */
.tpl-kampung .gunungan{display:none}
.tpl-kampung .crest-cover{position:absolute;left:50%;top:50%;width:min(82%,46dvh);transform:translate(-50%,-56%);color:var(--hair);opacity:.3}
.tpl-kampung .crest-cover .ln{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 3.4s cubic-bezier(.6,0,.2,1) .4s forwards}
.tpl-kampung .crest-cover .fill{opacity:0;animation:fadeIn 1s ease 3s forwards}
/* dua daun pintu gapura ditenun motif kain adat */
.tpl-kampung .gate::after{content:"";position:absolute;inset:0;background:var(--kain2) 0 0/calc(var(--kain-w) * .8) auto;opacity:.28;pointer-events:none}
.tpl-kampung .gate-l::before,.tpl-kampung .gate-r::before{content:"";position:absolute;top:0;bottom:0;width:calc(var(--kain-h) * .7);background:var(--kain) 50% 0/100% auto repeat-y;opacity:.9;z-index:1}
.tpl-kampung .gate-l::before{right:9px}.tpl-kampung .gate-r::before{left:9px}
.tpl-kampung .ticker i,.tpl-kampung .sec-head::after{background-image:var(--kain)}
.tpl-kampung .ticker span:nth-of-type(2n){color:var(--hair)}
.tpl-kampung .portrait{outline:0;padding:1.5px;background:var(--hair)}
.tpl-kampung .ghost{-webkit-text-stroke-color:color-mix(in srgb,var(--hair) 70%,transparent)}
.mode-game .crest-wrap .ln{stroke-dashoffset:0!important}
.mode-game .crest-wrap .fill{opacity:1!important}
.mode-game .inv .sec .sheet-bar{border-bottom:0;background-image:linear-gradient(color-mix(in srgb,var(--bg) 92%,transparent),color-mix(in srgb,var(--bg) 92%,transparent))}
.mode-game .inv .sec .sheet-bar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:calc(var(--kain-h) * .45);background:var(--kain) 0 50%/auto 100% repeat-x;opacity:.7}
.mode-game .inv .sec::before{display:none}
.hud-title{border-image:none}
.hud-title::after{content:"";display:block;height:10px;margin-top:6px;background:var(--kain) 0 50%/auto 100% repeat-x;opacity:.8}

@media (prefers-reduced-motion:reduce){
  .dio .wave{animation:none}
  .tpl-tales .crest-mini .ln,.tpl-kampung .crest-cover .ln{stroke-dashoffset:0;animation:none}
  .tpl-tales .crest-mini .fill,.tpl-kampung .crest-cover .fill{opacity:1;animation:none}
}
@media (max-height:640px){.tpl-tales .cover .stamp{display:none}}