/* Optimized CSS for alexandermunz.de */
/* Critical CSS - loaded inline, rest deferred */

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
    overflow-x: hidden;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
}

/* Animation Utility Classes */
.reveal {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s cubic-bezier(0.5, 0, 0, 1);
}

.reveal.active {
    opacity: 1;
    transform: translateY(0);
}

/* Stagger delays for grid items */
.delay-100 {
    transition-delay: 100ms;
}

.delay-200 {
    transition-delay: 200ms;
}

.delay-300 {
    transition-delay: 300ms;
}

.delay-400 {
    transition-delay: 400ms;
}

@keyframes fade-in-up {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }

    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fade-in-up {
    animation: fade-in-up 1s cubic-bezier(0.16, 1, 0.3, 1);
}

/* LIQUID GLASS BUTTONS */
.btn-liquid {
    background: linear-gradient(135deg, rgba(37, 99, 235, 0.95), rgba(147, 51, 234, 0.95));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-top: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06), inset 0 0 20px rgba(255, 255, 255, 0.1);
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    color: white !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    text-decoration: none;
    display: inline-block;
}

.btn-liquid:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 15px -3px rgba(37, 99, 235, 0.4), 0 4px 6px -2px rgba(147, 51, 234, 0.3), inset 0 0 30px rgba(255, 255, 255, 0.25);
    filter: brightness(1.1);
    border-top-color: rgba(255, 255, 255, 0.8);
}

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

/* Responsive Images */
img {
    max-width: 100%;
    height: auto;
}

/* Performance: will-change for animated elements */
.reveal,
.btn-liquid,
#navbar {
    will-change: transform, opacity;
}

/* Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* Advanced Honeypot Protection */
/* These fields are invisible to users but visible to bots */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    top: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    opacity: 0 !important;
    pointer-events: none !important;
    overflow: hidden !important;
}

/* Ensure honeypot fields are never visible */
input.hp-field,
input[name="_honey"],
input[name="website"],
input[name="confirm_email"],
input[name="phone_verify"] {
    display: block !important;
    /* Bots check for display:none */
    position: absolute !important;
    left: -9999px !important;
    width: 0 !important;
    height: 0 !important;
    opacity: 0 !important;
    visibility: hidden !important;
}