/* ===== ZENTRALE ANIMATIONEN FÜR DIE GESAMTE WEBSITE ===== */

/* ===== NEUE EFFEKT-ANIMATIONEN (unabhängig von Farbe) ===== */

/* HIN UND HER – horizontales Pendeln */
@keyframes hinUndHer {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(18px); }
    75%       { transform: translateX(-18px); }
}

/* BUBBLE – aufsteigen wie Blasen */
@keyframes bubble {
    0%   { transform: translateY(0) scale(1);    opacity: 1; }
    50%  { transform: translateY(-20px) scale(1.08); opacity: 0.85; }
    100% { transform: translateY(0) scale(1);    opacity: 1; }
}

/* LOOP SPIN – endlose Drehung */
@keyframes loopSpin {
    from { transform: rotate(0deg); }
    to   { transform: rotate(360deg); }
}

/* SHAKE – zittern/schütteln */
@keyframes shake {
    0%, 100% { transform: translateX(0); }
    15%       { transform: translateX(-8px) rotate(-2deg); }
    30%       { transform: translateX(8px)  rotate(2deg); }
    45%       { transform: translateX(-6px) rotate(-1deg); }
    60%       { transform: translateX(6px)  rotate(1deg); }
    75%       { transform: translateX(-3px); }
    90%       { transform: translateX(3px); }
}

/* RUBBER BAND – elastisches Strecken */
@keyframes rubberBand {
    0%   { transform: scaleX(1); }
    30%  { transform: scaleX(1.25) scaleY(0.75); }
    40%  { transform: scaleX(0.75) scaleY(1.25); }
    50%  { transform: scaleX(1.15) scaleY(0.85); }
    65%  { transform: scaleX(0.95) scaleY(1.05); }
    75%  { transform: scaleX(1.05) scaleY(0.95); }
    100% { transform: scaleX(1); }
}

/* FLIP – 3D-Umklappen */
@keyframes flip3d {
    0%   { transform: perspective(400px) rotateY(0deg); }
    50%  { transform: perspective(400px) rotateY(180deg) scale(1.1); }
    100% { transform: perspective(400px) rotateY(360deg); }
}

/* JELLO – wackeln wie Gelee */
@keyframes jello {
    0%, 11.1%, 100% { transform: none; }
    22.2% { transform: skewX(-12.5deg) skewY(-12.5deg); }
    33.3% { transform: skewX(6.25deg)  skewY(6.25deg); }
    44.4% { transform: skewX(-3.125deg) skewY(-3.125deg); }
    55.5% { transform: skewX(1.5625deg) skewY(1.5625deg); }
    66.6% { transform: skewX(-0.78125deg) skewY(-0.78125deg); }
    77.7% { transform: skewX(0.390625deg) skewY(0.390625deg); }
    88.8% { transform: skewX(-0.1953125deg) skewY(-0.1953125deg); }
}

/* TADA – Aufmerksamkeit erregen */
@keyframes tada {
    0%   { transform: scaleX(1); }
    10%, 20% { transform: scale3d(0.9, 0.9, 0.9) rotate(-3deg); }
    30%, 50%, 70%, 90% { transform: scale3d(1.1, 1.1, 1.1) rotate(3deg); }
    40%, 60%, 80% { transform: scale3d(1.1, 1.1, 1.1) rotate(-3deg); }
    100% { transform: scaleX(1); }
}

/* SWING PENDEL – Pendelbewegung */
@keyframes swingPendel {
    0%, 100% { transform: rotate(0deg);   transform-origin: top center; }
    20%       { transform: rotate(15deg);  transform-origin: top center; }
    40%       { transform: rotate(-10deg); transform-origin: top center; }
    60%       { transform: rotate(5deg);   transform-origin: top center; }
    80%       { transform: rotate(-5deg);  transform-origin: top center; }
}

/* WAVE – Wellenbewegung */
@keyframes wave {
    0%, 100% { transform: translateY(0) rotate(0deg); }
    25%       { transform: translateY(-12px) rotate(3deg); }
    50%       { transform: translateY(0) rotate(0deg); }
    75%       { transform: translateY(12px) rotate(-3deg); }
}

/* ZOOM PULSE – pulsierendes Zoomen */
@keyframes zoomPulse {
    0%, 100% { transform: scale(1); }
    50%       { transform: scale(1.12); }
}

/* NEON GLOW – Leuchteffekt */
@keyframes neonGlow {
    0%, 100% { filter: brightness(1) drop-shadow(0 0 4px currentColor); }
    50%       { filter: brightness(1.3) drop-shadow(0 0 16px currentColor) drop-shadow(0 0 30px currentColor); }
}

/* TYPEWRITER – Schreibmaschinen-Effekt (für Text) */
@keyframes typewriter {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}
@keyframes blinkCursor {
    0%, 100% { border-right-color: currentColor; }
    50%       { border-right-color: transparent; }
}

/* FLOAT UP DOWN – sanftes Schweben */
@keyframes floatUpDown {
    0%, 100% { transform: translateY(0px); }
    50%       { transform: translateY(-15px); }
}

/* SPIN WOBBLE – taumelnde Drehung */
@keyframes spinWobble {
    0%   { transform: rotate(0deg) scale(1); }
    25%  { transform: rotate(90deg) scale(1.05); }
    50%  { transform: rotate(180deg) scale(1); }
    75%  { transform: rotate(270deg) scale(1.05); }
    100% { transform: rotate(360deg) scale(1); }
}

/* HEARTBEAT STRONG – starker Herzschlag */
@keyframes heartbeatStrong {
    0%, 100% { transform: scale(1); }
    14%       { transform: scale(1.15); }
    28%       { transform: scale(1); }
    42%       { transform: scale(1.15); }
    70%       { transform: scale(1); }
}

/* BOUNCE IN – einspringen */
@keyframes bounceIn {
    0%   { transform: scale(0.3); opacity: 0; }
    50%  { transform: scale(1.05); opacity: 0.9; }
    70%  { transform: scale(0.9); }
    100% { transform: scale(1); opacity: 1; }
}

/* SLIDE LOOP – endloses Gleiten nach rechts */
@keyframes slideLoop {
    0%   { transform: translateX(-100%); opacity: 0; }
    10%  { opacity: 1; }
    90%  { opacity: 1; }
    100% { transform: translateX(100%); opacity: 0; }
}

/* GLITCH – digitaler Störeffekt */
@keyframes glitch {
    0%, 100% { transform: translate(0); clip-path: none; }
    20%       { transform: translate(-3px, 2px); clip-path: inset(10% 0 60% 0); }
    40%       { transform: translate(3px, -2px); clip-path: inset(60% 0 10% 0); }
    60%       { transform: translate(-2px, 1px); clip-path: inset(30% 0 40% 0); }
    80%       { transform: translate(2px, -1px); clip-path: none; }
}

/* ===== UTILITY KLASSEN FÜR NEUE EFFEKTE ===== */

.anim-hin-und-her   { animation: hinUndHer 1.8s ease-in-out infinite; }
.anim-bubble        { animation: bubble 2.2s ease-in-out infinite; }
.anim-loop-spin     { animation: loopSpin 2s linear infinite; }
.anim-shake         { animation: shake 0.8s ease-in-out infinite; }
.anim-rubber-band   { animation: rubberBand 1.2s ease-in-out infinite; }
.anim-flip          { animation: flip3d 2.5s ease-in-out infinite; }
.anim-jello         { animation: jello 1.5s ease-in-out infinite; }
.anim-tada          { animation: tada 1.5s ease-in-out infinite; }
.anim-swing-pendel  { animation: swingPendel 2s ease-in-out infinite; }
.anim-wave          { animation: wave 2.5s ease-in-out infinite; }
.anim-zoom-pulse    { animation: zoomPulse 1.8s ease-in-out infinite; }
.anim-neon-glow     { animation: neonGlow 2s ease-in-out infinite; }
.anim-float         { animation: floatUpDown 3s ease-in-out infinite; }
.anim-spin-wobble   { animation: spinWobble 3s ease-in-out infinite; }
.anim-heartbeat     { animation: heartbeatStrong 1.4s ease-in-out infinite; }
.anim-glitch        { animation: glitch 1s steps(1) infinite; }

/* Typewriter – einmalig */
.anim-typewriter {
    display: inline-block;
    overflow: hidden;
    white-space: nowrap;
    border-right: 2px solid currentColor;
    animation: typewriter 3s steps(40) forwards, blinkCursor 0.75s step-end infinite;
}

/* Geschwindigkeits-Varianten */
.anim-speed-slow   { animation-duration: 3.5s !important; }
.anim-speed-normal { animation-duration: 2s !important; }
.anim-speed-fast   { animation-duration: 0.8s !important; }

/* Fade In Animationen */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-40px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(40px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* Scale Animationen */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.8);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes zoomIn {
    from {
        opacity: 0;
        transform: scale(0.5);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Bounce & Pulse */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes pulse {
    0%, 100% {
        opacity: 0.5;
        transform: scale(1);
    }
    50% {
        opacity: 0.8;
        transform: scale(1.05);
    }
}

@keyframes heartbeat {
    0%, 100% {
        transform: scale(1);
    }
    10%, 30% {
        transform: scale(0.95);
    }
    20%, 40% {
        transform: scale(1.05);
    }
}

/* Gradient Animationen */
@keyframes gradientShift {
    0% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
    100% {
        background-position: 0% 50%;
    }
}

@keyframes shimmer {
    0% {
        background-position: -1000px 0;
    }
    100% {
        background-position: 1000px 0;
    }
}

/* Rotation Animationen */
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

@keyframes swing {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(5deg);
    }
    75% {
        transform: rotate(-5deg);
    }
}

/* Slide Animationen */
@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideInFromBottom {
    from {
        opacity: 0;
        transform: translateY(100%);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hover Effekte */
@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

@keyframes glow {
    0%, 100% {
        box-shadow: 0 0 5px rgba(97, 172, 209, 0.5);
    }
    50% {
        box-shadow: 0 0 20px rgba(97, 172, 209, 0.8), 0 0 30px rgba(97, 172, 209, 0.6);
    }
}

/* ===== UTILITY KLASSEN ===== */

/* Basis Animationen */
.animate-fade-in {
    animation: fadeIn 0.8s ease-out forwards;
}

.animate-fade-in-up {
    animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-down {
    animation: fadeInDown 0.8s ease-out forwards;
}

.animate-fade-in-left {
    animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
    animation: fadeInRight 0.8s ease-out forwards;
}

.animate-scale-in {
    animation: scaleIn 0.6s ease-out forwards;
}

.animate-zoom-in {
    animation: zoomIn 0.6s ease-out forwards;
}

.animate-slide-in {
    animation: slideIn 0.8s ease-out forwards;
}

/* Kontinuierliche Animationen */
.animate-bounce {
    animation: bounce 2s ease-in-out infinite;
}

.animate-pulse {
    animation: pulse 2s ease-in-out infinite;
}

.animate-float {
    animation: float 3s ease-in-out infinite;
}

.animate-heartbeat {
    animation: heartbeat 1.5s ease-in-out infinite;
}

.animate-rotate {
    animation: rotate 2s linear infinite;
}

.animate-swing {
    animation: swing 2s ease-in-out infinite;
}

/* Verzögerungen */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }
.delay-800 { animation-delay: 0.8s; }

/* Geschwindigkeiten */
.duration-fast { animation-duration: 0.4s !important; }
.duration-normal { animation-duration: 0.8s !important; }
.duration-slow { animation-duration: 1.2s !important; }

/* Hover Effekte - SCHNELL UND DIREKT */
.hover-lift {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hover-lift:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hover-scale {
    transition: transform 0.15s ease;
}

.hover-scale:hover {
    transform: scale(1.08);
}

.hover-glow {
    transition: box-shadow 0.2s ease;
}

.hover-glow:hover {
    box-shadow: 0 0 15px rgba(97, 172, 209, 0.5);
}

.hover-brighten {
    transition: filter 0.15s ease;
}

.hover-brighten:hover {
    filter: brightness(1.05);
}

/* Smooth Transitions - SCHNELLER */
.smooth-transition {
    transition: all 0.2s ease;
}

.smooth-transition-slow {
    transition: all 0.3s ease;
}

/* Scroll Reveal - für Intersection Observer */
.scroll-reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
    transition: none; /* Entferne Transition nach Reveal */
}

.scroll-reveal-left {
    opacity: 0;
    transform: translateX(-30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-left.revealed {
    opacity: 1;
    transform: translateX(0);
    transition: none; /* Entferne Transition nach Reveal */
}

.scroll-reveal-right {
    opacity: 0;
    transform: translateX(30px);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-right.revealed {
    opacity: 1;
    transform: translateX(0);
    transition: none; /* Entferne Transition nach Reveal */
}

.scroll-reveal-scale {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease, transform 0.8s ease;
}

.scroll-reveal-scale.revealed {
    opacity: 1;
    transform: scale(1);
    transition: none; /* Entferne Transition nach Reveal */
}

/* Feature Cards Animation */
.feature-card {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease;
}

.feature-card.visible {
    opacity: 1;
    transform: translateY(0);
    transition: none; /* Entferne Transition nach Reveal */
}

/* Stagger Animation für Listen */
.stagger-item {
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
}

.stagger-item:nth-child(1) { animation-delay: 0.1s; }
.stagger-item:nth-child(2) { animation-delay: 0.2s; }
.stagger-item:nth-child(3) { animation-delay: 0.3s; }
.stagger-item:nth-child(4) { animation-delay: 0.4s; }
.stagger-item:nth-child(5) { animation-delay: 0.5s; }
.stagger-item:nth-child(6) { animation-delay: 0.6s; }
.stagger-item:nth-child(7) { animation-delay: 0.7s; }
.stagger-item:nth-child(8) { animation-delay: 0.8s; }
.stagger-item:nth-child(9) { animation-delay: 0.9s; }
.stagger-item:nth-child(10) { animation-delay: 1s; }

/* Loading Spinner */
@keyframes spin {
    to { transform: rotate(360deg); }
}

.spinner {
    animation: spin 1s linear infinite;
}

/* Responsive Anpassungen */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* Performance Optimierung */
.will-animate {
    will-change: transform, opacity;
}

.gpu-accelerated {
    transform: translateZ(0);
    backface-visibility: hidden;
    perspective: 1000px;
}