@font-face { font-family: "Stello"; src: url("./stello.woff2"); }

body {
	display: flex; min-height: 100vh;
	flex-flow: column;
}
main {
	display: grid; width: min(26em, 100%); margin: 5em auto 0;
	place-items: center;
	& > * { grid-area: 1 / 1; }
	@media(width > 86rem){
		translate: 0 clamp(-3em, -5em + 50vh - 50%, .5em);
	}
}
footer { margin-top: auto; }

button {
	cursor: pointer;
	&:focus-visible { outline: medium solid var(--focus); }
}
svg {
	display: block; width: 100%; height: auto;
	image { pointer-events: none; }
	text::selection { color: rgb(0 0 0 / .5%); }
}

.sending {
	#poster, #decho-matic, #result { translate: calc(50% + 50vw + 2em) 0; }
	@media(width > 64rem){
		#poster, #decho-matic, #result { translate: min(16em, 50vw - 16em) 0; }
		#stello-matic { translate: -15em 0; }
	}
}

.receiving {
	#poster, #stello-matic { translate: calc(-50% - 50vw - 2em) 0; }
	@media(width > 64rem){
		#poster, #stello-matic { translate: max(-16em, 16em - 50vw) 0; }
		#decho-matic, #result { translate: 15em 0; }
	}
}

@media(width <= 64rem){
	:is(.sending, .receiving) #poster {
		visibility: hidden;
		transition: translate .5s, visibility 0s .5s;
	}
}

#back {
	display: inline-block; padding: .3em .7em;
	position: absolute; inset: -3em 1.4em auto auto;
	color: var(--black); background: var(--link);
	border-image: url("/-/img/border.png?v=zPKbRAVC") 12 / 6px / 4px round;
	visibility: hidden;
	transition: top .3s, visibility 0s .3s;
	&:hover { rotate: 2deg; }
	&:focus-visible { outline: none; background: var(--focus); }
	@media(width <= 64rem){
		:is(.sending, .receiving) & {
			top: 1.4em; visibility: visible;
			transition: top .4s .2s, visibility 0s 0s;
		}
	}
}

#poster {
	padding: .5em;
	color: var(--black); background: var(--white);
	border-image: url("/-/img/border.png?v=zPKbRAVC") 12 / 6px / 12px round;
	box-shadow: 0 0 0 8px var(--white);
	z-index: 9;
	transition: translate .5s, visibility 0s 0s;
	button {
		outline-offset: -1em;
		.poster-device-highlight { transition: fill .1s; }
		&:focus-visible .poster-device-highlight { fill: var(--focus); }
	}
	h1 {
		margin: .5em 0 -.75em;
		font-size: 1em;
	}
	p, footer {
		line-height: 1.3; letter-spacing: -.05ch;
		text-align: justify;
	}
	footer {
		margin: 1.25em 0 0; padding: .25em .5em;
		color: var(--light); background: var(--black);
		text-align: center; text-wrap: balance;
		border-image: url("/-/img/border.png?v=zPKbRAVC") 12 / 8px / 4px round;
	}
	a {
		color: var(--link);
		text-decoration: .08em solid underline;
		&:focus-visible { color: var(--focus); }
	}
}

#js-required-error {
	display: grid; aspect-ratio: 1 / 1; width: 100%;
	place-items: center;
	color: var(--white); background-color: var(--black);
	border-image: url("/-/img/border.png?v=zPKbRAVC") 12 / 6px / 3px round;
	p { text-wrap: balance; text-align: center; }
	& ~ #actions { display: none; }
}

#actions {
	display: grid;
	grid: auto / 1fr 1fr;
	background: center / calc(100% - 1em) calc(100% - 1em) no-repeat
		linear-gradient(var(--black));
	button:focus-visible {
		outline: medium solid var(--focus); outline-offset: -1em;
	}
	image {
		transition: translate .3s linear(
			0, .06, .25, .57, 1 65%, .9, .85, .9, 1
		);
	}
	button:is(:hover, :focus-visible, .click-me) image {
		transition-timing-function: ease;
	}
	#send:is(:hover, :focus-visible, .click-me) svg {
		.poster-device { translate: 0 -30px; }
		.poster-device-shadow { translate: -16px -5px; }
	}
	#receive:is(:hover, :focus-visible, .click-me) svg {
		.poster-device { translate: 0 -35px; }
		.poster-device-shadow { translate: 14px -3px; }
	}
}

#stello-matic, #decho-matic {
	display: block;
	position: relative;
	transition: translate .5s, visibility 0s 0s;
	&[hidden]{
		visibility: hidden;
		transition: translate .5s, visibility 0s .5s;
	}
	svg {
		pointer-events: none;
		&:not(:first-child){ position: absolute; inset: 0 auto auto 0; }
	}
	button, label {
		display: flex;
		position: absolute;
		cursor: pointer;
		outline: none;
		img { pointer-events: none; }
		&:focus-visible img,
		&:has(:focus-visible) img { object-position: 50% 0; }
		&[disabled]{ pointer-events: none; }
		&:is(:active, [disabled]) img { object-position: 100% 0; }
	}
	img {
		display: block;
		object-fit: cover; object-position: 0 0;
	}
	::-webkit-file-upload-button { display: none; }
	::file-selector-button { display: none; }
}

#stello-matic {
	width: 18em;
	#stello-text, #stello-file {
		transition: visibility 0s;
		img { width: 6em; height: 3em; }
	}
	#stello-text {
		inset: 1.8em auto auto 3.3em;
		clip-path: inset(0 0 0 20%);
	}
	#stello-file { inset: 1.6em auto auto 8.1em; }
	#stello-file input {
		display: block; width: 1px; height: 1px; margin: -1px;
		position: fixed; inset: 0 auto auto 0;
		outline: none;
	}
	#stello-faster { inset: 8.1em auto auto 2.8em; }
	#stello-slower { inset: 7.6em auto auto 14.9em; }
	#stello-slower, #stello-faster {
		width: 2em; height: 3.5em;
		img { width: 2em; height: 2em; }
	}
	#stello-volume {
		width: 2em; height: 5em;
		position: absolute; inset: 12em auto auto 13.5em;
		z-index: -1;
	}
	#stello-louder, #stello-quieter {
		img { width: 3em; height: 3em; }
	}
	#stello-louder {
		inset: 11.9em auto auto 14.6em;
		z-index: 3;
	}
	#stello-quieter {
		inset: 14.3em auto auto 14.6em;
		z-index: 2;
	}
	#stello-start, #stello-stop {
		border-radius: 50%;
		img { width: 3em; height: 3em; }
	}
	#stello-start { inset: 12.2em auto auto 3.1em; }
	#stello-stop { inset: 15em auto auto 3.1em; }
	#stello-eject {
		width: 8.2em; height: 2.2em;
		inset: 2.8em auto auto 5.3em;
		z-index: 2; visibility: hidden;
		transition: visibility 0s;
		&:focus-visible + .cartridge rect { fill: var(--focus); }
	}
	.cartridge.label {
		width: 8em; height: 4.9em;
		position: absolute; inset: 2.9em auto auto 5.4em;
		transform: skewY(-2deg);
		font-size: 1em;
		textarea, pre {
			padding: 0; margin: 0;
			position: absolute; inset: .6em;
			color: var(--black); background: none;
			border: none; outline: none;
			letter-spacing: -.05ch; font-size: .75em; line-height: 1.1;
			white-space: normal; word-break: break-all;
			resize: none;
		}
		pre { overflow: hidden; }
		textarea[disabled]{ display: none; }
	}
	&:not(.inserted, .writing){
		.cartridge {
			opacity: 0;
			translate: 0 -100px;
			transition:
				translate .4s,
				opacity .2s ease-out .2s,
				background-color .4s,
				visibility 0s .4s;
		}
		.cartridge.label { visibility: hidden; }
	}
	&.playing #stello-wave-toucher { pointer-events: all; }
	&:not(.playing) #waves { display: none; }
	&.writing {
		#stello-file, #stello-text {
			transition: visibility 0s .3s;
			visibility: hidden;
		}
		.cartridge {
			translate: 0 -65px;
			transition:
				translate .4s ease,
				opacity .2s ease-out,
				background-color .4s,
				visibility 0s;
		}
		.cartridge.label { background-color: var(--white); }
	}
	&.inserted {
		#stello-file, #stello-text {
			visibility: hidden;
			transition: visibility 0s .4s;
		}
		#stello-eject { visibility: visible; transition: visibility 0s .4s; }
		.cartridge {
			transition:
				translate .5s linear(
					0, .05 16%, .15 28%, .68 54%, .77 69%, .8 90%, 1
				),
				opacity .2s ease-out,
				background-color .4s,
				visibility 0s;
		}
		.cartridge.label { pointer-events: none; }
	}
	&.inserted[hidden] #stello-eject { visibility: hidden; }
}

#decho-matic {
	width: 16.5em;
	transition:
		translate .5s,
		transform .5s 0s,
		opacity .5s .2s,
		visibility 0s;
	#decho-on-off {
		inset: 13em auto auto 3.3em;
		border-radius: 40%;
		overflow: clip;
		img { width: 5.5em; height: 5.5em; }
		&:focus-visible img { object-position: 25% 0; }
	}
	&.on #decho-on-off {
		img { object-position: 50% 0; }
		&:active img { object-position: 100% 0; }
		&:focus-visible img { object-position: 75% 0; }
	}
	.antenna {
		--wiggle-amount: 0;
		--wiggle-adjust: 1;
		animation: wiggle .1s linear infinite;
		&:nth-child(1 of .antenna){
			animation-delay: 0s;
			--wiggle-amount: var(--power-1);
		}
		&:nth-child(2 of .antenna){
			animation-delay: -.06s;
			--wiggle-amount: var(--power-2);
		}
		&:nth-child(3 of .antenna){
			animation-delay: -.02s;
			--wiggle-amount: var(--power-3);
		}
		&:nth-child(4 of .antenna){
			animation-delay: -.08s;
			--wiggle-amount: var(--power-4);
		}
		&:nth-child(5 of .antenna){
			animation-delay: -.04s;
			--wiggle-amount: var(--power-5);
		}
	}
	svg { overflow: visible; }
	#decho-ticket {
		width: 11em; height: 9.5em;
		inset: 24em auto auto 2.5em;
		transform: skewY(6deg);
		visibility: hidden;
		transition: visibility 0s .2s;
		#decho-next-ticket, #decho-ticket-focus { visibility: hidden; }
		&:focus-visible #decho-ticket-focus {
			visibility: visible;
			/* Workaround for a style invalidation bug in Firefox. */
			/* See https://bugzilla.mozilla.org/show_bug.cgi?id=2069613 */
			outline: 5em solid transparent;
		}
		svg {
			width: 12em; height: 10em;
			position: absolute; inset: auto auto 0 0;
		}
	}
	#decho-ticket-dispenser {
		translate: 0 -380px;
		transition: translate .2s cubic-bezier(.6, -.1, .8, 0);
	}
	&:is(.printed, .redeemed){ transform: translateY(-6em); }
	&.printed #decho-ticket {
		visibility: visible;
		transition: visibility 0s;
	}
	&.printed #decho-ticket-dispenser {
		translate: 0 0;
		transition: translate .8s linear(
			0, .17, .17, .34, .34, .51, .51, .68 70% 90%, 1
		) .4s;
	}
	&:not(.printed) #decho-ticket {
		#decho-next-ticket { visibility: visible; }
		#decho-next-ticket ~ * { visibility: hidden; }
	}
	&.redeemed {
		visibility: hidden; opacity: 0;
		transform: translateY(-6em);
		transition:
			translate .5s,
			transform .5s 0s,
			opacity .5s .2s,
			visibility 0s .7s;
		& + #result {
			visibility: visible; opacity: 1;
			transition: translate .5s, visibility 0s .4s, opacity .5s .4s;
		}
	}
}

#result {
	padding: 0 clamp(2em, 25vw - 6em, 3em);
	background-color: rgb(from var(--black) r g b / 50%);
	box-shadow: 0 0 2em 2em rgb(from var(--black) r g b / 50%);
	visibility: hidden; opacity: 0;
	transition: translate .5s, visibility 0s .5s, opacity .5s;
	&:not(.text) .text-only { display: none; }
	&:not(.file) .file-only { display: none; }
	h2 { margin: 0; font-size: 2.5em; }
	button, a {
		display: inline-block; padding: .3em .7em;
		color: var(--black); background: var(--link);
		border-image: url("/-/img/border.png?v=zPKbRAVC") 12 / 6px / 4px round;
		text-wrap: wrap; text-decoration: none;
		transition: rotate .2s ease;
		&:first-of-type:hover { rotate: 2deg; }
		&:hover { rotate: -2deg; }
		&:focus-visible { outline: none; background: var(--focus); }
	}
	figure {
		display: flex; max-height: 10em; padding: .5em; margin: 2em 0;
		align-items: safe center; gap: .75em;
		color: var(--black); background: var(--white);
		border-image: url("/-/img/border-filled.png?v=171qlRD2")
			64 / min(5vw, 32px) / min(4vw, 12px)
			round;
		line-height: 1.375;
		overflow: auto;
		img {
			align-self: start;
			width: 3.5em; height: 3.5em; margin: -.5em 0 -.5em -.5em;
			position: sticky; top: 0;
		}
		p {
			flex: 1;
			margin: 0;
		}
	}
	#result-actions {
		display: flex; margin-block-start: 2.5em;
		flex-flow: row wrap-reverse; gap: 2em; justify-content: end;
	}
	#result-copy {
		&.copied { rotate: 0deg; }
		&::after {
			content: "Copy to clipboard" / "";
			display: block; height: 1px; margin: -1px 0 0;
			overflow: clip;
		}
	}
}


@keyframes blink {
	0%, 50%, 100% { visibility: hidden; }
	25%, 75% { visibility: visible; }
}
@keyframes wave4 {
	0%, 100% { transform: scale(1, 1) skewY(0deg) translate(0, -480px); }
	10% { transform: scale(1, 1) skewY(0deg) translate(0, -360px); }
	20% { transform: scale(1, 1) skewY(0deg) translate(0, -240px); }
	30% { transform: scale(1, 1) skewY(0deg) translate(0, -120px); }
	40% { transform: scale(1, 1) skewY(0deg) translate(0, 0px); }
	50% { transform: scale(1, -1) skewY(4deg) translate(0, 0px); }
	60% { transform: scale(1, -1) skewY(4deg) translate(0, -120px); }
	70% { transform: scale(1, -1) skewY(4deg) translate(0, -240px); }
	80% { transform: scale(1, -1) skewY(4deg) translate(0, -360px); }
	90% { transform: scale(1, -1) skewY(4deg) translate(0, -480px); }
}
@keyframes wave3 {
	0%, 100% { transform: scale(1, 1) skewY(0deg) translate(0, -360px); }
	12.5% { transform: scale(1, 1) skewY(0deg) translate(0, -240px); }
	25% { transform: scale(1, 1) skewY(0deg) translate(0, -120px); }
	37.5% { transform: scale(1, 1) skewY(0deg) translate(0, 0px); }
	50% { transform: scale(1, -1) skewY(4deg) translate(0, 0px); }
	62.5% { transform: scale(1, -1) skewY(4deg) translate(0, -120px); }
	75% { transform: scale(1, -1) skewY(4deg) translate(0, -240px); }
	87.5% { transform: scale(1, -1) skewY(4deg) translate(0, -360px); }
}
@keyframes wave2 {
	0%, 100% { transform: scale(1, 1) skewY(0deg) translate(0, -240px); }
	16.67% { transform: scale(1, 1) skewY(0deg) translate(0, -120px); }
	33.33% { transform: scale(1, 1) skewY(0deg) translate(0, -0px); }
	50% { transform: scale(1, -1) skewY(4deg) translate(0, 0px); }
	66.67% { transform: scale(1, -1) skewY(4deg) translate(0, -120px); }
	83.33% { transform: scale(1, -1) skewY(4deg) translate(0, -240px); }
}
@keyframes wave1 {
	0%, 100% { transform: scale(1, 1) skewY(0deg) translate(0, -120px); }
	25% { transform: scale(1, 1) skewY(0deg) translate(0, 0px); }
	50% { transform: scale(1, -1) skewY(4deg) translate(0, 0px); }
	75% { transform: scale(1, -1) skewY(4deg) translate(0, -120px); }
}
@keyframes wave0 {
	0%, 100% { transform: scale(1, 1) skewY(0deg) translate(0, 0px); }
	50% { transform: scale(1, -1) skewY(4deg) translate(0, 0px); }
}
@keyframes wiggle {
	from { transform: skewX(calc(-3deg * var(--wiggle-amount) * var(--wiggle-adjust))); }
	from { transform: skewX(calc(3deg * var(--wiggle-amount) * var(--wiggle-adjust))); }
}