/* CLAUDE: Animationen und Micro-Interactions */
/* CLAUDE: Moderne Hover-Effekte, Scroll-Reveals, Transitions */
/* CLAUDE: Anpassen: Timing und Easing in CSS Variables */

/* ==========================================================================
   CLAUDE: Keyframe Animationen
   ========================================================================== */

/* CLAUDE: Einfaches Einblenden */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* CLAUDE: Einblenden von unten */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CLAUDE: Einblenden von oben */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* CLAUDE: Einblenden von links */
@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* CLAUDE: Einblenden von rechts */
@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

/* CLAUDE: Skalierendes Einblenden */
@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* CLAUDE: Pulsieren */
@keyframes pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.05); }
}

/* CLAUDE: Sanftes Pulsieren für Attention */
@keyframes pulseGlow {
    0%, 100% {
        box-shadow: 0 0 0 0 rgba(140, 10, 183, 0.4);
    }
    50% {
        box-shadow: 0 0 0 10px rgba(140, 10, 183, 0);
    }
}

/* CLAUDE: Shimmer für Loading */
@keyframes shimmer {
    0% { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}

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

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

/* ==========================================================================
   CLAUDE: Scroll Reveal Klassen
   ========================================================================== */

/* CLAUDE: Basis Reveal - unsichtbar bis aktiviert */
.pvm-reveal {
    opacity: 0;                                    /* CLAUDE: Unsichtbar */
    transform: translateY(30px);                   /* CLAUDE: Verschoben */
    transition: opacity 0.6s ease,
                transform 0.6s ease;               /* CLAUDE: Smooth Transition */
}

/* CLAUDE: Sichtbar wenn im Viewport */
.pvm-reveal.is-visible {
    opacity: 1;                                    /* CLAUDE: Sichtbar */
    transform: translateY(0);                      /* CLAUDE: Ursprungsposition */
}

/* CLAUDE: Variante: Von links */
.pvm-reveal--left {
    transform: translateX(-50px);                  /* CLAUDE: Nach links verschoben */
}

.pvm-reveal--left.is-visible {
    transform: translateX(0);                      /* CLAUDE: Ursprungsposition */
}

/* CLAUDE: Variante: Von rechts */
.pvm-reveal--right {
    transform: translateX(50px);                   /* CLAUDE: Nach rechts verschoben */
}

.pvm-reveal--right.is-visible {
    transform: translateX(0);                      /* CLAUDE: Ursprungsposition */
}

/* CLAUDE: Variante: Skalierung */
.pvm-reveal--scale {
    transform: scale(0.9);                         /* CLAUDE: Verkleinert */
}

.pvm-reveal--scale.is-visible {
    transform: scale(1);                           /* CLAUDE: Originalgröße */
}

/* CLAUDE: Variante: Fade only */
.pvm-reveal--fade {
    transform: none;                               /* CLAUDE: Keine Verschiebung */
}

/* ==========================================================================
   CLAUDE: Stagger Delays (für Listen)
   ========================================================================== */

/* CLAUDE: Verzögerte Animation für Kinder */
.pvm-stagger > *:nth-child(1) { transition-delay: 0ms; }
.pvm-stagger > *:nth-child(2) { transition-delay: 100ms; }
.pvm-stagger > *:nth-child(3) { transition-delay: 200ms; }
.pvm-stagger > *:nth-child(4) { transition-delay: 300ms; }
.pvm-stagger > *:nth-child(5) { transition-delay: 400ms; }
.pvm-stagger > *:nth-child(6) { transition-delay: 500ms; }
.pvm-stagger > *:nth-child(7) { transition-delay: 600ms; }
.pvm-stagger > *:nth-child(8) { transition-delay: 700ms; }

/* ==========================================================================
   CLAUDE: Button Hover Effekte
   ========================================================================== */

/* CLAUDE: Basis Button Animation */
.pvm-btn {
    position: relative;                            /* CLAUDE: Für Pseudo-Element */
    overflow: hidden;                              /* CLAUDE: Overflow verstecken */
    transition: transform var(--pvm-transition-fast),
                box-shadow var(--pvm-transition-fast),
                background-color var(--pvm-transition-fast); /* CLAUDE: Transitions */
}

/* CLAUDE: Ripple Effect */
.pvm-btn::before {
    content: '';                                   /* CLAUDE: Pseudo-Element */
    position: absolute;                            /* CLAUDE: Absolut positioniert */
    top: 50%;                                      /* CLAUDE: Zentriert */
    left: 50%;                                     /* CLAUDE: Zentriert */
    width: 0;                                      /* CLAUDE: Startet klein */
    height: 0;                                     /* CLAUDE: Startet klein */
    background: rgba(255, 255, 255, 0.2);         /* CLAUDE: Weiß transparent */
    border-radius: 50%;                            /* CLAUDE: Rund */
    transform: translate(-50%, -50%);              /* CLAUDE: Zentrieren */
    transition: width 0.6s ease, height 0.6s ease; /* CLAUDE: Expansion */
}

.pvm-btn:hover::before {
    width: 300px;                                  /* CLAUDE: Expandiert */
    height: 300px;                                 /* CLAUDE: Expandiert */
}

/* CLAUDE: Lift Effect */
.pvm-btn:hover {
    transform: translateY(-2px);                   /* CLAUDE: Hebt sich */
    box-shadow: var(--pvm-shadow-primary);        /* CLAUDE: Primary Glow */
}

.pvm-btn:active {
    transform: translateY(0);                      /* CLAUDE: Zurück */
}

/* CLAUDE: Gradient Button spezifisch */
.pvm-btn--gradient {
    background: var(--pvm-gradient);              /* CLAUDE: Gradient */
    background-size: 200% 200%;                    /* CLAUDE: Für Animation */
    transition: background-position 0.5s ease,
                transform var(--pvm-transition-fast),
                box-shadow var(--pvm-transition-fast); /* CLAUDE: Transitions */
}

.pvm-btn--gradient:hover {
    background-position: 100% 50%;                 /* CLAUDE: Gradient verschiebt */
}

/* ==========================================================================
   CLAUDE: Link Underline Animation
   ========================================================================== */

/* CLAUDE: Animierte Unterstreichung */
.pvm-link-animated {
    position: relative;                            /* CLAUDE: Für Pseudo-Element */
    display: inline-block;                         /* CLAUDE: Inline Block */
}

.pvm-link-animated::after {
    content: '';                                   /* CLAUDE: Pseudo-Element */
    position: absolute;                            /* CLAUDE: Absolut */
    bottom: 0;                                     /* CLAUDE: Unten */
    left: 0;                                       /* CLAUDE: Links */
    width: 0;                                      /* CLAUDE: Startet bei 0 */
    height: 2px;                                   /* CLAUDE: Linienhöhe */
    background: var(--pvm-primary);               /* CLAUDE: Primary Farbe */
    transition: width var(--pvm-transition-base); /* CLAUDE: Smooth */
}

.pvm-link-animated:hover::after {
    width: 100%;                                   /* CLAUDE: Volle Breite */
}

/* CLAUDE: Variante: Von Mitte aus */
.pvm-link-animated--center::after {
    left: 50%;                                     /* CLAUDE: Startet mittig */
    transform: translateX(-50%);                   /* CLAUDE: Zentriert */
}

.pvm-link-animated--center:hover::after {
    width: 100%;                                   /* CLAUDE: Volle Breite */
}

/* ==========================================================================
   CLAUDE: Card Hover Effekte
   ========================================================================== */

/* CLAUDE: Basis Card Animation */
.pvm-card,
.service-card,
.portfolio-card,
.benefits-card {
    transition: transform var(--pvm-transition-base),
                box-shadow var(--pvm-transition-base),
                border-color var(--pvm-transition-base); /* CLAUDE: Transitions */
}

/* CLAUDE: Card Lift auf Hover */
.pvm-card:hover,
.service-card:hover,
.portfolio-card:hover,
.benefits-card:hover {
    transform: translateY(-8px);                   /* CLAUDE: Hebt sich */
    box-shadow: var(--pvm-shadow-lg);             /* CLAUDE: Größerer Schatten */
}

/* CLAUDE: Card mit Border Highlight */
.pvm-card--highlight:hover {
    border-color: var(--pvm-primary);             /* CLAUDE: Primary Border */
}

/* ==========================================================================
   CLAUDE: Hamburger Animation
   ========================================================================== */

/* CLAUDE: Hamburger Linien */
.pvm-hamburger span {
    display: block;                                /* CLAUDE: Block */
    width: 24px;                                   /* CLAUDE: Breite */
    height: 2px;                                   /* CLAUDE: Höhe */
    background-color: var(--pvm-text);            /* CLAUDE: Farbe */
    margin: 5px 0;                                 /* CLAUDE: Abstand */
    transition: transform var(--pvm-transition-base),
                opacity var(--pvm-transition-base); /* CLAUDE: Transitions */
}

/* CLAUDE: Hamburger zu X Animation */
.pvm-mobile-toggle.is-active .pvm-hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px); /* CLAUDE: Erste Linie dreht */
}

.pvm-mobile-toggle.is-active .pvm-hamburger span:nth-child(2) {
    opacity: 0;                                    /* CLAUDE: Mittlere versteckt */
}

.pvm-mobile-toggle.is-active .pvm-hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px); /* CLAUDE: Dritte Linie dreht */
}

/* ==========================================================================
   CLAUDE: Image Hover Effects
   ========================================================================== */

/* CLAUDE: Zoom auf Hover */
.pvm-img-zoom {
    overflow: hidden;                              /* CLAUDE: Overflow verstecken */
}

.pvm-img-zoom img {
    transition: transform var(--pvm-transition-slow); /* CLAUDE: Langsam */
}

.pvm-img-zoom:hover img {
    transform: scale(1.05);                        /* CLAUDE: Leichter Zoom */
}

/* CLAUDE: Overlay auf Hover */
.pvm-img-overlay {
    position: relative;                            /* CLAUDE: Für Overlay */
    overflow: hidden;                              /* CLAUDE: Overflow verstecken */
}

.pvm-img-overlay::after {
    content: '';                                   /* CLAUDE: Pseudo-Element */
    position: absolute;                            /* CLAUDE: Absolut */
    inset: 0;                                      /* CLAUDE: Füllt Container */
    background: var(--pvm-gradient);              /* CLAUDE: Gradient */
    opacity: 0;                                    /* CLAUDE: Unsichtbar */
    transition: opacity var(--pvm-transition-base); /* CLAUDE: Smooth */
}

.pvm-img-overlay:hover::after {
    opacity: 0.7;                                  /* CLAUDE: Sichtbar */
}

/* ==========================================================================
   CLAUDE: Loading States
   ========================================================================== */

/* CLAUDE: Skeleton Loading */
.pvm-skeleton {
    background: linear-gradient(90deg,
        var(--pvm-bg-light) 25%,
        var(--pvm-border) 50%,
        var(--pvm-bg-light) 75%);                 /* CLAUDE: Gradient */
    background-size: 200% 100%;                    /* CLAUDE: Für Animation */
    animation: shimmer 1.5s infinite;              /* CLAUDE: Shimmer */
    border-radius: var(--pvm-radius-md);          /* CLAUDE: Abgerundet */
}

/* CLAUDE: Spinner */
.pvm-spinner {
    width: 24px;                                   /* CLAUDE: Breite */
    height: 24px;                                  /* CLAUDE: Höhe */
    border: 2px solid var(--pvm-border);          /* CLAUDE: Border */
    border-top-color: var(--pvm-primary);         /* CLAUDE: Primary oben */
    border-radius: 50%;                            /* CLAUDE: Rund */
    animation: spin 0.8s linear infinite;          /* CLAUDE: Rotation */
}

/* ==========================================================================
   CLAUDE: Focus States (Accessibility)
   ========================================================================== */

/* CLAUDE: Konsistenter Focus Ring */
.pvm-focus-ring:focus {
    outline: 2px solid var(--pvm-primary);        /* CLAUDE: Primary Outline */
    outline-offset: 2px;                           /* CLAUDE: Abstand */
}

/* CLAUDE: Focus-visible für Keyboard-Only */
.pvm-focus-visible:focus:not(:focus-visible) {
    outline: none;                                 /* CLAUDE: Kein Ring bei Maus */
}

.pvm-focus-visible:focus-visible {
    outline: 2px solid var(--pvm-primary);        /* CLAUDE: Ring bei Tastatur */
    outline-offset: 2px;                           /* CLAUDE: Abstand */
}

/* ==========================================================================
   CLAUDE: Utility Animation Classes
   ========================================================================== */

/* CLAUDE: Animation auf Hover aktivieren */
.pvm-animate-hover:hover {
    animation: pulse 1s ease infinite;             /* CLAUDE: Pulsieren */
}

/* CLAUDE: Attention Animation */
.pvm-attention {
    animation: pulseGlow 2s ease infinite;         /* CLAUDE: Glow Pulsieren */
}

/* CLAUDE: Bounce Animation */
.pvm-bounce {
    animation: bounce 2s ease infinite;            /* CLAUDE: Bounce */
}

/* ==========================================================================
   CLAUDE: Reduced Motion (Accessibility)
   ========================================================================== */

/* CLAUDE: Respektiert Nutzer-Präferenz für reduzierte Bewegung */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;     /* CLAUDE: Keine Animation */
        animation-iteration-count: 1 !important;   /* CLAUDE: Einmalig */
        transition-duration: 0.01ms !important;    /* CLAUDE: Keine Transition */
    }

    /* CLAUDE: Reveal sofort sichtbar */
    .pvm-reveal {
        opacity: 1;                                /* CLAUDE: Sichtbar */
        transform: none;                           /* CLAUDE: Keine Verschiebung */
    }

    /* CLAUDE: Kein Hover Lift */
    .pvm-btn:hover,
    .pvm-card:hover,
    .service-card:hover {
        transform: none;                           /* CLAUDE: Kein Lift */
    }
}

/* ==========================================================================
   CLAUDE: Print - Animationen deaktivieren
   ========================================================================== */

@media print {
    .pvm-reveal {
        opacity: 1 !important;                     /* CLAUDE: Sichtbar */
        transform: none !important;                /* CLAUDE: Keine Verschiebung */
    }
}