/*
Theme Name: BlueTreeMotion
Theme URI: https://bluetreemotion.de
Author: BlueTreeMotion
Description: Professionelles Portfolio Theme mit Tailwind CSS
Version: 1.0
Text Domain: bluetreemotion
*/

/* Eigene Styles für die "Motion" und Seitenübergänge */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f8fafc;
    color: #334155;
    overflow-x: hidden;
}

.page-section {
    display: none;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s ease, transform 0.5s ease;
}

.page-section.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

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

#main-header.is-transparent {
    background-color: transparent;
    box-shadow: none;
    backdrop-filter: none;
}
#main-header:not(.is-transparent) {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}
#main-header.is-transparent #logo-text { color: #ffffff; }
#main-header:not(.is-transparent) #logo-text { color: #0f172a; }
#main-header.is-transparent #burger-icon { color: #ffffff; }
#main-header:not(.is-transparent) #burger-icon { color: #4b5563; }

.nav-link { position: relative; transition: color 0.3s ease; }
.nav-link::after {
    content: '';
    position: absolute;
    width: 0; height: 2px;
    bottom: -4px; left: 0;
    background-color: #0284c7;
    transition: width 0.3s ease;
}
.nav-link:hover::after, .nav-link.active::after { width: 100%; }

#main-header.is-transparent .nav-link { color: rgba(255, 255, 255, 0.8); }
#main-header.is-transparent .nav-link:hover,
#main-header.is-transparent .nav-link.active { color: #ffffff; }

#main-header:not(.is-transparent) .nav-link { color: #4b5563; }
#main-header:not(.is-transparent) .nav-link:hover,
#main-header:not(.is-transparent) .nav-link.active { color: #0284c7; }

#burger-icon.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
#burger-icon.open span:nth-child(2) { opacity: 0; }
#burger-icon.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

.timeline-line {
    background: linear-gradient(180deg, rgba(2,132,199,0) 0%, rgba(2,132,199,1) 15%, rgba(56,189,248,1) 85%, rgba(56,189,248,0) 100%);
}

@keyframes blob {
    0% { transform: translate(0px, 0px) scale(1); }
    33% { transform: translate(30px, -50px) scale(1.1); }
    66% { transform: translate(-20px, 20px) scale(0.9); }
    100% { transform: translate(0px, 0px) scale(1); }
}
.animate-blob { animation: blob 8s infinite alternate ease-in-out; }
.animation-delay-2000 { animation-delay: 2s; }
.animation-delay-4000 { animation-delay: 4s; }

@keyframes float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-20px); }
}
.animate-float { animation: float 6s ease-in-out infinite; }
.animate-float-delayed-1 { animation: float 6s ease-in-out infinite 1s; }
.animate-float-delayed-2 { animation: float 6s ease-in-out infinite 2s; }

.bg-grid-pattern {
    background-image:
        linear-gradient(to right, rgba(255,255,255,0.05) 1px, transparent 1px),
        linear-gradient(to bottom, rgba(255,255,255,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}
.bg-grid-mask {
    mask-image: radial-gradient(circle at 50% 50%, black 10%, transparent 80%);
    -webkit-mask-image: radial-gradient(circle at 50% 50%, black 10%, transparent 80%);
}

/* ==========================================================================
   Logo Swap Logik (Hell / Dunkel Wechsel beim Scrollen)
   ========================================================================== */

/* Wenn der Header transparent ist (Startseite ganz oben) */
#main-header.is-transparent .logo-dark {
    display: none;
}
#main-header.is-transparent .logo-light {
    display: block;
}

/* Wenn der Header NICHT transparent ist (beim Scrollen & auf Unterseiten) */
#main-header:not(.is-transparent) .logo-dark {
    display: block;
}
#main-header:not(.is-transparent) .logo-light {
    display: none;
}