/**
 * IMAGE SYSTEM CSS
 * Styling für Illustrationen, Hero-Images, Empty States und Icons
 * Teil der "Bunt & Lebendig" Visual Enhancement
 */

/* ===== HERO IMAGES ===== */
.hero-image-container {
    position: relative;
    width: 100%;
    max-width: 600px;
    margin: 0 auto;
}

.hero-image {
    width: 100%;
    height: auto;
    object-fit: contain;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-20px);
    }
}

/* ===== ANIMATED SVG ENHANCEMENTS ===== */

/* Pulse Animation - für Attention-grabbing Elemente */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        opacity: 1;
    }
    50% {
        transform: scale(1.05);
        opacity: 0.9;
    }
}

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

/* Gentle Float - für schwebende Elemente */
@keyframes gentleFloat {
    0%, 100% {
        transform: translateY(0) translateX(0);
    }
    33% {
        transform: translateY(-10px) translateX(5px);
    }
    66% {
        transform: translateY(-5px) translateX(-5px);
    }
}

.svg-gentle-float {
    animation: gentleFloat 6s ease-in-out infinite;
}

/* Rotate (subtle) - für Zahnräder, Ladeanimationen */
@keyframes subtleRotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}

.svg-rotate-slow {
    animation: subtleRotate 20s linear infinite;
    transform-origin: center;
}

.svg-rotate-medium {
    animation: subtleRotate 10s linear infinite;
    transform-origin: center;
}

/* Bounce - für Checkmarks, Success-Icons */
@keyframes bounce {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.svg-bounce {
    animation: bounce 1s ease-in-out 3;
}

/* Scale In - für Eintritts-Animationen */
@keyframes scaleIn {
    from {
        transform: scale(0.8);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.svg-scale-in {
    animation: scaleIn 0.6s var(--rb-ease-spring, cubic-bezier(0.68, -0.55, 0.265, 1.55)) forwards;
}

/* Draw Line Animation - für Linien und Pfade */
@keyframes drawLine {
    from {
        stroke-dashoffset: 1000;
    }
    to {
        stroke-dashoffset: 0;
    }
}

.svg-draw-line {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    animation: drawLine 2s ease forwards;
}

/* Glow Pulse - für wichtige Elemente */
@keyframes glowPulse {
    0%, 100% {
        filter: drop-shadow(0 0 5px rgba(59, 130, 246, 0.3));
    }
    50% {
        filter: drop-shadow(0 0 15px rgba(59, 130, 246, 0.6));
    }
}

.svg-glow-pulse {
    animation: glowPulse 2s ease-in-out infinite;
}

/* Wiggle - für aufmerksamkeitsstarke Elemente */
@keyframes wiggle {
    0%, 100% {
        transform: rotate(0deg);
    }
    25% {
        transform: rotate(-5deg);
    }
    75% {
        transform: rotate(5deg);
    }
}

.svg-wiggle {
    animation: wiggle 0.5s ease-in-out 3;
    transform-origin: center;
}

/* Delay Classes für gestaffelte Animationen */
.anim-delay-100 { animation-delay: 0.1s; }
.anim-delay-200 { animation-delay: 0.2s; }
.anim-delay-300 { animation-delay: 0.3s; }
.anim-delay-400 { animation-delay: 0.4s; }
.anim-delay-500 { animation-delay: 0.5s; }
.anim-delay-600 { animation-delay: 0.6s; }
.anim-delay-700 { animation-delay: 0.7s; }
.anim-delay-800 { animation-delay: 0.8s; }

/* Hero Background Illustration (subtil im Hintergrund) */
.hero-bg-illustration {
    position: absolute;
    right: -100px;
    top: 50%;
    transform: translateY(-50%);
    width: 600px;
    height: 600px;
    opacity: 0.08;
    pointer-events: none;
    z-index: 0;
}

/* ===== EMPTY STATES ===== */
.empty-state {
    text-align: center;
    padding: 4rem 2rem;
    max-width: 600px;
    margin: 0 auto;
    animation: fadeInUp 0.6s ease forwards;
}

.empty-state-illustration {
    width: 100%;
    max-width: 300px;
    margin: 0 auto 2rem;
    opacity: 0;
    animation: fadeInUp 0.6s ease 0.2s forwards;
}

.empty-state h2,
.empty-state h3 {
    margin-bottom: 1rem;
    color: var(--rb-text-primary);
}

.empty-state p {
    color: var(--rb-text-secondary);
    font-size: 1.0625rem;
    line-height: 1.6;
    margin-bottom: 2rem;
}

.empty-state .btn {
    margin-top: 1.5rem;
}

.empty-state .btn-group {
    display: flex;
    gap: 1rem;
    justify-content: center;
    flex-wrap: wrap;
}

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

/* ===== FEATURE CARD ICONS ===== */
.feature-icon-lg {
    width: 80px;
    height: 80px;
    margin: 0 auto 1.5rem;
    padding: 1rem;
    background: var(--rb-primary-light, rgba(37, 99, 235, 0.1));
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s var(--rb-ease-spring, cubic-bezier(0.68, -0.55, 0.265, 1.55));
}

.feature-card:hover .feature-icon-lg {
    transform: scale(1.1) rotate(5deg);
}

.feature-icon-lg svg,
.feature-icon-lg img {
    width: 48px;
    height: 48px;
}

/* ===== STAT CARD MINI-ILLUSTRATIONS ===== */
.stat-card {
    position: relative;
    overflow: hidden;
}

.stat-card-illustration {
    position: absolute;
    right: 16px;
    bottom: 16px;
    width: 64px;
    height: 64px;
    opacity: 0.08;
    pointer-events: none;
}

/* Page-Context-spezifische Illustrationen */
body[data-page-context="dashboard"] .stat-card-illustration {
    filter: hue-rotate(0deg); /* Blue */
}

body[data-page-context="cashbook"] .stat-card-illustration {
    filter: hue-rotate(130deg); /* Green */
}

body[data-page-context="invoices"] .stat-card-illustration {
    filter: hue-rotate(20deg); /* Blue-lighter */
}

body[data-page-context="customers"] .stat-card-illustration {
    filter: hue-rotate(170deg); /* Cyan */
}

body[data-page-context="offers"] .stat-card-illustration {
    filter: hue-rotate(30deg); /* Amber */
}

body[data-page-context="positions"] .stat-card-illustration {
    filter: hue-rotate(270deg); /* Purple */
}

/* ===== SECTION ILLUSTRATIONS ===== */
.section-illustration {
    text-align: center;
    padding: 2rem;
    margin: 2rem 0;
}

.section-illustration img {
    width: 100%;
    max-width: 200px;
    margin-bottom: 1rem;
    opacity: 0.9;
}

.section-illustration p {
    color: var(--rb-text-secondary);
    font-size: 0.9375rem;
}

/* ===== BACKGROUND PATTERNS ===== */
.page-background-pattern {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%239C92AC' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.03;
    pointer-events: none;
    z-index: -1;
}

/* ===== CONTEXTUAL ILLUSTRATIONS (per Page-Context) ===== */
.contextual-illustration {
    transition: filter 0.3s ease;
}

body[data-page-context="dashboard"] .contextual-illustration {
    filter: hue-rotate(0deg); /* Blue #2563eb */
}

body[data-page-context="cashbook"] .contextual-illustration {
    filter: hue-rotate(130deg); /* Emerald #059669 */
}

body[data-page-context="invoices"] .contextual-illustration {
    filter: hue-rotate(20deg); /* Blue #3b82f6 */
}

body[data-page-context="customers"] .contextual-illustration {
    filter: hue-rotate(170deg); /* Cyan #0891b2 */
}

body[data-page-context="offers"] .contextual-illustration {
    filter: hue-rotate(30deg); /* Amber #d97706 */
}

body[data-page-context="positions"] .contextual-illustration {
    filter: hue-rotate(270deg); /* Purple #7c3aed */
}

body[data-page-context="export"] .contextual-illustration {
    filter: hue-rotate(320deg); /* Pink #ec4899 */
}

body[data-page-context="settings"] .contextual-illustration {
    filter: grayscale(0.5); /* Gray #6b7280 */
}

/* ===== LAZY LOADING PLACEHOLDER ===== */
.image-placeholder {
    background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.5s infinite;
    border-radius: 8px;
}

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

img.loaded {
    animation: fadeIn 0.4s ease;
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ===== LOGIN/REGISTER SIDEBAR ILLUSTRATION ===== */
.auth-sidebar-illustration {
    width: 100%;
    max-width: 400px;
    margin: 0 auto 2rem;
}

.auth-sidebar-illustration img {
    width: 100%;
    height: auto;
    filter: brightness(1.1) contrast(1.05);
}

/* ===== FEATURE LIST WITH CHECKMARKS ===== */
.feature-list-illustrated {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0;
}

.feature-list-illustrated li {
    padding: 0.75rem 0;
    padding-left: 2rem;
    position: relative;
    color: inherit;
    line-height: 1.6;
}

.feature-list-illustrated li::before {
    content: '✓';
    position: absolute;
    left: 0;
    top: 0.75rem;
    width: 24px;
    height: 24px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 14px;
}

/* ===== PAGE HEADER ILLUSTRATION ===== */
.page-header-with-illustration {
    position: relative;
    margin-bottom: 2rem;
}

.page-header-illustration {
    position: absolute;
    right: 0;
    top: -50px;
    width: 200px;
    height: 200px;
    opacity: 0.08;
    pointer-events: none;
}

/* ===== RESPONSIVE ANPASSUNGEN ===== */
@media (max-width: 768px) {
    .hero-image-container {
        max-width: 100%;
        padding: 0 1rem;
    }

    .hero-bg-illustration {
        right: -150px;
        width: 400px;
        height: 400px;
        opacity: 0.05;
    }

    .empty-state {
        padding: 3rem 1.5rem;
    }

    .empty-state-illustration {
        max-width: 200px;
    }

    .feature-icon-lg {
        width: 60px;
        height: 60px;
    }

    .feature-icon-lg svg,
    .feature-icon-lg img {
        width: 36px;
        height: 36px;
    }

    .stat-card-illustration {
        width: 48px;
        height: 48px;
        right: 12px;
        bottom: 12px;
    }

    .page-header-illustration {
        width: 150px;
        height: 150px;
        opacity: 0.05;
    }

    .auth-sidebar-illustration {
        max-width: 280px;
    }
}

@media (max-width: 480px) {
    .empty-state {
        padding: 2rem 1rem;
    }

    .empty-state-illustration {
        max-width: 160px;
    }

    .empty-state .btn-group {
        flex-direction: column;
        gap: 0.75rem;
    }

    .empty-state .btn-group .btn {
        width: 100%;
    }

    .section-illustration img {
        max-width: 150px;
    }
}

/* ===== DARK MODE ANPASSUNGEN ===== */
@media (prefers-color-scheme: dark) {
    .empty-state-illustration,
    .hero-image,
    .feature-icon-lg img,
    .section-illustration img,
    .stat-card-illustration,
    .contextual-illustration {
        filter: brightness(0.9) contrast(1.1);
    }

    .image-placeholder {
        background: linear-gradient(90deg, #2a2a2a 25%, #3a3a3a 50%, #2a2a2a 75%);
        background-size: 200% 100%;
    }

    .feature-icon-lg {
        background: rgba(59, 130, 246, 0.15);
    }

    .page-background-pattern {
        opacity: 0.02;
        filter: invert(1);
    }
}

/* ===== PRINT-OPTIMIERUNG ===== */
@media print {
    .hero-image-container,
    .hero-bg-illustration,
    .empty-state-illustration,
    .page-background-pattern,
    .stat-card-illustration,
    .page-header-illustration,
    .feature-icon-lg,
    .section-illustration {
        display: none !important;
    }
}

/* ===== ACCESSIBILITY: Reduced Motion ===== */
@media (prefers-reduced-motion: reduce) {
    .hero-image,
    .empty-state,
    .empty-state-illustration,
    .feature-icon-lg,
    .contextual-illustration,
    img.loaded,
    .svg-pulse,
    .svg-gentle-float,
    .svg-rotate-slow,
    .svg-rotate-medium,
    .svg-bounce,
    .svg-scale-in,
    .svg-draw-line,
    .svg-glow-pulse,
    .svg-wiggle {
        animation: none !important;
        transition: none !important;
    }

    .feature-card:hover .feature-icon-lg {
        transform: none;
    }

    /* Aber behalte fadeIn für Accessibility */
    .empty-state,
    .empty-state-illustration {
        animation: fadeIn 0.3s ease forwards !important;
    }
}

/* ===== ILLUSTRATION COLORS (CSS Variables) ===== */
:root {
    --illustration-primary: #2563eb;
    --illustration-secondary: #3b82f6;
    --illustration-accent: #7c3aed;
    --illustration-success: #059669;
    --illustration-warning: #d97706;
    --illustration-error: #dc2626;
}

[data-theme="dark"] {
    --illustration-primary: #60a5fa;
    --illustration-secondary: #93c5fd;
    --illustration-accent: #a78bfa;
    --illustration-success: #34d399;
    --illustration-warning: #fbbf24;
    --illustration-error: #f87171;
}