/* Forenklet bakgrunnsanimasjoner for TopLogic */
/* Enklere stier - ikke for komplekse */
.toplogic-header-advanced::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat-x;
animation: simplePaths 30s linear infinite;
pointer-events: none;
}
.toplogic-header-advanced::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 200px 100px;
animation: simplePaths 25s linear infinite reverse;
pointer-events: none;
}
@keyframes simplePaths {
0% {
transform: translateX(0px);
opacity: 0.8;
}
50% {
transform: translateX(-10px);
opacity: 0.6;
}
100% {
transform: translateX(0px);
opacity: 0.8;
}
}
/* Tydelige AI-stier for faktura-app */
.toplogic-header-ai::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat-x;
background-size: 250px 120px;
animation: aiPaths 25s linear infinite;
pointer-events: none;
}
.toplogic-header-ai::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,') repeat;
background-size: 200px 100px;
animation: aiPaths 30s linear infinite reverse;
pointer-events: none;
}
@keyframes aiPaths {
0% {
transform: translateX(0px);
opacity: 0.8;
}
25% {
transform: translateX(-15px);
opacity: 1;
}
50% {
transform: translateX(-5px);
opacity: 0.9;
}
75% {
transform: translateX(-20px);
opacity: 1;
}
100% {
transform: translateX(0px);
opacity: 0.8;
}
}
/* Performance optimalisering og responsive design */
@media (max-width: 768px) {
.toplogic-header-advanced::before,
.toplogic-header-advanced::after,
.toplogic-header-ai::before,
.toplogic-header-ai::after {
animation-duration: 60s; /* Langsommere på mobil for bedre ytelse */
background-size: 300px 150px; /* Mindre bakgrunnsstørrelse */
}
}
/* Redusert bevegelse for brukere som foretrekker det */
@media (prefers-reduced-motion: reduce) {
.toplogic-header-advanced::before,
.toplogic-header-advanced::after,
.toplogic-header-ai::before,
.toplogic-header-ai::after {
animation: none;
opacity: 0.3;
}
}
/* Gamle komplekse animasjoner fjernet */