@import "./fonts/kalam/kalam.css";
@import "./fonts/caveat/caveat.css";
@import "./fonts/caveat-brush/caveat-brush.css";

:root {
    --brand-color-background: hsl(40, 60%, 83%);
    --brand-color-foreground: hsl(0, 56%, 70%);
    --gray-color-background: hsl(40, 0%, 83%);
    --text-color: hsl(0, 0%, 20%);
    font-size: 4px;
}

@media(max-width: 410px) {
    :root {
        font-size: 3px;
    }
}

html, body {
    margin: 0;
    padding: 0;
}

html {
    height: 100%;
}

body {
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: var(--brand-color-background);
    color: var(--text-color);
}

/* Loading animation */
@keyframes reveal {
    100% { opacity: 100%; }
}

:root {
    --loading-timeout: 10s;
    --loading-transition-duration: 1s;
}

body {
    opacity: 0;
    animation: reveal var(--loading-transition-duration, 1s);
    animation-delay: var(--loading-timeout, 10s);
    animation-fill-mode: forwards;
}

html.ka-ready body {
    animation: none;
    opacity: 100%;
    transition: opacity var(--loading-transition-duration, 1s);
}

/** CONTROLS **/

#ka-controls {
    display: flex;
    justify-content: center;
    width: 100%;
    z-index: 1;
}

#ka-controls > form {
    display: flex;
    justify-content: center;
    width: 100%;
}

#ka-controls > form.hidden {
    /* Hide the form */
    position: absolute;
    opacity: 0;
}

#ka-hint-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;

    display: flex;
    justify-content: center;
    align-items: end;
    pointer-events: none;
}

#ka-hint {
    margin: 4rem 0;
    border-radius: 5rem;
    font-size: 5rem;
    font-family: sans-serif;
    background: hsla(0, 0%, 0%, 80%);
    color: white;
    font-weight: bold;
    width: 80%;
    max-width: 192rem;
    padding: 0 10rem;
    opacity: 20%;
    transition:
        opacity 500ms,
        top 300ms,
        color 500ms,
        background 500ms
    ;
    animation: none;
    pointer-events: initial;
}

#ka-hint:hover {
    opacity: 100%;
    animation: none;
}

#ka-hint.highlight {
    opacity: 100%;
}

#ka-hint.typing {
    text-align: end;
}

#ka-hint.typing .user-input {
    font-weight: bold;
    font-style: italic;
}


#ka-hint.correct {
    background: darkgreen;
    color: white;
    font-weight: bold;
    animation: flash 10s;
    text-align: end;
}

#ka-hint.incorrect {
    background: maroon;
    color: white;
    font-weight: bold;
    animation: flash 10s;
    text-align: end;
}

@keyframes flash {
    0% { opacity: 20%; }
    5% { opacity: 100%; }
    75% { opacity: 100%; }
    100% { opacity: 20%; }
}


#ka-controls > form > input[type="text"] {
    font-size: 4rem;
    text-align: center;
    text-transform: uppercase;
    width: 100%;
    padding: 2rem 0;
}

#ka-controls > form > input[type="submit"] {
    font-size: 6rem;
    font-weight: bold;
    color: hsl(0, 0%, 40%);
}

.word.incorrect.checked {
	text-decoration: underline;
}

/** DOCUMENT **/

.word.blank.empty {
    animation: pulse 6s;
    animation-iteration-count: infinite;
}

@keyframes pulse {
    0% {
        stroke-width: 4em;
        stroke: blue;
        stroke-opacity: 0%;
    }
    10% {
        stroke: blue;
        stroke-opacity: 30%;
    }
    30% {
        stroke: white;
        stroke-width: 0.2em;
        stroke-opacity: 100%;
    }
    90% {
        stroke: white;
        stroke-width: 0.2em;
        stroke-opacity: 100%;
    }
    100% {
        stroke: white;
        stroke-width: 0.2em;
        stroke-opacity: 0%;
    }
}


.word.correct, .word.incorrect, .word.blank {
    font-family: kalam;
}

.word.correct {
    fill: green;
}

.word.incorrect {
    fill: red;
    text-decoration: line-through;
}

#ka-content {
    height: 100%;
    overflow: hidden;
}

#ka-content > svg {
    height: 100vh;
    width: 100vw;
}

#ka-content svg tspan.word.blank {
    fill: blue;
    stroke: white;
    stroke-width: 0.2em;
    paint-order: stroke fill;
}


/* DEBUG UTILITIES */

[data-debug] .ka-panel {
    outline: solid 1vw hsla(0, 60%, 60%, 40%);
}

[data-debug] .ka-current-panel {
    outline: solid 1vw hsla(0, 60%, 60%, 80%);
}

[data-debug] [data-word] {
    outline: solid 0.5vw hsla(120, 60%, 60%, 80%);
    text-decoration: purple dotted overline;
}

/* CONTENT CATALOGUE */

#ka-content .content-catalogue {
    font-size: 8rem;
    max-width: 960px;
    margin: auto;
    padding: 2rem;
}

header#brand {
    text-align: center;
}

#title {
  font-family: "Caveat Brush";
  font-size: 24rem;
  color: var(--brand-color-foreground);
  margin-bottom: 0;
}

#tagline {
  font-family: "kalam";
  font-size: 5rem;
  margin-top: 0;
}

#start-here {
    display: flex;
    flex-direction: column;
    max-height: 48rem;
    height: auto;
}

#start-here svg {
    height: auto;
    min-height: 24rem;
    width: auto;
}

#catalog h2 {
    font-size: 6rem;
    text-align: center;
}


ul#content-items {
    display: grid;
    grid-template-columns: repeat(auto-fill, 48rem);
    justify-content: center;
    gap: 2rem;
    padding: 0;
}

ul#content-items > li {
    display: block;
    width: 48rem;
    height: 48rem;
    overflow: hidden;
    border-radius: 2rem;
    box-shadow: hsla(0, 0%, 0%, 30%) .5rem .5rem 1rem;
    display: flex;
    background-color: var(--gray-color-background);
    background-size: cover;
}

ul#content-items > li > a {
    width: 100%;
    height: 100%;
    font-size: 5rem;
    text-align: center;
    text-decoration: none;
    padding: 2rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: white;
    text-shadow: hsla(0, 0%, 0%, 100%) 0 0 0.5rem;
    background: hsla(0, 0%, 0%, 40%);
    backdrop-filter: blur(1px);
    transition:
        background 500ms,
        backdrop-filter 500ms
    ;

}

ul#content-items > li > a::after {
    content: attr(lang) " " attr(data-level);
    align-self: end;
    text-transform: uppercase;
    font-family: monospace;
    font-size: 3rem;
    font-weight: bold;
}

ul#content-items > li > a:hover {
    background: hsla(0, 0%, 0%, 30%);
    backdrop-filter: blur(0);
}


/* UPLOAD FORM */
#off-canvas {
    position: absolute;
    top: 0;
    right: 0;
    background: white;
    padding: 8em;
    border: solid 2px gray;
    overflow: hidden;

    transition:
        opacity 200ms,
        max-width 500ms 250ms
    ;
    max-width: 0rem;
    opacity: 0;
}

#off-canvas:hover,
#off-canvas:focus {
    opacity: initial;
    max-width: 80rem;
}

#upload-form {
    display: flex;
    flex-direction: column;
    font-size: 4rem;
    font-family: monospace;
    width: 80rem;
}