@import "fonts.css";
@import "rumours.css";
@import "solar-system.css";
@import "vfx.css";

:root {
    --background-color: color-mix(in srgb, #041421 80%, black 20%);
    --ten: min(10vw, 10vh);
    --sun-radius: var(--ten);
    --sun-image: url(../assets/sun.png);
    --planet-hover-scale-transition-duration: 0.1s;
    --planet-hover-scale-factor: 1.05;
    --planet-hover-slow-factor: 0.8;

    --planet-showcase-transition-duration: 0.6s;
    --text-showcase-transition-duration: 0.4s;

    --rumour-text-border-color: #4F65AB;
    --rumour-color: white;
    --text-color: white;
}

[hourglass-twins], orbit-wrapper:has( *[hourglass-twins]) {
    --planet-image: url(../assets/hourglass-twins.png);
    --planet-radius: calc(var(--ten) * 0.2);
    
    --orbit-radius: calc(var(--ten) * 1.4);
    --orbit-period: 20s;
    --orbit-period-offset: -10s;
    --rotation-period: 8s;

    --trail-color: #AFAD8A;
}

[timber-hearth], orbit-wrapper:has( *[timber-hearth]) {
    --planet-image: url(../assets/timber-hearth.png);
    --planet-radius: calc(var(--ten) * 0.2);
    
    --orbit-radius: calc(var(--ten) * 2.2);
    --orbit-period: 10s;
    --orbit-period-offset: -10s;
    --rotation-period: 8s;

    --trail-color: #8697A8;

    --moon-image: url(../assets/atterlock.png);
    --moon-radius: calc(var(--ten) * 0.1);
    --moon-orbit-radius: calc(var(--ten) * 0.4);
    --moon-orbit-period: 9s;
}

[brittle-hollow], orbit-wrapper:has( *[brittle-hollow]) {
    --planet-image: url(../assets/brittle-hollow.png);
    --planet-radius: calc(var(--ten) * 0.3);
    
    --orbit-radius: calc(var(--ten) * 3);
    --orbit-period: 20s;
    --orbit-period-offset: -10s;
    --rotation-period: 8s;

    --trail-color: #AD8C8C;

    --moon-image: url(../assets/hollows-lantern.png);
    --moon-radius: calc(var(--ten) * 0.11);
    --moon-orbit-radius: calc(var(--ten) * 0.4);
    --moon-orbit-period: 5s;
}

[giants-deep], orbit-wrapper:has( *[giants-deep]) {
    --planet-image: url(../assets/giants-deep.png);
    --planet-radius: calc(var(--ten) * 0.5);
    
    --orbit-radius: calc(var(--ten) * 4);
    --orbit-period: 100s;
    --orbit-period-offset: -40s;
    --rotation-period: 90s;

    --trail-color: #7E9F99;

    --moon-image: url(../assets/probe-cannon.png);
    --moon-radius: calc(var(--ten) * 0.11);
    --moon-orbit-radius: calc(var(--ten) * 0.6);
    --moon-orbit-period: 50s;
}

[dark-bramble], orbit-wrapper:has( *[dark-bramble]) {
    --planet-image: url(../assets/dark-bramble.png);
    --planet-radius: calc(var(--ten) * 0.4);
    
    --orbit-radius: calc(var(--ten) * 5);
    --orbit-period: 200s;
    --orbit-period-offset: -10s;
    --rotation-period: 100s;

    --trail-color: #5B715C;

    --moon-image: url(../assets/quantum-moon.png);
    --moon-radius: calc(var(--ten) * 0.11);
    --moon-orbit-radius: calc(var(--ten) * 0.5);
    --moon-orbit-period: 28s;
}

body {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    margin: 0;
    background-color: var(--background-color);

    font-family: "Space Mono", monospace;
    font-weight: 400;
    font-style: normal;
}

:link, :visited {
    font-weight: 700;
    color: var(--text-color);
}

input[type="radio"] {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    pointer-events: auto;
    cursor: pointer;
    &[background] {
        cursor: default;
    }
}

.language {
    position: absolute;
    display: inline;
    top: 10px;
    left: 10px;
    cursor: pointer;
    z-index: 2;
    --text-color: color-mix(in srgb, #041421 90%, white 10%);
    color: var(--text-color);
    text-shadow: 0 0 10px var(--text-color);
    text-decoration: none;

    &:hover {
        --text-color: white;
    }
}