:root {
    --spooky-dark: #130a1c;
    --spooky-orange: #ff6b00;
    --spooky-green: #a4e825;
    --spooky-purple: #9d4edd;
    --spooky-iron: #2d2d2d;
    --spooky-iron-light: #4a4a4a;
    --bg-dark-metallic: var(--spooky-dark);
    --card-glass: rgba(19, 10, 28, 0.85);
    --border-metal: linear-gradient(135deg, var(--spooky-orange), var(--spooky-purple), var(--spooky-green));
    scrollbar-color: var(--spooky-purple) #1b1024;
}

* {
    scrollbar-color: var(--spooky-purple) #1b1024;
}

*::-webkit-scrollbar-track {
    background: linear-gradient(180deg, #1b1024, #2d2038 50%, #1b1024);
}

*::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #ff8c38, #b86be6 28%, var(--spooky-purple) 58%, var(--spooky-purple) 82%, var(--spooky-green));
    border-color: #1b1024;
}

*::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #ff8c38, #b86be6 28%, var(--spooky-purple) 58%, var(--spooky-purple) 82%, var(--spooky-green));
}

body {
    background-color: var(--spooky-dark);
    background-image:
        radial-gradient(at 10% 10%, rgba(255, 107, 0, 0.12) 0, transparent 50%),
        radial-gradient(at 90% 20%, rgba(157, 78, 221, 0.15) 0, transparent 50%),
        radial-gradient(at 50% 50%, rgba(164, 232, 37, 0.08) 0, transparent 50%),
        radial-gradient(at 20% 80%, rgba(157, 78, 221, 0.12) 0, transparent 50%),
        radial-gradient(at 80% 90%, rgba(255, 107, 0, 0.15) 0, transparent 50%);
    background-attachment: fixed;
    isolation: isolate;
}

.ghost-flight-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
    pointer-events: none;
}

.drifting-ghost {
    position: absolute;
    left: -12vw;
    width: clamp(30px, 3.2vw, 50px);
    height: auto;
    fill: rgba(225, 213, 245, 0.7);
    filter: drop-shadow(0 0 7px rgba(157, 78, 221, 0.45));
    animation: ghost-drift 34s ease-in-out infinite;
}

.drifting-ghost:nth-child(1) {
    top: 13%;
    width: clamp(26px, 2.6vw, 40px);
    animation-duration: 37s;
    animation-delay: -21s;
}

.drifting-ghost:nth-child(2) {
    top: 34%;
    animation-duration: 43s;
    animation-delay: -8s;
}

.drifting-ghost:nth-child(3) {
    top: 61%;
    width: clamp(24px, 2.4vw, 36px);
    animation-duration: 39s;
    animation-delay: -30s;
}

.drifting-ghost:nth-child(4) {
    top: 82%;
    width: clamp(28px, 2.8vw, 44px);
    animation-duration: 46s;
    animation-delay: -14s;
}

@keyframes ghost-drift {
    0% {
        transform: translate3d(0, 0, 0) rotate(-4deg);
    }

    25% {
        transform: translate3d(32vw, -3vh, 0) rotate(4deg);
    }

    50% {
        transform: translate3d(64vw, 2vh, 0) rotate(-3deg);
    }

    75% {
        transform: translate3d(96vw, -2vh, 0) rotate(3deg);
    }

    100% {
        transform: translate3d(124vw, 0, 0) rotate(-4deg);
    }
}

#gate-overlay .gate {
    background: #09050d;
    border-top-color: var(--spooky-purple);
    border-bottom-color: var(--spooky-purple);
}

#gate-overlay .left-gate {
    border-right-color: var(--spooky-orange);
}

#gate-overlay .right-gate {
    border-left-color: var(--spooky-orange);
}

#gate-overlay .gate-texture {
    background:
        radial-gradient(circle at center, transparent 20%, rgba(0, 0, 0, 0.8) 100%),
        repeating-linear-gradient(45deg, rgba(157, 78, 221, 0.05) 0, rgba(157, 78, 221, 0.05) 4px, transparent 4px, transparent 12px);
}

#gate-overlay .gear-1,
#gate-overlay .gear-3 {
    color: var(--spooky-iron);
}

#gate-overlay .gear-2 {
    color: var(--spooky-iron-light);
}

#gate-overlay .gear-4 {
    color: var(--spooky-green);
    filter: drop-shadow(0 0 10px var(--spooky-green));
}

#gate-overlay .gate-lock {
    background: linear-gradient(135deg, #09050d, var(--spooky-iron));
    border-color: var(--spooky-orange);
    box-shadow: 0 0 45px #000, inset 0 0 25px rgba(255, 107, 0, 0.5);
}

#gate-overlay .crystal-half {
    background: linear-gradient(135deg, var(--spooky-orange), var(--spooky-purple), var(--spooky-green));
    box-shadow: 0 0 25px var(--spooky-orange), 0 0 45px var(--spooky-purple);
}

.text-gradient-spooky {
    background: linear-gradient(135deg, #ff6b00 0%, #facc15 25%, #a4e825 50%, #9d4edd 75%, #ff6b00 100%);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: halloween-shine 6s linear infinite;
}

.text-gradient-magic {
    background: linear-gradient(90deg, #a4e825, #9d4edd, #ff6b00, #a4e825);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: halloween-shine 6s linear infinite;
}

@keyframes halloween-shine {
    to {
        background-position: 200% center;
    }
}

.metallic-border-card {
    background: var(--card-glass);
    border-color: rgba(157, 78, 221, 0.3);
}

.metallic-border-card::before {
    background: linear-gradient(135deg, rgba(255, 107, 0, 0.5), rgba(157, 78, 221, 0.5), rgba(164, 232, 37, 0.4), rgba(255, 107, 0, 0.5));
}

.metallic-border-card:hover {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(255, 107, 0, 0.15), 0 0 20px rgba(164, 232, 37, 0.15);
    border-color: rgba(157, 78, 221, 0.7);
}

.sculpted-image-container {
    border-color: rgba(157, 78, 221, 0.4);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.8), 0 0 20px rgba(255, 107, 0, 0.15);
}

header {
    background: rgba(19, 10, 28, 0.92);
    border-bottom-color: rgba(157, 78, 221, 0.4);
}

.nav-links a:hover {
    color: var(--spooky-orange);
    text-shadow: 0 0 10px rgba(255, 107, 0, 0.5);
}

.nav-links a::after {
    background: linear-gradient(90deg, var(--spooky-orange), var(--spooky-purple), var(--spooky-green));
}

.btn-spooky-primary {
    background: linear-gradient(135deg, #a63b00 0%, #5c277a 60%, #130a1c 100%);
    box-shadow: 0 8px 25px rgba(255, 107, 0, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.2);
}

.btn-spooky-primary[style] {
    background: linear-gradient(135deg, #a63b00, #5c277a 60%, #130a1c) !important;
}

.btn-spooky-primary:hover {
    box-shadow: 0 14px 32px rgba(157, 78, 221, 0.5), 0 0 20px rgba(164, 232, 37, 0.3);
}

.btn-iron-outline {
    background: rgba(45, 45, 45, 0.7);
    border-color: var(--spooky-purple);
    box-shadow: 0 6px 20px rgba(157, 78, 221, 0.2);
}

.btn-iron-outline:hover {
    background: rgba(157, 78, 221, 0.2);
    border-color: var(--spooky-green);
    box-shadow: 0 10px 28px rgba(164, 232, 37, 0.3);
}

.spooky-bar {
    background: linear-gradient(90deg, var(--spooky-orange) 0%, var(--spooky-purple) 33%, #000 66%, var(--spooky-green) 100%);
}

.form-modal-overlay {
    background: linear-gradient(135deg, rgba(19, 10, 28, 0.96), rgba(157, 78, 221, 0.3), rgba(255, 107, 0, 0.15));
}

.form-modal-content {
    background: rgba(19, 10, 28, 0.97);
    border-color: rgba(164, 232, 37, 0.3);
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.9), 0 0 30px rgba(157, 78, 221, 0.2);
}

.close-modal-btn:hover {
    background: rgba(255, 107, 0, 0.85);
}

#cookie-banner {
    background: rgba(19, 10, 28, 0.97);
    border-color: rgba(255, 107, 0, 0.65);
}

#cookie-settings-button {
    background: rgba(19, 10, 28, 0.97);
    border-color: rgba(157, 78, 221, 0.7);
}

.cookie-toggle {
    accent-color: var(--spooky-purple);
}

.contact-card {
    background: rgba(30, 20, 40, 0.78);
    border-color: rgba(157, 78, 221, 0.35);
}

.contact-card:hover {
    border-color: var(--spooky-orange);
    box-shadow: 0 15px 35px rgba(157, 78, 221, 0.3);
    background: rgba(30, 20, 40, 0.95);
}

#persistent-cta-btn {
    background: linear-gradient(135deg, #a63b00 0%, #5c277a 50%, #496b12 100%);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5), 0 0 15px rgba(255, 107, 0, 0.4);
}

#persistent-cta-btn:hover {
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.6), 0 0 25px rgba(164, 232, 37, 0.5);
}

:focus-visible {
    outline-color: var(--spooky-green);
}

@media (prefers-reduced-motion: reduce) {
    .text-gradient-spooky,
    .text-gradient-magic {
        animation: none;
    }

    .ghost-flight-layer {
        display: none;
    }
}