/* Introen: Fabric går i stykker (26 sek.). Overført fra designet. */
.stage{animation:bg 26s 1 forwards}
@keyframes bg{0%,65%{background-color:#eef4fb}76%,97%{background-color:#06080d}100%{background-color:#eef4fb}}
.dash{animation:dash 26s 1 forwards}
@keyframes dash{0%,72%{opacity:1}86%,97%{opacity:0}100%{opacity:1}}
.st{display:grid}
.st>span{grid-area:1/1}
.s-ok{animation:sOk 26s 1 forwards}
.s-warn{opacity:0;animation:sWarn 26s 1 forwards}
.s-fail{opacity:0;animation:sFail 26s 1 forwards}
@keyframes sOk{0%,15%{opacity:1}18%,100%{opacity:0}}
@keyframes sWarn{0%,15%{opacity:0}18%,31%{opacity:1}34%,100%{opacity:0}}
@keyframes sFail{0%,31%{opacity:0}34%,100%{opacity:1}}
.cap{animation:cap 26s 1 forwards}
@keyframes cap{0%,10%{width:38%;background:#1d9a64}28%{width:92%;background:#d98a1a}34%,100%{width:100%;background:#d93b52}}
.node{animation:node 26s 1 forwards}
@keyframes node{0%,15%{border-left-color:#1f7fd1}22%{border-left-color:#d98a1a}34%,100%{border-left-color:#d93b52}}
.lines{animation:lines 12s infinite}
@keyframes lines{0%,40%{opacity:1}42%{opacity:.2}43%{opacity:1}46%{opacity:.1}47%{opacity:.8}50%,100%{opacity:0}}
.lake-t{animation:lakeT 12s infinite}
.lake-b{animation:lakeB 12s infinite}
@keyframes lakeT{0%,46%{transform:none;opacity:1}58%{transform:translate(-14px,-30px) rotate(-10deg);opacity:1}64%,100%{transform:translate(-14px,-30px) rotate(-10deg);opacity:0}}
@keyframes lakeB{0%,46%{transform:none;opacity:1}58%{transform:translate(14px,34px) rotate(8deg);opacity:1}64%,100%{transform:translate(14px,34px) rotate(8deg);opacity:0}}
.tear{position:absolute;left:0;right:0;opacity:0;pointer-events:none;animation:tear 26s 1 forwards steps(1)}
@keyframes tear{0%,66%{opacity:0}67%{opacity:.85}68%{opacity:0}70%{opacity:.6}71%{opacity:0}73%{opacity:.9}74%,100%{opacity:0}}
.take{opacity:0;animation:take 26s 1 forwards}
@keyframes take{0%,73%{opacity:0}92%,97%{opacity:1}100%{opacity:0}}
.gt{position:relative;display:inline-block}
.gt::before,.gt::after{content:attr(data-text);position:absolute;left:0;top:0;width:100%;pointer-events:none}
.gt::before{color:#ff4d6d;opacity:.85;animation:gA 2.2s infinite steps(1)}
.gt::after{color:#36e0c8;opacity:.75;animation:gB 2.9s infinite steps(1)}
@keyframes gA{0%{clip-path:inset(0 0 62% 0);transform:translate(-3px,0)}18%{clip-path:inset(22% 0 48% 0);transform:translate(-6px,1px)}36%{clip-path:inset(64% 0 8% 0);transform:translate(-2px,-1px)}54%{clip-path:inset(40% 0 30% 0);transform:translate(-5px,0)}72%{clip-path:inset(8% 0 80% 0);transform:translate(-1px,0)}90%{clip-path:inset(50% 0 20% 0);transform:translate(-4px,1px)}}
@keyframes gB{0%{clip-path:inset(58% 0 0 0);transform:translate(3px,0)}20%{clip-path:inset(10% 0 70% 0);transform:translate(5px,-1px)}40%{clip-path:inset(35% 0 40% 0);transform:translate(2px,1px)}60%{clip-path:inset(75% 0 5% 0);transform:translate(6px,0)}80%{clip-path:inset(0 0 85% 0);transform:translate(2px,0)}}
.scan{position:absolute;inset:0;pointer-events:none;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 1px,transparent 1px 3px);animation:flick 3.7s infinite}
@keyframes flick{0%,90%,100%{opacity:1}91%{opacity:.3}92%{opacity:1}95%{opacity:.55}96%{opacity:1}}
.jobscroll{animation:jobscroll 26s 1 forwards}
@keyframes jobscroll{0%,42%{transform:translateY(0);animation-timing-function:cubic-bezier(.6,0,.15,1)}65%,97%{transform:translateY(-2640px)}100%{transform:translateY(0)}}
@property --fc{syntax:'<integer>';initial-value:0;inherits:false}
.failcount{animation:fc 26s 1 forwards;counter-reset:fc var(--fc)}
.failcount::before{content:counter(fc) " fejlet"}
@keyframes fc{0%,33%{--fc:0;opacity:0}34%{--fc:1;opacity:1}40%,42%{--fc:8;opacity:1;animation-timing-function:cubic-bezier(.6,0,.15,1)}65%,97%{--fc:1284;opacity:1}100%{--fc:0;opacity:0}}
@media (prefers-reduced-motion: reduce){.stage,.dash,.s-ok,.s-warn,.s-fail,.cap,.node,.lines,.lake-t,.lake-b,.tear,.take,.jobscroll,.failcount,.gt::before,.gt::after,.scan{animation:none!important}.stage{background-color:#06080d}.dash{opacity:0}.take{opacity:1}}

.stage,.stage *{animation-delay:var(--d,0s)}
.stage.done .dash{display:none}
.stage.done{background-color:#06080d!important;animation:none}
.stage.done .take{opacity:1;animation:none}
.stage.done .tear{display:none}