/* GOON CAVE — shared theme layer for femboy.zone.
   One palette, one background, one motion language. Templates keep their
   page-specific CSS; this file owns the vibe.

   Design intent: dark warm cave so content is the only light source,
   arousal-red (#ff2e63) as the interactive accent, pink kept for femboy
   identity, slow breathing motion instead of bouncy pops. Everything is
   CSS — no images, no JS, near-zero bytes. */

:root {
	--bg-0: #06030c;
	--bg-1: #10061c;
	--surface: rgba(22, 8, 36, 0.66);
	--surface-border: rgba(255, 92, 158, 0.22);
	--hot-pink: #ff2e9a; /* brand / femboy identity */
	--pink: #ff5cd6;
	--lust: #ff2e63;     /* primary arousal accent — CTAs, glows, likes */
	--ember: #ff6b35;    /* warm accent — fresh/hot badges */
	--magenta: #c026d3;
	--violet: #7c3aed;
	--text: #ffe9f4;
	--text-dim: #c79bb8;
}

html { color-scheme: dark; }

/* The cave: warm near-black with a faint lust-red ember breathing at the
   bottom edge. Uses a fixed pseudo layer so it sits behind everything and
   never repaints layout. */
body {
	background-color: var(--bg-0);
	color: var(--text);
}
body::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(ellipse 105% 90% at 50% 45%, transparent 60%, rgba(3, 1, 8, 0.6) 100%),
		radial-gradient(ellipse 120% 70% at 50% 110%, rgba(255, 46, 99, 0.16), transparent 60%),
		radial-gradient(ellipse 90% 55% at 85% -10%, rgba(124, 58, 237, 0.20), transparent 55%),
		radial-gradient(ellipse 90% 55% at 10% -10%, rgba(255, 46, 154, 0.14), transparent 55%),
		linear-gradient(180deg, var(--bg-0), var(--bg-1) 70%, var(--bg-0));
}
/* Ember at the bottom slowly breathes. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: radial-gradient(ellipse 90% 45% at 50% 115%, rgba(255, 46, 99, 0.22), transparent 65%);
	animation: caveBreath 6.5s ease-in-out infinite;
}
@keyframes caveBreath {
	0%, 100% { opacity: 0.45; }
	50%      { opacity: 1; }
}

/* Vignette — edges fall dark so the eye tunnels onto the center/content. */
.cave-vignette {
	position: fixed;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background: radial-gradient(ellipse 105% 90% at 50% 45%, transparent 62%, rgba(3, 1, 8, 0.55) 100%);
}

/* ---------- shared primitives ---------- */

/* Interactive gradient: lust-red into hot pink. Anything the user can
   click-to-get-dopamine uses this. */
.lust-gradient {
	background: linear-gradient(135deg, var(--lust) 0%, var(--hot-pink) 55%, var(--magenta) 100%);
}
.lust-text-gradient {
	background: linear-gradient(90deg, var(--lust) 0%, var(--hot-pink) 50%, var(--magenta) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
}

/* Breathing glow — the trance pulse. 4.2s, glow only, NO scale (scale reads
   as playful; glow reads as alive). */
.breath {
	animation: breathGlow 4.2s ease-in-out infinite;
}
@keyframes breathGlow {
	0%, 100% {
		box-shadow: 0 0 22px rgba(255, 46, 99, 0.35), 0 0 60px rgba(255, 46, 154, 0.15);
	}
	50% {
		box-shadow: 0 0 34px rgba(255, 46, 99, 0.75), 0 0 90px rgba(255, 46, 154, 0.4);
	}
}

/* Shimmer sweep — slot-machine glint on primary CTAs. A light band crosses
   the element every few seconds: "something good is in here". */
.shimmer {
	position: relative;
	overflow: hidden;
}
.shimmer::after {
	content: "";
	position: absolute;
	top: -20%;
	bottom: -20%;
	left: -35%;
	width: 28%;
	transform: skewX(-22deg);
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.22), transparent);
	animation: shimmerSweep 3.6s ease-in-out infinite;
	pointer-events: none;
}
@keyframes shimmerSweep {
	0%, 55%  { left: -35%; }
	85%, 100% { left: 125%; }
}

/* Ember badge — "fresh / hot / new" markers. Warm = urgent. */
.badge-ember {
	background: linear-gradient(135deg, var(--ember), var(--lust));
	color: #fff;
	box-shadow: 0 0 14px rgba(255, 107, 53, 0.55);
}

/* Dark-glass card, theme-wide. */
.cave-card {
	background: var(--surface);
	border: 1px solid var(--surface-border);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
}

/* Red edge-glow on hoverable content cards. */
.lust-hover {
	transition: box-shadow 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}
.lust-hover:hover {
	border-color: rgba(255, 46, 99, 0.65);
	box-shadow: 0 0 0 1px rgba(255, 46, 99, 0.25), 0 14px 44px -12px rgba(255, 46, 99, 0.55);
}

/* Focus rings in-theme. */
:where(input, textarea, select, button, a):focus-visible {
	outline: 2px solid var(--lust);
	outline-offset: 2px;
}

/* Scrollbar, thin and dark with a lust thumb. */
* { scrollbar-width: thin; scrollbar-color: rgba(255, 46, 99, 0.5) rgba(10, 4, 18, 0.6); }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-track { background: rgba(10, 4, 18, 0.6); }
*::-webkit-scrollbar-thumb { background: rgba(255, 46, 99, 0.5); border-radius: 999px; }

/* ---------- accessibility: kill the trance when asked ---------- */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	body::after { animation: none; opacity: 0.6; }
	.shimmer::after { display: none; }
}