@import "tailwindcss";

@theme {
	--font-script: Rancho, ui-serif;
	--font-sans: "Source Sans 3", "Merriweather Sans", ui-sans-serif;
	--font-serif: "Merriweather", ui-serif;

	/* Custom breakpoint for 4K+ screens */
	--breakpoint-3xl: 120.0625rem; /* 1921px */

	/* Custom Black Colors */
	--color-abyss: #0b1215;
	--color-shadow: #0f171f;
	--color-eclipse: #0b0b0b;
	--color-storm: #020c1a;
	--color-deep: #011122;
	--color-obsidian: #161616;
}
/* Alternative approach using pseudo-element for better browser support */
body::before {
	content: "";
	position: fixed;
	/* Extend beyond viewport to ensure full coverage after transformations */
	top: -50%;
	left: -50%;
	right: -50%;
	bottom: -50%;
	z-index: -1;

	/* Your WebP pattern */
	background-image: url("skyscraper.webp");
	background-size: 100px 100px;
	background-repeat: repeat;
	background-position: center;

	/* Apply transformations here */
	transform: rotate(15deg) skew(25deg) scale(4);
	opacity: 0.4;
	animation: backdrop-drift 60s linear infinite;
	transition: transform 1.5s ease-in-out;
}

/* Backdrop animation */
@keyframes backdrop-drift {
	0% {
		transform: rotate(15deg) skew(25deg) scale(4);
	}
	25% {
		transform: rotate(20deg) skew(30deg) scale(4.1);
	}
	50% {
		transform: rotate(10deg) skew(20deg) scale(3.9);
	}
	75% {
		transform: rotate(18deg) skew(28deg) scale(4.05);
	}
	100% {
		transform: rotate(15deg) skew(25deg) scale(4);
	}
}

/* Page-specific backdrop variations with animations */
body.page-akteure::before {
	animation: backdrop-drift-akteure 45s ease-in-out infinite;
}

body.page-ausgabe::before {
	animation: backdrop-drift-ausgabe 55s ease-in-out infinite;
}

body.page-search::before {
	animation: backdrop-drift-search 40s ease-in-out infinite;
}

body.page-ort::before {
	animation: backdrop-drift-ort 65s ease-in-out infinite;
}

body.page-kategorie::before {
	animation: backdrop-drift-kategorie 50s ease-in-out infinite;
}

body.page-piece::before {
	animation: backdrop-drift-piece 58s ease-in-out infinite;
}

body.page-edition::before {
	animation: backdrop-drift-edition 42s ease-in-out infinite;
}

/* Page-specific keyframes */
@keyframes backdrop-drift-akteure {
	0% {
		transform: rotate(-35deg) skew(-40deg) scale(4.2);
	}
	25% {
		transform: rotate(-30deg) skew(-35deg) scale(4);
	}
	50% {
		transform: rotate(-40deg) skew(-45deg) scale(4.4);
	}
	75% {
		transform: rotate(-32deg) skew(-38deg) scale(4.1);
	}
	100% {
		transform: rotate(-35deg) skew(-40deg) scale(4.2);
	}
}

@keyframes backdrop-drift-ausgabe {
	0% {
		transform: rotate(40deg) skew(15deg) scale(4.5);
	}
	25% {
		transform: rotate(45deg) skew(20deg) scale(4.3);
	}
	50% {
		transform: rotate(35deg) skew(10deg) scale(4.7);
	}
	75% {
		transform: rotate(42deg) skew(18deg) scale(4.4);
	}
	100% {
		transform: rotate(40deg) skew(15deg) scale(4.5);
	}
}

@keyframes backdrop-drift-search {
	0% {
		transform: rotate(0deg) skew(45deg) scale(3.8);
	}
	25% {
		transform: rotate(5deg) skew(50deg) scale(3.6);
	}
	50% {
		transform: rotate(-5deg) skew(40deg) scale(4);
	}
	75% {
		transform: rotate(2deg) skew(48deg) scale(3.7);
	}
	100% {
		transform: rotate(0deg) skew(45deg) scale(3.8);
	}
}

@keyframes backdrop-drift-ort {
	0% {
		transform: rotate(60deg) skew(-30deg) scale(4.8);
	}
	25% {
		transform: rotate(65deg) skew(-25deg) scale(4.6);
	}
	50% {
		transform: rotate(55deg) skew(-35deg) scale(5);
	}
	75% {
		transform: rotate(62deg) skew(-28deg) scale(4.7);
	}
	100% {
		transform: rotate(60deg) skew(-30deg) scale(4.8);
	}
}

@keyframes backdrop-drift-kategorie {
	0% {
		transform: rotate(-25deg) skew(50deg) scale(4.1);
	}
	25% {
		transform: rotate(-20deg) skew(55deg) scale(3.9);
	}
	50% {
		transform: rotate(-30deg) skew(45deg) scale(4.3);
	}
	75% {
		transform: rotate(-22deg) skew(52deg) scale(4);
	}
	100% {
		transform: rotate(-25deg) skew(50deg) scale(4.1);
	}
}

@keyframes backdrop-drift-piece {
	0% {
		transform: rotate(45deg) skew(-25deg) scale(4.3);
	}
	25% {
		transform: rotate(50deg) skew(-20deg) scale(4.1);
	}
	50% {
		transform: rotate(40deg) skew(-30deg) scale(4.5);
	}
	75% {
		transform: rotate(47deg) skew(-22deg) scale(4.2);
	}
	100% {
		transform: rotate(45deg) skew(-25deg) scale(4.3);
	}
}

@keyframes backdrop-drift-edition {
	0% {
		transform: rotate(-50deg) skew(35deg) scale(3.9);
	}
	25% {
		transform: rotate(-45deg) skew(40deg) scale(3.7);
	}
	50% {
		transform: rotate(-55deg) skew(30deg) scale(4.1);
	}
	75% {
		transform: rotate(-48deg) skew(38deg) scale(3.8);
	}
	100% {
		transform: rotate(-50deg) skew(35deg) scale(3.9);
	}
}

/*
  The default border color has changed to `currentColor` in Tailwind CSS v4,
  so we've added these compatibility styles to make sure everything still
  looks the same as it did with Tailwind CSS v3.

  If we ever want to remove these styles, we need to add an explicit border
  color utility to any element that depends on these defaults.
*/
@layer base {
	*,
	::after,
	::before,
	::backdrop,
	::file-selector-button {
		border-color: var(--color-gray-200, currentColor);
	}
}

@utility font-variant-small-caps {
	font-variant-caps: small-caps;
}

/* Search loading spinner animation */
@keyframes spin {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

.search-loading-spin {
	animation: spin 1s linear infinite;
}

@layer components {
	html {
		font-size: clamp(11px, calc(12px + (100vw - 1500px) / 100), 17px);
	}

	body {
		@apply bg-slate-50;
	}

	h1,
	h2,
	h3,
	h4 {
		@apply font-serif font-bold;
	}

	a {
		@apply hyphens-none underline decoration-dotted hover:decoration-solid text-slate-700 hover:text-slate-900;
	}

	ul {
		@apply my-2;
	}

	li {
		@apply ml-14 list-disc;
	}

	a[aria-current="page"] {
		@apply text-red-500!;
	}

	main {
		@apply grow shrink-0;
	}

	/* =============================
	   NEWSPAPER LAYOUT STYLES
	   ============================= */

	/* Essential styles that cannot be represented in Tailwind */
	.newspaper-page-container {
		margin-bottom: 2rem;
	}

	/* Page header backdrop blur */
	.newspaper-page-container .absolute .page-indicator {
		pointer-events: auto;
		backdrop-filter: blur(2px);
	}

	/* Responsive header scaling */
	@media (max-width: 768px) {
		.newspaper-page-container .absolute {
			transform: scale(0.9);
		}
	}

	/* Image size constraints with Tailwind utilities */
	.single-page {
		display: flex;
		justify-content: center;
	}

	.single-page .newspaper-page-image {
		width: auto;
		height: clamp(600px, 50vh, 900px);
		max-height: 90vh;
		object-fit: contain;
		max-width: 100%;
	}

	/* Navigation button hover styles */
	button#prevPageBtn:hover:not([style*="display: none"]),
	button#nextPageBtn:hover,
	button#beilageBtn:hover {
		background-color: rgb(209 213 219) !important; /* gray-300 */
		color: rgb(55 65 81) !important; /* gray-700 */
	}

	button#beilageBtn:hover {
		background-color: rgb(254 215 170) !important; /* amber-200 */
		color: rgb(146 64 14) !important; /* amber-800 */
	}

	/* Scrollspy hover effect - only when not active */
	.scrollspy-hover:hover:not(.font-medium) {
		background-color: rgb(254 242 242); /* red-50 */
	}

	/* =============================
	   INHALTSVERZEICHNIS SCROLLSPY STYLES
	   ============================= */

	/* Remove default spacing from custom element */
	inhaltsverzeichnis-scrollspy {
		display: block;
		margin: 0;
		padding: 0;
	}

	/* Simple transition for entry visibility */
	.inhalts-entry {
		transition: opacity 0.3s ease;
	}
}
