/* Static Studio — shared site styles (custom bits Tailwind doesn't cover). */

:root { color-scheme: dark; }

body {
	background-color: #07070C;
	/* Electric violet + cyan counter-glow so the black never reads flat. */
	background-image:
		radial-gradient(1100px 680px at 78% -8%, rgba(124, 92, 255, 0.16), transparent 60%),
		radial-gradient(900px 620px at -5% 8%, rgba(54, 198, 244, 0.10), transparent 55%),
		radial-gradient(900px 700px at 50% 120%, rgba(124, 92, 255, 0.08), transparent 55%);
}

/* "Static" — a low-opacity animated grain that plays on the studio name. */
.grain::before {
	content: "";
	position: fixed;
	inset: -150%;
	z-index: 1;
	pointer-events: none;
	opacity: 0.04;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	animation: drift 0.6s steps(3) infinite;
}
@keyframes drift {
	0% { transform: translate(0, 0); }
	33% { transform: translate(-3%, 2%); }
	66% { transform: translate(2%, -2%); }
	100% { transform: translate(0, 0); }
}

/* Faint scanlines, used on hero blocks. */
.scanlines {
	background-image: repeating-linear-gradient(
		to bottom,
		rgba(234, 236, 245, 0.03) 0px,
		rgba(234, 236, 245, 0.03) 1px,
		transparent 1px,
		transparent 3px
	);
}

.kicker {
	font-family: 'JetBrains Mono', monospace;
	font-size: 0.72rem;
	letter-spacing: 0.22em;
	text-transform: uppercase;
}

/* Hand-built infinite marquee. */
.marquee { display: flex; width: max-content; animation: scroll 38s linear infinite; }
.marquee:hover { animation-play-state: paused; }
@keyframes scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Corner ticks — the bespoke "frame" detail on cards. */
.ticked { position: relative; }
.ticked::before, .ticked::after {
	content: ""; position: absolute; width: 9px; height: 9px; pointer-events: none;
	border-color: rgba(124, 92, 255, 0.6); border-style: solid;
}
.ticked::before { top: 10px; left: 10px; border-width: 1px 0 0 1px; }
.ticked::after { bottom: 10px; right: 10px; border-width: 0 1px 1px 0; }

/* Western variant of the ticks for Outlaw's surfaces. */
.ticked-gold::before, .ticked-gold::after { border-color: rgba(224, 169, 59, 0.6); }

/* Scroll-reveal. */
.reveal { opacity: 0; transform: translateY(18px); transition: opacity .7s ease, transform .7s ease; }
.reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.reveal { opacity: 1; transform: none; transition: none; }
	.grain::before, .marquee { animation: none; }
}

.link-underline {
	background-image: linear-gradient(currentColor, currentColor);
	background-size: 0% 1px; background-repeat: no-repeat; background-position: 0 100%;
	transition: background-size .3s ease;
}
.link-underline:hover { background-size: 100% 1px; }

.blink { animation: blink 1.6s steps(2, start) infinite; }
@keyframes blink { 50% { opacity: 0.15; } }

/* Symbol tiles already ship framed art; just round the corners cleanly. */
.symbol-tile { border-radius: 12px; overflow: hidden; }

::selection { background: rgba(124, 92, 255, 0.35); color: #fff; }

html { scroll-behavior: smooth; }