/* ==========================================================================
   Homepage hero - full-screen random portfolio background + artist intro.
   Only registered/loaded when the active menu item is the site's home
   page (see index.php).
   ========================================================================== */

.pi-hero {
	position: relative;
	min-height: 90vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	/* No margin-bottom - that was a transparent gap, letting the body's
	   background image show through below the hero. .pi-main's own (solid)
	   padding-top already provides the breathing room. */
	background: var(--pi-color-primary);
}

.pi-hero__bg {
	position: absolute;
	inset: -8%;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
	will-change: transform;
}

/* One of these modifier classes is picked at random each time a slide starts
   (see index.php for the first image, js/hero-slideshow.js for every one
   after). All of them play ONCE (not infinite) and hold their end position
   (forwards) - js/hero-slideshow.js listens for animationend to cut to the
   blackout and swap in the next image. */
.pi-hero__bg--slide-up {
	animation: pi-hero-slide-y 9s linear 1 forwards;
}

.pi-hero__bg--slide-down {
	animation: pi-hero-slide-y 9s linear reverse 1 forwards;
}

.pi-hero__bg--slide-left {
	animation: pi-hero-slide-x 9s linear 1 forwards;
}

.pi-hero__bg--slide-right {
	animation: pi-hero-slide-x 9s linear reverse 1 forwards;
}

/* Pure Ken Burns zoom, no pan. Linear (constant speed), matching the slides
   above - ease-out visibly slows down as it approaches the end. */
.pi-hero__bg--zoom-in {
	animation: pi-hero-zoom 9s linear 1 forwards;
}

.pi-hero__bg--zoom-out {
	animation: pi-hero-zoom 9s linear reverse 1 forwards;
}

/* Zoom combined with a diagonal pan - the classic "Ken Burns" documentary
   effect, played in each direction. */
.pi-hero__bg--kenburns-tl {
	animation: pi-hero-kenburns 9s linear 1 forwards;
}

.pi-hero__bg--kenburns-br {
	animation: pi-hero-kenburns 9s linear reverse 1 forwards;
}

.pi-hero__blackout {
	position: absolute;
	inset: 0;
	z-index: 1;
	background: #000000;
	opacity: 0;
	transition: opacity .5s ease;
	pointer-events: none;
}

.pi-hero__blackout.is-visible {
	opacity: 1;
}

@keyframes pi-hero-slide-x {
	from {
		transform: translateX(-4%);
	}

	to {
		transform: translateX(4%);
	}
}

@keyframes pi-hero-slide-y {
	from {
		transform: translateY(-4%);
	}

	to {
		transform: translateY(4%);
	}
}

@keyframes pi-hero-zoom {
	from {
		transform: scale(1);
	}

	to {
		transform: scale(1.15);
	}
}

@keyframes pi-hero-kenburns {
	from {
		transform: scale(1) translate(2%, 2%);
	}

	to {
		transform: scale(1.15) translate(-2%, -2%);
	}
}

.pi-hero__scrim {
	position: absolute;
	inset: 0;
	z-index: 2;
	background: linear-gradient(
		180deg,
		rgba(20, 24, 31, .15) 0%,
		rgba(20, 24, 31, .35) 55%,
		rgba(20, 24, 31, .8) 100%
	);
}

.pi-hero__content {
	position: relative;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: var(--pi-space-6);
	padding-block: var(--pi-space-8);
	/* The header now floats over the hero instead of pushing it down (see
	   .pi-header--overlay in layout.css) - only its background should reach
	   all the way to the top, so push the actual text/photo down clear of it.
	   --pi-header-height is kept in sync with the header's real rendered
	   height by js/sticky-header.js. */
	padding-top: calc(var(--pi-header-height, 4.5rem) + var(--pi-space-6));
	color: #ffffff;
}

/* Positioned so js/hero-portrait-reveal.js's ribbon overlay (below) can
   anchor to it, at every breakpoint - not just the two-column desktop one
   that already sets this. */
.pi-hero__photo {
	position: relative;
}

.pi-hero__portrait {
	flex: 0 0 auto;
	width: 148px;
	height: 148px;
	border-radius: 50%;
	object-fit: cover;
	border: 3px solid rgba(255, 255, 255, .85);
	box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
}

/* EXPERIMENTAL - one-time "ribbon reveal" for the portrait on load (see
   js/hero-portrait-reveal.js). The real <img> is hidden for the duration,
   so the hero background shows through here instead. Each ribbon's own
   background image is a canvas composite of the photo WITH its border and
   drop shadow already baked in (not the raw photo) - so the circular shape
   and its soft shadow are just transparent PNG pixels here, not something
   this CSS needs to clip - and border/shadow assemble progressively along
   with the photo instead of popping in as a separate step. Each ribbon
   slides in along a randomly chosen axis, alternating which of that axis's
   two ends it comes from - once every ribbon has landed, the real photo is
   unhidden and this whole overlay removes itself. */
.pi-hero__portrait-reveal {
	position: absolute;
	z-index: 1;
	pointer-events: none;
}

.pi-hero__portrait-ribbon {
	position: absolute;
	left: 0;
	width: 100%;
	background-repeat: no-repeat;
	will-change: transform;
}

.pi-hero__text {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--pi-space-4);
	max-width: 62ch;
	/* Override the site-wide justify - stretches short lines (especially the
	   big tagline) into huge, ugly word gaps. */
	text-align: left;
}

/* Fluid type: scales continuously with the viewport instead of jumping at
   breakpoints, so it stays proportional at any screen size. */
.pi-hero__tagline {
	margin: 0;
	font-weight: 700;
	font-size: clamp(2.25rem, 1.2rem + 4vw, 5rem);
	line-height: 1.05;
	text-wrap: balance;
	text-shadow: 0 2px 10px rgba(0, 0, 0, .45);
}

.pi-hero__bio {
	font-size: 1.0625rem;
	line-height: 1.6;
	text-shadow: 0 1px 3px rgba(0, 0, 0, .4);
}

.pi-hero__button {
	align-self: flex-start;
	margin-top: var(--pi-space-2);
	padding: var(--pi-space-3) var(--pi-space-6);
	font-size: 1rem;
	font-weight: 600;
	box-shadow: 0 8px 20px rgba(0, 0, 0, .3);
}

.pi-hero__bio > :first-child {
	margin-top: 0;
}

.pi-hero__bio > :last-child {
	margin-bottom: 0;
}

/* Sitewide h1-h6 are boxed/bordered brand-colour treatments (see
   components.css) - wrong over a dark photographic hero, so any heading an
   editor adds inside the bio (e.g. the artist's name) is reset to plain
   white text instead. */
.pi-hero__bio h1,
.pi-hero__bio h2,
.pi-hero__bio h3,
.pi-hero__bio h4,
.pi-hero__bio h5,
.pi-hero__bio h6 {
	background: none;
	border: none;
	box-shadow: none;
	color: #ffffff;
	text-align: start;
	text-shadow: inherit;
	padding: 0;
	line-height: 1.3;
	font-size: 1.375rem;
}

.pi-hero__bio a {
	color: #ffffff;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.pi-hero__bio a:hover,
.pi-hero__bio a:focus {
	color: var(--pi-color-accent);
}

@media (max-width: 767px) {
	.pi-hero {
		min-height: 80vh;
		align-items: center;
	}

	.pi-hero__content {
		flex-direction: column;
		text-align: center;
		padding-block: var(--pi-space-6);
		/* padding-block above resets padding-top too - re-assert it so the
		   overlaid header (see .pi-header--overlay in layout.css) still
		   doesn't cover the photo/tagline on small screens. */
		padding-top: calc(var(--pi-header-height, 4.5rem) + var(--pi-space-4));
	}

	.pi-hero__portrait {
		width: 120px;
		height: 120px;
	}

	.pi-hero__text {
		align-items: center;
	}

	.pi-hero__tagline {
		text-align: center;
	}

	.pi-hero__button {
		align-self: center;
	}
}

/* Big screens: two even 50/50 columns - photo left, text stack right - instead
   of the single-row layout used below this breakpoint. */
@media (min-width: 992px) {
	.pi-hero__content {
		/* Taller than .pi-hero's own 90vh on purpose: matching it exactly left
		   this box just barely fitting the text stack's own natural height,
		   with no slack for "center" to actually center anything within. */
		min-height: 100vh;
		align-items: stretch;
		gap: var(--pi-space-7);
	}

	.pi-hero__photo {
		flex: 0 0 50%;
		max-width: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.pi-hero__portrait {
		width: clamp(220px, 22vw, 400px);
		height: clamp(220px, 22vw, 400px);
		border-width: 4px;
	}

	.pi-hero__text {
		flex: 0 0 50%;
		max-width: 50%;
		justify-content: center;
		gap: var(--pi-space-6);
	}

	/* The flex gap above already spaces the rows evenly - the button's own
	   top margin (added for the stacked/mobile layout) would otherwise stack
	   on top of it and make the last gap bigger than the others. */
	.pi-hero__button {
		margin-top: 0;
	}

	/* No photo (field left empty) - let the text stack use the full width
	   instead of being stranded in half the row. */
	.pi-hero__text:only-child {
		flex: 1 1 100%;
		max-width: 62ch;
	}

	.pi-hero__bio {
		max-width: 100%;
		font-size: 1.3125rem;
		line-height: 1.65;
	}

	.pi-hero__bio h1,
	.pi-hero__bio h2,
	.pi-hero__bio h3,
	.pi-hero__bio h4,
	.pi-hero__bio h5,
	.pi-hero__bio h6 {
		font-size: 1.75rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.pi-hero__bg {
		animation: none;
	}
}