tremor-tracker/src/app/globals.css

@tailwind base;
@tailwind components;
@tailwind utilities;

:root {
	--background: #ffffff;
	--foreground: #171717;
}

/* @media (prefers-color-scheme: dark) {
  :root {
    --background: #0a0a0a;
    --foreground: #ededed;
  }
} */

body {
	color: var(--foreground);
	background: var(--background);
}

/* Increase specificity and use !important where necessary */
.mapboxgl-popup .mapboxgl-popup-content {
	@apply rounded-xl p-4 px-5 drop-shadow-lg border border-neutral-300 max-w-xs !important;
}

/* Hide the popup tip */
.mapboxgl-popup .mapboxgl-popup-tip {
	display: none !important;
}

/* Child elements */
.mapboxgl-popup-content h3 {
	@apply text-sm font-medium text-neutral-800 !important;
}

.mapboxgl-popup-content p {
	@apply text-xs text-neutral-600 !important;
}

.mapboxgl-popup-content p + p {
	@apply text-neutral-500 !important;
}

.icon-link {
	/* default styles if needed */
}

.icon-link:hover,
.icon-link:focus {
	background-color: #16424b;
}

.icon-link:hover h3,
.icon-link:focus h3,
.icon-link:hover p,
.icon-link:focus p {
	color: #fff !important;
}

.icon-link:hover h3,
.icon-link:hover p,
.icon-link:focus h3,
.icon-link:focus p {
	color: #111;
	/* or black */
}

/* ---- LAVA FLOOD OVERLAY ---- */
.lava-flood-overlay {
	pointer-events: none;
	position: fixed;
	top: -100vh;
	left: 0;
	right: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	display: flex;
	justify-content: center;
	align-items: flex-start;
	transition: top 0.9s cubic-bezier(0.6, 0, 0.2, 1);
}

.lava-flood-overlay.lava-active {
	top: 0;
	transition: top 0.33s cubic-bezier(0.6, 0, 0.2, 1);
}

.lava-flood-overlay img,
.lava-gradient {
	width: 100vw;
	height: 100vh;
	object-fit: cover;
	pointer-events: none;
	user-select: none;
	filter: brightness(1.15) saturate(1.8) drop-shadow(0 0 80px #ff5500);
}

/* ---- INSANE SCREEN SHAKE (LinkedIn) ---- */
@keyframes supershake {
	0% {
		transform: translate(0, 0) rotate(0);
	}

	5% {
		transform: translate(-20px, 5px) rotate(-2deg);
	}

	10% {
		transform: translate(18px, -8px) rotate(2deg);
	}

	15% {
		transform: translate(-22px, 8px) rotate(-4deg);
	}

	20% {
		transform: translate(22px, -2px) rotate(4deg);
	}

	25% {
		transform: translate(-18px, 12px) rotate(-2deg);
	}

	30% {
		transform: translate(18px, -10px) rotate(2deg);
	}

	35% {
		transform: translate(-22px, 14px) rotate(-4deg);
	}

	40% {
		transform: translate(22px, -12px) rotate(4deg);
	}

	45% {
		transform: translate(-18px, 8px) rotate(-2deg);
	}

	50% {
		transform: translate(18px, -14px) rotate(4deg);
	}

	55% {
		transform: translate(-22px, 12px) rotate(-4deg);
	}

	60% {
		transform: translate(22px, -8px) rotate(2deg);
	}

	65% {
		transform: translate(-18px, 10px) rotate(-2deg);
	}

	70% {
		transform: translate(18px, -12px) rotate(2deg);
	}

	75% {
		transform: translate(-22px, 14px) rotate(-4deg);
	}

	80% {
		transform: translate(22px, -10px) rotate(4deg);
	}

	85% {
		transform: translate(-18px, 8px) rotate(-2deg);
	}

	90% {
		transform: translate(18px, -14px) rotate(2deg);
	}

	95% {
		transform: translate(-20px, 5px) rotate(-2deg);
	}

	100% {
		transform: translate(0, 0) rotate(0);
	}
}

.shake-screen {
	animation: supershake 1s cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ---- CRACK + COLLAPSE OVERLAY (X icon) ---- */
.crack-overlay {
	pointer-events: none;
	position: fixed;
	inset: 0;
	width: 100vw;
	height: 100vh;
	z-index: 9999;
	transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.5s;
	will-change: transform, opacity;
}

.crack {
	position: absolute;
	pointer-events: none;
}

.crack1 {
	width: 35vw;
	left: 10vw;
	top: 22vh;
	opacity: 0.8;
}

.crack2 {
	width: 32vw;
	right: 12vw;
	top: 42vh;
	opacity: 0.7;
	transform: rotate(-8deg);
}

/* Add more .crackN classes if using more cracks */

/* Collapse falling effect */
.crack-collapse {
	transform: perspective(900px) rotateX(75deg) translateY(80vh) scale(0.9);
	opacity: 0;
	transition: transform 1.1s cubic-bezier(0.65, 0.05, 0.45, 1), opacity 0.6s;
}