/* ==========================================================================
   Eigene CSS-Tweaks für jakobseper.com
   Wird vom Plugin "Tweaks" nach dem Theme-CSS geladen und überschreibt es.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Easter Eggs (ausgelöst per JS in tweaks.js / Playground-Buttons / Konami)
   -------------------------------------------------------------------------- */

.tweaks-barrel-roll {
    animation: tweaks-barrel-roll 1s ease-in-out;
}
@keyframes tweaks-barrel-roll {
    from { transform: rotate( 0 ); }
    to   { transform: rotate( 360deg ); }
}

.tweaks-shake {
    animation: tweaks-shake 0.6s both;
}
@keyframes tweaks-shake {
    10%, 90%        { transform: translateX( -1px ); }
    20%, 80%        { transform: translateX( 2px ); }
    30%, 50%, 70%   { transform: translateX( -4px ); }
    40%, 60%        { transform: translateX( 4px ); }
}

/* Tier spaziert durchs Bild (Playground-Gag) */
.tweaks-critter {
    position: fixed;
    left: -12vw;
    z-index: 9999;
    pointer-events: none;
    animation: tweaks-walk 6s linear forwards;
}
@keyframes tweaks-walk {
    from { transform: translateX( 0 ) scaleX( -1 ); }      /* gespiegelt = blickt in Laufrichtung */
    to   { transform: translateX( 130vw ) scaleX( -1 ); }
}
.tweaks-critter-i {
    display: inline-block;
    font-size: 2.6rem;
    line-height: 1;
    animation: tweaks-bob 0.45s ease-in-out infinite;
}
@keyframes tweaks-bob {
    0%, 100% { transform: translateY( 0 ); }
    50%      { transform: translateY( -8px ); }
}

.tweaks-tada {
    animation: tweaks-tada 1s both;
}
@keyframes tweaks-tada {
    0%                 { transform: scale3d( 1, 1, 1 ); }
    10%, 20%           { transform: scale3d( 0.9, 0.9, 0.9 ) rotate( -3deg ); }
    30%, 50%, 70%, 90% { transform: scale3d( 1.1, 1.1, 1.1 ) rotate( 3deg ); }
    40%, 60%, 80%      { transform: scale3d( 1.1, 1.1, 1.1 ) rotate( -3deg ); }
    100%               { transform: scale3d( 1, 1, 1 ); }
}

/* --------------------------------------------------------------------------
   Buttons / Playground / Kontaktformular (bewusst minimalistisch)
   -------------------------------------------------------------------------- */

.tweaks-btn {
    display: inline-block;
    padding: 0.5rem 1rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 0.2s ease, transform 0.1s ease;
}
.tweaks-btn:hover  { opacity: 0.7; }
.tweaks-btn:active { transform: translateY( 1px ); }

.tweaks-playground {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 1rem 0;
}

.tweaks-form {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 32rem;
}
.tweaks-form label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}
.tweaks-form input,
.tweaks-form textarea {
    padding: 0.5rem;
    border: 1px solid currentColor;
    border-radius: 6px;
    background: transparent;
    color: inherit;
    font: inherit;
}
.tweaks-form .tweaks-btn {
    align-self: flex-start;
}

/* Honeypot: für Menschen unsichtbar, für Bots ein Köder. */
.tweaks-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.tweaks-notice {
    padding: 0.6rem 0.9rem;
    border-radius: 6px;
}
.tweaks-notice--ok  { border: 1px solid currentColor; }
.tweaks-notice--err { border: 1px solid currentColor; opacity: 0.85; }