/* Fixed-size box the slideshow renders inside. Change width/height here to
   resize the whole slideshow; everything else scales relative to this. */
.slideIndex {
	width: 760px;
	height: 560px;
	margin: 0 auto; /* centers the box horizontally within its parent */
	position: relative;
}

/* The actual slideshow container - fills .slideIndex completely. */
.slideshow {
	position: relative;
	width: 100%;
	height: 100%;
	overflow: hidden; /* clips anything the zoom/pan pushes past the edges -
	                     this is what hides the "black background" problem
	                     as long as the pan stays within its safe range */
	background-color: var(--color-chrome-dark); /* shows only if overflow
	                     ever fails to fully hide an edge, or before the
	                     first image finishes loading */
}

/* Base/default state for every image in the slideshow, active or not. */
.slideshow img {
	position: absolute; /* stacks every image directly on top of each
	                        other, filling the container */
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover; /* crops each image to fill the box without
	                       stretching/distorting it */
	opacity: 0; /* hidden by default - only .is-active shows */
	transform: scale(1); /* baseline/reset zoom level - what an image
	                         returns to once it's no longer active or
	                         leaving */
	transition: opacity 0.8s ease-in-out; /* crossfade speed between
	                         images - how long the fade takes, independent
	                         of how long each slide is displayed */
}

/* Applied to whichever image is currently on screen. */
.slideshow img.is-active {
	opacity: 1;
	/* Runs the pan/zoom animation defined below. var(--anim-duration) is
	   set per-image by the JS to match data-duration exactly, so the pan
	   always completes its full arc across however long the slide is
	   actually displayed. The 10.8s is just a fallback in case JS hasn't
	   set it yet (or fails to load) - not a value you need to tune. */
	animation: slideshow-kenburns var(--anim-duration, 10.8s) ease-in-out forwards;
}

/* Applied briefly to the outgoing image while it fades out, so it holds
   its final zoomed/panned position instead of snapping back to scale(1)
   mid-fade (which used to cause a visible "jerk"). --pan-x/--pan-y here
   are the same per-image random values the JS set when this image became
   active - freezing it at wherever its own animation left off. */
.slideshow img.is-leaving {
	opacity: 0;
	transform: scale(2.0) translate(var(--pan-x, -1%), var(--pan-y, -1%));
}

/* The actual "Ken Burns" pan/zoom effect, animated from 0% to 100% over
   the duration set above.
   - Starting zoom: scale(1.25)
   - Ending zoom:   scale(2.0)
   - Pan distance:  --pan-x / --pan-y, set randomly per-image by the JS
     (see slideshow.js's randomPan() for the actual range)

   IMPORTANT: the starting/ending scale values here directly control how
   much pan the image can safely tolerate before it clips past its own
   edge and reveals the container background behind it. If you change
   either scale value, the JS's pan range may need to change too. The
   safe formula (checked at the END of the animation, since that's where
   both scale and pan are largest at once):

       safe pan % <= (end_scale - 1) / (2 * end_scale) * 100

   For the current end_scale of 2.0, that ceiling is 25%. The JS
   currently uses up to +/-22%, leaving a small safety margin. */
@keyframes slideshow-kenburns {
	0% {
		transform: scale(1.25) translate(0, 0);
	}
	100% {
		transform: scale(2.0) translate(var(--pan-x, -1%), var(--pan-y, -1%));
	}
}

/* Accessibility: for anyone with "reduce motion" enabled at the OS level,
   skip the pan/zoom animation entirely and just do a quicker, simpler
   crossfade instead. */
@media (prefers-reduced-motion: reduce) {
	.slideshow img.is-active {
		animation: none;
	}
	.slideshow img {
		transition: opacity 0.4s ease-in-out; /* faster fade since there's
		                                          no zoom to accompany it */
	}
}