@font-face {
    font-family: 'typewriter';
    src: url('assets/typewriter8.ttf');
}

:root {
    font-family: "typewriter", monospace;
    font-size: 12px;
    color: white;

    --delay-before: 0ms;
    --delay-after: 0ms;
    --reveal-delay: 0ms;
    
    --paper-color: #ffffee;
    --ink-color: #383b3e;
}

#background {
    position: absolute;
    left: 0; top: 0;

    width: 100%;
    height: 100%;

    background-color: white;
}

#background img {
    position: absolute;
    width: 100%;
    height: 100%;

    object-fit: cover;
    filter:invert()
}

#background::after {
    content: "";
    display: block;
    pointer-events: none;
    
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;

    mix-blend-mode: multiply;

    background: rgb(36, 31, 27);
}

#visible {
    width: 600px;
    height: 400px;

    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);

    /* outline: dashed yellow 1px; */

    display: flex;
    flex-direction: row;

    padding: 16px;
    gap: 16px;
}

.keycap {
    min-width: 31px;
    min-height: 32px;
    background: url(assets/keycap1.png);
    background-size: 100%;

    display: flex;
    align-items: center;
    justify-content: center;
    color: black;
    font-size: 16px;
}

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

    gap: 8px;
    justify-content: center;
}

.column > * {
    overflow: hidden;
}

#column-left {
    flex: 1;
}

#column-right {
    flex: 0;
    flex-basis: 256px;

    align-items: center;
}

#ring {
    /* -webkit-mask-image: radial-gradient(#000000 0%, #000000 50%, #00000000 100%); */

    position: relative;
    z-index: 0;

    flex-basis: 256px;

    min-width: 256px;
    min-height: 256px;
}

#ring-frame {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;

    background: url(assets/ring-darker.png);
    background-position: center;
    background-size: 100%;
    pointer-events: none;
}

#ring-content {
    background: black;
    clip-path: circle(120px at 50% 50%);

    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;

    pointer-events: none;

    /* background: url(assets/ring-bg.jpg); */
    /* background-size: cover; */
}

#ring-content > * {
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;
    width: 100%; height: 100%;

    clip-path: circle();

    object-fit: cover;

    --grow-in: ring-video-in 1s ease-in-out;
    --grow-out: ring-video-out 1s ease-in-out;

    will-change: transform;

    padding: 0;
    border: 0;
}

#ring-content > img {
    --gap: 28px;
    width: calc(100% - var(--gap) * 2);
    height: calc(100% - var(--gap) * 2);
    margin: var(--gap);
}

#ring-content::after {
    content: "";
    display: block;
    pointer-events: none;
    
    position: absolute;
    left: 0; right: 0; top: 0; bottom: 0;

    mix-blend-mode: multiply;
    
    background: url(assets/noise4.jpg);
    background-size: 100%;
}

#bipsi {
    width: 256px;
    height: 256px;
}

.info {
    flex: 1;
    max-height: 192px;

    display: flex;
}

#log {
    background: var(--paper-color);
    -webkit-mask-image: linear-gradient(to top,  
    hsla(0, 0%, 0%, 0) 0%,
    hsla(0, 0%, 0%, .9) 6%,
    hsla(0, 0%, 0%, 1) 8%,
    hsla(0, 0%, 0%, 1) 92%,
    hsla(0, 0%, 0%, .9) 94%,
    hsla(0, 0%, 0%, 0) 100%
    );

    border-top-left-radius: 1rem 2rem;
    border-top-right-radius: 1rem 2rem;
    border-bottom-left-radius: 1rem 2rem;
    border-bottom-right-radius: 1rem 2rem;

    overflow: hidden;

    display: flex;
    flex-direction: column;
    justify-content: flex-end;

    min-height: 256px;
    flex-grow: 1;

    background: url(assets/paper.png);
    background-size: 100% 100%;

    filter: brightness(.75);
}

#log-text {
    padding: 0;
    margin: 3em 2em;

    text-transform: uppercase;
}

#log-text h1 {
    text-align: center;
}

#location {
    align-self: flex-start;
}

.frame {
    position: relative;
    z-index: 0;

    flex: 1;
}

.frame > * {
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.frame#log > * {
    height: unset;
}

.image-panel {
    flex-grow: 1;

    background: black;
}

.text {
    color: var(--ink-color);
    padding: 8px;

    /* white-space: pre-wrap; */
}

.text p {
    /* text-align: justify; */
}

.outline-a {
    box-shadow: 0 0 0 2px slategray;
}

.char {
    --reveal-delay: 25ms;
    --delay-after: 0;
    --delay-before: 0;
}

.comma {
    --delay-after: 150ms;
}

.period, .colon, .question {
    --delay-after: 200ms;
}

.dash + .dash {
    --delay-after: 200ms;
}

h1, h2 {
    --delay-after: 500ms;
}

ul {
    padding-inline-start: 2em;
}

li {
    --delay-before: 200ms;
}

p {
    /* --delay-before: 200ms; */
}

.stamp {
    --sound: stamp;

    mix-blend-mode: multiply;
    --delay-after: 1000ms;
    --feed: true;

    animation-duration: 10s !important;
    animation-name: none !important;

    object-fit: contain;
    width: 100%;
    height: 128px;
}

.stamp.hidden {
    display: none;
}

.stamp.old {
    opacity: 50%;
}

hr {
    border: none;
    border-top: 2px solid var(--ink-color);

    --reveal-delay: 0ms;
    --sound: stamp;

    animation-duration: .5s !important;
    animation-name: char-reveal;

    opacity: .85;

    border-image: url(assets/border.png) 7 / 7px / 0 round;
    border-top-width: 7px;
}

hr.old {
    opacity: 25%;
}

.send {
    --delay-after: 1000ms;
}

.hidden {
    --feed: true;
    display: none;
}

.hidden.char {
    --feed: false;
    display: initial;
}

hr.hidden {
    --sound: stamp;
}

#log :not(.hidden) {
    animation-name: char-reveal;
    animation-direction: alternate;
    animation-duration: .125s;
}

#location-container {
    display: flex;
    position: relative;
    z-index: 1;
}

#location-container::before {
    content: "";
    background: black;
    z-index: -1;

    position: absolute;
    left: 8px; right: 8px; top: 8px; bottom: 8px;
}

#location {
    display: flex;

    /* border-radius: 2px; */

    border-image: url(assets/frame.png) 38 51;
    border-style: solid;
    border-width: 16px;

    padding: 2px 1px;

    white-space: pre;
    align-self: center;

    text-transform: uppercase;

    overflow: visible;
}

#location .char {
    --color: #CCC;

    font-family: monospace;
    color: var(--color);

    margin: 0 1px;
    padding: 0 1px;
    background-color: black;

    border-radius: 2px;
    border: 1px solid #222;

    box-sizing: border-box;

    --reveal-delay: 50ms;

    position: relative;
}

#location .char::after {
    position: absolute;
    content: "";
    top: 50%; left: 0; right: 0; bottom: 0;
    border-top: 1px solid #22222299;
    z-index: 0;
}

#location .char.hidden {
    display: initial;
    visibility: visible;
    color: transparent;
}

#location .char.hidden::before {
    color: var(--color);
    content: "";
    animation-name: char-reveal-split-flap;
    animation-direction: alternate;
    animation-duration: .5s;
    animation-iteration-count: infinite;

    position: absolute;
}

#location .char.hidden {
    animation-name: char-reveal-split-flap-under;
    animation-direction: alternate;
    animation-duration: .5s;
}

#location .char:not(.hidden)::before {
    color: var(--color);
    content: "";
    animation-name: none;
    animation-direction: alternate;
    animation-duration: .5s;

    position: absolute;
}

#log .old.char {
    mix-blend-mode: color-burn;
    color: #1a191e;
}

.manual {
    --manual: true;
}

.manual .char {
    --reveal-delay: 100ms;
}

#movement[hidden] {
    display: flex !important;
    visibility: hidden;
}

#key-prompt {
    mix-blend-mode: multiply;
    object-fit: contain;
    width: 100%;
    height: 48px;
}

@keyframes char-reveal {
    0%   {
        opacity: 0;
        filter: drop-shadow(0 16px black);
    }
}

@keyframes char-reveal-sc {
    0%   {
        box-shadow: inset 0px 0px 0 1px white;
        visibility: hidden; 
        background: white; 
    }
    50%  {
        box-shadow: inset 0px 0px 0 1px white;
        background: transparent; 
    }
    100% { 
        box-shadow: inset 0px 0px 0 1px transparent;
        color: white;
    }
}

@keyframes char-cursor {
    0%   { }
    100% { 
        background: white; 
    }
}

@keyframes grow-in {
    0% {
        transform: scale(0);
    }

    100% {
        transform: scale(1);
    }
}

@keyframes grow-out {
    0% {
        transform: scale(1);
    }
    
    100% {
        transform: scale(0);
    }
}

@keyframes ring-video-in {
    0% {
        transform: scale(0) rotate(-.25turn);
        opacity: 0;
    }
}

@keyframes ring-video-out {
    100% {
        opacity: 0;
    }
}