/* ==========================================================================
   Le'Rhonda Renea — The Seven Worlds
   Shared structure (spacing, components) + seven palette/motion variations.
   Mirrors the homepage's museum-placard signature language so the whole
   site reads as one system, not seven separate skins.
   ========================================================================== */

:root {
	--w-radius: 2px;
	--w-pad: clamp(64px, 9vw, 120px);
	--w-font-display: "Fraunces", "Iowan Old Style", Georgia, serif;
	--w-font-body: "Manrope", "Helvetica Neue", Arial, sans-serif;
	--w-font-mono: "Space Mono", "Courier New", monospace;
}

/* --------------------------------------------------------------------
   Per-world palette + motif tokens. Applied via className, e.g.
   "world-entrance--serenity", already present on each entrance pattern.
   Every world defines: --w-bg, --w-bg-2, --w-ink, --w-accent, --w-accent-2,
   --w-glow, and a signature background-image texture for its entrance.
   -------------------------------------------------------------------- */

.world-entrance--serenity, .world-signature--serenity, .world-vault--serenity {
	--w-bg: #12292c; --w-bg-2: #0d2022; --w-ink: #eef6f2; --w-accent: #bcd8c9;
	--w-accent-2: #d8c9e8; --w-glow: rgba(188,216,201,0.35);
}
.world-entrance--chrysalis, .world-signature--chrysalis, .world-vault--chrysalis {
	--w-bg: #241a33; --w-bg-2: #1a1226; --w-ink: #f5eefc; --w-accent: #c98fe0;
	--w-accent-2: #e0b8f0; --w-glow: rgba(201,143,224,0.4);
}
.world-entrance--essence, .world-signature--essence, .world-vault--essence {
	--w-bg: #1d1712; --w-bg-2: #14100c; --w-ink: #f7efe2; --w-accent: #c9a24b;
	--w-accent-2: #e0b98f; --w-glow: rgba(201,162,75,0.4);
}
.world-entrance--cherished-moments, .world-signature--cherished-moments, .world-vault--cherished-moments {
	--w-bg: #2a1c1e; --w-bg-2: #1f1517; --w-ink: #fbf1ee; --w-accent: #e3b7bd;
	--w-accent-2: #f2d9a8; --w-glow: rgba(227,183,189,0.4);
}
.world-entrance--infinite-wonder, .world-signature--infinite-wonder, .world-vault--infinite-wonder {
	--w-bg: #1a1420; --w-bg-2: #120e18; --w-ink: #f5f1fb; --w-accent: #e0736a;
	--w-accent-2: #6ac9c1; --w-glow: rgba(224,115,106,0.35);
}
.world-entrance--timeless, .world-signature--timeless, .world-vault--timeless {
	--w-bg: #16130f; --w-bg-2: #0f0d0a; --w-ink: #f2ece1; --w-accent: #b9975a;
	--w-accent-2: #8a7250; --w-glow: rgba(185,151,90,0.35);
}
.world-entrance--the-grace, .world-signature--the-grace, .world-vault--the-grace {
	--w-bg: #1d1a24; --w-bg-2: #15131b; --w-ink: #fbf9f4; --w-accent: #f0dca6;
	--w-accent-2: #a9c3e0; --w-glow: rgba(240,220,166,0.45);
}

/* ======================================================================
   WORLD ENTRANCE — full-screen environment per world
   ====================================================================== */

.world-entrance {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: var(--w-bg);
	color: var(--w-ink);
	font-family: var(--w-font-body);
	overflow: hidden;
	isolation: isolate;
}

.world-entrance::before {
	content: "";
	position: absolute; inset: 0; z-index: -2;
	background:
		radial-gradient(ellipse 70% 55% at 50% 30%, var(--w-glow), transparent 65%),
		linear-gradient(180deg, var(--w-bg) 0%, var(--w-bg-2) 100%);
	animation: world-breathe 16s ease-in-out infinite alternate;
}
@keyframes world-breathe {
	0% { opacity: 0.85; }
	100% { opacity: 1; }
}

/* Signature motion per world — one effect, used consistently */
.world-entrance__particles { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.world-entrance__particles span {
	position: absolute;
	border-radius: 50%;
	opacity: 0;
	background: var(--w-accent);
}

/* Serenity: rising mist motes / water reflection shimmer */
.world-entrance--serenity .world-entrance__particles span {
	width: 5px; height: 5px; filter: blur(1px);
	animation: world-mist-rise 14s linear infinite;
}
@keyframes world-mist-rise {
	0% { transform: translateY(20vh) scale(0.6); opacity: 0; }
	20% { opacity: 0.5; }
	100% { transform: translateY(-30vh) scale(1.4); opacity: 0; }
}

/* Chrysalis: floating particle butterflies (simple wing-flutter drift) */
.world-entrance--chrysalis .world-entrance__particles span {
	width: 8px; height: 6px; border-radius: 50% 50% 50% 0;
	animation: world-flutter 11s ease-in-out infinite;
}
@keyframes world-flutter {
	0%   { transform: translate(0,0) rotate(0deg) scale(0.8); opacity: 0; }
	15%  { opacity: 0.9; }
	50%  { transform: translate(30px,-60px) rotate(20deg) scale(1); }
	85%  { opacity: 0.6; }
	100% { transform: translate(-10px,-140px) rotate(-10deg) scale(0.7); opacity: 0; }
}

/* Essence: slow gold particle drift (lounge sparkle) */
.world-entrance--essence .world-entrance__particles span {
	width: 3px; height: 3px; box-shadow: 0 0 6px 1px var(--w-glow);
	animation: world-sparkle 9s ease-in-out infinite;
}
@keyframes world-sparkle {
	0%,100% { opacity: 0; transform: translateY(0); }
	50% { opacity: 1; transform: translateY(-18px); }
}

/* Cherished Moments: warm light motes, gentle upward drift */
.world-entrance--cherished-moments .world-entrance__particles span {
	width: 6px; height: 6px; filter: blur(0.5px);
	animation: world-warm-drift 13s ease-in-out infinite;
}
@keyframes world-warm-drift {
	0% { transform: translateY(10vh); opacity: 0; }
	30% { opacity: 0.8; }
	100% { transform: translateY(-25vh); opacity: 0; }
}

/* Infinite Wonder: paint-flow blobs, slow morph */
.world-entrance--infinite-wonder .world-entrance__particles span {
	width: 60px; height: 60px; filter: blur(30px); opacity: 0.35;
	animation: world-paint-flow 20s ease-in-out infinite;
}
@keyframes world-paint-flow {
	0%,100% { transform: translate(0,0) scale(1); }
	33% { transform: translate(40px,-30px) scale(1.3); }
	66% { transform: translate(-30px,20px) scale(0.8); }
}

/* Timeless: still archive — near-static, a single slow light sweep */
.world-entrance--timeless::after {
	content: "";
	position: absolute; inset: 0; z-index: -1;
	background: linear-gradient(115deg, transparent 40%, var(--w-glow) 50%, transparent 60%);
	background-size: 300% 300%;
	animation: world-archive-sweep 24s ease-in-out infinite;
}
@keyframes world-archive-sweep {
	0%,100% { background-position: 0% 0%; }
	50% { background-position: 100% 100%; }
}

/* The Grace: soft light bloom, slow pulse from above */
.world-entrance--the-grace::after {
	content: "";
	position: absolute; top: -20%; left: 50%; z-index: -1;
	width: 140%; height: 80%;
	transform: translateX(-50%);
	background: radial-gradient(ellipse 60% 60% at 50% 0%, var(--w-glow), transparent 70%);
	animation: world-light-bloom 10s ease-in-out infinite;
}
@keyframes world-light-bloom {
	0%,100% { opacity: 0.6; transform: translateX(-50%) scale(1); }
	50% { opacity: 1; transform: translateX(-50%) scale(1.08); }
}

.world-entrance__eyebrow {
	font-family: var(--w-font-mono);
	font-size: 0.78rem;
	letter-spacing: 0.3em;
	text-transform: uppercase;
	color: var(--w-accent);
}
.world-entrance h1 {
	font-family: var(--w-font-display);
	font-weight: 480;
	color: var(--w-ink);
}
.world-entrance__tagline { color: var(--w-accent-2); }

.world-sound-toggle {
	margin-top: 1.8rem;
	display: inline-flex; align-items: center; gap: 0.6em;
	background: transparent;
	border: 1px solid var(--w-accent);
	color: var(--w-ink);
	font-family: var(--w-font-mono);
	font-size: 0.7rem;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	padding: 0.7em 1.3em;
	border-radius: 999px;
	cursor: pointer;
	transition: background 0.4s ease, transform 0.4s ease;
}
.world-sound-toggle:hover { background: rgba(255,255,255,0.06); transform: translateY(-1px); }
.world-sound-toggle[aria-pressed="true"] .world-sound-toggle__icon { animation: world-sound-pulse 1.2s ease-in-out infinite; }
@keyframes world-sound-pulse { 0%,100% { opacity: 0.5; } 50% { opacity: 1; } }

.world-entrance__scroll-cue { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); }

/* ======================================================================
   WORLD SIGNATURE REVEAL
   ====================================================================== */

.world-signature {
	background: var(--w-bg);
	color: var(--w-ink);
	font-family: var(--w-font-body);
}
.world-signature h2 { font-family: var(--w-font-display); }
.world-signature__seal {
	box-shadow: 0 0 0 1px var(--w-accent), 0 0 40px -6px var(--w-glow);
	transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.world-signature__seal:hover { transform: scale(1.03); box-shadow: 0 0 0 1px var(--w-accent), 0 0 60px -4px var(--w-glow); }

/* ======================================================================
   COLLECTIONS WITHIN WORLD
   ====================================================================== */

.world-collections { background: var(--w-bg, #0b0a0c); }
.world-collection-card {
	transition: transform 0.55s cubic-bezier(.2,.8,.2,1), box-shadow 0.5s ease;
	border-radius: var(--w-radius);
	overflow: hidden;
}
.world-collection-card:hover { transform: translateY(-6px); box-shadow: 0 24px 50px -18px rgba(0,0,0,0.6); }

/* ======================================================================
   SHOP THIS WORLD / VAULT / BRIDGE
   ====================================================================== */

.world-shop-this-world .wp-block-woocommerce-product-collection { margin-top: 1.5rem; }

.world-vault { color: var(--w-ink); }
.world-vault__hidden {
	position: relative;
	max-width: 640px;
	margin: 0 auto;
	text-align: center;
	padding: 2.5rem;
	border: 1px dashed var(--w-accent);
	border-radius: var(--w-radius);
	opacity: 0.92;
	transition: opacity 0.4s ease, border-color 0.4s ease;
}
.world-vault__hidden:hover { opacity: 1; border-color: var(--w-accent-2); }

.world-bridge { text-align: center; }
.world-bridge h3 a {
	font-family: var(--w-font-display);
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: border-color 0.35s ease, opacity 0.35s ease;
}
.world-bridge h3 a:hover { border-color: currentColor; opacity: 0.85; }

@media (prefers-reduced-motion: reduce) {
	.world-entrance::before,
	.world-entrance::after,
	.world-entrance__particles span,
	.world-sound-toggle[aria-pressed="true"] .world-sound-toggle__icon {
		animation: none !important;
	}
}