/*
 * Homepage motion layer.
 * Every effect is opt-in through the "kk-motion" class that home-motion.js adds
 * to <html>: without JavaScript, or with "reduce motion" enabled, the page stays static
 * and fully visible.
 */

/* ---------- Scroll progress bar ---------- */
.kk-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--secondary);
    transform-origin: 0 50%;
    transform: scaleX(0);
    z-index: 9999;
    pointer-events: none;
}

/* ---------- Hero ---------- */
.gyt-inner-hero {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

.kk-aurora {
    position: absolute;
    border-radius: 50%;
    filter: blur(60px);
    opacity: .45;
    z-index: -1;
    pointer-events: none;
}
.kk-aurora--orange { width: 420px; height: 420px; background: #ffb58a; top: -120px; right: 8%; }
.kk-aurora--navy { width: 520px; height: 520px; background: #9cc3ea; bottom: -260px; left: -120px; }
.kk-aurora--light { width: 300px; height: 300px; background: #fff; top: 30%; left: 40%; opacity: .6; }

.kk-motion .kk-aurora--orange { animation: kk-drift-a 18s ease-in-out infinite alternate; }
.kk-motion .kk-aurora--navy { animation: kk-drift-b 22s ease-in-out infinite alternate; }
.kk-motion .kk-aurora--light { animation: kk-drift-c 15s ease-in-out infinite alternate; }

@keyframes kk-drift-a { to { transform: translate(-90px, 70px) scale(1.15); } }
@keyframes kk-drift-b { to { transform: translate(120px, -60px) scale(.9); } }
@keyframes kk-drift-c { to { transform: translate(-60px, -40px) scale(1.2); } }

/* Headline and subtitle rise in as whole blocks. The text is never split into
   pieces, so Google Translate still translates the full sentence. */
.kk-motion .gyt-inner-hero__content > * {
    opacity: 0;
    transform: translateY(24px);
    animation: kk-rise .8s cubic-bezier(.2, .7, .2, 1) forwards;
}
.kk-motion .gyt-inner-hero__content > :nth-child(2) { animation-delay: .25s; }
.kk-motion .gyt-inner-hero__content > :nth-child(3) { animation-delay: .45s; }
@keyframes kk-rise { to { opacity: 1; transform: none; } }

/* Hand-drawn marker under "sicheren Kredit". */
.kk-marker {
    position: relative;
    white-space: nowrap;
}
.kk-marker svg {
    position: absolute;
    left: -2%;
    bottom: -.28em;
    width: 104%;
    height: .45em;
    overflow: visible;
    pointer-events: none;
}
.kk-marker path {
    fill: none;
    stroke: var(--secondary);
    stroke-width: 7;
    stroke-linecap: round;
}
.kk-motion .kk-marker path {
    stroke-dasharray: 420;
    stroke-dashoffset: 420;
    animation: kk-draw 1s cubic-bezier(.6, 0, .2, 1) .8s forwards;
}
@keyframes kk-draw { to { stroke-dashoffset: 0; } }

/* Floating image and info chips. */
.gyt-inner-hero__content_img { position: relative; }
.kk-motion .gyt-inner-hero__img figure { animation: kk-float 7s ease-in-out infinite; }
@keyframes kk-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}

.kk-chip {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    background: #fff;
    color: var(--primary);
    font-weight: 700;
    font-size: 15px;
    padding: 10px 16px 10px 10px;
    border-radius: 999px;
    box-shadow: 0 10px 30px rgba(0, 44, 90, .15);
    white-space: nowrap;
    z-index: 2;
}
.kk-chip__icon {
    display: grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--secondary);
    color: #fff;
    font-size: 15px;
}
.kk-chip--top { top: 14%; left: 0; }
.kk-chip--bottom { bottom: 12%; right: 0; }
.kk-motion .kk-chip {
    opacity: 0;
    animation: kk-pop .6s cubic-bezier(.3, 1.6, .5, 1) forwards, kk-bob 5s ease-in-out infinite;
}
.kk-motion .kk-chip--top { animation-delay: 1.4s, 2s; }
.kk-motion .kk-chip--bottom { animation-delay: 1.7s, 2.6s; }
@keyframes kk-pop {
    from { opacity: 0; transform: scale(.6) translateY(10px); }
    to { opacity: 1; transform: none; }
}
@keyframes kk-bob {
    0%, 100% { translate: 0 0; }
    50% { translate: 0 -8px; }
}
@media (max-width: 765px) {
    .kk-chip { font-size: 13px; padding: 7px 12px 7px 7px; }
    .kk-chip__icon { width: 24px; height: 24px; font-size: 12px; }
    .kk-chip--top { top: 4%; left: 4%; }
    .kk-chip--bottom { bottom: 4%; right: 4%; }
}

/* ---------- "Wenn die Bank NEIN sagt, sagen wir JA." ---------- */
.kk-no, .kk-yes {
    position: relative;
    display: inline-block;
}
.kk-no::after {
    content: "";
    position: absolute;
    left: -6%;
    right: -6%;
    top: 52%;
    height: .14em;
    background: #d6362b;
    border-radius: 4px;
    transform: rotate(-8deg) scaleX(0);
    transform-origin: 0 50%;
}
.kk-yes {
    color: var(--secondary);
    padding: 0 .2em;
    border: .09em solid currentColor;
    border-radius: .2em;
    transform: rotate(-6deg);
    margin-left: .1em;
}
.kk-motion .kk-stamp .kk-no { transition: opacity .4s .5s; }
.kk-motion .kk-stamp .kk-yes { opacity: 0; transform: rotate(-6deg) scale(2.4); }

.kk-motion .kk-stamp.is-visible .kk-no { opacity: .55; }
.kk-motion .kk-stamp.is-visible .kk-no::after { animation: kk-strike .45s cubic-bezier(.7, 0, .3, 1) .2s forwards; }
.kk-motion .kk-stamp.is-visible .kk-yes { animation: kk-stamp .45s cubic-bezier(.5, 0, .7, 1.4) .8s forwards; }
.kk-motion .kk-stamp.is-visible { animation: kk-shake .3s ease-out 1.2s; }

@keyframes kk-strike { to { transform: rotate(-8deg) scaleX(1); } }
@keyframes kk-stamp {
    0% { opacity: 0; transform: rotate(-6deg) scale(2.4); }
    70% { opacity: 1; transform: rotate(-6deg) scale(.92); }
    100% { opacity: 1; transform: rotate(-6deg) scale(1); }
}
@keyframes kk-shake {
    0%, 100% { transform: none; }
    30% { transform: translate(2px, 1px); }
    60% { transform: translate(-2px, -1px); }
}

/* ---------- Scroll reveal (classes added by home-motion.js) ---------- */
.kk-motion .kk-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    transition-delay: calc(var(--i, 0) * 110ms);
}
.kk-motion .kk-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* Benefit check marks light up in sequence. */
.kk-motion .benefit-item.kk-reveal .check-icon { transform: scale(0); transition: transform .5s cubic-bezier(.3, 1.8, .5, 1); }
.kk-motion .benefit-item.kk-reveal.is-visible .check-icon {
    transform: scale(1);
    transition-delay: calc(var(--i, 0) * 110ms + 250ms);
}

/* ---------- Cards: lift on hover ---------- */
.advantage-card, .testimonial-card, .stat-box, .features--cont {
    transition: transform .3s ease, box-shadow .3s ease;
}
.advantage-card:hover, .testimonial-card:hover, .stat-box:hover {
    transform: translateY(-6px);
    box-shadow: 0 16px 34px rgba(0, 44, 90, .12);
}
.features--cont:hover .benefit--icon-ok img { animation: kk-wiggle .6s ease; }
@keyframes kk-wiggle {
    25% { transform: rotate(-8deg) scale(1.08); }
    75% { transform: rotate(6deg) scale(1.08); }
}

/* ---------- Buttons: light sweep ---------- */
.hero-cta-button, .promo-button, .impact-button {
    position: relative;
    overflow: hidden;
}
.promo-button { display: inline-block; }
.kk-motion .hero-cta-button::after, .kk-motion .promo-button::after, .kk-motion .impact-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: -60%;
    width: 40%;
    height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .45), transparent);
    transform: skewX(-20deg);
    animation: kk-sweep 4.5s ease-in-out 2.5s infinite;
    pointer-events: none;
}
@keyframes kk-sweep {
    0% { left: -60%; }
    25%, 100% { left: 130%; }
}

/* ---------- Reduced motion: everything static and visible ---------- */
@media (prefers-reduced-motion: reduce) {
    .kk-aurora, .kk-chip, .gyt-inner-hero__content > *, .kk-marker path, .gyt-inner-hero__img figure,
    .kk-reveal, .kk-yes, .kk-no, .kk-no::after, .check-icon {
        animation: none !important;
        transition: none !important;
        opacity: 1 !important;
    }
    .kk-marker path { stroke-dashoffset: 0 !important; }
    .kk-no::after { transform: rotate(-8deg) scaleX(1) !important; }
    .kk-yes { transform: rotate(-6deg) !important; }
    .kk-reveal, .check-icon, .gyt-inner-hero__content > * { transform: none !important; }
    .kk-progress, .hero-cta-button::after, .promo-button::after, .impact-button::after { display: none; }
}