/* HOGWERK — only the original cube, veiled by a fluid atmosphere. */
:root{color-scheme:dark;background:#0b0f14}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;overflow:hidden;background:#0b0f14}
[hidden]{display:none!important}
.site,.atmosphere,.loader{position:fixed;inset:0;overflow:hidden}
.site{isolation:isolate}
.atmosphere{background:#0b0f14;pointer-events:none}
.mark{position:absolute;inset:0;display:grid;place-items:center;z-index:1;pointer-events:none}
.mark img{display:block;width:clamp(220px,35vw,500px);max-width:76vw;max-height:72svh;height:auto;object-fit:contain;opacity:.08;filter:brightness(.62) saturate(.7) blur(1px);user-select:none;-webkit-user-drag:none}
.atmosphere__canvas{position:absolute;inset:0;z-index:2;width:100%;height:100%;display:block;opacity:0;transition:opacity 1.2s ease}
.has-fluid .atmosphere__canvas{opacity:1}
.atmosphere__fallback{position:absolute;inset:-6%;z-index:0;opacity:1;visibility:visible;background:radial-gradient(ellipse 25% 37% at 10% 28%,#10465780,transparent 80%),radial-gradient(ellipse 27% 37% at 91% 33%,#123d6980,transparent 80%),radial-gradient(ellipse 26% 36% at 21% 73%,#31546a80,transparent 80%),radial-gradient(ellipse 28% 36% at 82% 72%,#382d5d80,transparent 80%);transition:none}
.atmosphere__fallback::after{content:"";position:absolute;inset:0;background:url('../img/fog-fallback.svg') center/100% 100%;opacity:.45}
.has-fluid .atmosphere__fallback{opacity:0;visibility:hidden;transition:opacity 1.2s ease,visibility 0s 1.2s}
.atmosphere__veil{position:absolute;inset:0;z-index:3;background:radial-gradient(ellipse 37% 43% at 50% 50%,#15242d24,transparent 80%),radial-gradient(ellipse at center,transparent 25%,#05080d70 110%);pointer-events:none}
.loader{z-index:10;background:#0b0f14;transition:opacity 1.2s ease,visibility 0s 1.2s}
.loader::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,#142b3a25,transparent 60%)}
.is-ready .loader{opacity:0;visibility:hidden;pointer-events:none}
@media(max-width:560px){.mark img{width:72vw;max-width:300px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition:none!important;animation:none!important}}
