/* Malerei Colak — Custom Styles */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 6rem;
}

/* Selection color */
::selection {
    background-color: #007CC2;
    color: #fff;
}

/* ===== HEADER STATES ===== */

/*
 * Default (solid) state: always-visible dark header.
 * The header is no longer transparent on load — it sits
 * as a solid dark bar at all times, making the hero image
 * visible immediately below it without text-contrast issues.
 */
.header-solid {
    background-color: #0e0e10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-solid .nav-link {
    color: rgba(255, 255, 255, 0.80);
}

.header-solid .nav-link:hover {
    color: #fff;
}

.header-solid .nav-link.nav-active {
    color: #fff;
}

.header-solid .burger-line {
    background-color: #fff;
}

.header-solid .header-logo {
    filter: brightness(0) invert(1);
}

/* Scrolled state — keeps same dark look, adds slight shadow depth */
.header-scrolled {
    background-color: #0e0e10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
}

.header-scrolled .nav-link {
    color: rgba(255, 255, 255, 0.80);
}

.header-scrolled .nav-link:hover,
.header-scrolled .nav-link.nav-active {
    color: #fff;
}

.header-scrolled .burger-line {
    background-color: #fff;
}

.header-scrolled .header-logo {
    filter: brightness(0) invert(1);
}

/* Legacy transparent class — redirect to solid so nothing breaks */
.header-transparent {
    background-color: #0e0e10;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.header-transparent .nav-link {
    color: rgba(255, 255, 255, 0.80);
}

.header-transparent .nav-link:hover {
    color: #fff;
}

.header-transparent .burger-line {
    background-color: #fff;
}

.header-transparent .header-logo {
    filter: brightness(0) invert(1);
}

/* ===== HERO — BOLD/INDUSTRIAL ===== */

/* Diagonal accent slice at bottom of hero */
.hero-diagonal {
    clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%);
}

/* Left-heavy gradient that darkens strongly on the left,
   fades to nearly transparent on the right so the image reads. */
.hero-gradient {
    background: linear-gradient(
        105deg,
        rgba(10, 10, 12, 0.92) 0%,
        rgba(10, 10, 12, 0.78) 35%,
        rgba(10, 10, 12, 0.40) 65%,
        rgba(10, 10, 12, 0.10) 100%
    );
}

/* Accent bar decorating the hero H1 */
.hero-label {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
}

.hero-label::before {
    content: '';
    display: block;
    width: 2.5rem;
    height: 3px;
    background-color: #007CC2;
    flex-shrink: 0;
}

/* Hero gradient overlay — fallback for pages that still use .hero-overlay */
.hero-overlay {
    background: linear-gradient(
        to right,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.5) 50%,
        rgba(0, 0, 0, 0.3) 100%
    );
}

/* ===== HEADING DECORATION ===== */

/* Subtle line decoration for headings */
.heading-line::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background-color: #007CC2;
    margin-top: 1rem;
}

.heading-line-center::after {
    content: '';
    display: block;
    width: 3rem;
    height: 3px;
    background-color: #007CC2;
    margin: 1rem auto 0;
}

/* ===== IMAGE HOVER ZOOM ===== */
.img-zoom {
    overflow: hidden;
}

.img-zoom img,
.img-zoom > div {
    transition: transform 0.6s cubic-bezier(0.33, 0, 0.2, 1);
}

.img-zoom:hover img,
.img-zoom:hover > div {
    transform: scale(1.05);
}

/* ===== FADE-UP SCROLL ANIMATION ===== */
.fade-up {
    opacity: 0;
    transform: translateY(2rem);
    transition: opacity 0.7s cubic-bezier(0.33, 0, 0.2, 1),
                transform 0.7s cubic-bezier(0.33, 0, 0.2, 1);
}

.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered delays */
.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }

/* ===== SERVICE CARDS ===== */
.service-card {
    transition: transform 0.3s cubic-bezier(0.33, 0, 0.2, 1),
                box-shadow 0.3s cubic-bezier(0.33, 0, 0.2, 1);
}

.service-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

/* ===== SERVICE ROWS (editorial list) ===== */
.service-row {
    position: relative;
    overflow: hidden;
    transition: color 0.4s cubic-bezier(0.33, 0, 0.2, 1);
}

.service-row::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: #fafaf9;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.55s cubic-bezier(0.33, 0, 0.2, 1);
    z-index: 0;
}

.service-row > * {
    position: relative;
    z-index: 1;
}

.service-row:hover::before {
    transform: scaleX(1);
}

/* ===== TYPOGRAPHY REFINEMENTS ===== */
.font-serif {
    font-feature-settings: "kern" 1, "liga" 1;
    font-optical-sizing: auto;
}

/* ===== MISC ===== */

/* Counter animation placeholder */
.counter-value {
    font-variant-numeric: tabular-nums;
}

/* Form input focus */
input:focus,
textarea:focus,
select:focus {
    outline: 2px solid #007CC2;
    outline-offset: 2px;
    border-color: #007CC2;
}

/* Focus indicators for interactive elements */
a:focus-visible,
button:focus-visible {
    outline: 2px solid #007CC2;
    outline-offset: 2px;
}

/* Responsive image containers */
.aspect-project {
    aspect-ratio: 4 / 3;
}

.aspect-hero {
    aspect-ratio: 16 / 9;
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
    .fade-up {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .img-zoom img,
    .img-zoom > div {
        transition: none;
    }
    .service-card {
        transition: none;
    }
    .service-row,
    .service-row::before {
        transition: none;
    }
}