@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700;900&display=swap');

:root {
	--bg: #030305;
	--text: #fdfdfd;
	--text-dim: #a1a1aa;
	--accent: #ff4500;
	--accent-glow: rgba(255, 69, 0, 0.4);
	--cyan: #00f0ff;
}

* { box-sizing: border-box; }

body {
	margin: 0;
	font-family: "Inter", sans-serif;
	background: #0a0a0c;
	background-image: radical-gradient(circle at top, #1c1b22 0%, #0a0a0c 100%);
	color: var(--text);
	overflow-x: hidden;
	line-height: 1.6;
}

.noise {
	position: fixed; inset: 0; pointer-events: none; opacity: 0.1; z-index: 50;
	background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
}

.ghost {
	position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
	font-size: min(56vw, 900px); font-weight: 900;
	font-family: "JetBrains Mono", monospace;
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(255, 255, 255, 0.08);
	pointer-events: none; z-index: 0;
	opacity: 0.5;
}

.code-bg { position: fixed; inset: 0; z-index: 1; pointer-events: none; }
.code-row {
	position: absolute; opacity: 0.12; font-size: 13px; white-space: nowrap;
	font-family: "JetBrains Mono", monospace;
	color: var(--cyan);
}

main { position: relative; z-index: 3; }

.terminal-block, .terminal-frame {
	width: min(1100px, 92vw); margin: 4vh auto;
	background: rgba(5, 5, 7, 0.92);
	border: 1px solid rgba(255, 255, 255, 0.1);
	backdrop-filter: blur(20px);
	-webkit-backdrop-filter: blur(20px);
	border-radius: 24px;
	box-shadow: 0 40px 80px rgba(0,0,0,0.8), inset 0 1px 0 rgba(255,255,255,0.05);
}

.hero {
	min-height: 92vh; padding: 8vh 6vw;
	display: flex; flex-direction: column; justify-content: center;
	gap: 24px;
}

.tag-cloud { display: flex; flex-wrap: wrap; gap: 12px; }
.tag-cloud span {
	border: 1px solid rgba(255, 255, 255, 0.15);
	padding: 8px 16px; font-size: 13px; font-family: "JetBrains Mono", monospace;
	background: rgba(255, 255, 255, 0.03);
	border-radius: 100px;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	cursor: default;
}
.tag-cloud span:hover {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
	box-shadow: 0 0 20px var(--accent-glow);
	transform: translateY(-3px) scale(1.05);
}

.line {
	max-width: 900px; line-height: 1.6; font-size: clamp(20px, 2.4vw, 32px);
	color: var(--text-dim); margin: 0;
}

h1 {
	margin: 16px 0; font-size: clamp(100px, 18vw, 240px);
	line-height: 0.9; letter-spacing: -2px; font-weight: 900;
	font-family: "JetBrains Mono", monospace;
	background: linear-gradient(135deg, #fff 0%, #aaa 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	text-shadow: 0 20px 40px rgba(0,0,0,0.5);
}

.accent {
	color: var(--accent); font-weight: 700;
	text-shadow: 0 0 24px var(--accent-glow);
}

.scroll-scene { height: 220vh; position: relative; }
.sticky {
	position: sticky; top: 4vh; height: 92vh; padding: 40px;
	border-radius: 32px; display: flex; flex-direction: column;
}

.term-head {
	color: var(--cyan); font-size: clamp(14px, 1.8vw, 20px); margin-bottom: 24px;
	font-family: "JetBrains Mono", monospace; font-weight: 700;
	text-shadow: 0 0 10px rgba(0, 240, 255, 0.4);
	display: flex; align-items: center; gap: 12px;
}
.term-head::before {
	content: ''; display: inline-block; width: 10px; height: 10px;
	background: var(--cyan); border-radius: 50%;
	box-shadow: 0 0 10px var(--cyan);
}

.curling-stage, .map-stage {
	position: relative; flex-grow: 1;
	border: 1px solid rgba(255, 255, 255, 0.05);
	border-radius: 16px;
	background: radial-gradient(circle at center, rgba(255,255,255,0.03) 0%, transparent 70%);
	overflow: hidden;
}

.sheet {
	position: absolute; left: 50%; transform: translateX(-50%); top: 5%; height: 88%;
	filter: drop-shadow(0 20px 40px rgba(0,0,0,0.5));
}
.sheet rect { fill: rgba(200, 230, 245, 0.1); stroke: rgba(255,255,255,0.15); stroke-width: 2; }
.sheet circle:nth-of-type(1) { stroke: rgba(255, 69, 0, 0.8); }
.sheet circle:nth-of-type(2) { stroke: rgba(255, 255, 255, 0.2); }
.sheet circle:nth-of-type(3) { stroke: rgba(255, 69, 0, 0.8); }
.sheet circle:nth-of-type(4) { stroke: var(--cyan); }

.stone {
	position: absolute; width: 56px; height: 56px; margin: -28px 0 0 -28px;
	border-radius: 50%; border: 2px solid rgba(255,255,255,0.1);
	box-shadow: 0 10px 20px rgba(0,0,0,0.6), inset 0 2px 10px rgba(255,255,255,0.3);
	backdrop-filter: blur(4px);
}
.stone::after {
	content: ""; position: absolute; left: 14px; right: 14px; top: 10px; height: 8px;
	border-radius: 10px; background: rgba(255,255,255,0.8);
	box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}
.red { background: radial-gradient(circle at 30% 30%, #ff4500, #991a00); box-shadow: 0 10px 20px rgba(255,69,0,0.2), inset 0 4px 10px rgba(255,255,255,0.2); }
.blue { background: radial-gradient(circle at 30% 30%, #00f0ff, #005a99); box-shadow: 0 10px 20px rgba(0,240,255,0.2), inset 0 4px 10px rgba(255,255,255,0.2); }

.impact {
	position: absolute; inset: 0;
	background: radial-gradient(circle at 50% 35%, rgba(255,255,255,0.15) 0%, transparent 50%);
	opacity: 0; pointer-events: none; mix-blend-mode: screen; transition: opacity 0.1s;
}

.comic-impact {
	position: absolute;
	font-family: "Inter", sans-serif;
	font-weight: 900;
	font-size: clamp(30px, 5vw, 60px);
	color: #ffeb3b;
	text-transform: uppercase;
	-webkit-text-stroke: 2px #000;
	text-shadow: 4px 4px 0px #ff4500, 8px 8px 0px #000;
	transform: translate(-50%, -50%) scale(0) rotate(-15deg);
	opacity: 0;
	pointer-events: none;
	z-index: 10;
	transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.comic-impact.show {
	transform: translate(-50%, -50%) scale(1) rotate(5deg);
	opacity: 1;
}
#comic1 { left: 40%; top: 40%; }
#comic2 { left: 55%; top: 55%; font-size: clamp(40px, 6vw, 80px); color: #00f0ff; text-shadow: 4px 4px 0 #000; -webkit-text-stroke: 2px #fff; }
#comic3 { left: 50%; top: 20%; color: #ff4500; text-shadow: 4px 4px 0 #ffeb3b, 8px 8px 0 #000; }

.score {
	position: absolute; bottom: 8%; left: 50%; transform: translateX(-50%);
	font-size: clamp(18px, 2vw, 32px); font-weight: 700;
	border: 1px solid rgba(255, 255, 255, 0.1);
	padding: 12px 30px; opacity: 0; border-radius: 100px;
	background: rgba(10, 10, 15, 0.85); backdrop-filter: blur(12px);
	box-shadow: 0 10px 30px rgba(0,0,0,0.5), 0 0 20px var(--accent-glow);
	transition: opacity 0.5s ease; white-space: nowrap; font-family: "JetBrains Mono", monospace;
}

.map-svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.street { stroke: rgba(255, 255, 255, 0.05); stroke-width: 4; fill: none; stroke-linecap: round; }
.route-base { stroke: rgba(255, 69, 0, 0.15); stroke-width: 6; fill: none; stroke-linecap: round; }
.route-dash { 
	stroke: var(--accent); stroke-width: 6; fill: none; 
	stroke-dasharray: 12 12; stroke-dashoffset: 1200; 
	filter: drop-shadow(0 0 8px var(--accent)); stroke-linecap: round;
}

.pin {
	position: absolute; width: 28px; height: 28px; background: var(--accent);
	border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
	box-shadow: 0 0 20px var(--accent-glow);
}
.pin::after {
	content: ""; position: absolute; width: 12px; height: 12px;
	left: 8px; top: 8px; border-radius: 50%; background: #fff;
}
.pin span {
	position: absolute; left: 36px; top: -6px; transform: rotate(45deg);
	white-space: nowrap; color: var(--text); font-weight: 600;
	font-size: clamp(16px, 1.8vw, 24px); text-shadow: 0 2px 10px rgba(0,0,0,0.8);
}
.pin-a { left: 23%; top: 18%; background: var(--cyan); box-shadow: 0 0 20px rgba(0, 240, 255, 0.4); }
.pin-b { left: 66%; top: 76%; transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); }

.error-toast {
	position: absolute; top: 10%; left: 50%; transform: translateX(-50%) translateY(-20px);
	background: rgba(255,69,0,0.9); color: #fff; padding: 12px 24px; border-radius: 8px;
	font-weight: bold; font-family: "JetBrains Mono", monospace; font-size: 14px;
	box-shadow: 0 10px 30px rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: all 0.3s;
	z-index: 20; border: 1px solid rgba(255,255,255,0.3); backdrop-filter: blur(8px);
}
.error-toast.show {
	transform: translateX(-50%) translateY(0); opacity: 1;
}

.car {
	position: absolute; 
	font-size: 40px; line-height: 40px;
	transform: translate(-50%, -50%);
	text-shadow: 0 10px 20px rgba(0,0,0,0.5);
	z-index: 10;
}

.photos {
	min-height: 92vh; padding: 8vh 6vw; display: flex; flex-direction: column; justify-content: center;
}

h2 {
	font-size: clamp(40px, 7vw, 130px); margin: 0 0 16px; font-weight: 900;
	line-height: 0.95; letter-spacing: -1px;
	background: linear-gradient(135deg, #fff 0%, #aaa 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

.photo-stack {
	position: relative; height: clamp(450px, 60vh, 650px); margin: 40px 0 24px;
}
.photo-stack img {
	position: absolute; left: 50%; top: 50%;
	width: min(300px, 40vw); aspect-ratio: 3 / 4; object-fit: cover;
	border-radius: 12px; border: 8px solid #fff;
	box-shadow: 0 25px 50px -12px rgba(0,0,0,0.6), 0 0 15px rgba(0,0,0,0.3);
	filter: grayscale(0.8) contrast(1.1);
	transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
	cursor: pointer;
}
.photo-stack:hover img { filter: grayscale(0) contrast(1.05); }

.photo-stack img:nth-child(1) { transform: translate(calc(-50% - 35%), -50%) rotate(-12deg); z-index: 1; }
.photo-stack img:nth-child(2) { transform: translate(calc(-50% - 15%), -50%) rotate(-5deg); z-index: 2; }
.photo-stack img:nth-child(3) { transform: translate(-50%, -50%) rotate(0deg); z-index: 3; }
.photo-stack img:nth-child(4) { transform: translate(calc(-50% + 15%), -50%) rotate(8deg); z-index: 4; }

.photo-stack:hover img:nth-child(1) { transform: translate(calc(-50% - 90%), calc(-50% + 20px)) rotate(-12deg); }
.photo-stack:hover img:nth-child(2) { transform: translate(calc(-50% - 30%), calc(-50% + 5px)) rotate(-4deg); }
.photo-stack:hover img:nth-child(3) { transform: translate(calc(-50% + 30%), calc(-50% + 5px)) rotate(4deg); }
.photo-stack:hover img:nth-child(4) { transform: translate(calc(-50% + 90%), calc(-50% + 20px)) rotate(12deg); }
.photo-stack:hover img:nth-child(4):hover { z-index: 10; transform: translate(calc(-50% + 90%), calc(-50% + 20px)) rotate(12deg) scale(1.05); }
.tag-cloud.big {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: center;
}
.tag-cloud.big span {
	font-size: clamp(15px, 2.2vw, 24px); padding: 12px 24px; border-radius: 16px;
	font-weight: 800; font-family: "JetBrains Mono", monospace;
	background: #fff; color: #000; border: 3px solid #000;
	box-shadow: 6px 6px 0px var(--accent);
}
.tag-cloud.big span:hover {
	background: #fff; color: #000;
	box-shadow: 10px 10px 0px var(--cyan); transform: translate(-4px, -4px);
}

.speech-bubble {
	position: relative;
	background: #fff;
	color: #000;
	font-family: 'JetBrains Mono', monospace;
	font-weight: 800;
	padding: 8px 16px;
	border-radius: 12px;
	border: 3px solid #000;
	display: inline-block;
	margin-bottom: 25px;
	font-size: 14px;
	box-shadow: 4px 4px 0px var(--accent);
	transform: rotate(-2deg);
}

.speech-bubble::after {
	content: '';
	position: absolute;
	bottom: -15px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 15px 10px 0;
	border-style: solid;
	border-color: #000 transparent transparent;
}

.speech-bubble::before {
	content: '';
	position: absolute;
	bottom: -10px;
	left: 50%;
	transform: translateX(-50%);
	border-width: 12px 8px 0;
	border-style: solid;
	border-color: #fff transparent transparent;
	z-index: 1;
}

@media (max-width: 900px) {
	.photo-stack img { width: min(180px, 45vw); }
	.photo-stack:hover img:nth-child(1) { transform: translate(calc(-50% - 70%), -50%) rotate(-12deg); }
	.photo-stack:hover img:nth-child(2) { transform: translate(calc(-50% - 25%), -50%) rotate(-4deg); }
	.photo-stack:hover img:nth-child(3) { transform: translate(calc(-50% + 25%), -50%) rotate(4deg); }
	.photo-stack:hover img:nth-child(4) { transform: translate(calc(-50% + 70%), -50%) rotate(12deg); }

	/* Fix pin-b overflow on mobile */
	.pin-b span {
		left: auto;
		right: 32px;
		top: 10px;
		transform: rotate(45deg);
		text-align: right;
	}

	/* Tags in 3 rows closer together with comic-like bubbles on mobile */
	.tag-cloud.big {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		justify-content: center;
	}
	.tag-cloud.big span {
		font-size: 13px;
		padding: 8px 12px;
		border-radius: 12px;
		border: 2px solid #000;
		color: #000;
		background: #fff;
		box-shadow: 3px 3px 0 var(--accent);
		text-align: center;
		white-space: normal;
		width: calc(33.33% - 8px);
		min-width: 90px;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

/* RSVP Buttons */
.rsvp-btn {
	padding: 18px 40px;
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(16px, 2.8vw, 24px);
	font-weight: 800;
	border: 3px solid #fff;
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	text-transform: uppercase;
	position: relative;
	user-select: none;
	width: fit-content;
}

.rsvp-btn.yes {
	background: #fff;
	color: #000;
	box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

.rsvp-btn.yes:hover {
	transform: scale(1.05) translateY(-5px);
	box-shadow: 0 20px 50px rgba(255, 255, 255, 0.4);
}

.rsvp-btn.no {
	background: transparent;
	color: #eee;
	border-color: rgba(255, 255, 255, 0.3);
}

.rsvp-btn.no:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(255, 69, 0, 0.05);
}

.rsvp-btn.no.error {
	animation: shake-btn 0.5s cubic-bezier(.36,.07,.19,.97) both;
	background: rgba(255, 69, 0, 0.2);
	border-color: var(--accent);
	color: #fff;
}

.rsvp-btn.no.tiny {
	transform: scale(0.4);
	opacity: 0.8;
	pointer-events: auto;
}

@keyframes shake-btn {
	10%, 90% { transform: translate3d(-2px, 0, 0); }
	20%, 80% { transform: translate3d(4px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
	40%, 60% { transform: translate3d(6px, 0, 0); }
}

.shake-page {
	animation: shake-btn 0.15s cubic-bezier(.36,.07,.19,.97) infinite;
}

@media (max-width: 600px) {
	.rsvp-btn { width: 90vw; padding: 15px 20px; font-size: 16px; }
	.rsvp-btn.no.tiny { width: auto; transform: scale(0.5); }
}

::selection { background: var(--accent); color: #fff; }

/* RSVP Buttons */
.rsvp-container {
	padding: 0 6vw 20vh !important;
	display: flex !important;
	flex-direction: column !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 40px !important;
	text-align: center !important;
}

.rsvp-btn {
	padding: 18px 40px;
	font-family: 'JetBrains Mono', monospace;
	font-size: clamp(16px, 2.8vw, 24px);
	font-weight: 800;
	border: 3px solid #fff;
	border-radius: 16px;
	cursor: pointer;
	transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
	text-transform: uppercase;
	position: relative;
	user-select: none;
	width: fit-content;
}

.rsvp-btn.yes {
	background: #fff;
	color: #000;
	box-shadow: 0 10px 30px rgba(255, 255, 255, 0.2);
}

.rsvp-btn.yes:hover {
	transform: scale(1.05) translateY(-5px);
	box-shadow: 0 20px 50px rgba(255, 255, 255, 0.4);
}

.rsvp-btn.no {
	background: transparent;
	color: #eee;
	border-color: rgba(255, 255, 255, 0.3);
}

.rsvp-btn.no:hover {
	border-color: var(--accent);
	color: var(--accent);
	background: rgba(255, 69, 0, 0.05);
}

.rsvp-btn.no.error {
	animation: shake-btn 0.5s cubic-bezier(.36,.07,.19,.97) both;
	background: rgba(255, 69, 0, 0.2);
	border-color: var(--accent);
	color: #fff;
}

.rsvp-btn.no.tiny {
	transform: scale(0.4);
	opacity: 0.8;
	pointer-events: auto;
}

@keyframes shake-btn {
	10%, 90% { transform: translate3d(-2px, 0, 0); }
	20%, 80% { transform: translate3d(4px, 0, 0); }
	30%, 50%, 70% { transform: translate3d(-6px, 0, 0); }
	40%, 60% { transform: translate3d(6px, 0, 0); }
}

.shake-page {
	animation: shake-btn 0.15s cubic-bezier(.36,.07,.19,.97) infinite;
}

@media (max-width: 600px) {
	.rsvp-btn { width: 90vw; padding: 15px 20px; font-size: 16px; }
	.rsvp-btn.no.tiny { width: auto; transform: scale(0.5); }
}