/* Lost Art Preservation Society - MAXIMUM CHAOS */

:root {
	--phi: 1.618;
}

html, html.standard-light, html.standard-dark {
	--color-page-text: #181818 !important;
	--color-page-bg: #ffffff !important;
	--color-navbar-text: #181818 !important;
	--color-navbar-bg: #ffffff !important;
}

body {
	background-color: #ffffff !important;
	color: #181818 !important;
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	overflow-x: hidden;
	cursor: crosshair;
}

h1, h2, h3, h4, h5, h6 {
	font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
	color: #181818 !important;
}

img {
	filter: grayscale(100%) contrast(1.2) !important;
}

/* GLOBAL CHAOS GRID - AGGRESSIVE */
.global-grid-overlay {
	position: fixed;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	pointer-events: none;
	z-index: 9999;
	background-image:
		linear-gradient(to right, rgba(0,0,0,0.12) 3px, transparent 3px),
		linear-gradient(to right, rgba(0,0,0,0.06) 1px, transparent 1px),
		linear-gradient(to bottom, rgba(0,0,0,0.12) 3px, transparent 3px),
		linear-gradient(to bottom, rgba(0,0,0,0.06) 1px, transparent 1px),
		linear-gradient(45deg, rgba(0,0,0,0.03) 1px, transparent 1px),
		linear-gradient(-45deg, rgba(0,0,0,0.03) 1px, transparent 1px);
	background-size:
		200px 100%,
		50px 100%,
		100% 200px,
		100% 50px,
		100px 100px,
		100px 100px;
	mix-blend-mode: multiply;
}

/* SECOND CHAOS GRID - OFFSET */
.global-grid-overlay-2 {
	position: fixed;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	pointer-events: none;
	z-index: 9998;
	background-image:
		linear-gradient(30deg, rgba(0,0,0,0.04) 2px, transparent 2px),
		linear-gradient(-60deg, rgba(0,0,0,0.04) 2px, transparent 2px);
	background-size: 80px 80px, 120px 120px;
	opacity: 0.7;
}

/* Hero - EXTREME */
.hero {
	min-height: 100vh !important;
	height: 100vh !important;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
	text-align: center !important;
	position: relative !important;
}

.hero h1 {
	font-size: 8vw !important;
	font-weight: 900 !important;
	letter-spacing: -0.05em !important;
	line-height: 0.85 !important;
	mix-blend-mode: difference !important;
}

/* Parallax containers */
.parallax-container {
	position: relative;
	overflow: hidden;
	height: 100vh;
	margin: -20vh 0;
}

img.parallax-image {
	position: absolute;
	top: -60%;
	left: -20%;
	width: 140%;
	height: 220%;
	object-fit: cover;
	object-position: center;
	will-change: transform;
	filter: grayscale(100%) contrast(1.3) !important;
}

.parallax-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 1;
}

.overlay-grid {
	background-image:
		linear-gradient(to right, rgba(0,0,0,0.15) 2px, transparent 2px),
		linear-gradient(to bottom, rgba(0,0,0,0.15) 2px, transparent 2px);
	background-size: 40px 40px;
}

.flash-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background: white;
	opacity: 0;
	pointer-events: none;
	z-index: 100;
	mix-blend-mode: difference;
}

/* CHAOS WORDS - MASSIVE */
.chaos-word {
	position: fixed;
	font-size: 35vw;
	font-weight: 900;
	text-transform: uppercase;
	opacity: 0.06;
	pointer-events: none;
	z-index: 0;
	white-space: nowrap;
	letter-spacing: -0.08em;
	will-change: transform;
	mix-blend-mode: multiply;
	line-height: 0.8;
}

.chaos-word.word-1 { top: 5%; left: -30%; }
.chaos-word.word-2 { top: 40%; right: -40%; font-size: 28vw; }
.chaos-word.word-3 { bottom: 5%; left: -10%; font-size: 45vw; opacity: 0.04; }
.chaos-word.word-4 { top: 70%; left: 20%; font-size: 20vw; opacity: 0.08; }
.chaos-word.word-6 { top: 15%; right: -20%; font-size: 22vw; opacity: 0.05; }

/* HORIZONTAL SLIDE TEXT */
.slide-text {
	position: fixed;
	font-size: 10vw;
	font-weight: 900;
	text-transform: uppercase;
	opacity: 0.06;
	pointer-events: none;
	z-index: 1000;
	white-space: nowrap;
	letter-spacing: -0.02em;
	will-change: transform;
	top: 30%;
	left: 0;
}

/* FLOATING FRAGMENTS */
.fragment {
	position: fixed;
	font-weight: 900;
	text-transform: uppercase;
	pointer-events: none;
	opacity: 0.04;
	white-space: nowrap;
}

.fragment-1 { font-size: 60vw; top: -20%; left: -30%; }
.fragment-2 { font-size: 40vw; bottom: -10%; right: -20%; }
.fragment-3 { font-size: 25vw; top: 50%; left: 60%; }

/* LAYER TEXT */
.layer-text {
	position: absolute;
	font-size: 18vw;
	font-weight: 900;
	opacity: 0.1;
	pointer-events: none;
	mix-blend-mode: multiply;
	z-index: 2;
	letter-spacing: -0.05em;
}

/* VERTICAL TEXT */
.vertical-text {
	writing-mode: vertical-rl;
	text-orientation: mixed;
	position: fixed;
	right: 2vw;
	top: 50%;
	transform: translateY(-50%);
	font-size: 5vw;
	font-weight: 900;
	opacity: 0.08;
	letter-spacing: 0.3em;
	z-index: 500;
}

/* STRETCHED TEXT */
.stretch-text {
	transform: scaleX(4);
	transform-origin: left;
	opacity: 0.6;
	letter-spacing: 0.8em;
}

.compress-text {
	transform: scaleX(0.3) scaleY(2.5);
	transform-origin: left;
}

/* Removed skew-text - no diagonal transforms */

/* CHAOS CONTENT POSITIONING - no rotation, horizontal shifts only */
.content.chaos {
	padding: 15rem 0 !important;
	margin-left: -25vw;
	max-width: 150vw;
}

.content.chaos-right {
	margin-left: 35vw;
	margin-right: -30vw;
}

.content.chaos-overlap {
	margin-top: -40vh;
	position: relative;
	z-index: 10;
}

.content.chaos-extreme {
	margin-left: -40vw;
	padding-left: 45vw;
}

/* SHIFTS - horizontal only, no rotation */
.shift-left { transform: translateX(-15vw); }
.shift-right { transform: translateX(12vw); text-align: right; }
.shift-extreme { transform: translateX(-20%); }

/* OVERLAP GRID */
.overlap-grid {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	margin-left: -20vw;
	margin-right: -20vw;
	gap: 0;
}

.overlap-grid > * {
	margin-left: -40%;
	margin-top: 10%;
}

.overlap-grid > *:nth-child(2) { margin-top: 25%; margin-left: -60%; }
.overlap-grid > *:nth-child(3) { margin-top: -15%; margin-left: -50%; }

/* GLITCH ANIMATIONS */
@keyframes glitch-skew {
	0% { transform: skewX(0deg); }
	10% { transform: skewX(-2deg); }
	20% { transform: skewX(3deg); }
	30% { transform: skewX(0deg); }
	40% { transform: skewX(2deg); }
	50% { transform: skewX(-1deg); }
	60% { transform: skewX(0deg); }
	70% { transform: skewX(-3deg); }
	80% { transform: skewX(1deg); }
	90% { transform: skewX(0deg); }
	100% { transform: skewX(-2deg); }
}

@keyframes flicker {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.8; }
	52% { opacity: 0; }
	54% { opacity: 0.9; }
	56% { opacity: 0.4; }
	58% { opacity: 1; }
}

@keyframes tear {
	0%, 100% { clip-path: inset(0 0 0 0); }
	25% { clip-path: inset(20% 0 30% 0); }
	50% { clip-path: inset(50% 0 10% 0); }
	75% { clip-path: inset(10% 0 60% 0); }
}

@keyframes jitter {
	0%, 100% { transform: translate(0, 0); }
	10% { transform: translate(-2px, 1px); }
	20% { transform: translate(2px, -1px); }
	30% { transform: translate(-1px, 2px); }
	40% { transform: translate(1px, -2px); }
	50% { transform: translate(-2px, -1px); }
	60% { transform: translate(2px, 1px); }
	70% { transform: translate(1px, 2px); }
	80% { transform: translate(-1px, -2px); }
	90% { transform: translate(2px, -1px); }
}

@keyframes scan-lines {
	0% { background-position: 0 0; }
	100% { background-position: 0 100%; }
}

/* SCAN LINES OVERLAY */
.scan-lines {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	pointer-events: none;
	z-index: 9997;
	background: repeating-linear-gradient(
		0deg,
		rgba(0,0,0,0.03) 0px,
		rgba(0,0,0,0.03) 1px,
		transparent 1px,
		transparent 3px
	);
	animation: scan-lines 8s linear infinite;
}

/* NOISE OVERLAY */
.noise-overlay {
	position: fixed;
	top: -50%;
	left: -50%;
	width: 200%;
	height: 200%;
	pointer-events: none;
	z-index: 9996;
	opacity: 0.03;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
	animation: jitter 0.1s infinite;
}

/* GLITCH DUPLICATE */
.glitch-text {
	position: relative;
}

.glitch-text::before,
.glitch-text::after {
	content: attr(data-text);
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	opacity: 0.8;
}

.glitch-text::before {
	color: #ff0000;
	z-index: -1;
	animation: glitch-1 3s infinite linear alternate-reverse;
}

.glitch-text::after {
	color: #0000ff;
	z-index: -2;
	animation: glitch-2 2s infinite linear alternate-reverse;
}

@keyframes glitch-1 {
	0%, 100% { clip-path: inset(40% 0 50% 0); transform: translate(-3px, 0); }
	20% { clip-path: inset(10% 0 70% 0); transform: translate(3px, 0); }
	40% { clip-path: inset(60% 0 20% 0); transform: translate(-3px, 0); }
	60% { clip-path: inset(30% 0 40% 0); transform: translate(3px, 0); }
	80% { clip-path: inset(80% 0 5% 0); transform: translate(-3px, 0); }
}

@keyframes glitch-2 {
	0%, 100% { clip-path: inset(25% 0 60% 0); transform: translate(3px, 0); }
	20% { clip-path: inset(70% 0 15% 0); transform: translate(-3px, 0); }
	40% { clip-path: inset(5% 0 80% 0); transform: translate(3px, 0); }
	60% { clip-path: inset(50% 0 30% 0); transform: translate(-3px, 0); }
	80% { clip-path: inset(15% 0 55% 0); transform: translate(3px, 0); }
}

/* BUTTONS - CHAOTIC but horizontal */
.am-button {
	padding: 1rem 3rem !important;
	font-size: 0.75rem !important;
	letter-spacing: 0.2em !important;
	text-transform: uppercase !important;
	transition: transform 0.1s;
}

.am-button:hover {
	transform: scale(1.1) translateX(5px);
}

/* RESPONSIVE CHAOS */
@media (max-width: 768px) {
	.chaos-word { font-size: 50vw; }
	.hero h1 { font-size: 15vw !important; }
	.diagonal-text { font-size: 20vw; }
}

/* NAVBAR with translucent background for readability */
.navbar-transparent {
	background: rgba(255, 255, 255, 0.85) !important;
	backdrop-filter: blur(10px);
	-webkit-backdrop-filter: blur(10px);
	position: fixed !important;
	top: 0;
	left: 0;
	right: 0;
	z-index: 10000 !important;
	box-shadow: 0 1px 0 rgba(24, 24, 24, 0.1);
}

.navbar-transparent + .hero {
	margin-top: 0 !important;
	padding-top: 4.25rem;
}

/* INVERT ON SCROLL CLASS */
.inverted {
	filter: invert(1);
}

/* TEAR EFFECT */
.tear-effect {
	animation: tear 5s infinite;
}

/* RANDOM POSITION SHIFTS - linear only */
.shift-1 { transform: translateX(15vw); }
.shift-2 { transform: translateX(-20vw) translateY(10vh); }
.shift-3 { transform: translateY(-15vh); }

/* FORM SAFE ZONE - blocks chaos overlays for usability */
.form-safe-zone {
	position: relative;
	z-index: 10000;
	background: #ffffff;
	padding: 2rem;
	box-shadow: 0 0 60px rgba(255,255,255,0.9);
}

.form-safe-zone input,
.form-safe-zone textarea,
.form-safe-zone select,
.form-safe-zone button,
.form-safe-zone iframe {
	position: relative;
	z-index: 10001;
}

/* Subpage hero - smaller */
.hero-sub {
	min-height: 50vh !important;
	height: 50vh !important;
}

.hero-sub h1 {
	font-size: 6vw !important;
}