/**
 * Hero Video Section
 *
 * Fullscreen Vimeo background video with cycling text overlays.
 * Replaces Revolution Slider on the homepage.
 *
 * Animation timeline (8.5s cycle):
 *   0.3s - 3.7s: Group 1 ("Creative" / "By Nature") visible
 *   5.0s - 8.0s: Group 2 ("Functional" / "By DESIGN") visible
 *   0.9s - 8.0s: Subtitle visible
 */

/* Section container */
.creation-hero-video {
	position: relative;
	width: 100%;
	height: 100vh;
	overflow: hidden;
	background-color: #000;
}

/* Vimeo iframe background - 16:9 cover */
.creation-hero-video__bg {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 177.78vh; /* 16:9 ratio */
	height: 100vh;
	min-width: 100%;
	min-height: 56.25vw; /* 16:9 ratio */
	transform: translate(-50%, -50%);
	pointer-events: none;
}

.creation-hero-video__bg iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Text overlay container */
.creation-hero-video__overlay {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	pointer-events: none;
	z-index: 2;
}

.creation-hero-video__text {
	position: relative;
	padding-left: 30px;
	width: 100%;
}

/* Text groups */
.creation-hero-video__group {
	position: absolute;
	left: 30px;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	flex-direction: column;
}

/* Headings */
.creation-hero-video__heading {
	display: block;
	font-family: aeonik-light, sans-serif;
	font-size: 151px;
	line-height: 145px;
	text-transform: uppercase;
	color: #fff;
}

.creation-hero-video__heading--top {
	margin-bottom: 0;
}

.creation-hero-video__heading--bottom {
	margin-top: 0;
}

/* Subtitle */
.creation-hero-video__subtitle {
	position: absolute;
	left: 44px;
	top: 50%;
	margin-top: 151px;
	font-family: aeonik-light, sans-serif;
	font-size: 15px;
	line-height: 23px;
	color: #fff;
	max-width: 315px;
	opacity: 0;
	animation: hero-subtitle 8.5s infinite;
}

/* Volume toggle button */
.creation-hero-video__volume {
	position: absolute;
	right: 20px;
	bottom: 20px;
	z-index: 3;
	padding: 0 20px;
	height: 30px;
	border: 0;
	border-radius: 20px;
	background-color: rgba(0, 0, 0, 1);
	color: #fff;
	font-family: "aeonik-light", sans-serif;
	font-size: 13px;
	font-weight: 700;
	line-height: 29px;
	text-align: center;
	cursor: pointer;
	transition: background-color 200ms ease-in-out, color 200ms ease-in-out;
	pointer-events: auto;
}

.creation-hero-video__volume:hover,
.creation-hero-video__volume--unmuted {
	background-color: #fff;
	color: #000;
}

/*
 * Animation keyframes
 *
 * 8.5s cycle. Timings from RevSlider layer data:
 *
 * SLIDE LAYERS (per-cycle headings):
 *   "Creative":    in at 300ms  (1500ms slide), out at 3740ms (1500ms fade)
 *   "By Nature":   in at 500ms  (1500ms slide), out at 3720ms (1500ms fade)
 *   "Functional":  in at 5030ms (1500ms slide), out at 7980ms (1500ms fade)
 *   "By DESIGN":   in at 5190ms (1500ms slide), out at 7980ms (1500ms fade)
 *
 * STATIC LAYER (persistent subtitle):
 *   Subtitle:      in at 900ms  (600ms slide),  out at 7980ms (1000ms fade)
 *
 * Percentages of 8.5s cycle:
 *   300ms  =  3.5%     3720ms = 43.8%    5030ms = 59.2%
 *   500ms  =  5.9%     3740ms = 44.0%    5190ms = 61.1%
 *   900ms  = 10.6%     5220ms = 61.4%    7980ms = 93.9%
 *   1800ms = 21.2%     6530ms = 76.8%    8980ms = 105.6% (wraps)
 */

/* Heading animations — each heading animates independently (no group opacity) */
.creation-hero-video__group--1 .creation-hero-video__heading--top {
	opacity: 0;
	animation: hero-slide-in-1a 8.5s infinite;
}

.creation-hero-video__group--1 .creation-hero-video__heading--bottom {
	opacity: 0;
	animation: hero-slide-in-1b 8.5s infinite;
}

.creation-hero-video__group--2 .creation-hero-video__heading--top {
	opacity: 0;
	animation: hero-slide-in-2a 8.5s infinite;
}

.creation-hero-video__group--2 .creation-hero-video__heading--bottom {
	opacity: 0;
	animation: hero-slide-in-2b 8.5s infinite;
}

/*
 * "Creative": slide in from right at 300ms, 1500ms duration
 */
@keyframes hero-slide-in-1a {
	0%    { opacity: 0; transform: translateX(50px); }
	3.5%  { opacity: 0; transform: translateX(50px); }
	21.2% { opacity: 1; transform: translateX(0); }
	43.8% { opacity: 1; transform: translateX(0); }
	61.4% { opacity: 0; transform: translateX(0); }
	100%  { opacity: 0; }
}

/*
 * "By Nature": slide in at 500ms, 1500ms duration
 */
@keyframes hero-slide-in-1b {
	0%    { opacity: 0; transform: translateX(50px); }
	5.9%  { opacity: 0; transform: translateX(50px); }
	23.5% { opacity: 1; transform: translateX(0); }
	43.8% { opacity: 1; transform: translateX(0); }
	61.4% { opacity: 0; transform: translateX(0); }
	100%  { opacity: 0; }
}

/*
 * "Functional": slide in at 5030ms, 1500ms duration
 */
@keyframes hero-slide-in-2a {
	0%    { opacity: 0; transform: translateX(50px); }
	59.2% { opacity: 0; transform: translateX(50px); }
	76.8% { opacity: 1; transform: translateX(0); }
	93.9% { opacity: 1; transform: translateX(0); }
	100%  { opacity: 0; }
}

/*
 * "By DESIGN": slide in at 5190ms, 1500ms duration
 */
@keyframes hero-slide-in-2b {
	0%    { opacity: 0; transform: translateX(50px); }
	61.1% { opacity: 0; transform: translateX(50px); }
	78.7% { opacity: 1; transform: translateX(0); }
	93.9% { opacity: 1; transform: translateX(0); }
	100%  { opacity: 0; }
}

/*
 * Subtitle (static layer): fade in at 900ms (600ms duration),
 * stays visible, fades out at 7980ms (1000ms duration).
 * Visible for most of the cycle — persists while headings come and go.
 */
@keyframes hero-subtitle {
	0%    { opacity: 0; transform: translateX(50px); }
	10.6% { opacity: 0; transform: translateX(50px); }
	17.6% { opacity: 1; transform: translateX(0); }
	93.9% { opacity: 1; transform: translateX(0); }
	100%  { opacity: 0; transform: translateX(0); }
}

/*
 * Fullwidth layout variant (Display Locations page).
 * Uses aspect-ratio: 16/9 for responsive sizing.
 */
.creation-hero-video--fullwidth {
	height: auto;
	aspect-ratio: 16 / 9;
	background-color: transparent;
}

.creation-hero-video--fullwidth .creation-hero-video__bg {
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	transform: none;
	min-width: 0;
	min-height: 0;
}

/* Responsive breakpoints */

/* Tablet: 1024px - 1239px */
@media (max-width: 1239px) {
	.creation-hero-video__heading {
		font-size: 120px;
		line-height: 105px;
	}

	.creation-hero-video__group {
		left: 75px;
	}

	.creation-hero-video__subtitle {
		left: 75px;
		margin-top: 211px;
	}

}

/* Small tablet: 778px - 1023px */
@media (max-width: 1023px) {
	.creation-hero-video__heading {
		font-size: 100px;
		line-height: 90px;
	}

	.creation-hero-video__group {
		left: 50px;
	}

	.creation-hero-video__subtitle {
		left: 50px;
		margin-top: 172px;
	}

}

/* Mobile: up to 777px */
@media (max-width: 777px) {
	.creation-hero-video__heading {
		font-size: 50px;
		line-height: 62px;
	}

	.creation-hero-video__group {
		left: 25px;
	}

	.creation-hero-video__subtitle {
		left: 25px;
		margin-top: 110px;
	}

}