/* Velvelyne font by Mariel Nils, Manon Van der Borght, with the contribution of Raphaël Bastide, Benjamin Dumond */
/* https://velvetyne.fr/fonts/velvelyne/ */
@font-face {
    font-family: 'Velvelyne';
    src: url('assets/Velvelyne-Bold.woff2') format('woff2'),
         url('assets/Velvelyne-Bold.woff') format('woff');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Velvelyne';
    src: url('assets/Velvelyne-Regular.woff2') format('woff2'),
         url('assets/Velvelyne-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

/* Visually hide elements withouth affecting Screen Readers*/
h1,
.visually-hidden {
    position: absolute;
    left:     -10000px;
    top:      auto;
    width:    1px;
    height:   1px;
    overflow: hidden;
}

:root {
    --base-fsz: 16;
    --fsz: 16;
    font-family: 'Velvelyne', sans-serif;
    --base: #EBEBEB;
    --primary: #8C3600;
    --secondary: #D9D9D9;
    --svh: 1svh;
}

html {
    background-color: var(--base);
}

html:has(.app-started) {
    background-color: var(--primary);
}

body * {
    font-size: calc(1rem*var(--fsz)/var(--base-fsz));
}

body {
    background-color: var(--base);
}

.screen--initialize {
    min-height: calc(100*var(--svh));
    margin: 0 auto;
    padding: 30px 15px;
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    --fsz: 40;
    transition: opacity 0.3s, transform 0.5s;
}

.screen--disabled {
    pointer-events: none;
}

.options {
    border: var(--primary) 2px dashed;
    border-radius: 0.7em;
    padding: 0.5em;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0.3em;
    box-sizing: border-box;
}

.options__item {
    display: block;
    box-sizing: border-box;
    width: 100%;
    border-radius: 0.7em;
    background-color: var(--secondary);
    padding: 1em 1em 1.15em 1em;
    color: var(--primary);
    transition: background-color 0.3s, color 0.3s;
    cursor: pointer;
}

@media (hover: hover) {
    .options__item:hover {
        background-color: var(--primary);
        color: var(--base);
    }
}

.options__item-title {
    --fsz: 40;
    font-weight: bold;
    text-transform: lowercase;
    margin-top: -0.2em;
}

.options__item-icon {
    display: inline-block;
    height: 1.2em;
    width: 1.2em;
    vertical-align: top;
    margin-left: 0.1em;;
}

.options__item-icon * {
    transition: stroke 0.3s;
}

@media (hover: hover) {
    .options__item:hover .options__item-icon * {
        stroke: var(--base)
    }
}

.options__item-caption {
    --fsz: 24;
}

.notice {
    --fsz: 20;
    color: #999999;
    align-self: start;
    margin-top: 0.5em;
}

.notice + .notice {
    margin-top: 0.2em;
}

.app-started .links,
.app-started-no-transition .links {
    opacity: 0;
    pointer-events: none;
}

.links {
    --fsz: 20;
    color: #999999;
    position: absolute;
    right: 10px;
    bottom: 10px;
    transition: opacity 0.3s;
}   

.links a {
    text-decoration-skip-ink: none;
    text-decoration: underline;
    cursor: alias;
}

.screen--dropzone {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    transition: opacity 0.3s;
    opacity: 0;
    background-color: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.dragging-file .screen--dropzone {
    opacity: 1;
}

.dropzone__title {
    color: var(--base);
    text-transform: lowercase;
    font-weight: bold;
    --fsz: 40;
}

canvas {
    cursor: grab;
}

canvas:active {
    cursor: grabbing;
}


.app-started .screen--initialize {
    opacity: 0;
    transform: translate(0, -30px);
}

.app-started-no-transition .screen--initialize {
    display: none
}

.screen--app {
    background-color: var(--primary);
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s 0.4s;
    height: calc(100*var(--svh));
    width: 100%;
    overflow: hidden;
    position: relative;
}

body:not(.app-started):not(.app-started-no-transition) .screen--app {
    height: 0;
}

.app-started .screen--app,
.app-started-no-transition .screen--app {
    opacity: 1;
    pointer-events: initial;
    visibility: visible;
}

.app-started-no-transition .screen--app {
    transition: none;
}

.hidden { 
    display: none;
}

.shutter-outer {
    position: absolute;
    bottom: calc(50% - 240px - 120px);
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 100px;
    background: var(--base);
    border-radius: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: opacity 0.3s;
    opacity: 0;
    pointer-events: none;
}

@media (max-width: 580px) {
    .shutter-outer {
        bottom: 30px;
    }
}

.shutter-inner {
    width: 85px;
    height: 85px;
    background: var(--base);
    border-radius: 100%;
    border: 3px solid var(--primary);
    transition: width 0.3s, height 0.3s, border-width 0.3s;
}

@media (hover: hover) {
    .shutter-outer:hover .shutter-inner {
        width: 75px;
        height: 75px;
        border-width: 7px;
    }
}

.shutter-outer--enabled {
    opacity: 1;
    pointer-events: all;
    transition: none;
}

.loader {
    display: block;
    visibility: hidden;
    pointer-events: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: var(--primary);
    text-transform: lowercase;
    background-color: var(--base);
    border-radius: 0.7em;
    --fsz: 30;
    overflow: hidden;
    padding: 0.4em 0.8em;
    padding-top: 0;
    z-index: 1;
    transition: transform 0.3s, visibility 0s 0.3s;
}

.loader.loading {
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.3s, visibility 0s 0s;
}

.loader span {
    animation-name: drop;
    animation-duration: 2.5s;
    animation-iteration-count: infinite;
    display: inline-block;
    transform: translateY(-120%);
}

.loader span:nth-child(1) {
    animation-delay: 0s;
}
.loader span:nth-child(2) {
    animation-delay: 0.2s;
}
.loader span:nth-child(3) {
    animation-delay: 0.4s;
}
.loader span:nth-child(4) {
    animation-delay: 0.6s;
}
.loader span:nth-child(5) {
    animation-delay: 0.8s;
}
.loader span:nth-child(6) {
    animation-delay: 1s;
}
.loader span:nth-child(7) {
    animation-delay: 1.2s;
}
.loader span:nth-child(8) {
    animation-delay: 1.4s;
}
.loader span:nth-child(9) {
    animation-delay: 1.6s;
}

@keyframes drop {
    0% {
        transform: translateY(-120%);
    }
    25% {
        transform: translateY(0);
    }
    75% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(120%);
    }
}

.loader.loading ~ .p5Canvas {
    animation-name: blink;
    animation-duration: 3s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}

@keyframes blink {
    0% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
    100% {
        opacity: 1;
    }
}

.controls { 
    display: flex;
    gap: 15px;
    flex-wrap: nowrap;
    position: absolute;
    z-index: 1;
    left: 50%;
    top: 85%;
    transform: translate(-50%, -50%) scale(0);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s, visibility 0s 0.3s;
}

.controls.active {
    visibility: visible;
    pointer-events: all;
    transform: translate(-50%, -50%) scale(1);
    transition: transform 0.3s, visibility 0s 0s;
}

.controller__title {
    color: #dbdbdb;
    --fsz: 18;
    margin-right: 0.2em;
    transform: translateY(0.1em);
    display: inline-block;
}

.controller {
    display: flex;
    flex-direction: column-reverse;
    align-items: center;
}

.controller.depth-control {
    align-items: start;
}

.controller button {
    cursor: pointer;
}

@media (hover: hover) {
    #download svg g {
        transition: transform 0.4s;
    }

    #download:hover #png-download {
        transform: translateY(-5px) translateX(8px);
    }

    #download:hover #obj-download {
        transform: translateY(5px) translateX(-8px);
    }

    #restart svg{
        transform: rotate(0deg);
        transition: transform 0.4s;
    }

    #restart:hover svg{
        transform: rotate(180deg);
    }
}

input[type=range] {
    -webkit-appearance: none; /* Hides the slider so that custom slider can be made */
    width: min(40vw, 200px); /* Specific width is required for Firefox. */
    background: transparent; /* Otherwise white in Chrome */
    padding: 15px 0px;
}

input[type=range]::-webkit-slider-thumb {
-webkit-appearance: none;
}

input[type=range]:focus {
    outline: none; /* Removes the blue border. You should probably do some kind of focus styling for accessibility reasons though. */
}

input[type=range]::-ms-track {
    width: 100%;
    cursor: pointer;

    /* Hides the slider so custom styles can be added */
    background: transparent; 
    border-color: transparent;
    color: transparent;
}

input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none;
    border: 1px solid var(--primary);
    height: 25px;
    width: 25px;
    border-radius: 100%;
    background: #dbdbdb;
    cursor: pointer;
    transform: translate( 0, -45%);
}

input[type=range]::-moz-range-thumb {
    border: 1px solid var(--primary);
    height: 25px;
    width: 25px;
    border-radius: 100%;
    background: #dbdbdb;
    cursor: pointer;
    transform: translate( 0, -45%);
}

input[type=range]::-webkit-slider-thumb {
    margin-top: 0; /* You need to specify a margin in Chrome, but in Firefox and IE it is automatic */
}



input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 4px;
    border: 1px solid var(--primary);
    cursor: pointer;
    background: #dbdbdb;
    border-radius: 1.3px;
}

input[type=range]::-moz-range-track  {
    width: 100%;
    height: 4px;
    border: 1px solid var(--primary);
    cursor: pointer;
    background: #dbdbdb;
    border-radius: 1.3px;
}
  
input[type=range]:focus::-webkit-slider-runnable-track {
    background: #dbdbdb;
}

.page {
    fill: var(--secondary);
    stroke: var(--primary);
}

.filename {
    fill:var(--primary);
}

.line-icon {
    stroke: var(--primary);
    stroke-width: 1.5;
    stroke-linecap: round;
}

svg {
    overflow: visible;
}

.screen--load {
    position: fixed;
    top: 0;
    left: 0;
    height: 0;
    width: 0;
    background-color: rgb(238 238 238 / 80%);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    transition: opacity 0.3s, visibility 0s 0.3s, height 0s 0.3s, width 0s 0.3s;
    z-index: 1;
}

.screen--loading {
    opacity: 1;
    height: 100%;
    width: 100%;
    visibility: visible;
    pointer-events: all;
}

.downloader {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    color: var(--base);
    text-transform: lowercase;
    background-color: var(--primary);
    border-radius: 1em;
    --fsz: 30;
    overflow: hidden;
    padding: 0.4em 0.8em;
    padding-top: 0.2em;
    z-index: 2;
    transition: transform 0.3s, visibility 0s 0.3s;
    white-space: nowrap;
}

.downloader span {
    display: inline-block;
    width: 4.5ch;
}

.screen--loading .downloader {
    visibility: visible;
    transform: translate(-50%, -50%) scale(1);
}

.options__item-icon-holder {
    white-space: nowrap;
}

@media (max-width: 580px) {
    /* .downloader {
        --fsz: 25;
    } */

    .screen--initialize {
        --fsz: 30;
    }

    .options__item-title {
        --fsz: 30;
    }
    .options__item-caption {
        --fsz: 20;
    }
    .notice,
    .links {
        --fsz: 18;
    }
}

@media (max-width: 475px) {

}