html {
    font: #{$base-font-size}/1.2 $font-sans;
    font-weight: 400;
    color: #fff;
    min-width: 320px;
    word-break: normal;

    &.block-scroll {
        overflow: hidden;
    }
}
body {
    @include font-smooth;
    background: $color-primary;
    color: #fff;
    cursor: default;
    overflow-x: hidden;
    overscroll-behavior: none;

    &.is-loading * {
        cursor: wait !important;
    }
}
*, *:before, *:after {
    text-rendering: optimizeLegibility;
}
strong {
    font-weight: 600;
}
em {
    font-style: normal;
}
figure, p, dl, dt, dd, ul, ol, li {
    margin: 0;
    padding: 0;
}
figure, picture {
    display: block;
}
nav li:before {
    display: none;
}
label {
    cursor: pointer;
}
button {
    background: none;
    border: none;
    cursor: pointer;

    &:global([disabled]) {
        cursor: not-allowed;
    }
}

// Scrollbar
html {
    scrollbar-width: thin;
    scrollbar-color: rgba($color-tertiary, 0.6) $color-primary-darker;
}
::-webkit-scrollbar {
    width: 12px;
}
::-webkit-scrollbar-track {
    background: $color-primary-darker;
}
::-webkit-scrollbar-thumb {
    background: rgba($color-tertiary, 0.6);
    border: 4px solid $color-primary-darker;
    border-radius: 10px;
}

// Accessibility outline
// Remove default focus styles for mouse users if :focus-visible is supported
[data-js-focus-visible] :focus:not([data-focus-visible-added]) {
    outline: none;
}
[data-focus-visible-added], *:focus-visible {
    outline: 1px dashed $color-secondary;
}
input[type="text"], input[type="email"], input[type="password"] {
    outline: none;
}

// Selection
::selection { color: #fff; background: $color-secondary; }
::-moz-selection { color: #fff; background: $color-secondary; }

// Images glitches fix
// img {backface-visibility: hidden;}



/* Titles
========================================================================== */
#{headings(1,6)} {
    margin: 0;
    font-weight: normal;
    font-style: normal;
}


/* Global elements
========================================================================== */
// Split text elements
.word, .char {
    display: inline-block;
    transform-style: preserve-3d;
    will-change: transform;
}
.text-split {
    span, &__line {
        display: inline-block;
        transition: opacity 0.7s var(--ease-quart), transform 0.7s var(--ease-quart);
    }
}

// Mask for animations
.mask {
    display: block;
    overflow: hidden;
    white-space: nowrap;

    span {
        display: inline-block;
    }
}

// Page loading overlay
.page-loading {
    position: fixed;
    z-index: 2000;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    cursor: wait;
}