/* Indonesia, "Detak": a lamp-lit night of soga brown and gold; the lives hang as batik on the screen (kelir). */
:root {
  --bg: #15100B; --ink: #F3E6CC; --ink2: rgba(243, 230, 204, .66); --line: rgba(243, 230, 204, .14); --panel: #201710; --panel2: #2C2016;
  --accent: #E3A23B; --accent-ink: #15100B; --pulse: #E36E3B;
  --hero-bg: #0F0B07; --hero-ink: #F3E6CC; --hero-ink2: rgba(243, 230, 204, .64);
  --display: 'Cormorant Garamond', Georgia, serif; --body: Inter, system-ui, sans-serif;
  --r: 12px; --r-sm: 8px; --shadow: 0 14px 34px rgba(0, 0, 0, .4);
  --gold: #E3A23B; --gold-pale: #F2CF83; --screen: #EFE3C8; --soga: #5B3A1C;
  --H: #4E9A62; --M: #C9962B; --L: #C0673C; --U: #8A7E70;
}
body { background: var(--bg); }
.big { font-weight: 600; letter-spacing: -.005em; }
.big em { color: var(--gold); font-weight: 500; }
#pulse { background: radial-gradient(ellipse at 18% 30%, rgba(227, 162, 59, .10), transparent 55%), var(--hero-bg); }
#pulse h1 { font-weight: 600; }
#pulse h1 .n { color: var(--gold-pale); }
.p-num, .mname, .pn b, .ns b { font-weight: 600; }
.step h3, .mt-name, .take h3, .dis h3, .mom h3, .move h3, .insight, .l-id h2 { font-weight: 600; }
#pulse h1 .n, .p-num, .ns b, .pn b, .l-size .cnt, .stat b, .mname, #crowd .lab .gn { font-variant-numeric: lining-nums tabular-nums; }

/* The screen (kelir) */
#people, #lives {
  --bg: #EFE3C8; --ink: #24180D; --ink2: rgba(36, 24, 13, .7); --line: rgba(36, 24, 13, .16); --panel: #F7EEDB; --panel2: #E5D6B5;
  --accent: #A2442F; --accent-ink: #fff;
  background: radial-gradient(ellipse 70% 55% at 50% 0%, #FBF4E2, #EFE3C8 60%, #D9C59C 100%); color: var(--ink);
}
#people .big em, #lives .big em { color: #A2442F; }

/* Parang border: S-shaped blades in diagonal bands with small diamonds (mlinjon) between */
.trim { height: 26px; border-top: 2px solid #E3A23B; border-bottom: 2px solid #E3A23B; background-color: #2A1C10;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26' viewBox='0 0 26 26'%3E%3Cg transform='rotate(45 13 13)'%3E%3Cpath d='M-6 9 C0 2 6 2 13 9 S26 16 32 9 V15 C26 22 20 22 13 15 S0 8 -6 15 Z' fill='%23E3A23B'/%3E%3Cpath d='M-6 12 C0 6 6 6 13 12 S26 18 32 12' fill='none' stroke='%232A1C10' stroke-width='1.2'/%3E%3C/g%3E%3Cpath d='M2 22 l2 2.5 -2 2.5 -2 -2.5 Z M24 2 l2 2.5 -2 2.5 -2 -2.5 Z' fill='%23F2CF83'/%3E%3C/svg%3E");
  background-size: 26px 26px; }

/* The lamp (blencong) over the lives, flickering */
#lives { position: relative; }
.blencong { position: absolute; left: 50%; top: 0; width: 900px; height: 520px; margin-left: -450px; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(255, 214, 140, .55), rgba(255, 214, 140, 0) 65%); animation: flicker 3.2s ease-in-out infinite; }
@keyframes flicker { 0%, 100% { opacity: .9; } 23% { opacity: .78; } 41% { opacity: 1; } 62% { opacity: .84; } 80% { opacity: .96; } }
#lives .wrap { position: relative; }
.kayon-open { position: absolute; right: 24px; top: -10px; width: 150px; text-align: center; perspective: 600px; }
.kayon-open .kayon { width: 100%; height: auto; filter: drop-shadow(10px 14px 6px rgba(36, 22, 8, .4)); transform: rotateY(80deg) rotate(-8deg); transform-origin: 50% 90%; transition: transform 1.6s cubic-bezier(.3, 1.3, .5, 1); }
.kayon-open.in .kayon { transform: rotateY(0) rotate(-4deg); }
.kayon-open span, .kayon-close span { display: block; font-size: 11px; color: var(--ink2); margin-top: 6px; letter-spacing: .06em; }
.kayon-close { display: grid; grid-template-columns: 110px 1fr; gap: 22px; align-items: center; margin: 70px 0 0; max-width: 620px; }
.kayon-close .kayon { width: 110px; height: auto; transform: translateY(30px); opacity: 0; transition: 1.2s cubic-bezier(.3, 1.3, .5, 1); }
.kayon-close.in .kayon { transform: none; opacity: 1; }
.kayon-close p { margin: 0; color: var(--ink2); font-size: 15px; }
.kayon-close b { color: var(--gold-pale); font: italic 600 20px var(--display); }
@media (max-width: 1100px) { .kayon-open { position: static; width: 96px; margin: 0 0 10px; } .kayon-open span { display: none; } }

/* Batik cloths hung on the bamboo rod; each casts a shadow on the screen that sharpens when it is chosen */
.card { width: 260px; opacity: 1; }
.kain { display: block; color: var(--ink); }
.kain-face { position: relative; display: block; aspect-ratio: 200 / 290; transform-origin: 50% 2%; filter: drop-shadow(18px 24px 10px rgba(36, 22, 8, .34)); transition: filter .6s, transform .6s cubic-bezier(.3, 1.3, .5, 1); }
.card:not(.active) .kain-face { transform: scale(.94) rotate(calc(var(--sway) * 1.2deg)); filter: drop-shadow(24px 30px 14px rgba(36, 22, 8, .22)) saturate(.85); }
.card.active .kain-face, .card:hover .kain-face { filter: drop-shadow(5px 7px 2px rgba(36, 22, 8, .6)); transform: none; }
.card.active .kain-face { animation: hang 5s ease-in-out infinite alternate; }
@keyframes hang { from { transform: rotate(-.7deg); } to { transform: rotate(.7deg); } }
.kain-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.kain-art { position: absolute; left: 13%; right: 13%; top: 19%; }
.kain-art .med { width: 100%; height: auto; filter: drop-shadow(0 4px 8px rgba(0, 0, 0, .35)); }
.kain-motif { position: absolute; left: 0; right: 0; top: 6.2%; text-align: center; font: 500 9.5px var(--mono); letter-spacing: .14em; text-transform: uppercase; color: #F2CF83; text-shadow: 0 1px 2px #2A1C10; }
.kain-name { position: absolute; left: 16%; right: 16%; top: 80.5%; padding: 3px 6px; text-align: center; font: italic 600 18px/1.1 var(--display); color: #F2CF83; background: rgba(42, 28, 16, .92); border: 1px solid rgba(227, 162, 59, .7); border-radius: 2px; }
.gun-cap { display: block; padding: 12px 4px 0; }
.gun-cap .gun-size { display: block; font: 500 12px var(--mono); color: #7A4A22; margin-bottom: 4px; }
.gun-cap > b { display: block; font: 600 23px/1.1 var(--display); }
.gun-cap .tag { display: block; font-size: 14px; color: var(--ink2); margin: 6px 0 10px; min-height: 3.9em; }
.dchips { display: flex; flex-wrap: wrap; gap: 5px; }
.dchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(36, 24, 13, .06); border: 1px solid rgba(36, 24, 13, .2); font-size: 12px; }
@media (max-width: 819px) { .card { width: min(70vw, 260px); } }
@media (prefers-reduced-motion: reduce) { .blencong, .card.active .kain-face { animation: none; } }

/* Kawung bloom */
.med .petal { transform-origin: 0 0; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1), opacity .4s; }
.med.bloom .petal { animation: lobeIn 1s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 80ms); }
@keyframes lobeIn { from { transform: scale(.15); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi ellipse:first-child { stroke: #F2CF83; stroke-width: 3; }
.med .plabel { cursor: pointer; }
.med .plabel.hi circle { stroke: #F2CF83; stroke-width: 3; }

/* Profile on the night, with the life's batik as a band */
.life-in { background: radial-gradient(ellipse 60% 40% at 30% 0%, #2A1D12, #15100B 70%); }
.life-top { background: #17110B; }
.kain-band { display: block; width: 100%; height: 14px; margin-top: 10px; border-top: 1px solid #E3A23B; border-bottom: 1px solid #E3A23B; }
.kain-band-l { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin-top: 6px; }
.life-in .local { color: var(--gold-pale); }
.life-in { --lc-ink: color-mix(in srgb, var(--lc) 45%, #F3E6CC); }
.qmark { background: #15100B; }

/* The gong is struck on each month change */
#year { background: radial-gradient(ellipse 50% 60% at 30% 55%, rgba(227, 162, 59, .08), transparent 70%), var(--bg); }
.gong-boss { transform-box: fill-box; transform-origin: center; }
.gong-boss.strike { animation: strike .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes strike { 0% { transform: scale(1); } 30% { transform: scale(.94); } 100% { transform: scale(1); } }

/* Moves: gold-edged tiles on the night */
.mt { background: linear-gradient(160deg, #241A11, #1A130C); border: 1px solid rgba(227, 162, 59, .35); }
.mt::after { content: ''; position: absolute; inset: 5px; border: 1px solid rgba(227, 162, 59, .14); border-radius: 8px; pointer-events: none; }
.mt-ico { background: color-mix(in srgb, var(--mc) 70%, #15100B); color: #F3E6CC; }
.mt-meter i, .mc-meters i { border-color: var(--gold); }
.mt-meter i.on, .mc-meters i.on { background: var(--gold); }
.mc-in { background: #1E160E; }
.take article { background: linear-gradient(160deg, #241A11, #1A130C); border-color: rgba(227, 162, 59, .3); }
.oe a { border-color: rgba(227, 162, 59, .3); }
.tip { background: #F3E6CC; color: #15100B; }
.bar.solid { background: color-mix(in srgb, #15100B 96%, transparent); color: #F3E6CC; }