/* Base & Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    background-color: #12121e;
    /* Prevent white flash (Dark Blue) */
}

body {
    min-height: 100%;
    font-family: "Rajdhani", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
    font-weight: 500;
    color: #e0e6ed;
    background: transparent;
    /* Transparent for canvas */
    box-shadow: inset 0 5px 13px -5px rgba(150, 150, 150, 0.8),
        inset -5px 0 13px -5px rgba(150, 150, 150, 0.8),
        inset 5px 0 13px -5px rgba(150, 150, 150, 0.8),
        inset 0 -5px 13px -5px rgba(150, 150, 150, 0.8);

    /* Custom Scrollbar for Browser (Chrome/Edge) */
    scrollbar-color: #00f0ff #12121e;
    scrollbar-width: thin;
}

::-webkit-scrollbar {
    width: 8px;
    background: #12121e;
    /* Header/Theme match */
}

::-webkit-scrollbar-thumb {
    background: #00f0ff;
    /* Neon Cyan */
    border-radius: 4px;
}

body {
    position: relative;
    z-index: 0;
    isolation: isolate;
    line-height: 1.618;
    /* The Golden Line Height */
}

#bg-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
    pointer-events: none;
    background: #12121e;
}

/* Accessibility */
.visually-hidden {
    position: absolute !important;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

/* Monoton (Local WOFF2) */
@font-face {
    font-family: 'Monoton';
    src: url('../fonts/Monoton-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

/* Google Sans Flex (Local WOFF2) */
@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Google Sans Flex';
    src: url('../fonts/GoogleSansFlex-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

/* Fade In Logic */
html.no-fade .wrapper {
    opacity: 1 !important;
    transition: none !important;
}

html:not(.no-fade) .wrapper {
    animation: fadeInOnce 0.618s ease-in-out both;
    /* Phi Duration */
}

/* Golden Typography */
h1 {
    font-size: clamp(2rem, 5vw, 4.236rem);
    /* Phi^3 scale approx */
    line-height: 1.1;
    margin-bottom: 0.618em;
}

h2 {
    font-size: clamp(1.5rem, 4vw, 2.618rem);
    /* Phi^2 scale */
    line-height: 1.2;
    margin-bottom: 0.618em;
}

h3 {
    font-size: clamp(1.2rem, 3vw, 1.618rem);
    /* Phi scale */
    line-height: 1.4;
    margin-bottom: 0.618em;
}

/* Fluid Media info */
img,
iframe,
video {
    max-width: 100%;
}

/* Background Effects */
body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background: radial-gradient(1100px 700px at 18% 28%, rgba(0, 255, 214, 0.22), transparent 60%),
        radial-gradient(900px 700px at 82% 72%, rgba(0, 132, 255, 0.26), transparent 60%),
        radial-gradient(800px 800px at 52% 42%, rgba(176, 112, 255, 0.24), transparent 62%),
        #2f2f2f;
}

body::after {
    content: "";
    position: fixed;
    inset: -50% -50% -50% -50%;
    z-index: -1;
    background: conic-gradient(from 0deg, rgba(0, 208, 255, 0.2), rgba(160, 80, 255, 0.22), rgba(0, 208, 255, 0.2));
    filter: blur(34px) saturate(125%);
    /* Fibonacci (was 40) */
    transform-origin: 50% 50%;
    animation: ai-spin 34s linear infinite;
    /* Fibonacci (was 32) */
    animation-play-state: var(--ai-anim, running);
    will-change: transform;
    pointer-events: none;
}

body.anim-paused::after {
    animation-play-state: paused;
}

body.ai-slow::after {
    animation-duration: 48s;
}

/* --- Night Mode --- */
body.night-mode::after {
    filter: blur(34px) saturate(110%) brightness(0.7);
    /* Dimmer background */
}

/* body.night-mode .wrapper rule removed */

/* --- Space Events Container --- */
#space-layer {
    position: fixed;
    inset: 0;
    z-index: -1;
    /* Behind UI */
    pointer-events: none;
    overflow: hidden;
}

/* --- Space Entities --- */
.space-entity {
    position: absolute;
    top: 0;
    left: 0;
    will-change: transform;
    /* Variables set by JS: --sx, --sy, --ex, --ey, --r, --s */
}

/* Comet */
.space-entity.comet {
    width: 200px;
    height: 2px;
    background: linear-gradient(90deg, rgba(83, 255, 244, 0), rgba(83, 255, 244, 0.8) 50%, #fff 100%);
    box-shadow: 0 0 10px rgba(83, 255, 244, 0.8);
    /* Animation driven by variables */
    animation: fly-dynamic 7s linear forwards;
    /* Slower (was 4s) */
}

/* UFO */
.space-entity.ufo {
    /* Container moves along trajectory */
    width: 40px;
    height: 20px;
    animation: fly-dynamic 16s linear forwards;
    /* Slower (was 8s) */
}

/* Inner UFO for wobble/appearance */
.space-entity.ufo .ufo-inner {
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at center, silver 0%, #a0a0a0 100%);
    border-radius: 50%;
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.6);
    position: relative;
    animation: ufo-wobble 3s ease-in-out infinite;
    /* Slightly slower wobble */
}

.space-entity.ufo .ufo-inner::after {
    content: '';
    position: absolute;
    top: -8px;
    left: 10px;
    width: 20px;
    height: 15px;
    background: rgba(188, 19, 254, 0.6);
    border-radius: 50% 50% 0 0;
}

/* Ship Wrapper */
.space-entity.ship {
    width: 120px;
    height: auto;
    /* No clip-path or border placeholder anymore, real IMG used */
    animation: fly-dynamic 25s linear forwards;
    /* Much slower (was 12s) */
}

/* Dynamic Trajectory Keyframes */
@keyframes fly-dynamic {
    0% {
        transform: translate(var(--sx), var(--sy)) rotate(var(--r)) scale(var(--s));
        opacity: 0;
    }

    10% {
        opacity: 1;
    }

    90% {
        opacity: 1;
    }

    100% {
        transform: translate(var(--ex), var(--ey)) rotate(var(--r)) scale(var(--s));
        opacity: 0;
    }
}

@keyframes ufo-wobble {

    0%,
    100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-5px) rotate(5deg);
    }
}

@media (prefers-reduced-motion: reduce) {
    body::after {
        animation: none;
    }
}