/*
 * Shared pieces of the section library (design/section-library.html):
 * spacing, headings and their lines, corner marks, buttons, image frames,
 * reveal on scroll, slow parallax and moving strips. Each section block adds
 * its own layout in its style.css. Every colour comes from the palette.
 */

/* Style switch: deco-only and simple-only pieces ------------------------ */

.hm-style-simple .hm-deco,
.hm-style-deco .hm-simple {
	display: none !important;
}

/* Section spacing ---------------------------------------------------------- */

/* "body" outranks the editor's and the page layout's 24px block gap, which
   would otherwise pack the sections together. */
body .hm-section {
	--hm-section-space: clamp(88px, 13vh, 150px);

	margin-block: var(--hm-section-space);
}

/*
 * Headings and their line ---------------------------------------------------
 */

.hm-section-heading {
	margin: 0 0 clamp(28px, 4vw, 44px);
}

.hm-section-heading h2 {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(30px, 3.4vw, 46px);
	font-weight: 400;
	line-height: 1.05;
}

.hm-section-heading--centre {
	text-align: center;
}

.hm-rule {
	display: block;
	margin-top: 14px;
	color: var(--wp--preset--color--accent);
}

.hm-rule--deco {
	width: 120px;
	height: 14px;
	overflow: visible;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1;
}

.hm-rule__gem {
	fill: currentcolor;
	stroke: none;
}

.hm-rule--simple {
	width: 44px;
	height: 1px;
	background: currentcolor;
}

.hm-section-heading--centre .hm-rule,
.hm-rule--centre {
	margin-inline: auto;
}

.hm-no-heading-lines .hm-rule,
.hm-no-lines .hm-rule {
	display: none !important;
}

/* Heading lines draw in: the diamond appears, then the lines grow outward
   (Simple: the short line grows). Shown complete without motion. */
.hm-draw-lines .hm-rule__frame {
	transform-box: fill-box;
	transform-origin: center;
}

.hm-draw-lines .hm-rule__line {
	stroke-dasharray: var(--hm-len, 60px);
}

@media (prefers-reduced-motion: no-preference) {

	.hm-draw-lines.is-ready .hm-rule__frame {
		scale: 0;
	}

	.hm-draw-lines.is-ready .hm-rule__line {
		stroke-dashoffset: var(--hm-len, 60px);
	}

	.hm-draw-lines.is-ready .hm-rule--simple {
		scale: 0 1;
	}

	.hm-draw-lines.is-in .hm-rule__frame {
		animation: hm-rule-pop 0.6s var(--wp--custom--ease-snap) 0.1s forwards;
	}

	.hm-draw-lines.is-in .hm-rule__line {
		animation: hm-rule-draw 1.2s var(--wp--custom--ease-snap) 0.45s forwards;
	}

	.hm-draw-lines.is-in .hm-rule--simple {
		animation: hm-rule-grow 1.2s var(--wp--custom--ease-snap) 0.2s forwards;
	}
}

@keyframes hm-rule-draw {

	to {
		stroke-dashoffset: 0;
	}
}

@keyframes hm-rule-pop {

	to {
		scale: 1;
	}
}

@keyframes hm-rule-grow {

	to {
		scale: 1 1;
	}
}

/* Large display line (Statement, and text over pictures) ------------------ */

.hm-statement {
	margin: 0;
	font-family: var(--wp--preset--font-family--display);
	font-size: clamp(40px, 6.2vw, 92px);
	font-weight: 400;
	line-height: 1.02;
	text-wrap: balance;
}

.hm-statement em {
	font-style: normal;
	color: var(--wp--preset--color--accent);
}

/*
 * Buttons with the accent sweep ---------------------------------------------
 */

.hm-button {
	position: relative;
	display: inline-flex;
	gap: 10px;
	overflow: hidden;
	isolation: isolate;
	padding: 15px 20px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--bone) 40%, transparent);
	color: var(--wp--preset--color--bone);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
	text-decoration: none;
	transition:
		color 0.35s,
		border-color 0.35s;
}

.hm-button::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: var(--wp--preset--color--accent);
	transform: scaleX(0);
	transform-origin: right;
	transition: transform 0.55s var(--wp--custom--ease-snap);
}

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

.hm-button:is(:hover, :focus-visible)::before {
	transform: scaleX(1);
	transform-origin: left;
}

/* Text links with an arrow ("About the studio", "All work") -------------- */

.hm-textlink {
	display: inline-flex;
	gap: 10px;
	padding-bottom: 4px;
	color: var(--wp--preset--color--bone);
	text-decoration: none;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--bone) 40%, transparent);
	transition:
		color 0.3s,
		border-color 0.3s;
}

.hm-textlink:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

/* Image frames and corner marks ------------------------------------------- */

.hm-media {
	position: relative;
	display: block;
	overflow: hidden;
	background: color-mix(in srgb, var(--wp--preset--color--bone) 2%, var(--wp--preset--color--ink));
	border: 1px solid var(--wp--custom--hairline);
}

.hm-media img,
.hm-media video {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.hm-no-lines .hm-media {
	border-color: transparent;
}

.hm-framed {
	position: relative;
}

/*
 * A single-line bracket at each corner, just outside the frame (site-wide
 * switch).
 */
.hm-corner {
	position: absolute;
	z-index: 3;
	display: none;
	width: 22px;
	height: 22px;
	overflow: visible;
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1;
	pointer-events: none;
	transition: opacity 0.4s;
}

.hm-has-corner-marks .hm-corner {
	display: block;
}

.hm-no-lines .hm-corner {
	display: none;
}

.hm-corner--tl {
	top: -8px;
	left: -8px;
}

.hm-corner--tr {
	top: -8px;
	right: -8px;
	rotate: 90deg;
}

.hm-corner--br {
	right: -8px;
	bottom: -8px;
	rotate: 180deg;
}

.hm-corner--bl {
	bottom: -8px;
	left: -8px;
	rotate: 270deg;
}

/* Art deco brackets on a one-line frame (video player, photo slideshow). */
.hm-frame-corner {
	position: absolute;
	z-index: 2;
	width: 18px;
	height: 18px;
	fill: none;
	stroke: var(--wp--preset--color--accent);
	stroke-width: 1;
	opacity: 0.8;
}

.hm-frame-corner--tl {
	top: -7px;
	left: -7px;
}

.hm-frame-corner--tr {
	top: -7px;
	right: -7px;
	rotate: 90deg;
}

.hm-frame-corner--br {
	right: -7px;
	bottom: -7px;
	rotate: 180deg;
}

.hm-frame-corner--bl {
	bottom: -7px;
	left: -7px;
	rotate: 270deg;
}

/* Corner marks that appear only on hover or focus (gallery pictures). */
.hm-corners-on-hover .hm-corner {
	opacity: 0;
}

:is(a, button):is(:hover, :focus-visible) > .hm-corners-on-hover .hm-corner,
.hm-corners-on-hover:hover .hm-corner {
	opacity: 1;
}

.hm-caption {
	margin-top: 14px;
	font-size: 0.875rem;
	color: var(--wp--preset--color--bone-muted);
}

/* Round icon buttons (arrows, close) ------------------------------------- */

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

.hm-icon-button:hover {
	color: var(--wp--preset--color--accent);
	border-color: var(--wp--preset--color--accent);
}

.hm-icon-button:focus-visible {
	outline-offset: 2px;
}

.hm-icon-button svg {
	width: 18px;
	height: 18px;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1.25;
}

/* Pause button for background videos (ambient video, opening) ---------- */

.hm-pause {
	position: absolute;
	right: clamp(14px, 2vw, 28px);
	bottom: clamp(14px, 2vw, 28px);
	z-index: 3;
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	padding: 0;
	background: none;
	border: 0;
	color: var(--wp--preset--color--bone);
	cursor: pointer;
	opacity: 0.7;
	transition:
		opacity 0.3s,
		color 0.3s;
}

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

.hm-pause:is(:hover, :focus-visible) {
	color: var(--wp--preset--color--accent);
	opacity: 1;
}

.hm-pause svg {
	width: 44px;
	height: 44px;
	overflow: visible;
	fill: none;
	stroke: currentcolor;
	stroke-width: 1;
}

.hm-pause :is(rect, path) {
	fill: currentcolor;
	stroke: none;
}

.hm-pause__icon-play,
.hm-pause[aria-pressed="true"] .hm-pause__icon-pause {
	display: none;
}

.hm-pause[aria-pressed="true"] .hm-pause__icon-play {
	display: block;
}

/* Reveal on scroll: fade and rise, once ----------------------------------- */

@media (prefers-reduced-motion: no-preference) {

	.hm-reveal.is-ready {
		opacity: 0;
		translate: 0 18px;
		transition:
			opacity 1.1s ease,
			translate 1.2s var(--wp--custom--ease-snap);
	}

	.hm-reveal.is-ready.is-in {
		opacity: 1;
		translate: 0 0;
	}
}

/* Slow parallax: the picture is taller than its frame and drifts on scroll. */
[data-parallax="on"] .hm-parallax {
	position: absolute;
	top: -9%;
	left: 0;
	height: 118%;
	will-change: transform;
}

/* Moving strips: slow, edge to edge, paused on hover, focus or off screen. */
.hm-marquee[data-moving="on"] {
	width: 100vw;
	margin-inline: calc(50% - 50vw);
	overflow: hidden;
}

.hm-marquee[data-moving="on"] > ul {
	width: max-content;
}

@media (prefers-reduced-motion: no-preference) {

	.hm-marquee[data-moving="on"].is-ready > ul {
		animation: hm-marquee var(--hm-duration, 60s) linear infinite;
	}

	.hm-marquee[data-moving="on"]:is(:hover, :focus-within, .is-offscreen) > ul {
		animation-play-state: paused;
	}
}

/* Without motion, a moving strip stands still and scrolls sideways instead. */
@media (prefers-reduced-motion: reduce) {

	.hm-marquee[data-moving="on"] {
		overflow-x: auto;
	}
}

@keyframes hm-marquee {

	to {
		translate: -50% 0;
	}
}

/* Large view (shared) ---------------------------------------------------- */

/* A picture that opens larger: a plain button, dimmed until hovered. */
.hm-lightbox__open {
	display: block;
	width: 100%;
	padding: 0;
	background: none;
	border: 0;
	color: inherit;
	cursor: zoom-in;
}

.hm-lightbox__open .hm-media {
	overflow: visible;
}

.hm-lightbox__open img {
	filter: brightness(0.88);
	transition: filter 0.5s;
}

.hm-lightbox__open:is(:hover, :focus-visible) img {
	filter: none;
}

/*
 * Large view: a fixed frame, so its corners stay put whatever the picture's
 * shape.
 */
.hm-lightbox {
	width: min(1200px, calc(100% - 32px));
	max-width: none;
	max-height: calc(100% - 32px);
	padding: 0;
	overflow: visible;
	background: none;
	border: 0;
	color: var(--wp--preset--color--bone);
}

.hm-lightbox::backdrop {
	background: color-mix(in srgb, var(--wp--preset--color--ink) 92%, transparent);
	backdrop-filter: blur(6px);
}

.hm-lightbox[open] {
	animation: hm-lightbox-rise 0.5s var(--wp--custom--ease-snap);
}

@keyframes hm-lightbox-rise {

	from {
		opacity: 0;
		transform: translateY(10px);
	}
}

.hm-lightbox__frame {
	width: 100%;
	height: min(calc(100vh - 140px), calc(min(1200px, 100vw - 32px) * 0.5625));
}

.hm-lightbox__image {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: contain;
}

.hm-lightbox__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 14px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 0.75rem;
	color: var(--wp--preset--color--bone-muted);
}

.hm-lightbox__buttons {
	display: flex;
	gap: 8px;
}

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

	.hm-lightbox[open] {
		animation: none;
	}

	.hm-lightbox__open img {
		transition: none;
	}
}