/**
 * File: assets/css/front-page/media.css
 * Description: Homepage visual media polish for Magida Creative Co.
 *
 * MAGIDA HOMEPAGE VISUAL MEDIA POLISH PASS 7.2:
 * - Keeps image/media presentation separate from base homepage layout CSS.
 * - Adds richer browser, phone, service, project, and proof visuals.
 *
 * MAGIDA HERO VISUAL CONTAINMENT HOTFIX PASS 7.2.1:
 * - Compacts the hero mockup layers to avoid bottom cropping and oversized hero height.
 *
 * MAGIDA HERO VISUAL COMPOSITION HOTFIX PASS 7.2.2:
 * - Separates the launch badge from the mobile-ready device so the right-side
 *   hero mockup reads as a balanced layered composition instead of stacked overlap.
 *
 * MAGIDA HERO VIDEO HOTFIX PASS 24.0.1:
 * - Adds a poster fallback layer for the homepage hero video.
 */

/* MAGIDA PASS 24.0.1: Homepage hero video fallback layer for Safari/mobile autoplay edge cases. */
.magida-home-hero__media-frame--video {
	background:
		linear-gradient(
			135deg,
			rgba(5, 223, 254, 0.1),
			rgba(124, 58, 237, 0.12)
		),
		rgba(6, 7, 11, 0.92);
}

/* MAGIDA PASS 24.0.1: Keep the overlay/caption above the video and poster layers. */
.magida-home-hero__media-frame--video::after {
	z-index: 2;
}

.magida-home-hero__media-frame--video .magida-home-hero__media-caption {
	z-index: 3;
}

.magida-home-hero__video-poster {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 1;
	transition: opacity 0.3s ease;
}

.magida-home-hero__media--video {
	position: relative;
	z-index: 0;
	background: rgba(6, 7, 11, 0.92);
}

.magida-home-hero__media-frame--has-poster.is-video-preparing
	.magida-home-hero__media--video,
.magida-home-hero__media-frame--has-poster.is-video-blocked
	.magida-home-hero__media--video,
.magida-home-hero__media-frame--has-poster.is-video-paused
	.magida-home-hero__media--video,
.magida-home-hero__media-frame--has-poster.is-video-error
	.magida-home-hero__media--video {
	opacity: 0;
}

.magida-home-hero__media-frame--has-poster.is-video-ready
	.magida-home-hero__media--video,
.magida-home-hero__media-frame--has-poster.is-video-playing
	.magida-home-hero__media--video {
	opacity: 1;
}

.magida-home-hero__media-frame--has-poster.is-video-ready
	.magida-home-hero__video-poster,
.magida-home-hero__media-frame--has-poster.is-video-playing
	.magida-home-hero__video-poster {
	opacity: 0;
}

.magida-home-hero__media--noscript {
	position: absolute;
	inset: 0;
	z-index: 1;
}

/* MAGIDA PASS 7.2: Hero mockup now has a more complete website-preview feel. */
.magida-home-hero__mock-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 14px;
}

.magida-home-hero__mock-status {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 28px;
	padding: 6px 11px;
	border: 1px solid rgba(190, 189, 229, 0.14);
	border-radius: var(--magida-radius-full);
	background: rgba(255, 255, 255, 0.035);
	color: var(--magida-text-soft);
	font-size: 0.72rem;
	font-weight: 800;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.magida-home-hero__mock-status::before {
	width: 8px;
	height: 8px;
	border-radius: var(--magida-radius-full);
	background: var(--magida-cyan);
	box-shadow: 0 0 16px rgba(5, 223, 254, 0.72);
	content: "";
}

.magida-home-hero__preview-tabs {
	display: grid;
	grid-template-columns: 1fr 0.8fr 0.62fr;
	gap: 10px;
	max-width: 360px;
	margin-top: 26px;
}

.magida-home-hero__preview-tabs span {
	height: 34px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: var(--magida-radius-md);
	background: rgba(255, 255, 255, 0.04);
}

.magida-home-hero__mock-screen {
	display: grid;
	grid-template-columns: 1.2fr 0.8fr;
	gap: 12px;
	max-width: 460px;
	margin-top: 24px;
}

.magida-home-hero__mock-screen span {
	min-height: 70px;
	border: 1px solid rgba(5, 223, 254, 0.12);
	border-radius: var(--magida-radius-lg);
	background:
		radial-gradient(
			circle at 24% 28%,
			rgba(5, 223, 254, 0.18),
			transparent 7rem
		),
		rgba(255, 255, 255, 0.035);
}

.magida-home-hero__mock-screen span:first-child {
	grid-row: span 2;
	min-height: 152px;
	background:
		linear-gradient(
			135deg,
			rgba(5, 223, 254, 0.2),
			rgba(124, 106, 251, 0.16)
		),
		rgba(255, 255, 255, 0.04);
}

/* MAGIDA PASS 7.2: Device visual can now carry a real image without breaking the mockup. */
.magida-home-hero__device {
	padding: 12px;
}

.magida-home-hero__device-speaker {
	display: block;
	width: 42px;
	height: 4px;
	margin: 3px auto 12px;
	border-radius: var(--magida-radius-full);
	background: rgba(190, 189, 229, 0.34);
}

.magida-home-hero__device-media,
.magida-home-hero__device-fallback {
	position: relative;
	overflow: hidden;
	min-height: 176px;
	border: 1px solid rgba(190, 189, 229, 0.1);
	border-radius: 20px;
	background:
		radial-gradient(
			circle at 50% 0%,
			rgba(5, 223, 254, 0.18),
			transparent 9rem
		),
		rgba(255, 255, 255, 0.035);
}

.magida-home-hero__device-image {
	display: block;
	width: 100%;
	height: 176px;
	min-height: 0;
	object-fit: cover;
}

.magida-home-hero__device-fallback {
	display: grid;
	align-content: center;
	padding: 16px;
}

.magida-home-hero__device-fallback strong {
	display: block;
	margin: 0;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 1rem;
}

.magida-home-hero__device-fallback em {
	display: block;
	width: 74%;
	height: 44px;
	margin-top: 18px;
	border-radius: var(--magida-radius-md);
	background: var(--magida-gradient-primary);
	opacity: 0.74;
}

.magida-home-hero__floating-card {
	position: absolute;
	z-index: 3;
	max-width: 210px;
	padding: 14px 16px;
	border: 1px solid rgba(5, 223, 254, 0.16);
	border-radius: var(--magida-radius-lg);
	background: rgba(6, 7, 11, 0.72);
	box-shadow: 0 20px 70px rgba(0, 0, 0, 0.32);
	backdrop-filter: blur(16px);
}

.magida-home-hero__floating-card span {
	display: block;
	color: var(--magida-cyan);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.magida-home-hero__floating-card strong {
	display: block;
	margin-top: 6px;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 0.98rem;
	line-height: 1.15;
}

.magida-home-hero__floating-card--stack {
	top: 7px;
	left: 28px;
}

.magida-home-hero__floating-card--launch {
	right: 16px;
	bottom: 268px;
}

/* MAGIDA PASS 7.2.1:
 * Compact the richer hero mockup so the browser, phone, floating cards,
 * and brand mark fit inside the hero stage without increasing section height.
 */
.magida-home-hero__mock-content {
	padding: clamp(22px, 3.2vw, 34px);
	/* MAGIDA PASS 7.2.1: Scale the decorative preview instead of increasing hero height. */
	width: 128%;
	transform: scale(0.78);
	transform-origin: top left;
}

.magida-home-hero__mock-content strong {
	max-width: 440px;
	font-size: clamp(1.55rem, 3.1vw, 2.55rem);
}

.magida-home-hero__mock-content p {
	max-width: 380px;
	margin-top: 12px;
}

.magida-home-hero__preview-tabs {
	max-width: 330px;
	margin-top: 20px;
}

.magida-home-hero__preview-tabs span {
	height: 28px;
}

.magida-home-hero__mock-lines {
	gap: 9px;
	max-width: 340px;
	margin-top: 20px;
}

.magida-home-hero__mock-lines i {
	height: 10px;
}

.magida-home-hero__mock-screen {
	gap: 10px;
	max-width: 410px;
	margin-top: 18px;
}

.magida-home-hero__mock-screen span {
	min-height: 52px;
}

.magida-home-hero__mock-screen span:first-child {
	min-height: 118px;
}

.magida-home-hero__device {
	right: 18px;
	bottom: 34px;
	width: min(38%, 176px);
	min-height: 198px;
	padding: 14px;
}

.magida-home-hero__device-media,
.magida-home-hero__device-fallback {
	min-height: 154px;
}

.magida-home-hero__device-image {
	height: 154px;
}

.magida-home-hero__floating-card--stack {
	top: 10px;
	left: 22px;
}

.magida-home-hero__floating-card--launch {
	/* MAGIDA PASS 7.2.2: Move the launch badge left of the phone instead of sitting directly on top of it. */
	right: clamp(168px, 31%, 214px);
	bottom: 102px;
	max-width: 230px;
}

/* MAGIDA PASS 7.2: Service panels get small coded visuals instead of static text-only panels. */
.magida-service-panel {
	display: grid;
	align-content: start;
}

.magida-service-panel__visual {
	position: absolute;
	top: 24px;
	right: 24px;
	width: min(36%, 190px);
	height: 124px;
	opacity: 0.86;
	pointer-events: none;
}

.magida-service-panel__browser,
.magida-service-panel__phone {
	position: relative;
	overflow: hidden;
	height: 100%;
	border: 1px solid rgba(5, 223, 254, 0.16);
	background: rgba(255, 255, 255, 0.035);
	box-shadow: inset 0 0 36px rgba(5, 223, 254, 0.06);
}

.magida-service-panel__browser {
	border-radius: 18px;
}

.magida-service-panel__browser span {
	position: absolute;
	top: 14px;
	width: 7px;
	height: 7px;
	border-radius: var(--magida-radius-full);
	background: rgba(190, 189, 229, 0.38);
}

.magida-service-panel__browser span:nth-child(1) {
	left: 14px;
}

.magida-service-panel__browser span:nth-child(2) {
	left: 27px;
}

.magida-service-panel__browser span:nth-child(3) {
	left: 40px;
}

.magida-service-panel__browser i,
.magida-service-panel__phone i {
	position: absolute;
	display: block;
	border-radius: var(--magida-radius-md);
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.22),
		rgba(124, 106, 251, 0.12)
	);
}

.magida-service-panel__browser i:nth-of-type(1) {
	inset: 38px 16px auto;
	height: 24px;
}

.magida-service-panel__browser i:nth-of-type(2) {
	left: 16px;
	bottom: 18px;
	width: 42%;
	height: 34px;
}

.magida-service-panel__browser i:nth-of-type(3) {
	right: 16px;
	bottom: 18px;
	width: 34%;
	height: 34px;
}

.magida-service-panel__phone {
	width: 74px;
	margin-left: auto;
	border-radius: 22px;
}

.magida-service-panel__phone span {
	position: absolute;
	top: 10px;
	left: 50%;
	width: 26px;
	height: 4px;
	border-radius: var(--magida-radius-full);
	background: rgba(190, 189, 229, 0.32);
	transform: translateX(-50%);
}

.magida-service-panel__phone i:nth-of-type(1) {
	inset: 26px 11px auto;
	height: 44px;
}

.magida-service-panel__phone i:nth-of-type(2) {
	left: 11px;
	bottom: 29px;
	width: 22px;
	height: 22px;
}

.magida-service-panel__phone i:nth-of-type(3) {
	right: 11px;
	bottom: 29px;
	width: 22px;
	height: 22px;
}

.magida-home-services__note {
	justify-content: flex-start;
}

.magida-home-services__note-visual {
	display: inline-grid;
	grid-template-columns: repeat(3, 10px);
	gap: 7px;
	align-items: center;
	justify-content: center;
	width: 54px;
	height: 54px;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: var(--magida-radius-lg);
	background: rgba(5, 223, 254, 0.04);
	flex: 0 0 auto;
}

.magida-home-services__note-visual span {
	width: 10px;
	height: 10px;
	border-radius: var(--magida-radius-full);
	background: var(--magida-cyan);
	box-shadow: 0 0 18px rgba(5, 223, 254, 0.48);
}

/* MAGIDA PASS 7.2: Featured project image is presented inside its own browser shell. */
.magida-featured-project__visual {
	overflow: visible;
	border: 0;
	background: transparent;
	box-shadow: none;
}

.magida-featured-project__browser {
	position: relative;
	overflow: hidden;
	min-height: 390px;
	border: 1px solid rgba(5, 223, 254, 0.2);
	border-radius: var(--magida-radius-xl);
	background: rgba(7, 9, 16, 0.9);
	box-shadow:
		0 26px 88px rgba(0, 0, 0, 0.32),
		0 0 58px rgba(5, 223, 254, 0.1);
}

.magida-featured-project__browser-bar {
	display: flex;
	gap: 8px;
	align-items: center;
	height: 44px;
	padding-inline: 18px;
	border-bottom: 1px solid rgba(190, 189, 229, 0.1);
	background: rgba(255, 255, 255, 0.04);
}

.magida-featured-project__browser-bar span {
	width: 10px;
	height: 10px;
	border-radius: var(--magida-radius-full);
	background: rgba(190, 189, 229, 0.46);
}

.magida-featured-project__screen {
	position: relative;
	min-height: 346px;
	overflow: hidden;
}

.magida-featured-project__screen::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(180deg, transparent 42%, rgba(6, 7, 11, 0.58)),
		radial-gradient(
			circle at 86% 16%,
			rgba(5, 223, 254, 0.16),
			transparent 17rem
		);
	content: "";
	pointer-events: none;
}

.magida-featured-project__image {
	display: block;
	width: 100%;
	height: 346px;
	min-height: 346px;
	object-fit: cover;
	transition: transform var(--magida-transition-slow);
}

.magida-featured-project__visual:hover .magida-featured-project__image {
	transform: scale(1.035);
}

.magida-featured-project__placeholder {
	min-height: 346px;
}

.magida-featured-project__placeholder i {
	display: inline-block;
	width: 72px;
	height: 48px;
	margin-top: 24px;
	margin-right: 10px;
	border: 1px solid rgba(190, 189, 229, 0.12);
	border-radius: var(--magida-radius-md);
	background: rgba(255, 255, 255, 0.04);
}

.magida-featured-project__metric {
	position: absolute;
	z-index: 2;
	max-width: 220px;
	padding: 13px 15px;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: var(--magida-radius-lg);
	background: rgba(6, 7, 11, 0.76);
	box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32);
	backdrop-filter: blur(16px);
}

.magida-featured-project__metric span {
	display: block;
	color: var(--magida-cyan);
	font-size: 0.68rem;
	font-weight: 900;
	letter-spacing: 0.09em;
	text-transform: uppercase;
}

.magida-featured-project__metric strong {
	display: block;
	margin-top: 6px;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 0.98rem;
	line-height: 1.15;
}

.magida-featured-project__metric--top {
	top: 22px;
	right: -20px;
}

.magida-featured-project__metric--bottom {
	left: -22px;
	bottom: 26px;
}

/* MAGIDA PASS 7.2: Proof section now has a media side to balance the copy. */
.magida-proof__content {
	position: relative;
	z-index: 1;
}

.magida-proof__visual {
	position: relative;
	min-height: 300px;
}

.magida-proof__media,
.magida-proof__placeholder {
	overflow: hidden;
	min-height: 300px;
	border: 1px solid rgba(5, 223, 254, 0.16);
	border-radius: var(--magida-radius-xl);
	background:
		radial-gradient(
			circle at 72% 24%,
			rgba(124, 106, 251, 0.2),
			transparent 16rem
		),
		rgba(255, 255, 255, 0.035);
}

.magida-proof__image {
	display: block;
	width: 100%;
	height: 300px;
	min-height: 300px;
	object-fit: cover;
}

.magida-proof__placeholder {
	display: grid;
	align-content: center;
	padding: 28px;
}

.magida-proof__placeholder span {
	display: block;
	height: 12px;
	margin-bottom: 12px;
	border-radius: var(--magida-radius-full);
	background: linear-gradient(
		90deg,
		rgba(5, 223, 254, 0.22),
		rgba(124, 106, 251, 0.08)
	);
}

.magida-proof__placeholder span:nth-child(2) {
	width: 78%;
}

.magida-proof__placeholder span:nth-child(3) {
	width: 58%;
}

.magida-proof__placeholder strong {
	margin-top: 18px;
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 1.35rem;
}

.magida-proof__badge {
	position: absolute;
	z-index: 2;
	padding: 13px 15px;
	border: 1px solid rgba(5, 223, 254, 0.18);
	border-radius: var(--magida-radius-lg);
	background: rgba(6, 7, 11, 0.76);
	box-shadow: 0 18px 54px rgba(0, 0, 0, 0.32);
	backdrop-filter: blur(16px);
}

.magida-proof__badge strong,
.magida-proof__badge span {
	display: block;
}

.magida-proof__badge strong {
	color: var(--magida-white);
	font-family: var(--magida-font-heading);
	font-size: 1.08rem;
	line-height: 1.1;
}

.magida-proof__badge span {
	margin-top: 4px;
	color: var(--magida-text-soft);
	font-size: 0.78rem;
	font-weight: 800;
}

.magida-proof__badge--one {
	top: 20px;
	right: -16px;
}

.magida-proof__badge--two {
	left: -20px;
	bottom: 24px;
}

@media (max-width: 1180px) {
	.magida-home-hero__mock-content {
		/* MAGIDA PASS 7.2.1: Slightly tighter scaling on tablet widths. */
		width: 140%;
		transform: scale(0.71);
	}

	.magida-home-hero__floating-card--launch {
		/* MAGIDA PASS 7.2.2: Keep the badge beside, not above, the phone on tablet widths. */
		right: clamp(156px, 34%, 196px);
		bottom: 96px;
	}
}

@media (max-width: 900px) {
	.magida-service-panel__visual {
		width: min(30%, 160px);
	}

	.magida-featured-project__metric--top {
		right: 14px;
	}

	.magida-featured-project__metric--bottom,
	.magida-proof__badge--two {
		left: 14px;
	}

	.magida-proof__badge--one {
		right: 14px;
	}
}

@media (max-width: 768px) {
	.magida-home-hero__floating-card--launch {
		/* MAGIDA PASS 7.2.2: Mobile keeps decorative cards compact and away from the device area. */
		right: 18px;
		bottom: 22px;
		max-width: calc(100% - 36px);
	}

	.magida-home-hero__mock-head {
		align-items: flex-start;
		flex-direction: column;
	}

	.magida-home-hero__mock-content {
		/* MAGIDA PASS 7.2.1: Keep mobile hero compact after visual polish. */
		width: auto;
		padding: 20px;
		transform: none;
	}

	.magida-home-hero__mock-content strong {
		font-size: clamp(1.35rem, 8vw, 2rem);
	}

	.magida-home-hero__mock-content p {
		margin-top: 10px;
		font-size: 0.95rem;
	}

	.magida-home-hero__preview-tabs,
	.magida-home-hero__mock-screen,
	.magida-home-hero__floating-card {
		display: none;
	}

	.magida-service-panel__visual {
		position: relative;
		top: auto;
		right: auto;
		width: 100%;
		height: 110px;
		margin-bottom: 18px;
	}

	.magida-featured-project__browser,
	.magida-featured-project__screen,
	.magida-featured-project__image,
	.magida-featured-project__placeholder {
		min-height: 280px;
	}

	.magida-featured-project__image {
		height: 280px;
	}

	.magida-featured-project__metric,
	.magida-proof__badge {
		position: static;
		margin-top: 12px;
	}

	.magida-proof__visual,
	.magida-proof__media,
	.magida-proof__placeholder,
	.magida-proof__image {
		min-height: 260px;
	}

	.magida-proof__image {
		height: 260px;
	}
}

@media (max-width: 520px) {
	.magida-home-services__note-visual {
		display: none;
	}

	.magida-featured-project__browser,
	.magida-featured-project__screen,
	.magida-featured-project__image,
	.magida-featured-project__placeholder {
		min-height: 236px;
	}

	.magida-featured-project__image {
		height: 236px;
	}
}

/* MAGIDA PASS 7.2: Decorative motion stays subtle and is disabled for reduced-motion users. */
@media (prefers-reduced-motion: no-preference) {
	.magida-home-hero__floating-card,
	.magida-featured-project__metric,
	.magida-proof__badge,
	.magida-service-panel__visual {
		animation: magida-home-media-drift 7.5s ease-in-out infinite;
	}

	.magida-home-hero__floating-card--launch,
	.magida-featured-project__metric--bottom,
	.magida-proof__badge--two,
	.magida-service-panel--mobile .magida-service-panel__visual {
		animation-delay: 0.9s;
		animation-direction: reverse;
	}
}

@keyframes magida-home-media-drift {
	0%,
	100% {
		transform: translateY(0);
	}

	50% {
		transform: translateY(-8px);
	}
}