<script lang="ts">
	import { page } from '$app/state';
</script>

<svelte:head>
	<title>{page.status} &mdash; Tea Sanctuary</title>
</svelte:head>

<section
	class="hero-background flex h-screen shrink-0 flex-col items-center justify-center gap-12 overflow-hidden p-4"
>
	<div class="flex flex-nowrap flex-col gap-5">
		<div class="flex flex-nowrap flex-col gap-3 items-center justify-center lg:flex-row lg:flex-nowrap">
			<div class="shrink-0 size-48 relative bg-slate-50 rounded-2xl shadow-[inset_0px_0px_0px_2px] shadow-slate-200">
				<img src="/common/dotted-line.svg" class="absolute left-0 right-0 top-0 bottom-0" alt="Пунктирная линия"/>
				<!-- В документации Tailwind советуют использовать "Inline SVG" -->
				<svg width="196" height="196" class="absolute left-0 right-0 top-0 bottom-0 stroke-slate-950" fill="none"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M48.996 95.53c-18.624 5.826-30.621 14.965-30.621 25.239 0 17.599 35.19 31.866 78.604 31.866s78.604-14.267 78.604-31.866c0-10.274-11.997-19.413-30.617-25.24"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M18.375 121.626c0 17.599 19.118 40.364 78.604 40.364 59.486 0 78.604-23.622 78.604-41.221"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M37.493 53.042c0 24.97 16.66 73.762 59.486 73.762 42.826 0 59.482-48.792 59.482-73.757"/><path stroke-linecap="round" stroke-linejoin="round" stroke-width="6" d="M96.98 72.083c32.85 0 59.481-8.523 59.481-19.036 0-10.514-26.631-19.037-59.482-19.037-32.85 0-59.482 8.523-59.482 19.037 0 7.175 12.403 13.423 30.722 16.667 2.118.375 1.516 4.375 4.613 20.787 9.272-8.774 6.42-19.261 8.735-19.063 4.915.42 10.082.645 15.412.645z" style="stroke-linecap:round;stroke-linejoin:miter"/><path d="M148.79 90.518c21.944 2.71 28.835-9.795 28.835-20.354 0-2.77-.279-5.264-.858-7.436" style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#020618;stroke-width:6;stroke-linecap:square;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000;stop-opacity:1"/><path d="M137.677 66.047c-4.989-3.6-21.321-6.238-40.698-6.238s-35.71 2.639-40.701 6.24" style="font-variation-settings:normal;opacity:1;vector-effect:none;fill:none;fill-opacity:1;stroke:#020618;stroke-width:6;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:4;stroke-dasharray:none;stroke-dashoffset:0;stroke-opacity:1;-inkscape-stroke:none;stop-color:#000;stop-opacity:1"/></svg>
			</div>

			<div class="font-disket font-bold text-slate-50 text-6xl [text-shadow:_0_0_15px_rgba(0,0,0,0.25)] text-center md:text-8xl lg:text-left">
				<h1 class="text-rose-200 [text-shadow:_0_0_15px_oklch(0.271_0.105_12.094_/_0.25)]">
					{page.status}
				</h1>
				<h1>SANCTUARY</h1>
			</div>
		</div>
	</div>
</section>

<style>
	@import "$src/app.css";
</style>