/* ==========================================================
   jhSAAR V0.9.5
   MOTION & INTERACTION UPGRADE
   ----------------------------------------------------------
   Bewusst subtil:
   - keine Tilt-Effekte auf Touch
   - keine Animation bei prefers-reduced-motion
   - keine Klickflächen werden überlagert
========================================================== */

:root {
    --motion-fast: 180ms;
    --motion-normal: 320ms;
    --motion-slow: 620ms;
    --ease-jh: cubic-bezier(.2,.75,.25,1);
}


/* ----------------------------------------------------------
   SCROLL PROGRESS
---------------------------------------------------------- */

.jhs-scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2000;

    width: 100%;
    height: 3px;

    transform: scaleX(0);
    transform-origin: left center;

    background:
        linear-gradient(
            90deg,
            var(--teal),
            var(--lime),
            var(--coral)
        );

    pointer-events: none;

    will-change: transform;
}


/* ----------------------------------------------------------
   HEADER
---------------------------------------------------------- */

.site-header {
    transition:
        box-shadow var(--motion-normal) ease,
        background var(--motion-normal) ease,
        transform var(--motion-normal) ease;
}

.site-header.is-scrolled {
    box-shadow: 0 12px 35px rgba(32,40,45,.07);
}

.brand-main {
    transition:
        transform var(--motion-normal) var(--ease-jh),
        letter-spacing var(--motion-normal) var(--ease-jh);
}

.brand:hover .brand-main {
    transform: translateY(-1px);
    letter-spacing: -.045em;
}

.brand-dot {
    display: inline-block;
    transform-origin: center;
    transition: transform .45s var(--ease-jh);
}

.brand:hover .brand-dot {
    transform: rotate(180deg) scale(1.25);
}

.main-nav a {
    overflow: hidden;
}

.main-nav a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;

    width: 5px;
    height: 5px;

    border-radius: 50%;
    background: var(--teal);

    opacity: 0;
    transform: translate(-50%, 7px) scale(.3);

    transition:
        opacity var(--motion-fast) ease,
        transform var(--motion-normal) var(--ease-jh);
}

.main-nav a:not(.active):hover::after {
    opacity: 1;
    transform: translate(-50%, 0) scale(1);
}


/* ----------------------------------------------------------
   BUTTONS
---------------------------------------------------------- */

.button {
    position: relative;
    isolation: isolate;
    overflow: hidden;

    transition:
        transform var(--motion-normal) var(--ease-jh),
        box-shadow var(--motion-normal) ease,
        background var(--motion-normal) ease,
        border-color var(--motion-normal) ease;
}

.button::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            105deg,
            transparent 20%,
            rgba(255,255,255,.28) 48%,
            transparent 76%
        );

    transform: translateX(-130%);
    transition: transform .65s var(--ease-jh);
}

.button:hover::before {
    transform: translateX(130%);
}

.button:hover {
    transform: translateY(-3px);
}

.button:active {
    transform: translateY(0) scale(.985);
}


/* ----------------------------------------------------------
   POINTER SPOTLIGHT
---------------------------------------------------------- */

.jhs-interactive {
    position: relative;
    isolation: isolate;
    --mouse-x: 50%;
    --mouse-y: 50%;
}

.jhs-interactive::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 5;

    border-radius: inherit;

    background:
        radial-gradient(
            260px circle at var(--mouse-x) var(--mouse-y),
            rgba(255,255,255,.17),
            transparent 58%
        );

    opacity: 0;
    pointer-events: none;

    transition: opacity var(--motion-normal) ease;
}

@media (hover:hover) and (pointer:fine) {
    .jhs-interactive:hover::after {
        opacity: .48;
    }
}


/* ----------------------------------------------------------
   SERVICE CARDS
---------------------------------------------------------- */

.service-card {
    transition:
        transform var(--motion-normal) var(--ease-jh),
        box-shadow var(--motion-normal) ease,
        filter var(--motion-normal) ease;
}

.service-card .service-icon {
    display: inline-block;
    transform-origin: center;
    transition:
        transform .5s var(--ease-jh),
        opacity .3s ease;
}

.service-card:hover .service-icon {
    transform: translateY(-5px) rotate(-5deg) scale(1.08);
}

.service-card h3 {
    transition: transform var(--motion-normal) var(--ease-jh);
}

.service-card:hover h3 {
    transform: translateX(4px);
}

.service-card a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    transition:
        gap var(--motion-normal) var(--ease-jh),
        transform var(--motion-normal) var(--ease-jh);
}

.service-card:hover a {
    gap: 10px;
    transform: translateX(3px);
}


/* ----------------------------------------------------------
   STARTSEITE PROJEKTE
---------------------------------------------------------- */

.project-card {
    transition:
        transform var(--motion-normal) var(--ease-jh),
        box-shadow var(--motion-normal) ease,
        border-color var(--motion-normal) ease;
}

.project-visual {
    overflow: hidden;
}

.project-visual img,
.project-placeholder {
    transition:
        transform .7s var(--ease-jh),
        filter .5s ease;
}

.project-card:hover .project-visual img,
.project-card:hover .project-placeholder {
    transform: scale(1.035);
}

.project-info h3 {
    transition: transform var(--motion-normal) var(--ease-jh);
}

.project-card:hover .project-info h3 {
    transform: translateX(4px);
}


/* ----------------------------------------------------------
   PORTFOLIO / SID 200
---------------------------------------------------------- */

.portfolio-card {
    transition:
        transform .42s var(--ease-jh),
        box-shadow .42s ease,
        border-color .42s ease;
}

@media (hover:hover) and (pointer:fine) {
    .portfolio-card:hover {
        transform: translateY(-7px);
        box-shadow: 0 30px 90px rgba(32,40,45,.14);
        border-color: rgba(0,166,166,.22);
    }
}

.portfolio-browser {
    transition: background .4s ease;
}

.portfolio-card:hover .portfolio-browser {
    background: #e7ebe7;
}

.browser-bar {
    transition:
        transform .4s var(--ease-jh),
        box-shadow .4s ease;
}

.portfolio-card:hover .browser-bar {
    transform: translateY(-2px);
    box-shadow: 0 7px 20px rgba(20,30,35,.06);
}

.browser-dots i {
    transition:
        transform .35s var(--ease-jh),
        opacity .35s ease;
}

.portfolio-card:hover .browser-dots i:nth-child(1) {
    transform: translateY(-2px);
}
.portfolio-card:hover .browser-dots i:nth-child(2) {
    transform: translateY(-2px);
    transition-delay: 45ms;
}
.portfolio-card:hover .browser-dots i:nth-child(3) {
    transform: translateY(-2px);
    transition-delay: 90ms;
}

.portfolio-copy h2 {
    transition:
        transform .4s var(--ease-jh),
        color .35s ease;
}

.portfolio-card:hover .portfolio-copy h2 {
    transform: translateX(5px);
    color: var(--teal-dark);
}


/* ----------------------------------------------------------
   WEB & BETREUUNG
---------------------------------------------------------- */

.web-box {
    overflow: hidden;
}

.web-box .web-icon {
    display: inline-block;
    transition:
        transform .5s var(--ease-jh),
        filter .35s ease;
}

.web-box:hover .web-icon {
    transform: translateY(-5px) rotate(4deg) scale(1.08);
}

.web-box h2 {
    transition: transform .35s var(--ease-jh);
}

.web-box:hover h2 {
    transform: translateX(4px);
}

.process-list > div {
    position: relative;
    transition:
        padding-left .35s var(--ease-jh),
        background .35s ease;
}

.process-list > div::before {
    content: "";
    position: absolute;
    left: 0;
    top: 18%;
    bottom: 18%;
    width: 3px;

    border-radius: 999px;
    background: var(--teal);

    transform: scaleY(0);
    transform-origin: center;

    transition: transform .35s var(--ease-jh);
}

.process-list > div:hover {
    padding-left: 12px;
    background: rgba(0,166,166,.025);
}

.process-list > div:hover::before {
    transform: scaleY(1);
}


/* ----------------------------------------------------------
   GEDÖNS / NEWS
---------------------------------------------------------- */

.gedoens-card {
    overflow: hidden;
}

.gedoens-card h2 {
    transition:
        transform .35s var(--ease-jh),
        color .35s ease;
}

.gedoens-card:hover h2 {
    transform: translateX(4px);
}

.gedoens-meta span {
    display: inline-block;
    transition:
        transform .35s var(--ease-jh),
        letter-spacing .35s var(--ease-jh);
}

.gedoens-card:hover .gedoens-meta span {
    transform: translateY(-2px);
    letter-spacing: .15em;
}

.gedoens-footer > a {
    display: inline-flex;
    transition:
        transform .3s var(--ease-jh),
        letter-spacing .3s var(--ease-jh);
}

.gedoens-card:hover .gedoens-footer > a {
    transform: translateX(4px);
    letter-spacing: .025em;
}

.news-list article {
    transition:
        padding-left .35s var(--ease-jh),
        background .35s ease,
        border-color .35s ease;
}

.news-list article:hover {
    padding-left: 12px;
    padding-right: 12px;
    background: rgba(255,255,255,.035);
    border-color: rgba(217,242,79,.30);
}


/* ----------------------------------------------------------
   KONTAKT
---------------------------------------------------------- */

.contact-mini-card {
    transition:
        transform .38s var(--ease-jh),
        box-shadow .38s ease;
}

@media (hover:hover) and (pointer:fine) {
    .contact-mini-card:hover {
        transform: translateY(-5px) rotate(-.35deg);
        box-shadow: 0 18px 45px rgba(32,40,45,.10);
    }

    .contact-mini-card:nth-child(even):hover {
        transform: translateY(-5px) rotate(.35deg);
    }
}

.contact-mini-card > span {
    transition:
        transform .4s var(--ease-jh),
        opacity .4s ease;
}

.contact-mini-card:hover > span {
    transform: scale(1.16) rotate(-5deg);
    opacity: 1;
}

.contact-field input,
.contact-field textarea {
    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease,
        transform .22s var(--ease-jh);
}

.contact-field input:hover,
.contact-field textarea:hover {
    transform: translateY(-1px);
}


/* ----------------------------------------------------------
   HERO CHIPS
---------------------------------------------------------- */

.art-chip {
    transition:
        transform .42s var(--ease-jh),
        box-shadow .42s ease,
        filter .42s ease;
}

@media (hover:hover) and (pointer:fine) {
    .hero-art:hover .chip-one {
        transform: rotate(11deg) translate(-4px,-3px);
    }

    .hero-art:hover .chip-two {
        transform: rotate(-8deg) translate(5px,-2px);
    }

    .hero-art:hover .chip-three {
        transform: rotate(-4deg) translate(-2px,4px);
    }
}


/* ----------------------------------------------------------
   REVEAL VARIANTS
---------------------------------------------------------- */

.reveal-item {
    --reveal-x: 0px;
    --reveal-y: 26px;
    --reveal-scale: .985;
}

.reveal-item.reveal-from-left {
    --reveal-x: -34px;
    --reveal-y: 8px;
}

.reveal-item.reveal-from-right {
    --reveal-x: 34px;
    --reveal-y: 8px;
}

.reveal-item.reveal-soft-scale {
    --reveal-x: 0px;
    --reveal-y: 18px;
    --reveal-scale: .965;
}


/* ----------------------------------------------------------
   VERY SUBTLE BACKGROUND LIFE
---------------------------------------------------------- */

body::after {
    content: "";
    position: fixed;
    z-index: -1;
    right: -160px;
    bottom: -180px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,166,166,.075),
            rgba(217,242,79,.025) 48%,
            transparent 70%
        );

    pointer-events: none;

    animation: jhsBackgroundBreath 12s ease-in-out infinite alternate;
}

@keyframes jhsBackgroundBreath {
    from {
        transform: translate3d(0,0,0) scale(.94);
        opacity: .65;
    }
    to {
        transform: translate3d(-35px,-22px,0) scale(1.08);
        opacity: 1;
    }
}


/* ----------------------------------------------------------
   TOUCH + ACCESSIBILITY
---------------------------------------------------------- */

@media (hover:none), (pointer:coarse) {
    .jhs-interactive::after {
        display: none;
    }

    .button:hover,
    .service-card:hover,
    .portfolio-card:hover,
    .gedoens-card:hover,
    .web-box:hover,
    .contact-mini-card:hover {
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }

    .jhs-scroll-progress {
        display: none;
    }
}