/**
 * FluffyTech Trailer — frontend styles
 * Version: 1.2.0
 *
 * Changelog
 * ---------
 * 19.08.26 - BUILT      Fullscreen hero layout, media fill, link overlay title.
 * 19.08.26 - RENAMED    fthm- classes renamed to fttr- (plugin renamed Hero Media -> Trailer).
 * 19.08.26 - ADDED      .fttr-slide wrapper + opacity transition for the slideshow crossfade.
 *                       900ms transition — keep in sync with FADE_MS in frontend.js.
 * 19.08.26 - UPDATED    Fade duration now reads --fttr-fade (set per-pool from the admin
 *                       Dissolve setting, PHP inline style) instead of a fixed 900ms. Swapped
 *                       the flat "ease" for a proper ease-in-out curve (an "Easy Ease" —
 *                       After Effects' F9 — rather than a linear or CSS-default crossfade).
 */

.fttr-hero {
	position: relative;
	width: 100%;
	height: 100vh;
	height: 100svh; /* actual mobile viewport, not the address-bar-inflated 100vh */
	overflow: hidden;
	background: #111;
}

.fttr-hero .fttr-slide {
	position: absolute;
	inset: 0;
	opacity: 0;
	/* --fttr-fade is set inline per-pool from the Dissolve setting in Trailer admin (0 = instant
	   cut). The curve itself isn't configurable — it's a fixed "Easy Ease" style ease-in-out. */
	transition: opacity var(--fttr-fade, 900ms) cubic-bezier(0.42, 0, 0.58, 1);
}

.fttr-hero .fttr-slide.fttr-visible {
	opacity: 1;
}

.fttr-hero .fttr-slide img,
.fttr-hero .fttr-slide video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.fttr-hero a.fttr-link {
	position: absolute;
	inset: 0;
	display: block;
	color: inherit;
	text-decoration: none;
}

.fttr-hero .fttr-title {
	position: absolute;
	left: 24px;
	bottom: 24px;
	z-index: 2;
	color: #fff;
	font-size: 1.1rem;
	letter-spacing: 0.02em;
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
	padding: 8px 14px;
	background: rgba(0, 0, 0, 0.25);
}

.fttr-noscript-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}