Archiv: Letzter Stand der Webseite vor Promotion der Vorschau
Vollstaendiger Snapshot des Live-Standes von /opt/v2-Docker/aegis-website/html am 2026-04-26, kurz bevor die Inhalte aus /vorschau/ in den Root verschoben und die alte Webseite ausgemustert wurde. Dient als historische Referenz; nicht fuer aktive Entwicklung gedacht. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Dieser Commit ist enthalten in:
claude-dev
222
css/animations-enhanced.css
Normale Datei
222
css/animations-enhanced.css
Normale Datei
@@ -0,0 +1,222 @@
|
||||
/* Enhanced Modern Animations & Effects */
|
||||
|
||||
/* Glassmorphism Base */
|
||||
.glass {
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
backdrop-filter: blur(10px);
|
||||
-webkit-backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
|
||||
.glass-dark {
|
||||
background: rgba(0, 0, 0, 0.3);
|
||||
backdrop-filter: blur(20px);
|
||||
-webkit-backdrop-filter: blur(20px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.1);
|
||||
}
|
||||
|
||||
/* Smooth Fade In Animations */
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(30px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInScale {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: scale(0.9);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: scale(1);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes slideInRight {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateX(-50px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateX(0);
|
||||
}
|
||||
}
|
||||
|
||||
/* Staggered Animation Classes */
|
||||
.animate-in {
|
||||
opacity: 0;
|
||||
animation: fadeInUp 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.animate-in-scale {
|
||||
opacity: 0;
|
||||
animation: fadeInScale 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
|
||||
}
|
||||
|
||||
.stagger-1 { animation-delay: 0.1s; }
|
||||
.stagger-2 { animation-delay: 0.2s; }
|
||||
.stagger-3 { animation-delay: 0.3s; }
|
||||
.stagger-4 { animation-delay: 0.4s; }
|
||||
.stagger-5 { animation-delay: 0.5s; }
|
||||
|
||||
/* Floating Animation */
|
||||
@keyframes float {
|
||||
0%, 100% { transform: translateY(0px); }
|
||||
50% { transform: translateY(-20px); }
|
||||
}
|
||||
|
||||
.floating {
|
||||
animation: float 6s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Pulse Glow Animation - Dezent */
|
||||
@keyframes pulseGlow {
|
||||
0%, 100% {
|
||||
box-shadow:
|
||||
0 0 5px rgba(10, 24, 50, 0.2),
|
||||
0 0 10px rgba(10, 24, 50, 0.1);
|
||||
}
|
||||
50% {
|
||||
box-shadow:
|
||||
0 0 10px rgba(10, 24, 50, 0.3),
|
||||
0 0 20px rgba(10, 24, 50, 0.15);
|
||||
}
|
||||
}
|
||||
|
||||
.pulse-glow {
|
||||
animation: pulseGlow 3s ease-in-out infinite;
|
||||
}
|
||||
|
||||
/* Gradient Animation */
|
||||
@keyframes gradientShift {
|
||||
0% { background-position: 0% 50%; }
|
||||
50% { background-position: 100% 50%; }
|
||||
100% { background-position: 0% 50%; }
|
||||
}
|
||||
|
||||
.gradient-animated {
|
||||
background: linear-gradient(
|
||||
-45deg,
|
||||
var(--color-navy),
|
||||
var(--color-navy-light),
|
||||
var(--color-navy),
|
||||
var(--color-blue)
|
||||
);
|
||||
background-size: 400% 400%;
|
||||
animation: gradientShift 15s ease infinite;
|
||||
}
|
||||
|
||||
/* Text Reveal Animation */
|
||||
@keyframes textReveal {
|
||||
from {
|
||||
clip-path: polygon(0 0, 0 0, 0 100%, 0% 100%);
|
||||
}
|
||||
to {
|
||||
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
|
||||
}
|
||||
}
|
||||
|
||||
.text-reveal {
|
||||
animation: textReveal 1.5s cubic-bezier(0.77, 0, 0.175, 1) forwards;
|
||||
}
|
||||
|
||||
/* Card Hover Effects - Subtil */
|
||||
.card-hover-lift {
|
||||
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.card-hover-lift:hover {
|
||||
transform: translateY(-4px);
|
||||
box-shadow: 0 12px 24px rgba(10, 24, 50, 0.12);
|
||||
}
|
||||
|
||||
/* Magnetic Button Effect */
|
||||
.magnetic-button {
|
||||
position: relative;
|
||||
transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.magnetic-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
width: 0;
|
||||
height: 0;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
transform: translate(-50%, -50%);
|
||||
transition: width 0.6s, height 0.6s;
|
||||
}
|
||||
|
||||
.magnetic-button:hover::before {
|
||||
width: 300px;
|
||||
height: 300px;
|
||||
}
|
||||
|
||||
/* Parallax Layers */
|
||||
.parallax-slow { transform: translateZ(-1px) scale(1.5); }
|
||||
.parallax-medium { transform: translateZ(-2px) scale(2); }
|
||||
.parallax-fast { transform: translateZ(-3px) scale(2.5); }
|
||||
|
||||
/* Reveal on Scroll */
|
||||
.reveal {
|
||||
opacity: 0;
|
||||
transform: translateY(50px);
|
||||
transition: all 1s cubic-bezier(0.4, 0, 0.2, 1);
|
||||
}
|
||||
|
||||
.reveal.active {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
/* Smooth Scroll Indicator */
|
||||
@keyframes scrollDown {
|
||||
0% {
|
||||
transform: translateY(0);
|
||||
opacity: 0;
|
||||
}
|
||||
40% {
|
||||
opacity: 1;
|
||||
}
|
||||
80% {
|
||||
transform: translateY(20px);
|
||||
opacity: 0;
|
||||
}
|
||||
100% {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.scroll-indicator-animated {
|
||||
animation: scrollDown 2s infinite;
|
||||
}
|
||||
|
||||
/* Loading Shimmer - Für Gold-Akzente */
|
||||
@keyframes shimmer {
|
||||
0% {
|
||||
background-position: -1000px 0;
|
||||
}
|
||||
100% {
|
||||
background-position: 1000px 0;
|
||||
}
|
||||
}
|
||||
|
||||
.shimmer {
|
||||
background: linear-gradient(
|
||||
90deg,
|
||||
rgba(200, 168, 81, 0) 0%,
|
||||
rgba(200, 168, 81, 0.2) 50%,
|
||||
rgba(200, 168, 81, 0) 100%
|
||||
);
|
||||
background-size: 1000px 100%;
|
||||
animation: shimmer 3s infinite;
|
||||
}
|
||||
In neuem Issue referenzieren
Einen Benutzer sperren