:root{--gold:#d7a727;--bright:#ffe59a;--black:#050505;--charcoal:#10100e}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;font-family:Arial,Helvetica,sans-serif;background:#090909;color:#fff}
.kgm-loader{position:fixed;inset:0;z-index:99999;display:grid;place-items:center;overflow:hidden;background:radial-gradient(circle at 50% 43%,#211b0d 0,#0b0b09 30%,#030303 72%);transition:opacity .85s ease,visibility .85s ease}
.kgm-loader::before{content:"";position:absolute;inset:-25%;background:conic-gradient(from 180deg,transparent 0 34%,rgba(255,205,73,.07) 42%,transparent 50% 84%,rgba(255,205,73,.045) 90%,transparent 96%);animation:sweep 6s linear infinite}
.kgm-loader::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 5px);mix-blend-mode:soft-light;pointer-events:none}
.kgm-loader.is-finished{opacity:0;visibility:hidden;pointer-events:none}
.loader-core{position:relative;width:min(82vw,430px);height:min(82vw,430px);display:flex;align-items:center;flex-direction:column;text-align:center}
.orbit{position:absolute;left:50%;top:44%;border-radius:50%;border:1px solid rgba(215,167,39,.28);transform:translate(-50%,-50%)}
.orbit::before,.orbit::after{content:"";position:absolute;border-radius:50%;background:var(--bright);box-shadow:0 0 13px var(--gold)}
.orbit-outer{width:258px;height:258px;border-top-color:var(--gold);border-right-color:rgba(255,229,154,.7);animation:spin 3.7s linear infinite}
.orbit-outer::before{width:7px;height:7px;left:24px;top:27px}.orbit-outer::after{width:4px;height:4px;right:24px;bottom:27px}
.orbit-inner{width:224px;height:224px;border-bottom-color:var(--gold);border-left-color:rgba(255,229,154,.68);animation:spinReverse 4.8s linear infinite}
.orbit-inner::before{width:5px;height:5px;right:14px;top:66px}.orbit-inner::after{width:3px;height:3px;left:14px;bottom:66px}
.logo-stage{position:relative;margin-top:76px;width:170px;height:170px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(215,167,39,.18),rgba(0,0,0,.88) 69%);box-shadow:0 0 0 1px rgba(255,219,112,.16),0 0 48px rgba(215,167,39,.14);animation:breathe 2.2s ease-in-out infinite}
.logo-stage img{width:126px;height:126px;object-fit:contain;image-rendering:auto;filter:drop-shadow(0 8px 14px #000) drop-shadow(0 0 10px rgba(255,207,75,.28))}
.gold-scan{position:absolute;z-index:3;top:84px;left:50%;width:150px;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,var(--bright),transparent);box-shadow:0 0 12px var(--gold);opacity:.82;animation:scan 2.2s ease-in-out infinite}
.brand{margin-top:38px;display:flex;flex-direction:column;letter-spacing:.22em;text-shadow:0 2px 8px #000}
.brand .eyebrow{font-size:9px;color:#d6c99e;margin-bottom:7px}.brand strong{font-family:Georgia,'Times New Roman',serif;font-size:20px;letter-spacing:.16em;color:#f2cc61}.brand .location{font-size:8px;color:#9d9478;margin-top:7px}
.progress{width:220px;height:2px;margin-top:24px;background:rgba(255,255,255,.09);overflow:hidden}.progress span{display:block;width:100%;height:100%;background:linear-gradient(90deg,#73520c,var(--bright),#73520c);transform-origin:left;animation:load 4s cubic-bezier(.25,.75,.2,1) forwards;box-shadow:0 0 8px var(--gold)}
.status{margin-top:11px;font-size:8px;letter-spacing:.36em;color:#746b51;animation:flicker 1.7s ease-in-out infinite}
.skip-loader{position:absolute;right:clamp(20px,4vw,60px);bottom:clamp(20px,4vw,45px);z-index:8;padding:10px 0;border:0;border-bottom:1px solid rgba(232,193,83,.65);background:transparent;color:#ae9b67;font:600 9px Arial,sans-serif;letter-spacing:.2em;cursor:pointer;transition:.25s}.skip-loader span{display:inline-block;margin-left:8px;color:#e2b947;transition:.25s}.skip-loader:hover,.skip-loader:focus-visible{color:#f1d477;border-bottom-color:#f1d477}.skip-loader:hover span{transform:translateX(5px)}.skip-loader.is-used{opacity:0;pointer-events:none}
.dust{position:absolute;inset:0;background-image:radial-gradient(circle,rgba(255,212,92,.55) 0 1px,transparent 1.5px),radial-gradient(circle,rgba(255,255,255,.18) 0 1px,transparent 1.5px);background-size:83px 83px,127px 127px;background-position:17px 7px,61px 39px;opacity:.2;animation:drift 8s linear infinite}
.demo-page{min-height:100vh;display:grid;place-content:center;text-align:center;background:linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.82)),url('images/KGM-home-slider-2.jpg') center/cover}.demo-page p{font-size:12px;letter-spacing:.35em;color:#e0b74c}.demo-page h1{font:700 clamp(46px,8vw,100px)/1 Georgia,serif;margin:12px}.demo-page button{justify-self:center;border:1px solid #bd8f22;background:#0b0b0b;color:#e8c55e;padding:12px 22px;letter-spacing:.12em;cursor:pointer}
@keyframes spin{to{transform:translate(-50%,-50%) rotate(360deg)}}@keyframes spinReverse{to{transform:translate(-50%,-50%) rotate(-360deg)}}@keyframes sweep{to{transform:rotate(360deg)}}
@keyframes scan{0%,100%{transform:translate(-50%,5px);opacity:0}20%,80%{opacity:.85}50%{transform:translate(-50%,154px)}}@keyframes breathe{50%{box-shadow:0 0 0 1px rgba(255,219,112,.3),0 0 62px rgba(215,167,39,.25)}}
@keyframes load{from{transform:scaleX(0)}to{transform:scaleX(1)}}@keyframes flicker{50%{color:#c9ae62}}@keyframes drift{to{background-position:100px -80px,-80px 130px}}
@media(max-width:520px){.loader-core{transform:scale(.88)}.brand strong{font-size:18px}}@media(prefers-reduced-motion:reduce){.orbit,.kgm-loader::before,.dust,.logo-stage,.gold-scan,.status{animation:none}.progress span{animation-duration:.1s}}