@import "tailwindcss";
@import "particles.css";

@theme {
	--font-display: "Unbounded", "Segoe UI", sans-serif;
	--font-body: "Urbanist", "Segoe UI", sans-serif;
	--font-mono: "IBM Plex Mono", "Consolas", monospace;

	--color-shelf-ink: #10172e;
	--color-shelf-ocean: #1d4f78;
	--color-shelf-teal: #178f78;
	--color-shelf-coral: #ff7a59;
	--color-shelf-gold: #ffc95c;
	--color-shelf-cloud: #f7f2e8;
	--color-shelf-mist: #e7f4ff;

	--animate-float-soft: floatSoft 12s ease-in-out infinite;
	--animate-orbit-slow: orbitSlow 22s linear infinite;
	--animate-marquee: marquee 26s linear infinite;

	@keyframes floatSoft {
		0%,
		100% {
			transform: translate3d(0, 0, 0) rotate(0deg);
		}

		50% {
			transform: translate3d(14px, -18px, 0) rotate(3deg);
		}
	}

	@keyframes orbitSlow {
		0% {
			transform: rotate(0deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	@keyframes marquee {
		0% {
			transform: translateX(0%);
		}

		100% {
			transform: translateX(-50%);
		}
	}
}

@layer base {
	html {
		scroll-behavior: smooth;
	}

	body {
		font-family: var(--font-body);
		background: #f9f4e9;
	}
}

@layer utilities {
	.font-display {
		font-family: var(--font-display);
	}

	.font-mono {
		font-family: var(--font-mono);
	}

	.bg-aurora {
		background-image:
			radial-gradient(circle at 6% -2%, rgb(255 201 92 / 42%), transparent 29%),
			radial-gradient(circle at 90% -12%, rgb(23 143 120 / 34%), transparent 34%),
			radial-gradient(circle at 74% 70%, rgb(29 79 120 / 26%), transparent 44%),
			linear-gradient(128deg, #fffdf8 0%, #f0f7ff 45%, #eefdf6 100%);
	}

	.paper-grain {
		position: absolute;
		inset: 0;
		pointer-events: none;
		background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180' viewBox='0 0 180 180'%3E%3Cg fill='%23000000' fill-opacity='.07'%3E%3Ccircle cx='13' cy='10' r='1.4'/%3E%3Ccircle cx='72' cy='38' r='1'/%3E%3Ccircle cx='149' cy='27' r='1.3'/%3E%3Ccircle cx='29' cy='89' r='1.1'/%3E%3Ccircle cx='95' cy='105' r='1.4'/%3E%3Ccircle cx='164' cy='119' r='1.2'/%3E%3Ccircle cx='66' cy='152' r='1.25'/%3E%3C/g%3E%3C/svg%3E");
		opacity: 0.2;
		mix-blend-mode: multiply;
	}

	.glass-card {
		background: linear-gradient(145deg, rgb(255 255 255 / 78%), rgb(255 255 255 / 52%));
		border: 1px solid rgb(255 255 255 / 78%);
		backdrop-filter: blur(14px);
		box-shadow: 0 20px 55px rgb(16 23 46 / 16%);
	}

	.ink-gradient {
		background-image: linear-gradient(108deg, #10172e 0%, #1d4f78 42%, #178f78 80%, #ff7a59 100%);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
	}

	.marquee-track {
		display: flex;
		width: max-content;
		animation: var(--animate-marquee);
	}

	.book-card {
		position: relative;
		border: 1px solid rgb(16 23 46 / 12%);
		background: linear-gradient(135deg, rgb(255 255 255 / 90%), rgb(247 252 255 / 88%));
		box-shadow: 0 12px 24px rgb(16 23 46 / 10%);
	}

	.live-clock-shell {
		@apply inline-flex items-center gap-3 rounded-3xl border border-white/50 bg-white/65 px-4 py-3 shadow-[0_18px_45px_rgba(16,23,46,0.12)] backdrop-blur-xl;
	}

	.live-clock-icon {
		@apply grid h-11 w-11 place-items-center rounded-2xl bg-linear-to-br from-shelf-gold to-shelf-coral text-shelf-ink shadow-lg shadow-shelf-gold/25;
	}

	.live-clock-label {
		@apply text-[11px] font-bold uppercase tracking-[0.18em] text-shelf-ink/55;
	}

	.live-clock-time {
		@apply mt-0.5 font-display text-[1.1rem] leading-none text-shelf-ink sm:text-[1.25rem];
	}

	.live-clock-date {
		@apply mt-1 text-[0.8rem] font-medium text-shelf-ink/70;
	}

	.live-clock-chip {
		@apply inline-flex items-center gap-3 rounded-[1.25rem] border border-white/20 bg-white/12 px-4 py-3 text-white shadow-[0_12px_28px_rgba(11,30,46,0.16)] backdrop-blur-md;
	}

	.live-clock-chip .live-clock-label {
		@apply text-white/70;
	}

	.live-clock-chip .live-clock-time {
		@apply mt-0 text-[1rem] text-white;
	}

	.live-clock-chip .live-clock-date {
		@apply mt-0 text-[0.78rem] text-white/75;
	}

	.book-card::before {
		content: "";
		position: absolute;
		left: 0;
		top: 0;
		height: 100%;
		width: 8px;
		background: linear-gradient(180deg, rgb(23 143 120 / 90%), rgb(29 79 120 / 80%));
		border-top-left-radius: inherit;
		border-bottom-left-radius: inherit;
	}

	.reveal-item {
		opacity: 0;
		transform: translateY(22px) scale(0.985);
		transition: opacity 0.7s ease, transform 0.7s ease;
	}

	.reveal-item.is-visible {
		opacity: 1;
		transform: translateY(0) scale(1);
	}
}

@media (prefers-reduced-motion: reduce) {
	.marquee-track {
		animation: none;
	}

	.reveal-item,
	.reveal-item.is-visible {
		opacity: 1;
		transform: none;
		transition: none;
	}
}