/* Copyright (C) 2026 Moko Consulting <hello@mokoconsulting.tech>
 *
 * SPDX-License-Identifier: GPL-3.0-or-later
 *
 * FILE INFORMATION
 * DEFGROUP: MokoJoomHero.Module.Assets
 * INGROUP: MokoJoomHero.Module
 * REPO: https://git.mokoconsulting.tech/MokoConsulting/MokoJoomHero
 * PATH: /src/media/css/mod_mokojoomhero.css
 * VERSION: 01.21.00
 * BRIEF: Hero module stylesheet — slideshow, video, colour/gradient, overlay, card, mute toggle, responsive
 */

/* ============================================================
   Hero container
   ============================================================ */
.mokojoomhero {
	position: relative;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* ============================================================
   Solid colour / gradient background
   ============================================================ */
.mokojoomhero__color {
	position: absolute;
	inset: 0;
}

/* ============================================================
   Image slides — base
   ============================================================ */
.mokojoomhero__slide {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	opacity: 0;
}

.mokojoomhero__slide--active {
	opacity: 1;
}

/* ── Crossfade (default) ── */
.mokojoomhero[data-transition="crossfade"] .mokojoomhero__slide {
	transition: opacity 1s ease;
}

/* ── Slide ── */
.mokojoomhero[data-transition="slide"] .mokojoomhero__slide {
	opacity: 1;
	transform: translateX(100%);
	transition: transform 0.8s ease;
}

.mokojoomhero[data-transition="slide"] .mokojoomhero__slide--active {
	transform: translateX(0);
}

.mokojoomhero[data-transition="slide"] .mokojoomhero__slide--exit {
	transform: translateX(-100%);
}

/* ── Fade to black ── */
.mokojoomhero[data-transition="fade-black"] .mokojoomhero__slide {
	transition: opacity 0.6s ease;
}

/* ── Zoom (Ken Burns) ── */
.mokojoomhero[data-transition="zoom"] .mokojoomhero__slide {
	transition: opacity 1s ease;
}

.mokojoomhero[data-transition="zoom"] .mokojoomhero__slide--active {
	animation: mokojoomhero-zoom 8s ease forwards;
}

@keyframes mokojoomhero-zoom {
	from { transform: scale(1); }
	to   { transform: scale(1.08); }
}

/* ============================================================
   Video background
   ============================================================ */
/* Native <video> elements: object-fit works directly */
video.mokojoomhero__video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	border: 0;
	pointer-events: none;
}

/* Embedded <iframe> (YouTube/Vimeo): object-fit doesn't apply to iframes,
   so we oversize the iframe and centre-crop via the parent's overflow:hidden */
iframe.mokojoomhero__video {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 100vw;
	height: 56.25vw;           /* 16:9 aspect ratio */
	min-height: 100%;
	min-width: 177.78vh;       /* 100 × 16/9 — ensures cover in portrait viewports */
	transform: translate(-50%, -50%);
	border: 0;
	pointer-events: none;
}

/* ============================================================
   Overlay
   ============================================================ */
.mokojoomhero__overlay {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	width: 100%;
	height: 100%;
	padding: 2rem;
}

/* ============================================================
   Content
   ============================================================ */
.mokojoomhero__content {
	max-width: 900px;
	width: 100%;
}

.mokojoomhero__content h1,
.mokojoomhero__content h2,
.mokojoomhero__content h3 {
	margin-top: 0;
	color: inherit;
}

.mokojoomhero__content p:last-child {
	margin-bottom: 0;
}

/* ============================================================
   Card
   ============================================================ */
.mokojoomhero__card {
	background: rgba(255, 255, 255, 0.95);
	color: #333;
	border-radius: 8px;
	padding: 2rem 2.5rem;
	box-shadow: 0 4px 24px rgba(0, 0, 0, 0.15);
	max-width: 700px;
	margin: 0 auto;
}

.mokojoomhero__card h1,
.mokojoomhero__card h2,
.mokojoomhero__card h3 {
	color: #222;
	margin-top: 0;
}

.mokojoomhero__card a:not(.btn) {
	color: inherit;
	text-decoration: underline;
}

/* ============================================================
   Card fade-in delay
   ============================================================ */
.mokojoomhero__card[data-card-delay] {
	opacity: 0;
	animation: mokojoomhero-fadein 0.6s ease forwards;
}

@keyframes mokojoomhero-fadein {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Mute toggle
   ============================================================ */
.mokojoomhero__mute-toggle {
	position: absolute;
	bottom: 1rem;
	right: 1rem;
	z-index: 2;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	border: none;
	border-radius: 50%;
	width: 40px;
	height: 40px;
	font-size: 1.2rem;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s;
}

.mokojoomhero__mute-toggle:hover {
	background: rgba(0, 0, 0, 0.7);
}

/* ============================================================
   Video poster image
   ============================================================ */
.mokojoomhero__poster {
	position: absolute;
	inset: 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

/* ============================================================
   Scroll-down indicator
   ============================================================ */
.mokojoomhero__scroll-indicator {
	position: absolute;
	bottom: 1.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 2;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	padding: 0;
	opacity: 0.8;
	transition: opacity 0.3s;
	animation: mokojoomhero-bounce 2s infinite;
}

.mokojoomhero__scroll-indicator:hover {
	opacity: 1;
}

.mokojoomhero__scroll-indicator--hidden {
	display: none;
}

@keyframes mokojoomhero-bounce {
	0%, 20%, 50%, 80%, 100% { transform: translateX(-50%) translateY(0); }
	40% { transform: translateX(-50%) translateY(-8px); }
	60% { transform: translateX(-50%) translateY(-4px); }
}

/* ============================================================
   Content entrance animations
   ============================================================ */
.mokojoomhero__content[class*="mokojoomhero__content--anim-"] {
	opacity: 0;
}

.mokojoomhero__content--anim-fade-in.mokojoomhero__content--visible {
	animation: mokojoomhero-anim-fade-in 0.8s ease forwards;
}

.mokojoomhero__content--anim-slide-up.mokojoomhero__content--visible {
	animation: mokojoomhero-anim-slide-up 0.8s ease forwards;
}

.mokojoomhero__content--anim-slide-left.mokojoomhero__content--visible {
	animation: mokojoomhero-anim-slide-left 0.8s ease forwards;
}

.mokojoomhero__content--anim-slide-right.mokojoomhero__content--visible {
	animation: mokojoomhero-anim-slide-right 0.8s ease forwards;
}

@keyframes mokojoomhero-anim-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes mokojoomhero-anim-slide-up {
	from { opacity: 0; transform: translateY(30px); }
	to   { opacity: 1; transform: translateY(0); }
}

@keyframes mokojoomhero-anim-slide-left {
	from { opacity: 0; transform: translateX(30px); }
	to   { opacity: 1; transform: translateX(0); }
}

@keyframes mokojoomhero-anim-slide-right {
	from { opacity: 0; transform: translateX(-30px); }
	to   { opacity: 1; transform: translateX(0); }
}

/* ============================================================
   Parallax
   ============================================================ */
.mokojoomhero[data-parallax] .mokojoomhero__slide,
.mokojoomhero[data-parallax] .mokojoomhero__color,
.mokojoomhero[data-parallax] .mokojoomhero__poster,
.mokojoomhero[data-parallax] video.mokojoomhero__video,
.mokojoomhero[data-parallax] iframe.mokojoomhero__video {
	will-change: transform;
}

/* ============================================================
   Reduced motion — WCAG 2.1 AA (SC 2.3.3)
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
	.mokojoomhero__slide {
		transition: none !important;
		animation: none !important;
	}

	.mokojoomhero__card[data-card-delay] {
		opacity: 1;
		animation: none !important;
	}

	.mokojoomhero__scroll-indicator {
		animation: none;
	}

	.mokojoomhero[data-transition="zoom"] .mokojoomhero__slide--active {
		animation: none !important;
	}

	.mokojoomhero__content[class*="mokojoomhero__content--anim-"] {
		opacity: 1;
		animation: none !important;
	}

	.mokojoomhero[data-parallax] .mokojoomhero__slide,
	.mokojoomhero[data-parallax] .mokojoomhero__color,
	.mokojoomhero[data-parallax] .mokojoomhero__poster,
	.mokojoomhero[data-parallax] video.mokojoomhero__video,
	.mokojoomhero[data-parallax] iframe.mokojoomhero__video {
		will-change: auto;
		transform: none !important;
	}
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 768px) {
	.mokojoomhero {
		height: var(--mokojoomhero-mobile-height, auto) !important;
	}

	.mokojoomhero__video,
	.mokojoomhero__slide {
		display: none;
	}

	/* Keep colour/gradient backgrounds visible on mobile */
	.mokojoomhero__color {
		position: relative;
	}

	.mokojoomhero__overlay {
		padding: 1rem;
	}

	/* Only clear overlay background when media is hidden (image/video modes) */
	.mokojoomhero:not(:has(.mokojoomhero__color)) .mokojoomhero__overlay {
		background-color: transparent !important;
	}

	.mokojoomhero__content {
		font-size: 0.9rem;
	}

	.mokojoomhero__card {
		padding: 1.5rem;
	}
}