/*!
 * Day / Night switcher button.
 *
 * Lives in its own corner — the top-LEFT of the viewer — so it never
 * collides with the audio dock, guided-tour dock, cart launcher or scene
 * choice menu. Position adjusts a little for the top-toolbar scheme so
 * the button doesn't tuck under the toolbar bar.
 *
 * The dock is rendered server-side and toggled via the `.is-active`
 * class — there's no JS-side DOM injection, so no race conditions and
 * no flicker between scenes.
 *
 * The fade overlay timing matches Pannellum's `sceneFadeDuration`
 * (1000 ms) so the dim, the icon flip and the cross-fade between the
 * two textures all land together.
 */

.rgy-panorama {
	position: relative;
}

/* ---------------------------------------------------------------------------
 * Dock — wraps the button so positioning rules live on the dock, not on
 * the button. Mirrors how .rgy-audio-dock and .rgy-guided-tour-dock are
 * structured so the three never visually compete for the same space.
 * ------------------------------------------------------------------------- */
.rgy-daynight-dock {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 45;
	display: none;
	pointer-events: none;
}

.rgy-daynight-dock.is-active {
	display: block;
}

.rgy-daynight-dock .rgy-daynight-toggle {
	pointer-events: auto;
}

.rgy-panorama[data-scheme="top"] .rgy-daynight-dock,
.rgy-daynight-dock[data-scheme="top"] {
	top: 64px;
	left: 16px;
}

.rgy-panorama[data-scheme="bottom"] .rgy-daynight-dock,
.rgy-daynight-dock[data-scheme="bottom"] {
	top: 16px;
	left: 16px;
}

/* ---------------------------------------------------------------------------
 * Button.
 * ------------------------------------------------------------------------- */
.rgy-daynight-toggle {
	width: 40px;
	height: 40px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(15, 18, 24, 0.62);
	color: #ffffff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	line-height: 1;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32);
	transition: background-color 0.2s ease,
	            transform 0.2s ease,
	            color 0.2s ease,
	            box-shadow 0.2s ease,
	            opacity 0.2s ease;
	-webkit-tap-highlight-color: transparent;
}

.rgy-daynight-toggle:hover,
.rgy-daynight-toggle:focus-visible {
	background: rgba(15, 18, 24, 0.85);
	color: #ffd87a;
	outline: none;
	transform: translateY(-1px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.36);
}

.rgy-daynight-toggle:focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 216, 122, 0.55), 0 6px 18px rgba(0, 0, 0, 0.36);
}

.rgy-daynight-toggle:active {
	transform: translateY(0);
}

/* ---------------------------------------------------------------------------
 * Busy state — the button stays clickable visually but ignores extra
 * presses while a swap is in flight. A subtle pulse hints that something
 * is happening even though the icon has already flipped.
 * ------------------------------------------------------------------------- */
.rgy-daynight-toggle.is-busy,
.rgy-daynight-toggle:disabled {
	cursor: progress;
	pointer-events: none;
	animation: rgy-daynight-busy-pulse 1.1s ease-in-out infinite;
}

@keyframes rgy-daynight-busy-pulse {
	0%   { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), 0 0 0 0   rgba(255, 216, 122, 0.45); }
	60%  { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), 0 0 0 8px rgba(255, 216, 122, 0); }
	100% { box-shadow: 0 4px 14px rgba(0, 0, 0, 0.32), 0 0 0 0   rgba(255, 216, 122, 0); }
}

/* ---------------------------------------------------------------------------
 * Sun / moon icon crossfade. Eased and offset slightly so the new icon
 * "rises" while the old one "sets".
 * ------------------------------------------------------------------------- */
.rgy-daynight-toggle__icon {
	position: relative;
	width: 1em;
	height: 1em;
	display: inline-block;
}

.rgy-daynight-toggle__icon i {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1em;
	transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.rgy-daynight-toggle[data-mode="day"] .rgy-daynight-toggle__sun {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	color: #ffd87a;
}
.rgy-daynight-toggle[data-mode="day"] .rgy-daynight-toggle__moon {
	opacity: 0;
	transform: rotate(-30deg) scale(0.55);
}

.rgy-daynight-toggle[data-mode="night"] .rgy-daynight-toggle__sun {
	opacity: 0;
	transform: rotate(30deg) scale(0.55);
}
.rgy-daynight-toggle[data-mode="night"] .rgy-daynight-toggle__moon {
	opacity: 1;
	transform: rotate(0deg) scale(1);
	color: #c8d2ff;
}

/* ---------------------------------------------------------------------------
 * Transition overlay.
 *
 * Pannellum cross-fades between the two textures over `sceneFadeDuration`
 * (1000 ms in our config). The overlay layers a soft dim across the
 * viewer so the eye sees the swap as "the lighting is changing" rather
 * than "the picture got replaced". Timing aligns with Pannellum's fade.
 *
 * z-index sits BELOW the dock so the button stays clickable even mid-
 * transition (though the JS also temporarily disables the button).
 * ------------------------------------------------------------------------- */
.rgy-panorama.rgy-daynight-transitioning::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(
		to bottom,
		rgba(15, 18, 24, 0.18),
		rgba(15, 18, 24, 0.45) 50%,
		rgba(15, 18, 24, 0.18)
	);
	animation: rgy-daynight-fade 1s ease-in-out forwards;
	z-index: 25;
	mix-blend-mode: multiply;
}

@keyframes rgy-daynight-fade {
	0%   { opacity: 0; }
	35%  { opacity: 1; }
	100% { opacity: 0; }
}

/* ---------------------------------------------------------------------------
 * Reduced motion: keep the icon flip but drop the rotation curves and the
 * dim overlay so the toggle feels calm.
 * ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.rgy-daynight-toggle,
	.rgy-daynight-toggle__icon i {
		transition-duration: 0.05s;
	}
	.rgy-daynight-toggle[data-mode="day"] .rgy-daynight-toggle__moon,
	.rgy-daynight-toggle[data-mode="night"] .rgy-daynight-toggle__sun {
		transform: none;
	}
	.rgy-daynight-toggle.is-busy,
	.rgy-daynight-toggle:disabled {
		animation: none;
	}
	.rgy-panorama.rgy-daynight-transitioning::after {
		animation: none;
		opacity: 0;
	}
}

/* ---------------------------------------------------------------------------
 * Mobile / small viewport tweaks.
 * ------------------------------------------------------------------------- */
@media only screen and (max-width: 640px) {
	.rgy-daynight-dock,
	.rgy-panorama[data-scheme="bottom"] .rgy-daynight-dock,
	.rgy-daynight-dock[data-scheme="bottom"] {
		top: 12px;
		left: 12px;
	}
	.rgy-panorama[data-scheme="top"] .rgy-daynight-dock,
	.rgy-daynight-dock[data-scheme="top"] {
		top: 56px;
		left: 12px;
	}
	.rgy-daynight-toggle {
		width: 38px;
		height: 38px;
		font-size: 15px;
	}
}