/* ============================================================
   splash.css — Splash screen, screen saver, cube animations.
   ============================================================ */

.saver-hidden{display:none!important}

#splash{position:fixed;inset:0;z-index:99999;display:flex;flex-direction:column;
  justify-content:center;align-items:center;background:var(--ink,#0f1b26)}
#splash.hide{opacity:0;pointer-events:none;transition:opacity .6s ease}
#splash .splash-title{color:#fff;font-size:20px;font-weight:700;
  margin-top:102px;letter-spacing:1.5px}
#splash .splash-sub{color:var(--ink-faint,#93a1af);font-size:12px;margin-top:8px}

/* ---- cube construction ---- */
.splash-cubes{position:relative;width:86px;height:100px;transform:scale(.5)}
.sc{position:absolute;width:86px;height:100px}
.sc .face{height:50px;width:50px;position:absolute;transform-origin:0 0}
.sc .right{background:var(--ink-faint,#93a1af);transform:rotate(-30deg) skewX(-30deg) translate(49px,65px) scaleY(.86)}
.sc .left{background:var(--ink-soft,#5a6a78);transform:rotate(90deg) skewX(-30deg) scaleY(.86) translate(25px,-50px)}
.sc .top{background:var(--accent,#0d8b7d);transform:rotate(210deg) skew(-30deg) translate(-75px,-22px) scaleY(.86);z-index:2}

/* ---- keyframes: row 3 (bottom) ---- */
@keyframes h3w1l1{0%{transform:translate(0%,0%)}14%{transform:translate(-50%,-25%)}28%{transform:translate(0%,-50%)}43%{transform:translate(0%,0%)}57%{transform:translate(50%,25%)}71%{transform:translate(0%,50%)}85%,100%{transform:translate(0%,0%)}}
@keyframes h3w1l2{0%{transform:translate(50%,25%)}14%{transform:translate(50%,25%)}28%{transform:translate(100%,0%)}43%{transform:translate(100%,50%)}57%{transform:translate(100%,50%)}71%{transform:translate(50%,75%)}85%,100%{transform:translate(50%,25%)}}
@keyframes h3w1l3{0%{transform:translate(100%,50%)}14%{transform:translate(150%,75%)}28%{transform:translate(200%,50%)}43%{transform:translate(200%,100%)}57%{transform:translate(150%,75%)}71%{transform:translate(100%,100%)}85%,100%{transform:translate(100%,50%)}}
@keyframes h3w2l1{0%{transform:translate(-50%,25%)}14%{transform:translate(-100%,0%)}28%{transform:translate(-100%,0%)}43%{transform:translate(-100%,50%)}57%{transform:translate(-50%,75%)}71%{transform:translate(-50%,75%)}85%,100%{transform:translate(-50%,25%)}}
@keyframes h3w2l2{0%{transform:translate(0%,50%)}14%{transform:translate(0%,50%)}28%{transform:translate(0%,50%)}43%{transform:translate(0%,100%)}57%{transform:translate(0%,100%)}71%{transform:translate(0%,100%)}85%,100%{transform:translate(0%,50%)}}
@keyframes h3w2l3{0%{transform:translate(50%,75%)}14%{transform:translate(100%,100%)}28%{transform:translate(100%,100%)}43%{transform:translate(100%,150%)}57%{transform:translate(50%,125%)}71%{transform:translate(50%,125%)}85%,100%{transform:translate(50%,75%)}}
@keyframes h3w3l1{0%{transform:translate(-100%,50%)}14%{transform:translate(-150%,25%)}28%{transform:translate(-200%,50%)}43%{transform:translate(-200%,100%)}57%{transform:translate(-150%,125%)}71%{transform:translate(-100%,100%)}85%,100%{transform:translate(-100%,50%)}}
@keyframes h3w3l2{0%{transform:translate(-50%,75%)}14%{transform:translate(-50%,75%)}28%{transform:translate(-100%,100%)}43%{transform:translate(-100%,150%)}57%{transform:translate(-100%,150%)}71%{transform:translate(-50%,125%)}85%,100%{transform:translate(-50%,75%)}}
@keyframes h3w3l3{0%{transform:translate(0%,100%)}14%{transform:translate(50%,125%)}28%{transform:translate(0%,150%)}43%{transform:translate(0%,200%)}57%{transform:translate(-50%,175%)}71%{transform:translate(0%,150%)}85%,100%{transform:translate(0%,100%)}}

/* ---- keyframes: row 2 (middle) ---- */
@keyframes h2w1l1{0%{transform:translate(0%,-50%)}14%{transform:translate(-50%,-75%)}28%{transform:translate(0%,-100%)}43%{transform:translate(0%,-100%)}57%{transform:translate(50%,-75%)}71%{transform:translate(0%,-50%)}85%,100%{transform:translate(0%,-50%)}}
@keyframes h2w1l2{0%{transform:translate(50%,-25%)}14%{transform:translate(50%,-25%)}28%{transform:translate(100%,-50%)}43%{transform:translate(100%,-50%)}57%{transform:translate(100%,-50%)}71%{transform:translate(50%,-25%)}85%,100%{transform:translate(50%,-25%)}}
@keyframes h2w1l3{0%{transform:translate(100%,0%)}14%{transform:translate(150%,25%)}28%{transform:translate(200%,0%)}43%{transform:translate(200%,0%)}57%{transform:translate(150%,-25%)}71%{transform:translate(100%,0%)}85%,100%{transform:translate(100%,0%)}}
@keyframes h2w2l1{0%{transform:translate(-50%,-25%)}14%{transform:translate(-100%,-50%)}28%{transform:translate(-100%,-50%)}43%{transform:translate(-100%,-50%)}57%{transform:translate(-50%,-25%)}71%{transform:translate(-50%,-25%)}85%,100%{transform:translate(-50%,-25%)}}
@keyframes h2w2l2{0%{transform:translate(0%,0%)}14%{transform:translate(0%,0%)}28%{transform:translate(0%,0%)}43%{transform:translate(0%,0%)}57%{transform:translate(0%,0%)}71%{transform:translate(0%,0%)}85%,100%{transform:translate(0%,0%)}}
@keyframes h2w2l3{0%{transform:translate(50%,25%)}14%{transform:translate(100%,50%)}28%{transform:translate(100%,50%)}43%{transform:translate(100%,50%)}57%{transform:translate(50%,25%)}71%{transform:translate(50%,25%)}85%,100%{transform:translate(50%,25%)}}
@keyframes h2w3l1{0%{transform:translate(-100%,0%)}14%{transform:translate(-150%,-25%)}28%{transform:translate(-200%,0%)}43%{transform:translate(-200%,0%)}57%{transform:translate(-150%,25%)}71%{transform:translate(-100%,0%)}85%,100%{transform:translate(-100%,0%)}}
@keyframes h2w3l2{0%{transform:translate(-50%,25%)}14%{transform:translate(-50%,25%)}28%{transform:translate(-100%,50%)}43%{transform:translate(-100%,50%)}57%{transform:translate(-100%,50%)}71%{transform:translate(-50%,25%)}85%,100%{transform:translate(-50%,25%)}}
@keyframes h2w3l3{0%{transform:translate(0%,50%)}14%{transform:translate(50%,75%)}28%{transform:translate(0%,100%)}43%{transform:translate(0%,100%)}57%{transform:translate(-50%,75%)}71%{transform:translate(0%,50%)}85%,100%{transform:translate(0%,50%)}}

/* ---- keyframes: row 1 (top) ---- */
@keyframes h1w1l1{0%{transform:translate(0%,-100%)}14%{transform:translate(-50%,-125%)}28%{transform:translate(0%,-150%)}43%{transform:translate(0%,-200%)}57%{transform:translate(50%,-175%)}71%{transform:translate(0%,-150%)}85%,100%{transform:translate(0%,-100%)}}
@keyframes h1w1l2{0%{transform:translate(50%,-75%)}14%{transform:translate(50%,-75%)}28%{transform:translate(100%,-100%)}43%{transform:translate(100%,-150%)}57%{transform:translate(100%,-150%)}71%{transform:translate(50%,-125%)}85%,100%{transform:translate(50%,-75%)}}
@keyframes h1w1l3{0%{transform:translate(100%,-50%)}14%{transform:translate(150%,-25%)}28%{transform:translate(200%,-50%)}43%{transform:translate(200%,-100%)}57%{transform:translate(150%,-125%)}71%{transform:translate(100%,-100%)}85%,100%{transform:translate(100%,-50%)}}
@keyframes h1w2l1{0%{transform:translate(-50%,-75%)}14%{transform:translate(-100%,-100%)}28%{transform:translate(-100%,-100%)}43%{transform:translate(-100%,-150%)}57%{transform:translate(-50%,-125%)}71%{transform:translate(-50%,-125%)}85%,100%{transform:translate(-50%,-75%)}}
@keyframes h1w2l2{0%{transform:translate(0%,-50%)}14%{transform:translate(0%,-50%)}28%{transform:translate(0%,-50%)}43%{transform:translate(0%,-100%)}57%{transform:translate(0%,-100%)}71%{transform:translate(0%,-100%)}85%,100%{transform:translate(0%,-50%)}}
@keyframes h1w2l3{0%{transform:translate(50%,-25%)}14%{transform:translate(100%,0%)}28%{transform:translate(100%,0%)}43%{transform:translate(100%,-50%)}57%{transform:translate(50%,-75%)}71%{transform:translate(50%,-75%)}85%,100%{transform:translate(50%,-25%)}}
@keyframes h1w3l1{0%{transform:translate(-100%,-50%)}14%{transform:translate(-150%,-75%)}28%{transform:translate(-200%,-50%)}43%{transform:translate(-200%,-100%)}57%{transform:translate(-150%,-75%)}71%{transform:translate(-100%,-100%)}85%,100%{transform:translate(-100%,-50%)}}
@keyframes h1w3l2{0%{transform:translate(-50%,-25%)}14%{transform:translate(-50%,-25%)}28%{transform:translate(-100%,0%)}43%{transform:translate(-100%,-50%)}57%{transform:translate(-100%,-50%)}71%{transform:translate(-50%,-75%)}85%,100%{transform:translate(-50%,-25%)}}
@keyframes h1w3l3{0%{transform:translate(0%,0%)}14%{transform:translate(50%,25%)}28%{transform:translate(0%,50%)}43%{transform:translate(0%,0%)}57%{transform:translate(-50%,-25%)}71%{transform:translate(0%,-50%)}85%,100%{transform:translate(0%,0%)}}

/* ---- apply animations ---- */
.sc.h1{z-index:3} .sc.h2{z-index:2} .sc.h3{z-index:1}
.sc.h1.w1.l1{animation:h1w1l1 3s ease infinite}
.sc.h1.w1.l2{animation:h1w1l2 3s ease infinite}
.sc.h1.w1.l3{animation:h1w1l3 3s ease infinite}
.sc.h1.w2.l1{animation:h1w2l1 3s ease infinite}
.sc.h1.w2.l2{animation:h1w2l2 3s ease infinite}
.sc.h1.w2.l3{animation:h1w2l3 3s ease infinite}
.sc.h1.w3.l1{animation:h1w3l1 3s ease infinite}
.sc.h1.w3.l2{animation:h1w3l2 3s ease infinite}
.sc.h1.w3.l3{animation:h1w3l3 3s ease infinite}
.sc.h2.w1.l1{animation:h2w1l1 3s ease infinite}
.sc.h2.w1.l2{animation:h2w1l2 3s ease infinite}
.sc.h2.w1.l3{animation:h2w1l3 3s ease infinite}
.sc.h2.w2.l1{animation:h2w2l1 3s ease infinite}
.sc.h2.w2.l2{animation:h2w2l2 3s ease infinite}
.sc.h2.w2.l3{animation:h2w2l3 3s ease infinite}
.sc.h2.w3.l1{animation:h2w3l1 3s ease infinite}
.sc.h2.w3.l2{animation:h2w3l2 3s ease infinite}
.sc.h2.w3.l3{animation:h2w3l3 3s ease infinite}
.sc.h3.w1.l1{animation:h3w1l1 3s ease infinite}
.sc.h3.w1.l2{animation:h3w1l2 3s ease infinite}
.sc.h3.w1.l3{animation:h3w1l3 3s ease infinite}
.sc.h3.w2.l1{animation:h3w2l1 3s ease infinite}
.sc.h3.w2.l2{animation:h3w2l2 3s ease infinite}
.sc.h3.w2.l3{animation:h3w2l3 3s ease infinite}
.sc.h3.w3.l1{animation:h3w3l1 3s ease infinite}
.sc.h3.w3.l2{animation:h3w3l2 3s ease infinite}
.sc.h3.w3.l3{animation:h3w3l3 3s ease infinite}