/* ============ LAYAR KELIR — wayang shadow theatre for #about ============ */
#about{position:relative; overflow:hidden;
  background:
    radial-gradient(1000px 560px at 58% 36%, rgba(240,196,106,.085), transparent 62%),
    radial-gradient(700px 420px at 8% 88%, rgba(107,63,160,.05), transparent 60%),
    var(--bg-0) !important;
}
#about > .ctn{position:relative; z-index:2}
.klr{position:absolute; inset:0; z-index:0; pointer-events:none; color:#4a3220;
  animation:klrFlick 5.6s ease-in-out infinite}
@keyframes klrFlick{0%,100%{opacity:1} 42%{opacity:.93} 47%{opacity:.985} 63%{opacity:.95} 68%{opacity:1}}

/* blencong warm light pool follows the cursor */
.klr-glow{position:absolute; width:560px; height:560px; border-radius:50%;
  left:var(--kgx,60%); top:var(--kgy,40%); transform:translate(-50%,-50%);
  background:radial-gradient(circle, rgba(244,196,110,.17), rgba(244,196,110,.05) 45%, transparent 70%);
  transition:none}

/* mega mendung */
.klr-cloud{position:absolute; opacity:.075;
  filter:drop-shadow(calc(var(--klx,0)*-10px) 6px 4px rgba(74,50,32,.25))}
.klr-cl1{width:250px; top:5%;  animation:klrDrift 64s linear infinite}
.klr-cl2{width:170px; top:14%; animation:klrDrift 46s linear infinite; animation-delay:-18s; opacity:.055}
.klr-cl3{width:120px; top:2%;  animation:klrDrift 38s linear infinite; animation-delay:-30s; opacity:.045}
@keyframes klrDrift{from{left:-280px} to{left:104%}}

/* gunungan — sways like a dalang turning the kayon */
.klr-gn{position:absolute; left:-64px; bottom:-34px; width:min(30vw,420px); opacity:.13;
  transform:translateX(calc(var(--klx,0)*12px)) skewX(calc(var(--klx,0)*-3.2deg));
  filter:drop-shadow(calc(var(--klx,0)*-22px) 10px 7px rgba(74,50,32,.3));
  transform-origin:bottom center}
.klr-gn svg{display:block; width:100%; transform-origin:50% 96%;
  animation:klrSway 9.5s ease-in-out infinite alternate}
@keyframes klrSway{from{transform:rotate(-4.5deg)} to{transform:rotate(4.5deg)}}

/* wayang figure — arms gesture like a dalang at work */
.klr-wy{position:absolute; right:-26px; bottom:-16px; width:min(17vw,240px); opacity:.12;
  transform:translateX(calc(var(--klx,0)*-16px)) skewX(calc(var(--klx,0)*4deg));
  filter:drop-shadow(calc(var(--klx,0)*-26px) 12px 8px rgba(74,50,32,.3));
  transform-origin:bottom center}
.klr-wy svg{display:block; width:100%; transform-origin:50% 100%;
  animation:klrBreathe 7s ease-in-out infinite alternate}
@keyframes klrBreathe{from{transform:rotate(-1.2deg) translateY(0)} to{transform:rotate(1.4deg) translateY(-5px)}}
.klr-armF{transform-origin:76px 106px; animation:klrArmF 8.5s ease-in-out infinite alternate}
@keyframes klrArmF{from{transform:rotate(-13deg)} to{transform:rotate(11deg)}}
.klr-armF2{transform-origin:44px 147px; animation:klrArmF2 8.5s ease-in-out infinite alternate}
@keyframes klrArmF2{from{transform:rotate(16deg)} to{transform:rotate(-12deg)}}
.klr-armB{transform-origin:114px 104px; animation:klrArmB 11s ease-in-out infinite alternate}
@keyframes klrArmB{from{transform:rotate(8deg)} to{transform:rotate(-9deg)}}
.klr-armB2{transform-origin:133px 146px; animation:klrArmB2 11s ease-in-out infinite alternate}
@keyframes klrArmB2{from{transform:rotate(-12deg)} to{transform:rotate(10deg)}}

/* kawung band — batik quietly walking along the floor of the stage */
.klr-kw{position:absolute; left:0; right:0; bottom:0; height:104px; opacity:.09;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='%234a3220'%3E%3Cellipse cx='18' cy='8' rx='5' ry='9'/%3E%3Cellipse cx='18' cy='28' rx='5' ry='9'/%3E%3Cellipse cx='8' cy='18' rx='9' ry='5'/%3E%3Cellipse cx='28' cy='18' rx='9' ry='5'/%3E%3Ccircle cx='18' cy='18' r='1.8'/%3E%3Ccircle cx='0' cy='0' r='1.4'/%3E%3Ccircle cx='36' cy='0' r='1.4'/%3E%3Ccircle cx='0' cy='36' r='1.4'/%3E%3Ccircle cx='36' cy='36' r='1.4'/%3E%3C/g%3E%3C/svg%3E");
  background-size:36px 36px;
  -webkit-mask-image:linear-gradient(180deg, transparent, #000 55%);
  mask-image:linear-gradient(180deg, transparent, #000 55%);
  animation:klrKawung 26s linear infinite}
@keyframes klrKawung{from{background-position:0 0} to{background-position:144px 72px}}

/* caption */
.klr-cap{position:absolute; left:20px; top:50%; transform:translateY(-50%);
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.34em;
  color:rgba(74,50,32,.32)}

@media(max-width:1024px){
  .klr-wy{display:none}
  .klr-gn{left:auto; right:-70px; width:280px; opacity:.075}
  .klr-cap{display:none}
}
@media(prefers-reduced-motion:reduce){
  .klr,.klr-cloud,.klr-gn svg,.klr-wy svg,.klr-armF,.klr-armF2,.klr-armB,.klr-armB2,.klr-kw{animation:none !important}
}