/* VR180 Web Player. Every rule is scoped to the player, so it does not change the rest of the page. */

/* #vr-container, video#vr180, and video[data-vr180] are the page's own markup. They are styled here
   too, so the videos have their normal size before the player script runs. Without this, each video
   shows its poster at full size for a moment while the page loads. */

#vr-container,
.vr180-container {
	position: relative;
	display: inline-block;
	width: 100%;
	/* The controls use a compact layout when the player is narrow (see the end of this file). */
	container-type: inline-size;
}

video#vr180,
video[data-vr180],
.vr180-container video,
.vr180-container .vr180-canvas {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 16/9;
}

.vr180-container .vr180-canvas {
	/* The viewer drags the 2D view, so the page must not scroll on touch. */
	touch-action: none;
	cursor: grab;
}

.vr180-container .vr180-canvas:active {
	cursor: grabbing;
}

/* Poster image shown after a play, so the player does not have to reload the video */

.vr180-poster {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	background: #000;
	pointer-events: none;
	z-index: 5;
}

.vr180-poster.hidden {
	display: none;
}

/* Full screen. The browser's own full screen (:fullscreen), or the player's own, for Safari on iPhone. */

.vr180-container.vr180-fullscreen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	height: 100dvh; /* The visible height on phones, without the browser bars. */
	z-index: 2147483000;
	background: #000;
}

.vr180-container:fullscreen {
	background: #000;
}

.vr180-container.vr180-fullscreen .vr180-canvas,
.vr180-container:fullscreen .vr180-canvas {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* Older Safari (iPad) has its own name for :fullscreen. It needs its own rule: a browser that does
   not know a selector ignores the whole rule. */
.vr180-container:-webkit-full-screen .vr180-canvas {
	width: 100%;
	height: 100%;
	aspect-ratio: auto;
}

/* The page cannot scroll behind the player's own full screen. */
html.vr180-no-scroll,
html.vr180-no-scroll body {
	overflow: hidden;
}

/* Play button over the poster */

.vr180-play {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	background: none;
	border: none;
	cursor: pointer;
	padding: 0;
	width: 80px;
	height: 80px;
	transition: opacity 0.3s ease, transform 0.2s ease;
	z-index: 10;
}

.vr180-play:hover {
	transform: translate(-50%, -50%) scale(1.1);
}

.vr180-play:active {
	transform: translate(-50%, -50%) scale(0.95);
}

.vr180-play.hidden {
	opacity: 0;
	pointer-events: none;
}

.vr180-play img {
	width: 100%;
	height: 100%;
}

@media (max-width: 600px) {
	.vr180-play {
		width: 60px;
		height: 60px;
	}
}

@media (min-width: 900px) {
	.vr180-play {
		width: 100px;
		height: 100px;
	}
}

/* 2D control panel */

.vr180-panel {
	position: absolute;
	bottom: 10%;
	left: 50%;
	transform: translateX(-50%);
	width: 80%;
	padding: 20px;
	border-radius: 30px;
	background: rgba(0, 0, 0, 0.70);
	color: #fff;
	font-family: system-ui, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
	z-index: 100;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.15s ease, visibility 0.15s ease;
	pointer-events: none;
}

.vr180-panel.visible {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.vr180-status {
	margin: 0 12px 12px 12px;
}

.vr180-title {
	text-align: center;
	margin: 0 0 16px 0;
	font-size: 1rem;
	font-weight: 500;
}

.vr180-time {
	margin: 0;
	font-size: 0.875rem;
	font-variant-numeric: tabular-nums;
}

.vr180-progress {
	display: grid;
	grid-template-columns: min-content 1fr min-content;
	gap: 8px;
	align-items: center;
}

.vr180-bar {
	width: 100%;
	height: 4px;
	border-radius: 2px;
	background: #666;
	cursor: pointer;
	position: relative;
}

.vr180-played {
	border-radius: 2px;
	background: #fff;
	height: 4px;
	width: 0%;
	transition: width 0.1s ease;
}

.vr180-controls {
	display: grid;
	grid-template-areas: "full motion lflex nav rflex quality mute";
	grid-template-columns: 44px auto 1fr 156px 1fr auto 44px;
	align-items: center;
	height: 44px;
}

.vr180-nav {
	grid-area: nav;
	display: grid;
	grid-template-columns: 44px 44px 44px;
	gap: 12px;
	height: 44px;
}

.vr180-button {
	width: 44px;
	height: 44px;
	padding: 0;
	cursor: pointer;
	border: none;
	background-color: transparent;
	background-size: 44px 44px;
	background-repeat: no-repeat;
	background-position: center;
	transition: background-image 0.15s ease-in-out;
}

.vr180-fullscreen { grid-area: full; background-image: url(images/fullscreen.png); }
.vr180-fullscreen:hover { background-image: url(images/fullscreen-hover.png); }

.vr180-back { background-image: url(images/back.png); }
.vr180-back:hover { background-image: url(images/back-hover.png); }

.vr180-forward { background-image: url(images/forward.png); }
.vr180-forward:hover { background-image: url(images/forward-hover.png); }

.vr180-play-pause { background-image: url(images/play2.png); }
.vr180-play-pause:hover { background-image: url(images/play2-hover.png); }
.vr180-play-pause.is-playing { background-image: url(images/pause.png); }
.vr180-play-pause.is-playing:hover { background-image: url(images/pause-hover.png); }

/* Motion control: a phone with curved arrows. It is white, and gets a ring when it is on. */
.vr180-motion {
	grid-area: motion;
	border-radius: 50%;
	background-size: 30px 30px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='11' y='7' width='8' height='16' rx='2'/%3E%3Cpath d='M7 11a9 9 0 0 0 0 8M23 11a9 9 0 0 1 0 8M5.5 18.5L7 19l.6-1.6M24.5 18.5L23 19l-.6-1.6'/%3E%3C/svg%3E");
}

.vr180-motion[hidden] {
	display: none;
}

.vr180-motion.is-on {
	box-shadow: inset 0 0 0 2px #fff;
}

/* The quality menu */
.vr180-quality {
	grid-area: quality;
	margin-right: 8px;
	padding: 4px 22px 4px 6px;
	border: 1.5px solid #fff;
	border-radius: 6px;
	/* Our own white arrows. Safari on iPhone draws its own arrow in black. */
	appearance: none;
	-webkit-appearance: none;
	background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='14' viewBox='0 0 10 14'%3E%3Cpath d='M1 5l4-4 4 4M1 9l4 4 4-4' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 6px center;
	color: #fff;
	font: 600 0.75rem system-ui, sans-serif;
	cursor: pointer;
}

.vr180-quality[hidden] {
	display: none;
}

.vr180-quality option {
	color: #000;
}

/* The mute button shows what a click does: "mute" when sound is on, "unmute" when muted. */
.vr180-mute { grid-area: mute; background-image: url(images/mute.png); }
.vr180-mute:hover { background-image: url(images/mute-hover.png); }
.vr180-mute.is-muted { background-image: url(images/unmute.png); }
.vr180-mute.is-muted:hover { background-image: url(images/unmute-hover.png); }

/* Compact controls for a narrow player, for example on a phone. */
@container (max-width: 480px) {
	.vr180-panel {
		box-sizing: border-box;
		width: 94%;
		padding: 10px 12px;
		border-radius: 22px;
	}

	.vr180-status {
		margin: 0 4px 8px 4px;
	}

	.vr180-title {
		margin-bottom: 8px;
		font-size: 0.875rem;
	}

	.vr180-controls {
		grid-template-columns: 36px auto 1fr 116px 1fr auto 36px;
		height: 36px;
	}

	.vr180-nav {
		grid-template-columns: 36px 36px 36px;
		gap: 4px;
		height: 36px;
	}

	.vr180-button {
		width: 36px;
		height: 36px;
		background-size: 36px 36px;
	}

	.vr180-motion {
		background-size: 26px 26px;
	}

	.vr180-quality {
		margin-right: 4px;
	}
}