/* KUBIQ DOKU, Handy und PC. Einstieg: Wuerfel erscheint, Flex-Funken spruehen, Wuerfel zerfaellt in sechs Teile, dann ist die App frei (etwa 3,7 s) */
html.intro-running,html.intro-running body{overflow:hidden}
.intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:radial-gradient(60% 45% at 50% 46%,#2a0b0f 0%,#141010 45%,#0b0b0b 100%),#0b0b0b url(/static/textur-dunkel.jpg);animation:introOut .5s ease-in 3.2s forwards}
.intro:not(.go),.intro:not(.go) *{animation-play-state:paused!important}
.intro.intro-skip{animation:introOut .25s ease-in forwards!important}
.intro-glow{position:absolute;left:50%;top:46%;width:320px;height:320px;margin:-160px 0 0 -160px;border-radius:50%;background:radial-gradient(circle,rgba(255,30,45,.45) 0%,rgba(255,30,45,.12) 40%,transparent 70%);opacity:0;animation:glowIn 1.3s ease-out .2s forwards,glowOut .7s ease-in 2.6s forwards}
.intro-cube{position:absolute;left:50%;top:46%;width:134px;height:160px;margin:-80px 0 0 -67px;opacity:0;transform:scale(.55) rotate(-10deg);filter:blur(10px);animation:cubeIn 1s cubic-bezier(.2,.9,.25,1.12) .2s forwards}
.intro-cube .shard{position:absolute;inset:0;background:url(/static/logo.png) center/contain no-repeat;animation:shardOut .8s cubic-bezier(.5,0,.75,.4) 2.6s forwards}
.intro-cube .s1{clip-path:polygon(50% 50%,50% 0,100% 25%);--dx:80px;--dy:-140px;--rot:28deg}
.intro-cube .s2{clip-path:polygon(50% 50%,100% 25%,100% 75%);--dx:165px;--dy:-10px;--rot:-20deg}
.intro-cube .s3{clip-path:polygon(50% 50%,100% 75%,50% 100%);--dx:86px;--dy:145px;--rot:34deg}
.intro-cube .s4{clip-path:polygon(50% 50%,50% 100%,0 75%);--dx:-82px;--dy:142px;--rot:-30deg}
.intro-cube .s5{clip-path:polygon(50% 50%,0 75%,0 25%);--dx:-165px;--dy:8px;--rot:22deg}
.intro-cube .s6{clip-path:polygon(50% 50%,0 25%,50% 0);--dx:-80px;--dy:-138px;--rot:-36deg}
.intro-shine{position:absolute;inset:0;-webkit-mask:url(/static/logo.png) center/contain no-repeat;mask:url(/static/logo.png) center/contain no-repeat;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.75) 48%,transparent 62%) no-repeat;background-size:250% 100%;background-position:120% 0;animation:shine 1s ease-in-out 1.3s forwards}
.intro-sparks{position:absolute;left:calc(50% + 52px);top:calc(46% + 50px);width:0;height:0}
.intro-sparks::before{content:'';position:absolute;left:-7px;top:-7px;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle,#fff 0%,#ffd27a 35%,rgba(255,106,43,.5) 60%,transparent 75%);opacity:0;animation:spot 1.2s ease-in-out 1.2s both}
.spark{position:absolute;left:0;top:0;width:var(--w,1.6px);height:18px;margin-left:calc(var(--w,1.6px) / -2);border-radius:2px;transform-origin:50% 0;background:linear-gradient(#fff 0%,#ffe2a0 25%,#ff8a3c 65%,rgba(255,70,30,0) 100%);box-shadow:0 0 6px rgba(255,140,60,.8);opacity:0;animation:spark var(--t,.6s) cubic-bezier(.15,.6,.35,1) var(--delay,1.4s) 2 both}
.intro-ring{position:absolute;left:50%;top:46%;width:40px;height:40px;margin:-20px 0 0 -20px;border:2px solid #ff2b3a;border-radius:50%;opacity:0;box-shadow:0 0 18px rgba(255,43,58,.7);animation:ring .85s ease-out 2.6s forwards}
.intro-word{position:absolute;left:0;right:0;top:calc(46% + 104px);color:#fff;font-size:22px;font-weight:800;letter-spacing:.32em;text-align:center;opacity:0;transform:translateY(10px);animation:wordIn .6s ease-out .9s forwards,wordOut .45s ease-in 2.6s forwards}
.intro-word b{color:#ff2b3a}
@keyframes cubeIn{to{opacity:1;transform:none;filter:blur(0) drop-shadow(0 0 22px rgba(255,30,45,.55))}}
@keyframes glowIn{to{opacity:1}}
@keyframes glowOut{to{opacity:0;transform:scale(1.6)}}
@keyframes shine{to{background-position:-120% 0}}
@keyframes spot{0%,100%{opacity:0;transform:scale(.6)}15%,85%{opacity:.9;transform:scale(1)}50%{opacity:.6;transform:scale(.8)}}
@keyframes spark{0%{opacity:0;transform:rotate(var(--a)) translateY(0) scaleY(.3)}12%{opacity:1}100%{opacity:0;transform:rotate(var(--a)) translateY(var(--d)) scaleY(1)}}
@keyframes shardOut{to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--rot)) scale(.8);filter:blur(3px)}}
@keyframes ring{0%{opacity:.9;transform:scale(.4)}100%{opacity:0;transform:scale(9)}}
@keyframes wordIn{to{opacity:1;transform:none}}
@keyframes wordOut{to{opacity:0;transform:translateY(-6px);letter-spacing:.5em}}
@keyframes introOut{to{opacity:0;visibility:hidden}}
/* Ganzer Wuerfel unter den sechs Teilen, damit vor dem Zerfall keine feinen Fugen zu sehen sind */
.intro-cube::before{content:'';position:absolute;inset:0;background:url(/static/logo.png) center/contain no-repeat;animation:baseOut .05s linear 2.6s forwards}
@keyframes baseOut{to{opacity:0}}
.spark{height:22px}