/* Arp 244 — full-screen canvas, no visible UI. */

:root {
    --sky-core: #020306;
    --sky-edge: #030507;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: radial-gradient(ellipse at 50% 50%, var(--sky-core) 15%, var(--sky-edge) 100%);
    background-color: var(--sky-core);
    overscroll-behavior: none;
}

body {
    -webkit-user-select: none;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
}

#galaxy {
    position: fixed;
    inset: 0;
    display: block;
    width: 100%;
    height: 100%;
    touch-action: none;
    opacity: 0;
    transition: opacity 0.6s ease-out;
}

html.is-ready #galaxy {
    opacity: 1;
}

/* ---------------------------------------------------------------- CSS-only fallback (no WebGL2) */
.fallback {
    display: none;
}

html.no-webgl #galaxy {
    display: none;
}

html.no-webgl .fallback {
    display: block;
    position: fixed;
    inset: 0;
    overflow: hidden;
}

.fb-stars {
    position: absolute;
    inset: 0;
    background-image:
        radial-gradient(1px 1px at 12% 18%, #dfe6ff, transparent),
        radial-gradient(1px 1px at 27% 74%, #fff1e0, transparent),
        radial-gradient(1.5px 1.5px at 81% 22%, #ffffff, transparent),
        radial-gradient(1px 1px at 66% 83%, #cfdcff, transparent),
        radial-gradient(1px 1px at 91% 61%, #ffe9dc, transparent),
        radial-gradient(1.5px 1.5px at 8% 52%, #e7e8ff, transparent),
        radial-gradient(1px 1px at 47% 9%, #ffffff, transparent),
        radial-gradient(1px 1px at 58% 47%, #dfe6ff, transparent);
}

.fb-galaxy {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(78vh, 92vw);
    height: min(78vh, 92vw);
    transform: translate(-50%, -50%);
}

.fb-galaxy i {
    position: absolute;
    display: block;
    border-radius: 50%;
}

.fb-envelope {
    inset: 4% 2% 0 6%;
    background: radial-gradient(closest-side, rgba(150, 150, 190, 0.16), transparent);
}

.fb-lobe-blue {
    left: 8%;
    top: 14%;
    width: 46%;
    height: 62%;
    transform: rotate(-20deg);
    background: radial-gradient(closest-side, rgba(126, 156, 255, 0.55), rgba(110, 140, 240, 0.18) 60%, transparent);
}

.fb-lobe-tan {
    left: 48%;
    top: 18%;
    width: 44%;
    height: 56%;
    transform: rotate(15deg);
    background: radial-gradient(closest-side, rgba(255, 210, 178, 0.5), rgba(220, 170, 140, 0.16) 60%, transparent);
}

.fb-ring {
    left: 18%;
    top: 22%;
    width: 34%;
    height: 34%;
    border-radius: 50%;
    background:
        radial-gradient(closest-side, transparent 50%, rgba(255, 92, 160, 0.32) 70%, rgba(170, 190, 255, 0.22) 84%, transparent);
    -webkit-mask-image: linear-gradient(200deg, #000 35%, transparent 85%);
    mask-image: linear-gradient(200deg, #000 35%, transparent 85%);
    filter: blur(5px);
}

.fb-overlap {
    left: 26%;
    top: 46%;
    width: 42%;
    height: 14%;
    transform: rotate(-14deg);
    background: radial-gradient(closest-side, rgba(255, 110, 120, 0.5), rgba(180, 90, 60, 0.25) 60%, transparent);
    filter: blur(2px);
}

.fb-nucleus {
    width: 6%;
    height: 6%;
    background: radial-gradient(closest-side, #fff4e8, rgba(255, 200, 160, 0.6) 40%, transparent);
}

.fb-n1 {
    left: 31%;
    top: 36%;
}

.fb-n2 {
    left: 57%;
    top: 46%;
}

@media (prefers-reduced-motion: reduce) { #galaxy { transition: none; } }