/* ============================================================
   01-WELCOME.CSS
   Layar sambutan awal (#welcome-screen) sebelum masuk ke aplikasi.
   ============================================================ */
#welcome-screen{
    position:fixed;inset:0;display:flex;flex-direction:column;
    justify-content:center;align-items:center;
    z-index:200;cursor:pointer;transition:opacity .8s ease;
    background:linear-gradient(rgba(211,207,4,0.089),rgba(206,175,0,0.144));
}
#welcome-screen.fade-out{opacity:0;pointer-events:none}
.corner-ornament{position:absolute;width:120px;height:120px;pointer-events:none;z-index:5}
.corner-ornament svg{width:100%;height:100%}
.corner-tl{top:0;left:0}.corner-tr{top:0;right:0;transform:scaleX(-1)}
.corner-bl{bottom:0;left:0;transform:scaleY(-1)}.corner-br{bottom:0;right:0;transform:scale(-1)}
.border-line-h{position:absolute;left:100px;right:100px;height:1px;background:var(--gold-grad);opacity:.55;pointer-events:none;z-index:5}
.border-line-h.top{top:18px}.border-line-h.bottom{bottom:18px}
.border-line-v{position:absolute;top:100px;bottom:100px;width:1px;background:linear-gradient(180deg,#4a2e08,#9a7015,#e8c035,#f8e880,#e8c035,#9a7015,#4a2e08);opacity:.55;pointer-events:none;z-index:5}
.border-line-v.left{left:18px}.border-line-v.right{right:18px}
.wayang-mascot{width:240px;height:330px;object-fit:contain;background:transparent;border-radius:6px;position:relative;z-index:10;transition:all .75s cubic-bezier(.4,0,.2,1)}
.mascot-frame-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-54%);z-index:10;display:flex;align-items:center;justify-content:center}
.mascot-frame{
    position:relative;
    padding:16px;
    background:radial-gradient(ellipse at 50% 40%, rgba(60,35,8,0.82) 0%, rgba(20,10,2,0.92) 100%);
    border-radius:8px;
    box-shadow:
        0 0 0 2px rgba(200,160,30,0.85),
        0 0 0 6px rgba(20,12,2,0.9),
        0 0 0 8px rgba(200,160,30,0.45),
        0 0 0 14px rgba(12,8,2,0.88),
        0 0 0 16px rgba(200,160,30,0.25),
        0 20px 60px rgba(0,0,0,0.9),
        0 0 55px rgba(200,150,20,0.5),
        0 0 110px rgba(200,140,10,0.22);
    animation: mascot-glow 3s ease-in-out infinite;
}
@keyframes mascot-glow {
    0%,100% { box-shadow:
        0 0 0 2px rgba(200,160,30,0.85),
        0 0 0 6px rgba(20,12,2,0.9),
        0 0 0 8px rgba(200,160,30,0.45),
        0 0 0 14px rgba(12,8,2,0.88),
        0 0 0 16px rgba(200,160,30,0.25),
        0 20px 60px rgba(0,0,0,0.9),
        0 0 55px rgba(200,150,20,0.45),
        0 0 110px rgba(200,140,10,0.18); }
    50%  { box-shadow:
        0 0 0 2px rgba(240,200,60,0.95),
        0 0 0 6px rgba(20,12,2,0.9),
        0 0 0 8px rgba(240,200,60,0.6),
        0 0 0 14px rgba(12,8,2,0.88),
        0 0 0 16px rgba(240,200,60,0.35),
        0 20px 60px rgba(0,0,0,0.9),
        0 0 75px rgba(230,170,20,0.75),
        0 0 140px rgba(220,150,10,0.35); }
}
.mascot-frame::before{content:'';position:absolute;top:-1px;left:10%;right:10%;height:2px;background:var(--gold-grad);opacity:.8;z-index:2}
.mascot-frame::after{content:'';position:absolute;bottom:-1px;left:10%;right:10%;height:2px;background:var(--gold-grad);opacity:.8;z-index:2}
.frame-corner{position:absolute;width:18px;height:18px;background:#c8a020;transform:rotate(45deg);box-shadow:0 0 8px rgba(237,216,74,0.6);z-index:20}
.frame-corner.tl{top:-4px;left:-4px}.frame-corner.tr{top:-4px;right:-4px}
.frame-corner.bl{bottom:-4px;left:-4px}.frame-corner.br{bottom:-4px;right:-4px}
.welcome-text{position:absolute;top:78%;text-align:center;transition:opacity .4s;padding:0 20px;z-index:20}
.welcome-text h1{font-family:'Cinzel Decorative',serif;color:var(--gold);font-size:1.55rem;letter-spacing:2px;margin-bottom:14px}
.pulse-text{font-family:'Cormorant Garamond',serif;font-size:1.05rem;color:var(--muted);font-style:italic;animation:pulse 1.8s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:.35}50%{opacity:1}}
.welcome-top-title{position:absolute;top:24px;left:50%;transform:translateX(-50%);font-family:'Cinzel',serif;font-size:.85rem;letter-spacing:5px;color:var(--gold);text-transform:uppercase;opacity:.75;z-index:20;white-space:nowrap}
.bottom-gold-bar{position:absolute;bottom:22px;width:88%;max-width:580px;background:var(--gold-grad);padding:11px 22px;display:flex;justify-content:center;align-items:center;gap:14px;border-radius:4px;box-shadow:0 4px 20px rgba(0,0,0,.8);z-index:20}
.bar-icon{height:22px;filter:drop-shadow(1px 1px 2px rgba(0,0,0,.5))}
.bar-text{color:#1e0e00;font-family:'Cinzel',serif;font-size:.72rem;font-weight:600;letter-spacing:1.5px}