/* ================================================
   HAIRLOFT HALLOWEEN THEME 2025 - SPOOKY EDITION
   ================================================ */

/* Hexenmütze auf dem ersten Buchstaben "H" vom Logo */
.logo {
    position: relative;
}

.logo::before {
    content: '🎃';
    position: absolute;
    top: -18px;
    left: -2px;
    font-size: 1.3rem;
    animation: float-pumpkin 3s ease-in-out infinite;
}

/* Sanfte Schwebe-Animation für den Kürbis */
@keyframes float-pumpkin {
    0%, 100% {
        transform: translateY(0px) rotate(-5deg);
    }
    50% {
        transform: translateY(-5px) rotate(5deg);
    }
}

/* ================================================
   GRUSELIGER HERO HEADER
   ================================================ */

/* Dunklerer, gruseligerer Overlay-Filter */
#hero {
    position: relative;
    background: linear-gradient(135deg,
        rgba(0, 0, 0, 0.9) 0%,
        rgba(20, 0, 30, 0.85) 50%,
        rgba(0, 0, 0, 0.9) 100%),
        url(/images/hairloft_header.jpg) center/cover !important;
    filter: contrast(1.1) brightness(0.85);
}

/* Nebel-Effekt (unterer Bereich) */
#hero::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 300px;
    background:
        linear-gradient(to top,
            rgba(40, 10, 60, 0.8) 0%,
            rgba(20, 5, 30, 0.6) 40%,
            transparent 100%);
    animation: fog-move 8s ease-in-out infinite;
    pointer-events: none;
    z-index: 1;
}

@keyframes fog-move {
    0%, 100% {
        opacity: 0.7;
        transform: translateX(0);
    }
    50% {
        opacity: 0.9;
        transform: translateX(20px);
    }
}

/* Spinnennetz - Oben Links */
#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 300px;
    height: 300px;
    background:
        radial-gradient(circle at 0% 0%,
            transparent 0%,
            transparent 48%,
            rgba(200, 200, 200, 0.3) 49%,
            rgba(200, 200, 200, 0.3) 51%,
            transparent 52%),
        linear-gradient(45deg,
            transparent 0%,
            transparent 48%,
            rgba(200, 200, 200, 0.2) 49%,
            rgba(200, 200, 200, 0.2) 51%,
            transparent 52%),
        linear-gradient(-45deg,
            transparent 0%,
            transparent 48%,
            rgba(200, 200, 200, 0.2) 49%,
            rgba(200, 200, 200, 0.2) 51%,
            transparent 52%);
    opacity: 0.6;
    pointer-events: none;
    z-index: 2;
    animation: web-sway 4s ease-in-out infinite;
}

@keyframes web-sway {
    0%, 100% {
        transform: rotate(0deg);
    }
    50% {
        transform: rotate(3deg);
    }
}

/* Fliegende Fledermäuse */
.hero-content::before,
.hero-content::after {
    content: '🦇';
    position: absolute;
    font-size: 2rem;
    opacity: 0.4;
    pointer-events: none;
    filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.8));
}

.hero-content::before {
    top: 20%;
    left: 10%;
    animation: bat-fly-1 15s ease-in-out infinite;
}

.hero-content::after {
    top: 30%;
    right: 15%;
    animation: bat-fly-2 12s ease-in-out infinite reverse;
}

@keyframes bat-fly-1 {
    0%, 100% {
        transform: translate(0, 0) scale(1);
        opacity: 0.3;
    }
    25% {
        transform: translate(100px, -50px) scale(1.2);
        opacity: 0.6;
    }
    50% {
        transform: translate(200px, 30px) scale(0.8);
        opacity: 0.4;
    }
    75% {
        transform: translate(150px, -80px) scale(1.1);
        opacity: 0.5;
    }
}

@keyframes bat-fly-2 {
    0%, 100% {
        transform: translate(0, 0) scale(1) scaleX(-1);
        opacity: 0.3;
    }
    33% {
        transform: translate(-120px, 60px) scale(1.3) scaleX(-1);
        opacity: 0.6;
    }
    66% {
        transform: translate(-80px, -40px) scale(0.9) scaleX(-1);
        opacity: 0.4;
    }
}

/* Kürbisse - Dekorativ am Rand */
body::before,
body::after {
    position: fixed;
    font-size: 3rem;
    opacity: 0.3;
    z-index: 9999;
    pointer-events: none;
    filter: drop-shadow(0 0 20px rgba(255, 140, 0, 0.6));
    animation: pumpkin-glow 3s ease-in-out infinite;
}

body::before {
    content: '🎃';
    bottom: 150px;
    left: 30px;
}

body::after {
    content: '🎃';
    bottom: 150px;
    right: 30px;
}

@keyframes pumpkin-glow {
    0%, 100% {
        opacity: 0.3;
        filter: drop-shadow(0 0 15px rgba(255, 140, 0, 0.4));
    }
    50% {
        opacity: 0.6;
        filter: drop-shadow(0 0 30px rgba(255, 140, 0, 0.8));
    }
}

/* Spinne am Faden - Oben rechts */
#hero {
    overflow: visible !important;
}

header::after {
    content: '🕷️';
    position: absolute;
    top: 100%;
    right: 80px;
    font-size: 1.5rem;
    animation: spider-drop 6s ease-in-out infinite;
    z-index: 999;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.8));
}

header::before {
    content: '';
    position: absolute;
    top: 100%;
    right: 91px;
    width: 2px;
    height: 0;
    background: linear-gradient(to bottom,
        rgba(200, 200, 200, 0.6),
        rgba(200, 200, 200, 0.3));
    animation: spider-thread 6s ease-in-out infinite;
    z-index: 998;
}

@keyframes spider-drop {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(120px);
    }
}

@keyframes spider-thread {
    0%, 100% {
        height: 0;
    }
    50% {
        height: 120px;
    }
}

/* Geister-Effekt - Links und rechts schwebend */
#hero .hero-content {
    position: relative;
}

#hero .container::before,
#hero .container::after {
    content: '👻';
    position: absolute;
    font-size: 2.5rem;
    opacity: 0.25;
    pointer-events: none;
    filter: blur(1px) drop-shadow(0 0 20px rgba(255, 255, 255, 0.6));
    z-index: 0;
}

#hero .container::before {
    bottom: 20%;
    left: 5%;
    animation: ghost-float-1 8s ease-in-out infinite;
}

#hero .container::after {
    bottom: 25%;
    right: 8%;
    animation: ghost-float-2 10s ease-in-out infinite;
}

@keyframes ghost-float-1 {
    0%, 100% {
        transform: translateY(0) translateX(0);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-30px) translateX(20px);
        opacity: 0.4;
    }
}

@keyframes ghost-float-2 {
    0%, 100% {
        transform: translateY(0) translateX(0) scaleX(-1);
        opacity: 0.2;
    }
    50% {
        transform: translateY(-40px) translateX(-20px) scaleX(-1);
        opacity: 0.4;
    }
}

/* Orange Halloween Glow für Gold-Akzente */
#hero .hero-content h1,
#hero .hero-content .subtitle {
    text-shadow:
        0 0 20px rgba(255, 140, 0, 0.4),
        0 0 40px rgba(255, 69, 0, 0.2),
        2px 2px 4px rgba(0, 0, 0, 0.8);
}

/* Button mit Halloween-Glow */
#hero .btn-hero {
    background: linear-gradient(135deg, #ff8c00 0%, #ff4500 100%);
    box-shadow:
        0 0 20px rgba(255, 140, 0, 0.5),
        0 10px 30px rgba(0, 0, 0, 0.5);
}

#hero .btn-hero:hover {
    box-shadow:
        0 0 30px rgba(255, 140, 0, 0.8),
        0 15px 40px rgba(0, 0, 0, 0.6);
}

/* ================================================
   REALISTISCHE KRABBEL-SPINNE - Alle 20 Sekunden
   Echte Spinnen-Biomechanik mit 8-Bein Bewegung
   ================================================ */

body {
    position: relative;
}

/* Große krabbelnde Spinne - Schwarz mit realistischer Animation */
html::after {
    content: '🕷️';
    position: fixed;
    top: 50%;
    left: -200px;
    font-size: 10rem;
    z-index: 10000;
    pointer-events: none;
    filter: brightness(0) saturate(100%)
            drop-shadow(0 12px 25px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 15px rgba(0, 0, 0, 0.7));
    animation: spider-realistic-crawl 20s ease-in-out 0s infinite;
    opacity: 0;
    transform-origin: center center;
}

/* Realistische Krabbel-Animation mit Geschwindigkeitswechseln und Pausen */
@keyframes spider-realistic-crawl {
    /* Start - außerhalb des Bildschirms */
    0% {
        left: -200px;
        top: 50%;
        opacity: 0;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* Erscheint und beginnt zu krabbeln */
    1% {
        opacity: 1;
    }

    /* Bein-Zyklus 1: Rechte Beine vorne */
    2% {
        left: 5%;
        top: 49%;
        transform: translateY(-12px) rotate(-4deg) scale(1.08) scaleY(0.95);
    }
    3% {
        transform: translateY(-6px) rotate(-2deg) scale(1.04) scaleY(0.97);
    }
    4% {
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* Bein-Zyklus 2: Linke Beine vorne */
    5% {
        left: 10%;
        top: 51%;
        transform: translateY(-10px) rotate(3deg) scale(1.07) scaleY(0.96);
    }
    6% {
        transform: translateY(-5px) rotate(1.5deg) scale(1.03) scaleY(0.98);
    }
    7% {
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* Bein-Zyklus 3: Schnellere Bewegung */
    8% {
        left: 16%;
        top: 49%;
        transform: translateY(-14px) rotate(-5deg) scale(1.1) scaleY(0.94);
    }
    9% {
        left: 20%;
        transform: translateY(-8px) rotate(-2deg) scale(1.05) scaleY(0.97);
    }
    10% {
        left: 24%;
        top: 50%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* Bein-Zyklus 4 */
    11% {
        left: 28%;
        top: 52%;
        transform: translateY(-11px) rotate(4deg) scale(1.08) scaleY(0.95);
    }
    12% {
        left: 32%;
        transform: translateY(-6px) rotate(2deg) scale(1.04) scaleY(0.97);
    }
    13% {
        left: 36%;
        top: 50%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* PAUSE - Spinne bleibt kurz stehen */
    14%, 15% {
        left: 38%;
        top: 50%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* Weiter krabbeln - Bein-Zyklus 5 */
    16% {
        left: 42%;
        top: 49%;
        transform: translateY(-13px) rotate(-4deg) scale(1.09) scaleY(0.95);
    }
    17% {
        left: 46%;
        transform: translateY(-7px) rotate(-2deg) scale(1.05) scaleY(0.97);
    }
    18% {
        left: 50%;
        top: 51%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* Bein-Zyklus 6: Noch schneller */
    19% {
        left: 55%;
        top: 50%;
        transform: translateY(-15px) rotate(5deg) scale(1.11) scaleY(0.93);
    }
    20% {
        left: 59%;
        transform: translateY(-9px) rotate(2.5deg) scale(1.06) scaleY(0.96);
    }
    21% {
        left: 63%;
        top: 52%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* Bein-Zyklus 7 */
    22% {
        left: 67%;
        top: 49%;
        transform: translateY(-12px) rotate(-4deg) scale(1.08) scaleY(0.95);
    }
    23% {
        left: 71%;
        transform: translateY(-6px) rotate(-2deg) scale(1.04) scaleY(0.97);
    }
    24% {
        left: 75%;
        top: 50%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
    }

    /* Bein-Zyklus 8: Sprint zum Ende */
    25% {
        left: 80%;
        top: 51%;
        transform: translateY(-16px) rotate(4deg) scale(1.12) scaleY(0.92);
    }
    26% {
        left: 85%;
        transform: translateY(-10px) rotate(2deg) scale(1.07) scaleY(0.96);
    }
    27% {
        left: 90%;
        top: 50%;
        transform: translateY(-5px) rotate(1deg) scale(1.03) scaleY(0.98);
    }

    /* Verschwindet vom Bildschirm */
    28% {
        left: 95%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1);
        opacity: 1;
    }
    30% {
        left: calc(100% + 200px);
        opacity: 0;
    }

    /* Wartet bis zum nächsten Durchlauf */
    100% {
        left: calc(100% + 200px);
        opacity: 0;
    }
}

/* Alternative Spinne - krabbelt von rechts nach links */
html::before {
    content: '🕷️';
    position: fixed;
    top: 50%;
    right: -200px;
    font-size: 9rem;
    z-index: 10000;
    pointer-events: none;
    filter: brightness(0) saturate(100%)
            drop-shadow(0 12px 25px rgba(0, 0, 0, 0.9))
            drop-shadow(0 0 15px rgba(0, 0, 0, 0.7));
    animation: spider-realistic-crawl-reverse 20s ease-in-out 10s infinite;
    opacity: 0;
    transform-origin: center center;
}

@keyframes spider-realistic-crawl-reverse {
    0% {
        right: -200px;
        top: 50%;
        opacity: 0;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    1% {
        opacity: 1;
    }
    2% {
        right: 5%;
        top: 49%;
        transform: translateY(-12px) rotate(4deg) scale(1.08) scaleY(0.95) scaleX(-1);
    }
    3% {
        transform: translateY(-6px) rotate(2deg) scale(1.04) scaleY(0.97) scaleX(-1);
    }
    4% {
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    5% {
        right: 10%;
        top: 51%;
        transform: translateY(-10px) rotate(-3deg) scale(1.07) scaleY(0.96) scaleX(-1);
    }
    6% {
        transform: translateY(-5px) rotate(-1.5deg) scale(1.03) scaleY(0.98) scaleX(-1);
    }
    7% {
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    8% {
        right: 16%;
        top: 49%;
        transform: translateY(-14px) rotate(5deg) scale(1.1) scaleY(0.94) scaleX(-1);
    }
    9% {
        right: 20%;
        transform: translateY(-8px) rotate(2deg) scale(1.05) scaleY(0.97) scaleX(-1);
    }
    10% {
        right: 24%;
        top: 50%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    11% {
        right: 28%;
        top: 52%;
        transform: translateY(-11px) rotate(-4deg) scale(1.08) scaleY(0.95) scaleX(-1);
    }
    12% {
        right: 32%;
        transform: translateY(-6px) rotate(-2deg) scale(1.04) scaleY(0.97) scaleX(-1);
    }
    13% {
        right: 36%;
        top: 50%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    14%, 15% {
        right: 38%;
        top: 50%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    16% {
        right: 42%;
        top: 49%;
        transform: translateY(-13px) rotate(4deg) scale(1.09) scaleY(0.95) scaleX(-1);
    }
    17% {
        right: 46%;
        transform: translateY(-7px) rotate(2deg) scale(1.05) scaleY(0.97) scaleX(-1);
    }
    18% {
        right: 50%;
        top: 51%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    19% {
        right: 55%;
        top: 50%;
        transform: translateY(-15px) rotate(-5deg) scale(1.11) scaleY(0.93) scaleX(-1);
    }
    20% {
        right: 59%;
        transform: translateY(-9px) rotate(-2.5deg) scale(1.06) scaleY(0.96) scaleX(-1);
    }
    21% {
        right: 63%;
        top: 52%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    22% {
        right: 67%;
        top: 49%;
        transform: translateY(-12px) rotate(4deg) scale(1.08) scaleY(0.95) scaleX(-1);
    }
    23% {
        right: 71%;
        transform: translateY(-6px) rotate(2deg) scale(1.04) scaleY(0.97) scaleX(-1);
    }
    24% {
        right: 75%;
        top: 50%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
    }
    25% {
        right: 80%;
        top: 51%;
        transform: translateY(-16px) rotate(-4deg) scale(1.12) scaleY(0.92) scaleX(-1);
    }
    26% {
        right: 85%;
        transform: translateY(-10px) rotate(-2deg) scale(1.07) scaleY(0.96) scaleX(-1);
    }
    27% {
        right: 90%;
        top: 50%;
        transform: translateY(-5px) rotate(-1deg) scale(1.03) scaleY(0.98) scaleX(-1);
    }
    28% {
        right: 95%;
        transform: translateY(0) rotate(0deg) scale(1) scaleY(1) scaleX(-1);
        opacity: 1;
    }
    30% {
        right: calc(100% + 200px);
        opacity: 0;
    }
    100% {
        right: calc(100% + 200px);
        opacity: 0;
    }
}

/* Responsive Anpassung */
@media (max-width: 768px) {
    .logo::before {
        font-size: 1rem;
        top: -15px;
    }

    body::before,
    body::after {
        font-size: 2rem;
        bottom: 100px;
    }

    .hero-content::before,
    .hero-content::after {
        font-size: 1.5rem;
    }

    header::after {
        right: 40px;
        font-size: 1.2rem;
    }

    /* Spinnen auf Mobile etwas kleiner */
    html::after {
        font-size: 5rem;
    }

    html::before {
        font-size: 4.5rem;
    }
}