:root {
    --bg: #0a0710;
    --bg-glow: #1a0f2e;
    --fg: #e8e2f5;
    --muted: #9a8fb5;
    --accent: #7c4dff;
    --accent-soft: #b388ff;
    --danger: #ff6b9d;
    --panel: rgba(30, 20, 48, 0.72);
    --border: rgba(124, 77, 255, 0.28);
}

* {
    box-sizing: border-box;
    -webkit-user-select: none;
    user-select: none;
}

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
}

body {
    font-family: "Georgia", "Times New Roman", serif;
    background:
        radial-gradient(1200px 700px at 50% -10%, var(--bg-glow), transparent 60%),
        var(--bg);
    color: #e8e2f5;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
    overflow-x: hidden;
}

.fog {
    position: fixed;
    inset: 0;
    pointer-events: none;
    background:
        radial-gradient(600px 300px at 20% 30%, rgba(124, 77, 255, 0.10), transparent 70%),
        radial-gradient(500px 260px at 80% 70%, rgba(179, 136, 255, 0.08), transparent 70%);
    animation: drift 24s ease-in-out infinite alternate;
    z-index: 0;
}

@keyframes drift {
    from { transform: translate3d(-2%, -1%, 0); }
    to   { transform: translate3d(2%, 2%, 0); }
}

.hero { position: relative; z-index: 1; }

.hero {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 3rem 1.5rem 4rem;
    max-width: 720px;
    margin: 0 auto;
}

.hero h1 {
    font-size: clamp(2.2rem, 6vw, 3.8rem);
    line-height: 1.08;
    margin: 0 0 1.4rem;
    text-shadow: 0 0 30px rgba(124, 77, 255, 0.35);
}

/* Floating ghost — drifts a big loop across the page while gently bobbing. */
.ghost {
    position: fixed;
    top: 50%;
    left: 50%;
    z-index: 0;
    pointer-events: none;
    width: 120px;
    height: 150px;
    margin: -75px 0 0 -60px;
    filter: drop-shadow(0 0 26px rgba(179, 136, 255, 0.5));
    animation: ghost-drift 26s ease-in-out infinite;
}

/* inner element bobs up/down independently of the drift loop */
.ghost svg {
    display: block;
    animation: ghost-bob 4.5s ease-in-out infinite;
}

.ghost-body { transform-origin: 50% 50%; }
.ghost-eye { opacity: 0.9; }

/* wide, wandering loop around the viewport centre */
@keyframes ghost-drift {
    0%   { transform: translate(-26vw, 12vh) rotate(-4deg); opacity: 0.85; }
    20%  { transform: translate(18vw, -14vh) rotate(3deg);  opacity: 1; }
    40%  { transform: translate(30vw, 10vh) rotate(5deg);   opacity: 0.9; }
    60%  { transform: translate(-6vw, 18vh) rotate(-2deg);  opacity: 1; }
    80%  { transform: translate(-30vw, -10vh) rotate(-5deg); opacity: 0.9; }
    100% { transform: translate(-26vw, 12vh) rotate(-4deg); opacity: 0.85; }
}

@keyframes ghost-bob {
    0%, 100% { transform: translateY(0) scale(1); }
    50%      { transform: translateY(-14px) scale(1.02); }
}

@media (prefers-reduced-motion: reduce) {
    .ghost, .ghost svg { animation: none; }
    .ghost { transform: translateY(-40px); }
}

@media (max-width: 520px) {
    .ghost { width: 88px; height: 110px; margin: -55px 0 0 -44px; }
}