:root {
    --bg-scroll: #fffdbd;
    --bg-scroll-edge: #e3cf7f;
    --col-scroll: #111144;

    --ts-default-theme-background-primary: #000;
    --ts-default-theme-background-secondary: #1C1C1C;
    --ts-default-theme-background-tertiary: #40454F;
    --ts-default-theme-accessibility-border: transparent;
    --ts-default-theme-accessibility-focus: transparent;
    --ts-default-theme-color-primary: #fff;
    --ts-default-theme-color-secondary: #A6A6A6;
    --ts-default-theme-color-danger: #A50000;
    --ts-default-theme-accent-primary: #ff6e00;
    --ts-default-theme-accent-background: #422917;
    --ts-default-theme-accent-hover: #ffad1e;
    --ts-default-theme-button-background: #0072A5;
    --ts-default-theme-button-hover: #00ABF8;
    --ts-default-theme-link: #80bfff;
    --ts-default-theme-link-hover: #b9e3ff;

    --ts-high-contrast-theme-background-primary: #000;
    --ts-high-contrast-theme-background-secondary: #1C1C1C;
    --ts-high-contrast-theme-background-tertiary: #40454F;
    --ts-high-contrast-theme-accessibility-border: var(--ts-high-contrast-theme-color-primary);
    --ts-high-contrast-theme-accessibility-focus: var(--ts-high-contrast-theme-accent-primary);
    --ts-high-contrast-theme-color-primary: #fff;
    --ts-high-contrast-theme-color-secondary: #A6A6A6;
    --ts-high-contrast-theme-color-danger: #A50000;
    --ts-high-contrast-theme-accent-primary: #ff6e00;
    --ts-high-contrast-theme-accent-background: #422917;
    --ts-high-contrast-theme-accent-hover: #ffad1e;
    --ts-high-contrast-theme-button-background: #0072A5;
    --ts-high-contrast-theme-button-hover: #00ABF8;
    --ts-high-contrast-theme-link: #80bfff;
    --ts-high-contrast-theme-link-hover: #b9e3ff;

    --ts-background-primary: #222222;
    --ts-background-secondary: var(--ts-default-theme-background-secondary);
    --ts-background-tertiary: var(--ts-default-theme-background-tertiary);
    --ts-accessibility-border:  var(--ts-default-theme-accessibility-border);
    --ts-accessibility-focus:  var(--ts-default-theme-accessibility-focus);
    --ts-color-primary: var(--ts-default-theme-color-primary);
    --ts-color-secondary: var(--ts-default-theme-color-secondary);
    --ts-color-danger: var(--ts-default-theme-color-danger);
    --ts-accent-primary: var(--ts-default-theme-accent-primary);
    --ts-accent-background: var(--ts-default-theme-accent-background);
    --ts-accent-hover: var(--ts-default-theme-accent-hover);
    --ts-button-background: var(--ts-default-theme-button-background);
    --ts-button-hover: var(--ts-default-theme-button-hover);
    --ts-link: var(--ts-default-theme-link);
    --ts-link-hover: var(--ts-default-theme-link-hover);
}

:root:has(button.talespire:hover, button.talespire:focus, button.talespire:active) {
    --col-primary: var(--ts-default-theme-color-primary);
    --col-accent-primary: var(--ts-default-theme-accent-primary);
    --col-link: var(--ts-default-theme-link);
    --col-link-hover: var(--ts-default-theme-link-hover);

    --bg-primary: var(--ts-default-theme-background-primary);
    --bg-secondary: var(--ts-default-theme-background-secondary);
}

body:has(button.talespire:hover, button.talespire:focus, button.talespire:active) {
    transition: all var(--trans-in) ease-in-out;
    transition-property: background;
}

button.talespire:after {
    position: absolute;

    content: "";
    pointer-events: none;
    z-index: -1;

    top: -5%;
    bottom: -5%;
    left: -5%;
    right: -5%;

    background: radial-gradient(ellipse 70% 100% at center, var(--bg-scroll) 50%, var(--bg-scroll-edge) 80%);
    color: var(--col-scroll);

    filter: url("#scroll-noise");
    mask-image: url("../assets/scroll_mask.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;

    overflow: visible;


    transition: all var(--trans-out) ease-in-out;
    transition-property: opacity, transform;

    opacity: 0;
    transform-origin: left center;
    transform: scaleX(0);
}

button.talespire:hover, button.talespire:focus, button.talespire:active {
    color: var(--col-scroll);
}

button.talespire:hover:after, button.talespire:focus:after, button.talespire:active:after {
    transition: all var(--trans-in) ease-in-out;
    transition-property: opacity, transform;

    opacity: 1;
    transform: scaleX(1);
}

#texture-preview {
    position: relative;
    width: 800px;
    height: 200px;

    background: radial-gradient(ellipse 70% 100% at center, var(--bg-scroll) 50%, var(--bg-scroll-edge) 80%);
    color: var(--col-scroll);

    filter: url("#scroll-displacement") url("#scroll-noise");
    mask-image: url("../assets/scroll_mask.svg");
    mask-size: 100% 100%;
    mask-repeat: no-repeat;
}