/* ================================================================
   Morphing Blob Hero – Stylesheet v1.0.0
================================================================ */

/* ── Wrapper ──────────────────────────────────────────────────── */
.mbh-wrapper {
    position:   relative;
    width:      100%;
    height:     100vh;
    overflow:   hidden;
    background: #08001a;
    display:    flex;
    align-items:     center;
    justify-content: center;
}

/* ── Canvas (nimmt gesamten Wrapper ein) ─────────────────────── */
.mbh-canvas {
    position: absolute;
    inset:    0;
    width:    100% !important;
    height:   100% !important;
    display:  block;
    cursor:   crosshair;
}

/* ════════════════════════════════════════════════════════════════
   LAYOUT-VARIANTEN
════════════════════════════════════════════════════════════════ */

/* Mitte (Standard) */
.mbh-layout--center .mbh-text {
    position:   absolute;
    inset:      0;
    display:    flex;
    flex-direction: column;
    align-items:    center;
    justify-content: center;
    text-align: center;
    padding:    2rem;
    pointer-events: none;   /* Canvas bleibt klickbar */
    z-index:    10;
}
.mbh-layout--center .mbh-text * { pointer-events: auto; }

/* Links (Blob rechts) */
.mbh-layout--left .mbh-text {
    position:   absolute;
    left:       0;
    top:        0;
    bottom:     0;
    width:      45%;
    display:    flex;
    flex-direction: column;
    align-items:    flex-start;
    justify-content: center;
    padding:    3rem 2.5rem 3rem 3rem;
    text-align: left;
    z-index:    10;
}

/* Rechts (Blob links) */
.mbh-layout--right .mbh-text {
    position:   absolute;
    right:      0;
    top:        0;
    bottom:     0;
    width:      45%;
    display:    flex;
    flex-direction: column;
    align-items:    flex-start;
    justify-content: center;
    padding:    3rem 3rem 3rem 2rem;
    text-align: left;
    z-index:    10;
}

/* Unten */
.mbh-layout--bottom .mbh-text {
    position:   absolute;
    bottom:     0;
    left:       0;
    right:      0;
    display:    flex;
    flex-direction: column;
    align-items:    center;
    padding:    3rem 2rem 4rem;
    text-align: center;
    background: linear-gradient(transparent, rgba(0,0,0,.65));
    z-index:    10;
}

/* ════════════════════════════════════════════════════════════════
   TYPOGRAFIE
════════════════════════════════════════════════════════════════ */
.mbh-text {
    color:          #ffffff;
    /* Glassmorphism-Backdrop nur wenn Text über Blob liegt */
}

.mbh-heading {
    font-size:      clamp(2rem, 5vw, 4.2rem);
    font-weight:    700;
    line-height:    1.1;
    letter-spacing: -0.02em;
    margin:         0 0 1rem;
    color:          inherit;

    /* Subtiler Text-Glow passend zum Blob */
    text-shadow: 0 0 40px rgba(124, 58, 237, 0.5),
                 0 0 80px rgba(124, 58, 237, 0.2);

    /* Einblende-Animation */
    animation: mbhFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.15s;
}

.mbh-subheading {
    font-size:   clamp(1rem, 2vw, 1.25rem);
    font-weight: 400;
    line-height: 1.65;
    max-width:   520px;
    margin:      0 0 2rem;
    color:       rgba(255, 255, 255, 0.75);
    animation:   mbhFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.3s;
}

/* ── Button ──────────────────────────────────────────────────── */
.mbh-btn {
    display:         inline-flex;
    align-items:     center;
    gap:             0.5rem;
    padding:         0.85rem 2.2rem;
    background:      rgba(124, 58, 237, 0.15);
    border:          1px solid rgba(124, 58, 237, 0.55);
    border-radius:   9999px;
    color:           #ffffff;
    font-size:       1rem;
    font-weight:     500;
    letter-spacing:  0.02em;
    text-decoration: none;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor:          pointer;
    transition:      background 0.25s ease,
                     border-color 0.25s ease,
                     transform 0.2s ease,
                     box-shadow 0.25s ease;

    animation: mbhFadeUp 0.9s cubic-bezier(0.16, 1, 0.3, 1) both;
    animation-delay: 0.45s;
}

.mbh-btn:hover {
    background:   rgba(124, 58, 237, 0.40);
    border-color: rgba(124, 58, 237, 0.9);
    transform:    translateY(-2px);
    box-shadow:   0 8px 30px rgba(124, 58, 237, 0.35);
    color:        #ffffff;
    text-decoration: none;
}

.mbh-btn:active {
    transform: translateY(0);
}

.mbh-btn-arrow {
    display:    inline-block;
    transition: transform 0.2s ease;
}

.mbh-btn:hover .mbh-btn-arrow {
    transform: translateX(4px);
}

/* ── Interaktions-Hinweis ────────────────────────────────────── */
.mbh-hint {
    position:    absolute;
    bottom:      1.75rem;
    left:        50%;
    transform:   translateX(-50%);
    display:     flex;
    align-items: center;
    gap:         0.5rem;
    font-size:   0.78rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color:       rgba(255, 255, 255, 0.38);
    z-index:     10;
    white-space: nowrap;
    animation:   mbhFadeIn 1.5s ease both;
    animation-delay: 1.0s;
    user-select: none;
}

.mbh-hint-dot {
    width:         6px;
    height:        6px;
    border-radius: 50%;
    background:    rgba(124, 58, 237, 0.7);
    animation:     mbhPulse 2s ease-in-out infinite;
}

/* ════════════════════════════════════════════════════════════════
   KEYFRAMES
════════════════════════════════════════════════════════════════ */
@keyframes mbhFadeUp {
    from {
        opacity:   0;
        transform: translateY(22px);
    }
    to {
        opacity:   1;
        transform: translateY(0);
    }
}

@keyframes mbhFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes mbhPulse {
    0%, 100% { opacity: 0.5; transform: scale(1);   }
    50%       { opacity: 1.0; transform: scale(1.4); }
}

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
    .mbh-layout--left .mbh-text,
    .mbh-layout--right .mbh-text {
        /* Auf Mobile: Text immer mittig unten */
        position:       absolute;
        width:          100%;
        left:           0;
        right:          0;
        top:            auto;
        bottom:         0;
        padding:        2rem 1.5rem 5rem;
        align-items:    center;
        text-align:     center;
        background:     linear-gradient(transparent, rgba(0,0,0,.7));
    }

    .mbh-heading {
        font-size: clamp(1.6rem, 7vw, 2.8rem);
    }

    .mbh-subheading {
        font-size: 0.95rem;
    }

    .mbh-hint {
        font-size: 0.7rem;
        bottom:    1.2rem;
    }
}

@media (max-width: 480px) {
    .mbh-heading {
        font-size:      clamp(1.4rem, 8vw, 2.2rem);
        letter-spacing: -0.01em;
    }
    .mbh-btn {
        padding:   0.75rem 1.75rem;
        font-size: 0.9rem;
    }
}

/* ── Reduced Motion ──────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .mbh-heading,
    .mbh-subheading,
    .mbh-btn,
    .mbh-hint {
        animation: none;
        opacity:   1;
        transform: none;
    }
    .mbh-hint-dot {
        animation: none;
    }
}