/* WP port enhancements (separate from the untouched vendor stylesheet). */

/* --- View-mode morphing: navigating between Scroll / Tiles / Index (and any
   other page) runs a view transition; each project carries a unique
   view-transition-name (inline, p<image_id>), so items FLY to their new
   position when the view changes. --- */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .3s; }
::view-transition-group(*) {
	animation-duration: .45s;
	animation-timing-function: cubic-bezier(.3, .8, .2, 1);
}
header { view-transition-name: sk-header; }
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
}

/* --- Hover-scrub previews on tiles: a video layer appears over the poster
   and the cursor position scrubs its timeline. --- */
.tiles-list .item-media { position: relative; overflow: hidden; }
.tiles-list .item-media video.sk-scrub {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
	background: #000;
}
.tiles-list .item-media video.sk-scrub.sk-ready { opacity: 1; }
/* thin timeline indicator along the bottom while scrubbing */
.tiles-list .item-media .sk-scrub-bar {
	position: absolute; left: 0; bottom: 0;
	height: 2px; width: 0%;
	background: #fff;
	pointer-events: none;
	opacity: 0;
	transition: opacity .2s ease;
}
.tiles-list .item-media:hover .sk-scrub-bar { opacity: .9; }

/* the vendor grid-filler clones tiles (data-copy) — clones must not duplicate
   view-transition-names or the whole transition gets skipped */
.tiles-list .item[data-copy] .item-media {
	view-transition-name: none !important;
}

/* breathing room between the fixed black header and the popup player —
   margin (not top) so the vendor's responsive top values keep working */
.tiles-list .item-popup {
	margin-top: 3em;
}

/* index view: same info row under the hover player as the tiles popup has
   (the vendor styles are scoped to .tiles-list, so mirror them here) */
.index-list .col-hover .item-popup-text {
	padding: .7857142857em .6428571429em 1.1em;
	position: relative; z-index: 3;
	background: #000;
}
.index-list .col-hover .item-popup-text ul {
	display: flex; flex-wrap: wrap;
	margin: 0; padding: 0; list-style: none;
	justify-content: space-between;
}
.index-list .col-hover .item-popup-text ul li {
	padding: 0 .7142857143em; margin-bottom: .5em;
}
.index-list .col-hover .item-popup-text .list-label {
	display: block; font-weight: 400; text-transform: uppercase;
	font-size: .7142857143em;
}
.index-list .col-hover .item-popup-text .list-value {
	display: block; font-size: .7142857143em;
}

/* index player sized like the tiles popup, with the same close button */
.index-list .item .col-hover {
	max-width: 54.5454545455%;
	background: #000;
}
@media (max-width: 1023px) {
	.index-list .item .col-hover { max-width: 83.3333333333%; }
}
.index-list .col-hover .close {
	position: absolute; right: 0; top: 0; z-index: 100;
	text-decoration: none;
	font-size: 171.4285714286%; line-height: .5;
	width: 1.7142857143em; height: 1.7142857143em;
	display: flex; align-items: center; justify-content: center;
	color: #fff;
	transition: transform .2s ease;
}
.index-list .col-hover .close:hover { transform: scale(1.35); }
/* room for the ✕ above the video */
.index-list .col-hover .item-media { margin-top: 2.4em; }

/* empty archive combination (e.g. Cape Town × Music Videos): friendly
   message + escape links instead of a bare black page */
.sk-empty {
	text-align: center;
	padding: 16vh 2em 18vh;
}
.sk-empty-title {
	font-size: 2.4em;
	margin: 0 0 .5em;
}
.sk-empty-text {
	opacity: .7;
	margin: 0 0 2.2em;
}
.sk-empty-links a {
	text-decoration: underline;
	text-underline-offset: .2em;
	margin: 0 1.2em;
}

/* landing videos: hide Safari's center "start playback" overlay button so a
   video that hasn't autoplayed yet never shows a play button to the visitor */
.outpost-list video::-webkit-media-controls-start-playback-button {
	display: none !important;
	-webkit-appearance: none;
}
.outpost-list video::-webkit-media-controls {
	display: none !important;
}