/* Custom color variables for TailwindCSS */
:root {
    --color-primary: 30 64 175;
    --color-secondary: 59 130 246;
    --color-accent: 96 165 250;
    --color-dark: 15 23 42;
    --color-darkBlue: 30 58 138;
    --color-lightBlue: 147 197 253;
    --color-softBlue: 204 231 255;
}

body {
    font-family: 'Inter', sans-serif;
}

.font-display {
    font-family: 'Poppins', sans-serif;
}

/* Custom utility classes */
.bg-primary { background-color: #1e40af; }
.bg-secondary { background-color: #3b82f6; }
.bg-accent { background-color: #60a5fa; }
.bg-light { background-color: #F9FAFB; }
.bg-darkBlue { background-color: #1e3a8a; }
.bg-lightBlue { background-color: #93c5fd; }
.bg-softBlue { background-color: #cce7ff; }

.text-primary { color: #1e40af; }
.text-secondary { color: #3b82f6; }
.text-accent { color: #60a5fa; }
.text-light { color: #F9FAFB; }
.text-darkBlue { color: #1e3a8a; }
.text-lightBlue { color: #93c5fd; }
.text-softBlue { color: #cce7ff; }

/* Feedback colors */
.bg-success { background-color: #16A34A; }
.bg-warning { background-color: #F59E0B; }
.bg-error { background-color: #DC2626; }
.text-success { color: #16A34A; }
.text-warning { color: #F59E0B; }
.text-error { color: #DC2626; }

.border-primary { border-color: #1e40af; }
.border-secondary { border-color: #3b82f6; }
.border-accent { border-color: #60a5fa; }

.from-primary { --tw-gradient-from: #1e40af; }
.to-primary { --tw-gradient-to: #1e40af; }
.via-primary { --tw-gradient-via: #1e40af; }
.from-secondary { --tw-gradient-from: #3b82f6; }
.to-secondary { --tw-gradient-to: #3b82f6; }
.via-secondary { --tw-gradient-via: #3b82f6; }
.from-accent { --tw-gradient-from: #60a5fa; }
.to-accent { --tw-gradient-to: #60a5fa; }
.via-accent { --tw-gradient-via: #60a5fa; }
.from-dark { --tw-gradient-from: rgb(15 23 42); }
.to-dark { --tw-gradient-to: rgb(15 23 42); }
.via-dark { --tw-gradient-via: rgb(15 23 42); }

/* Opacity variants */
.bg-primary\/20 { background-color: #1e40af / 0.2; }
.bg-secondary\/20 { background-color: #3b82f6 / 0.2; }
.bg-accent\/20 { background-color: #60a5fa / 0.2; }
.bg-light\/90 { background-color: #F9FAFB / 0.9; }
.bg-light\/95 { background-color: #F9FAFB / 0.95; }

.border-primary\/50 { border-color: #1e40af / 0.5; }
.border-secondary\/50 { border-color: #3b82f6 / 0.5; }
.border-accent\/50 { border-color: #60a5fa / 0.5; }

.hover\:text-primary:hover { color: #1e40af; }
.hover\:border-primary:hover { border-color: #1e40af; }

.glow {
    box-shadow: 0 0 20px rgba(30, 64, 175, 0.3);
}

.warm-glow {
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.3);
}

.text-glow {
    text-shadow: 0 0 20px rgba(59, 130, 246, 0.5);
}

.bg-mesh {
    background-image:
        radial-gradient(at 40% 20%, rgba(30, 64, 175, 0.1) 0px, transparent 50%),
        radial-gradient(at 80% 0%, rgba(59, 130, 246, 0.1) 0px, transparent 50%),
        radial-gradient(at 0% 50%, rgba(96, 165, 250, 0.1) 0px, transparent 50%);
}

.organic-blob {
    border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    animation: morph 60s ease-in-out infinite;
}

.floating {
    animation: float 82s ease-in-out infinite, drift 105s ease-in-out infinite;
}

@keyframes float {
    0%, 100% { transform: translateY(0px) translateX(0px); }
    25% { transform: translateY(-150px) translateX(100px); }
    50% { transform: translateY(-350px) translateX(-50px); }
    75% { transform: translateY(-10px) translateX(-150px); }
}

@keyframes drift {
    0%, 100% { transform: translateX(0px) translateY(0px); }
    20% { transform: translateX(200px) translateY(-100px); }
    40% { transform: translateX(-150px) translateY(150px); }
    60% { transform: translateX(25px) translateY(50px); }
    80% { transform: translateX(-10px) translateY(-200px); }
}

@keyframes morph {
    0%, 100% { 
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
    25% { 
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }
    50% { 
        border-radius: 50% 30% 60% 50% / 40% 50% 60% 30%;
    }
    75% { 
        border-radius: 40% 70% 40% 60% / 70% 40% 50% 60%;
    }
}

@keyframes progressGrow {
    0% { width: 0%; }
    100% { width: 20%; }
}

.progress-bar {
    animation: progressGrow 2s ease-out 1s both;
}

/* Scroll offset for fixed navbar */
section {
    scroll-margin-top: 60px;
}

/* Remove focus outline from iframe */
iframe:focus-visible {
    outline: none;
}

/* Video Player Styles */
.video-container {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
}

.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Custom video controls styling */
video::-webkit-media-controls-panel {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.7));
}

video::-webkit-media-controls-play-button {
    background-color: rgba(30, 64, 175, 0.8);
    border-radius: 50%;
    margin: 0 5px;
    transform: scale(0.8);
}

/* Video loading animation */
@keyframes videoLoadSpin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.video-loading-spin {
    animation: videoLoadSpin 1s linear infinite;
}

/* Play Button Hover Effects */
.video-hover-container:hover .play-button {
    width: 8rem; /* 128px - breiter beim Hover */
    border-radius: 2rem; /* abgerundete Ecken */
}


.play-button {
    transition: all 0.3s ease;
    position: relative;
}

.play-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all 0.3s ease;
    font-size: 1rem; /* Größeres Icon */
}

.play-text {
    opacity: 0;
    transform: translateX(-10px);
    transition: all 0.3s ease;
    white-space: nowrap;
    font-size: 0.875rem;
    font-weight: 500;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateX(-10px);
}

.video-hover-container:hover .play-text {
    opacity: 1;
    transform: translate(-50%, -50%) translateX(0);
}

.video-hover-container:hover .play-icon {
    opacity: 0;
}

/* Feature Image Hover Effects */
.feature-image {
    transition: all 0.6s ease;
    opacity: 0;
    transform: scale(0.95);
    overflow: hidden;
    border-radius: 1rem;
    max-height: 500px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    aspect-ratio: auto;
    
}

.feature-image.active {
    opacity: 1;
    transform: scale(1);
    position: relative;
    
}

.feature-image.show {
    opacity: 1;
    transform: scale(1);
    position: relative;
    max-height: 500px;
}

.feature-image img {
    transition: transform 0.6s ease;
    transform: scale(1);
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.feature-image.show img {
    transform: scale(1);
    width: auto;
    height: 500px;
    max-width: none;
    max-height: 100%;
    object-fit: contain;
    transition: transform 0.3s ease-out;
}

/* Secondary Feature Image Hover Effects */
.feature-image-secondary {
    transition: all 0.6s ease;
    opacity: 0;
    transform: scale(0.95);
    overflow: hidden;
    border-radius: 1rem;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    aspect-ratio: auto;
}

.feature-image-secondary.active {
    opacity: 1;
    transform: scale(1);
    position: relative;
}

.feature-image-secondary.show {
    opacity: 1;
    transform: scale(1);
    position: relative;
    max-height: 500px;
}

.feature-image-secondary img {
    transition: transform 0.6s ease;
    transform: scale(1);
    width: 100%;
    height: auto;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

.feature-image-secondary.show img {
    transform: scale(1);
    width: auto;
    height: 500px;
    max-width: none;
    max-height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease-out;
}