/*
 * Landing-page styles for limitlost-frontend.
 * Ported from the old webpage-frontend (public.css + the few layout/toggle rules that lived in template.css).
 * Colors are driven by CSS variables keyed on the `data-darkreader-scheme="dark"` attribute, which the inline
 * theme script in index.html sets/removes. Dropped from the original: the .png background lines (the real tree
 * is the .svg `.img` layers), and everything tied to the removed login/projects/email/wordmark elements.
 */

/* #region Theme variables (from public.css) */

:root {
    scroll-behavior: smooth;
}

html[data-darkreader-scheme="dark"] {
    --icon-button-color        : rgb(81, 142, 255);
    --icon-button-filter       : brightness(2.5);
    --icon-button-hover-color  : rgb(23, 92, 220);
    --icon-button-active-color : rgb(23, 92, 220);
    --icon-button-active-filter: brightness(3);

    --button-color       : #0087ff;
    --button-hover-color : #0077e0;
    --button-active-color: #006cca;
}

html:not([data-darkreader-scheme="dark"]) {
    --button-color            : #0c357e;
    --button-hover-color      : #164eb0;
    --button-active-color     : #255dc4;
    --icon-button-color       : var(--button-color);
    --icon-button-hover-color : var(--button-hover-color);
    --icon-button-active-color: var(--button-active-color);
}

/* #endregion */

/* #region Layout primitives (authored — these classes lived in the dropped template.css) */

* {
    box-sizing: border-box;
}

html,
body {
    margin : 0;
    padding: 0;
    height : 100%;
}

.column {
    display       : flex;
    flex-direction: column;
}

.full-center-content {
    justify-content: center;
    align-items    : center;
}

.gap-1 {
    gap: 1rem;
}

.gap-2 {
    gap: 2rem;
}

.relative {
    position: relative;
}

.page-content {
    height    : 100%;
    min-height: 100%;
    top       : 0;
}

/* #endregion */

/* #region Background + bottom tree (from public.css; .png background lines dropped) */

html:not([data-darkreader-scheme="dark"]) {
    background-color: #708cbd;
}

html[data-darkreader-scheme="dark"] {
    background-color: #02173c;
}

div.background {
    position  : fixed;
    top       : unset;
    width     : 100vw;
    bottom    : 0;
    height    : 100vh;
    min-height: 33.3vw;
    transition: opacity 0.2s;
}

div.background div.img {
    aspect-ratio   : 9/3;
    min-width      : max(100dvw, 70rem);
    width          : 100dvw;
    bottom         : 0;
    position       : absolute;
    background-size: contain;
    transition     : opacity 0.2s;
    left           : -9999px;
    right          : -9999px;
    margin-left    : auto;
    margin-right   : auto;
}

div.background div.img.light {
    opacity: 0;
}

html:not([data-darkreader-scheme="dark"]) div.background div.img.light {
    opacity: 1;
}

div.background div.img.dark {
    opacity: 0;
}

html[data-darkreader-scheme="dark"] div.background div.img.dark {
    opacity: 1;
}

/* #endregion */

/* #region Logo (the half-circle-with-tree brand symbol, centered) */

#index-logo {
    width    : 20rem;
    max-width: 80%;
    height   : auto;
}

/* #endregion */

/* #region Dark-mode toggle button (positioning from public.css, icon rules from template.css) */

.dark-mode-button {
    position    : absolute;
    left        : 0;
    right       : 0;
    margin-left : auto;
    margin-right: auto;
    top         : 2rem;
    background  : transparent;
    border      : none;
    z-index     : 9999;
    cursor      : pointer;
}

.dark-mode-button svg {
    width : 4rem;
    height: 4rem;
    filter: var(--button-filter);
}

.dark-mode-button .fill {
    fill      : var(--button-color);
    transition: fill 0.1s ease-in;
}

.dark-mode-button:hover .fill {
    fill: var(--button-hover-color);
}

.dark-mode-button:active .fill {
    fill: var(--button-active-color);
}

.dark-mode-button .stroke {
    stroke    : var(--button-color);
    transition: stroke 0.1s ease-in;
}

.dark-mode-button:hover .stroke {
    stroke: var(--button-hover-color);
}

.dark-mode-button:active .stroke {
    stroke: var(--button-active-color);
}

/* #endregion */

/* #region Index row + GitHub button (from public.css) */

.index-row {
    display        : flex;
    flex-direction : row;
    flex-wrap      : wrap;
    justify-content: center;
    row-gap        : 0.5rem;
}

.logo-button {
    position       : relative;
    text-decoration: none;
    border         : none;
    transition     : all 0.1s ease-in;
    display        : flex;
    flex-direction : column;
    width          : 5rem;
    height         : 5rem;
    background     : var(--icon-button-color);
    filter         : var(--icon-button-filter);
    cursor         : pointer;
}

.logo-button:hover {
    background: var(--icon-button-hover-color);
}

.logo-button:active {
    background: var(--icon-button-active-color);
    filter    : var(--icon-button-active-filter);
}

.github.logo-button {
    -webkit-mask-image: url("/Github.svg");
    -webkit-mask-size : contain;
    mask-image        : url("/Github.svg");
    mask-size         : contain;
}

/* #endregion */