/*
 * The approved video player (design/reel-player.html). A one-line frame.
 * Art deco: small accent brackets at the corners, a hexagon play button
 * that gains a sunburst on hover, diamond slider handles. Simple: a circle
 * play button that fills with the accent and gives one springy
 * bounce, round handles. Both: a slim control bar with an upright volume
 * slider that rises above the speaker. Every colour comes from the palette.
 */

.hm-player {
	--hm-player-max-width: 960px;

	/* Room for the fixed header, the frame's padding and breathing space. */
	--hm-player-chrome: calc(var(--wp--custom--header-height) + 150px);
	--hm-player-track: color-mix(in srgb, var(--wp--preset--color--bone) 30%, transparent);

	/*
	 * As wide as possible while the whole frame, ornaments included, still
	 * fits on one screen below the header, so nothing is cut off when it is
	 * scrolled into view.
	 */
	width: min(100%, var(--hm-player-max-width), calc((100svh - var(--hm-player-chrome)) * var(--hm-player-aspect, 16 / 9)));
	margin: 0 auto clamp(40px, 6vw, 72px);
	scroll-margin-top: calc(var(--wp--custom--header-height) + 24px);
}

/* Frame: one line (owner's choice, 6 October 2026) ------------------------ */

/* A single border; Art deco adds small accent corners (frame_corners()). */
.hm-player__frame {
	position: relative;
	border: 1px solid var(--wp--custom--hairline);
}

/* Stage ------------------------------------------------------------------ */

.hm-player__stage {
	position: relative;
	overflow: hidden;
	aspect-ratio: var(--hm-player-aspect, 16 / 9);
	background: var(--wp--preset--color--ink);
	container-type: inline-size;
}

.hm-player__video,
.hm-player__poster {
	display: block;
	width: 100%;
	height: 100%;
}

.hm-player__video {
	object-fit: contain;
}

.hm-player__poster {
	position: absolute;
	inset: 0;

	/* Framed as the video will be, so nothing jumps when playback starts. */
	object-fit: contain;
	transition: opacity 0.6s ease, visibility 0.6s;
}

.hm-player__video::cue {
	font-family: var(--wp--preset--font-family--sans);
	background: color-mix(in srgb, var(--wp--preset--color--ink) 75%, transparent);
}

/* Play button: no label; the shape carries it. ---------------------------- */

.hm-player__start {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: grid;
	place-items: center;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--bone);
	cursor: pointer;
	transition: opacity 0.6s, visibility 0.6s;
}

.hm-player__start:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: -12px;
}

.hm-player__burst {
	width: clamp(104px, 14vw, 176px);
	height: auto;
	overflow: visible;
}

@container (max-width: 560px) {

	.hm-player__burst {
		width: 88px;
	}
}

.hm-player__rays {
	stroke: var(--wp--preset--color--accent);
	stroke-width: 0.6;
	opacity: 0;
	transform: scale(0.6);
	transition: opacity 0.5s, transform 0.9s var(--wp--custom--ease-snap);
}

.hm-player__hexagon {
	fill: color-mix(in srgb, var(--wp--preset--color--ink) 55%, transparent);
	stroke: var(--wp--preset--color--bone);
	stroke-width: 1;
	transition: fill 0.4s;
}

.hm-player__ring {
	fill: color-mix(in srgb, var(--wp--preset--color--ink) 45%, transparent);
	stroke: var(--wp--preset--color--bone);
	stroke-width: 1.25;
	transition: fill 0.45s var(--wp--custom--ease-snap), stroke 0.45s var(--wp--custom--ease-snap);
}

.hm-player__triangle {
	fill: var(--wp--preset--color--bone);
	transition: fill 0.4s;
}

.hm-player__start:is(:hover, :focus-visible) .hm-player__rays {
	opacity: 1;
	transform: rotate(15deg);
}

.hm-player__start:is(:hover, :focus-visible) .hm-player__hexagon {
	fill: color-mix(in srgb, var(--wp--preset--color--accent) 18%, transparent);
}

.hm-player__start:is(:hover, :focus-visible) .hm-player__triangle {
	fill: var(--wp--preset--color--accent);
}

/* Simple: the circle fills with the accent and the button springs once. */
.hm-style-simple .hm-player__start:is(:hover, :focus-visible) .hm-player__ring {
	fill: var(--wp--preset--color--accent);
	stroke: var(--wp--preset--color--accent);
}

.hm-style-simple .hm-player__start:is(:hover, :focus-visible) .hm-player__triangle {
	fill: var(--wp--preset--color--ink);
	transition: fill 0.3s 0.1s;
}

.hm-style-simple .hm-player__start:is(:hover, :focus-visible) .hm-player__burst {
	animation: hm-player-bounce 0.7s ease-out 1;
}

@keyframes hm-player-bounce {

	0% {
		transform: scale(1);
	}

	35% {
		transform: scale(1.12);
	}

	60% {
		transform: scale(0.96);
	}

	80% {
		transform: scale(1.03);
	}

	100% {
		transform: scale(1);
	}
}

.hm-player.is-started .hm-player__poster,
.hm-player.is-started .hm-player__start {
	visibility: hidden;
	opacity: 0;
}

/* Without scripting, the native controls are the player. */
@media (scripting: none) {

	.hm-player__poster,
	.hm-player__start {
		display: none;
	}
}

/* Controls --------------------------------------------------------------- */

.hm-player__controls {
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 3;
	display: flex;
	gap: clamp(4px, 1vw, 10px);
	align-items: center;
	padding: 32px clamp(8px, 1.4vw, 14px) 10px;
	background: linear-gradient(to top, color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent), transparent);
	transition: opacity 0.4s;
}

.hm-player__controls[hidden] {
	display: none;
}

/* While a video plays, controls and pointer fade after a still moment. */
.hm-player.is-idle .hm-player__controls {
	opacity: 0;
	pointer-events: none;
}

.hm-player.is-idle .hm-player__stage {
	cursor: none;
}

.hm-player__button {
	display: grid;
	flex: none;
	place-items: center;
	width: 40px;
	height: 40px;
	padding: 0;
	background: none;
	border: 1px solid transparent;
	color: var(--wp--preset--color--bone);
	cursor: pointer;
	transition: color 0.3s, border-color 0.3s;
}

.hm-player__button svg {
	width: 20px;
	height: 20px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.25;
	stroke-linejoin: round;
}

.hm-player__button:hover,
.hm-player__button:focus-visible {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--custom--hairline);
}

.hm-player__button:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

.hm-player__button[data-action="captions"][aria-pressed="true"] {
	color: var(--wp--preset--color--accent);
}

.hm-player:not(.is-playing) .hm-player__icon-pause,
.hm-player.is-playing .hm-player__icon-play {
	display: none;
}

.hm-player__time {
	flex: none;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--bone-muted);
	white-space: nowrap;
}

.hm-player__current {
	color: var(--wp--preset--color--bone);
}

@container (max-width: 420px) {

	.hm-player__time {
		display: none;
	}
}

/* Sliders: hairline track filled with the accent; diamond or dot handle. */

.hm-player__seek,
.hm-player__volume {
	margin: 0;
	background: transparent;
	cursor: pointer;
	appearance: none;
}

.hm-player__seek {
	flex: 1;
	min-width: 60px;
	height: 28px;
}

.hm-player__seek::-webkit-slider-runnable-track {
	height: 1px;
	background: linear-gradient(to right, var(--wp--preset--color--accent) var(--progress, 0%), var(--hm-player-track) var(--progress, 0%));
}

.hm-player__seek::-moz-range-track {
	height: 1px;
	background: linear-gradient(to right, var(--wp--preset--color--accent) var(--progress, 0%), var(--hm-player-track) var(--progress, 0%));
}

.hm-player__seek::-webkit-slider-thumb {
	width: 10px;
	height: 10px;
	margin-top: -4.5px;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 0;
	transform: rotate(45deg);
	appearance: none;
}

.hm-player__volume::-webkit-slider-thumb {
	width: 10px;
	height: 10px;
	margin-left: -4.5px;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 0;
	transform: rotate(45deg);
	appearance: none;
}

.hm-player__seek::-moz-range-thumb,
.hm-player__volume::-moz-range-thumb {
	width: 10px;
	height: 10px;
	background: var(--wp--preset--color--accent);
	border: 0;
	border-radius: 0;
	transform: rotate(45deg);
}

.hm-style-simple .hm-player__seek::-webkit-slider-thumb,
.hm-style-simple .hm-player__volume::-webkit-slider-thumb {
	border-radius: 50%;
	transform: none;
}

.hm-style-simple .hm-player__seek::-moz-range-thumb,
.hm-style-simple .hm-player__volume::-moz-range-thumb {
	border-radius: 50%;
	transform: none;
}

.hm-player__seek:focus-visible,
.hm-player__volume:focus-visible {
	outline: 1px solid var(--wp--preset--color--accent);
	outline-offset: 2px;
}

/* Speaker: two waves when loud, one when quiet, a cross when muted. */

.hm-player__sound {
	position: relative;
	flex: none;
}

.hm-player__button[data-level="low"] .hm-player__icon-wave-2,
.hm-player__button[data-level="muted"] .hm-player__icon-wave-1,
.hm-player__button[data-level="muted"] .hm-player__icon-wave-2,
.hm-player__button:not([data-level="muted"]) .hm-player__icon-muted {
	display: none;
}

/* The upright volume slider rises above the speaker on hover or focus, and
   briefly when the arrow keys change the volume. */
.hm-player__volume-panel {
	position: absolute;
	bottom: 100%;
	left: 0;
	display: flex;
	justify-content: center;
	width: 40px;
	padding: 14px 0 12px;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 88%, transparent);
	border: 1px solid var(--wp--custom--hairline);
	visibility: hidden;
	opacity: 0;
	transition: opacity 0.35s, visibility 0.35s;
}

/* Art deco: a second, inner rule. */
.hm-player__volume-panel::before {
	content: "";
	position: absolute;
	inset: 3px;
	border: 1px solid var(--wp--custom--hairline);
	pointer-events: none;
}

.hm-style-simple .hm-player__volume-panel::before {
	content: none;
}

.hm-player__sound:hover .hm-player__volume-panel,
.hm-player__sound:focus-within .hm-player__volume-panel,
.hm-player.is-adjusting .hm-player__volume-panel {
	visibility: visible;
	opacity: 1;
}

.hm-player__volume {
	width: 28px;
	height: 92px;
	writing-mode: vertical-lr;
	direction: rtl;
}

.hm-player__volume::-webkit-slider-runnable-track {
	width: 1px;
	height: 100%;
	background: linear-gradient(to top, var(--wp--preset--color--accent) var(--progress, 100%), var(--hm-player-track) var(--progress, 100%));
}

.hm-player__volume::-moz-range-track {
	width: 1px;
	background: linear-gradient(to top, var(--wp--preset--color--accent) var(--progress, 100%), var(--hm-player-track) var(--progress, 100%));
}

/* Phones and tablets use their own volume buttons: mute only. */
@media (pointer: coarse) {

	.hm-player__volume-panel {
		display: none;
	}
}

/* Loading and errors ------------------------------------------------------ */

.hm-player.is-loading .hm-player__stage::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 36px;
	height: 36px;
	margin: -18px 0 0 -18px;
	border: 1px solid var(--wp--preset--color--accent);
	clip-path: polygon(50% 0, 100% 25%, 100% 75%, 50% 100%, 0 75%, 0 25%);
	animation: hm-player-spin 1.6s linear infinite;
}

.hm-style-simple .hm-player.is-loading .hm-player__stage::after,
.hm-player.hm-style-simple.is-loading .hm-player__stage::after {
	border-radius: 50%;
	clip-path: none;
}

@keyframes hm-player-spin {

	to {
		rotate: 360deg;
	}
}

.hm-player__status {
	position: absolute;
	top: 50%;
	right: 10%;
	left: 10%;
	z-index: 4;
	margin: 0;
	text-align: center;
	transform: translateY(-50%);
}

.hm-player__status:empty {
	display: none;
}

.hm-player.has-error .hm-player__status {
	padding: 16px;
	background: color-mix(in srgb, var(--wp--preset--color--ink) 85%, transparent);
	border: 1px solid var(--wp--preset--color--error);
	color: var(--wp--preset--color--bone);
}

/* Full screen: the stage fills the display, controls included. ---------- */

.hm-player__stage:fullscreen {
	width: 100vw;
	height: 100vh;
	aspect-ratio: auto;
	border: 0;
}

/* Description ------------------------------------------------------ */

.hm-player__caption {
	max-width: 70ch;
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.6;
	color: var(--wp--preset--color--bone-muted);
}

@media (prefers-reduced-motion: reduce) {

	.hm-player__rays {
		transition-property: opacity;
	}

	.hm-player__start:is(:hover, :focus-visible) .hm-player__rays {
		transform: none;
	}

	.hm-style-simple .hm-player__start:is(:hover, :focus-visible) .hm-player__burst {
		animation: none;
	}

	.hm-player.is-loading .hm-player__stage::after {
		animation: none;
	}
}