@keyframes fadeInUp {
from { opacity: 0; transform: translateY(28px); }
to   { opacity: 1; transform: translateY(0); }
}
@keyframes fadeInLeft {
from { opacity: 0; transform: translateX(-28px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeInRight {
from { opacity: 0; transform: translateX(28px); }
to   { opacity: 1; transform: translateX(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to   { opacity: 1; }
}
@keyframes glowPulseCyan {
0%, 100% { box-shadow: 0 0 12px rgba(0,212,255,0.2); }
50%       { box-shadow: 0 0 28px rgba(0,212,255,0.5), 0 0 60px rgba(0,212,255,0.15); }
}
@keyframes glowPulseOrange {
0%, 100% { box-shadow: 0 0 12px rgba(255,107,53,0.2); }
50%       { box-shadow: 0 0 28px rgba(255,107,53,0.5), 0 0 60px rgba(255,107,53,0.15); }
}
@keyframes glowDrift {
from { transform: translate(0, 0) scale(1); }
to   { transform: translate(30px, 20px) scale(1.1); }
}
@keyframes gradientShift {
0%   { background-position: 0% 50%; }
50%  { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}
@keyframes scanLine {
0%   { transform: translateY(-100vh); }
100% { transform: translateY(100vh); }
}
@keyframes blink {
0%, 100% { opacity: 1; }
50%       { opacity: 0; }
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50%       { transform: translateY(-12px); }
}
@keyframes rotateGear {
from { transform: rotate(0deg); }
to   { transform: rotate(360deg); }
}
@keyframes pulse {
0%, 100% { transform: scale(1); opacity: 1; }
50%       { transform: scale(1.25); opacity: 0.7; }
}
@keyframes bounce {
0%, 100% { transform: translateY(0); }
50%       { transform: translateY(8px); }
}
@keyframes slideInFromRight {
from { transform: translateX(100%); opacity: 0; }
to   { transform: translateX(0); opacity: 1; }
}
@keyframes scaleIn {
from { transform: scale(0.9); opacity: 0; }
to   { transform: scale(1);   opacity: 1; }
}
@keyframes shimmer {
0%   { background-position: -200% center; }
100% { background-position:  200% center; }
} @keyframes wordEntrance {
from {
opacity: 0;
transform: translateY(40px) rotateX(-15deg);
filter: blur(4px);
}
to {
opacity: 1;
transform: translateY(0) rotateX(0deg);
filter: blur(0);
}
} .scroll-reveal {
opacity: 0;
transform: translateY(24px);
transition:
opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
transition-delay: var(--delay, 0s);
}
.scroll-reveal.visible {
opacity: 1;
transform: translateY(0);
} .scroll-reveal[style*="--delay:0.05s"] { transition-delay: 0.05s; }
.scroll-reveal[style*="--delay:0.1s"]  { transition-delay: 0.1s;  }
.scroll-reveal[style*="--delay:0.12s"] { transition-delay: 0.12s; }
.scroll-reveal[style*="--delay:0.15s"] { transition-delay: 0.15s; }
.scroll-reveal[style*="--delay:0.2s"]  { transition-delay: 0.2s;  }
.scroll-reveal[style*="--delay:0.3s"]  { transition-delay: 0.3s;  }
.scroll-reveal[style*="--delay:0.35s"] { transition-delay: 0.35s; }
.scroll-reveal[style*="--delay:0.4s"]  { transition-delay: 0.4s;  }
.scroll-reveal[style*="--delay:0.5s"]  { transition-delay: 0.5s;  }
.scroll-reveal[style*="--delay:0.65s"] { transition-delay: 0.65s; }
.scroll-reveal[style*="--delay:0.8s"]  { transition-delay: 0.8s;  } .scroll-reveal--left {
transform: translateX(-24px);
}
.scroll-reveal--left.visible {
transform: translateX(0);
} .scroll-reveal--right {
transform: translateX(24px);
}
.scroll-reveal--right.visible {
transform: translateX(0);
} .scroll-reveal--scale {
transform: scale(0.92);
}
.scroll-reveal--scale.visible {
transform: scale(1);
}  .hero-word {
display: inline-block;
opacity: 0;
transform: perspective(600px) translateY(40px) rotateX(-15deg);
filter: blur(4px);
transition:
opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1),
transform 0.7s cubic-bezier(0.22, 1, 0.36, 1),
filter 0.7s ease;
}
.hero-word.visible {
opacity: 1;
transform: perspective(600px) translateY(0) rotateX(0deg);
filter: blur(0);
}
.hero-word--1 { transition-delay: 0.1s; }
.hero-word--2 { transition-delay: 0.25s; }
.hero-word--3 { transition-delay: 0.4s; } .hero-badge__dot {
animation: pulse 2.5s ease-in-out infinite;
} .hero-bg__scan-line {
animation: scanLine 8s linear infinite;
} .hero-bg__glow--cyan {
animation: glowDrift 14s ease-in-out infinite alternate;
}
.hero-bg__glow--orange {
animation: glowDrift 18s ease-in-out infinite alternate-reverse;
} .hero-terminal,
.about-terminal {
animation: float 7s ease-in-out infinite;
} .about-badge--tl { animation: float 5s ease-in-out infinite; animation-delay: -2s; }
.about-badge--br { animation: float 6s ease-in-out infinite; } .terminal-cursor {
animation: blink 1s step-end infinite;
} .scroll-indicator__chevron {
animation: bounce 2.2s ease-in-out infinite;
}  .nav-open .nav-menu li {
animation: fadeInRight 0.3s ease forwards;
opacity: 0;
}
.nav-open .nav-menu li:nth-child(1) { animation-delay: 0.05s; }
.nav-open .nav-menu li:nth-child(2) { animation-delay: 0.10s; }
.nav-open .nav-menu li:nth-child(3) { animation-delay: 0.15s; }
.nav-open .nav-menu li:nth-child(4) { animation-delay: 0.20s; }
.nav-open .nav-menu li:nth-child(5) { animation-delay: 0.25s; }
.nav-open .nav-menu li:nth-child(6) { animation-delay: 0.30s; }  .service-card:hover .service-card__icon--cyan {
animation: glowPulseCyan 2s ease-in-out infinite;
}
.service-card--orange:hover .service-card__icon--orange {
animation: glowPulseOrange 2s ease-in-out infinite;
} .service-card:hover .service-card__icon svg {
transition: transform 0.5s ease;
} .services-grid .service-card:nth-child(3):hover .service-card__icon svg {
animation: rotateGear 3s linear infinite;
} .service-card__link svg {
transition: transform var(--transition);
}
.service-card:hover .service-card__link svg {
transform: translateX(4px);
} .btn svg {
transition: transform var(--transition);
}
.btn:hover svg {
transform: translateX(3px);
} .blog-card__thumb {
overflow: hidden;
}
.blog-card .blog-card__thumb img {
transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.blog-card:hover .blog-card__thumb img {
transform: scale(1.06);
} .social-link {
transition: background var(--transition), border-color var(--transition), color var(--transition), transform 0.2s ease;
}
.social-link:hover {
transform: translateY(-3px);
} .team-card {
transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.team-card:hover {
box-shadow: 0 8px 32px rgba(0,212,255,0.12);
} .mvv-card {
transition: transform 0.3s ease, border-color 0.3s ease;
} .timeline-item:hover .timeline-item__dot {
box-shadow: 0 0 16px rgba(0,212,255,0.6);
transform: scale(1.3);
transition: transform 0.2s ease, box-shadow 0.2s ease;
} .btn--orange {
background-size: 200% auto;
transition: all 0.3s ease;
}
.btn--orange:hover {
background-image: linear-gradient(135deg, var(--clr-orange), var(--clr-amber), var(--clr-orange));
background-size: 200% auto;
animation: gradientShift 2s linear infinite;
} .stat-counter.counted {
animation: glowPulseCyan 3s ease-in-out;
}  body {
animation: fadeIn 0.4s ease forwards;
} .back-to-top.is-visible {
animation: scaleIn 0.25s ease forwards;
} .search-drawer {
transition: opacity 0.25s ease, transform 0.25s ease;
} .cursor-glow {
transition: opacity 0.3s ease;
} .wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 textarea {
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.wpcf7 input[type="submit"] {
transition: background 0.25s ease, transform 0.2s ease, box-shadow 0.2s ease;
} .wpcf7-spinner {
filter: hue-rotate(170deg);
} .reading-progress {
transition: width 0.1s linear;
} .error-digit--cyan {
animation: glowPulseCyan 3s ease-in-out infinite;
}
.error-digit--orange {
animation: glowPulseOrange 3s ease-in-out infinite;
} .cat-tab {
transition: all 0.2s ease;
} .blog-card.hidden {
display: none;
} @media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
} .scroll-reveal {
opacity: 1 !important;
transform: none !important;
transition: none !important;
}
.hero-word {
opacity: 1 !important;
transform: none !important;
filter: none !important;
transition: none !important;
} .cursor-glow { display: none; } .hero-terminal,
.about-terminal,
.about-badge { animation: none; } .hero-bg__scan-line { display: none; } .service-card:hover,
.blog-card:hover,
.btn:hover,
.team-card:hover,
.mvv-card:hover,
.social-link:hover,
.back-to-top:hover {
transform: none !important;
} .service-card:hover { border-color: var(--clr-cyan); } body { animation: none; } .site-bg-orb,
.blog-masthead,
.site-footer,
body,
.shurikan { animation: none !important; rotate: 0deg !important; }
} @keyframes orbFloat1 {
0%   { transform: translate(0,      0)      scale(1);    }
20%  { transform: translate(4%,     2%)     scale(1.06); }
45%  { transform: translate(-2%,    6%)     scale(0.96); }
70%  { transform: translate(5%,    -3%)     scale(1.04); }
100% { transform: translate(0,      0)      scale(1);    }
}
@keyframes orbFloat2 {
0%   { transform: translate(0,      0)      scale(1);    }
25%  { transform: translate(-5%,   -3%)     scale(1.08); }
55%  { transform: translate(3%,    -5%)     scale(0.94); }
80%  { transform: translate(-2%,    4%)     scale(1.03); }
100% { transform: translate(0,      0)      scale(1);    }
}
@keyframes orbFloat3 {
0%   { transform: translate(-50%, -50%) scale(1);    }
30%  { transform: translate(-47%, -53%) scale(1.10); }
60%  { transform: translate(-53%, -46%) scale(0.92); }
100% { transform: translate(-50%, -50%) scale(1);    }
}
@keyframes dotGridPulse {
0%, 100% { opacity: 0.4; }
50%       { opacity: 0.7; }
}
@keyframes lightBgShift {
0%   { background-position: 0%   50%; }
25%  { background-position: 50%  0%;  }
50%  { background-position: 100% 50%; }
75%  { background-position: 50%  100%; }
100% { background-position: 0%   50%; }
}  @keyframes shuricanSpin {
from { rotate: 0deg; }
to   { rotate: 360deg; }
} @keyframes shuricanFloatA {
0%, 100% { transform: translate(0, 0); }
50%      { transform: translate(6px, -16px); }
}
@keyframes shuricanFloatB {
0%, 100% { transform: translate(0, 0); }
30%      { transform: translate(-8px, -12px); }
65%      { transform: translate(5px, -20px); }
}
@keyframes shuricanFloatC {
0%, 100% { transform: translate(0, 0); }
40%      { transform: translate(4px, -8px); }
75%      { transform: translate(-5px, -18px); }
} @keyframes mastheadShift {
0%   { background-position: 0%   50%; }
33%  { background-position: 100% 0%;  }
66%  { background-position: 50%  100%; }
100% { background-position: 0%   50%; }
}