/* ==========================================================
   Monkey HQ Videos – frontend
   ========================================================== */

.mhqv-section {
	--mhqv-accent: #c8a24a;
	--mhqv-dark: #1f295c;
	--mhqv-bg: #ffffff;
	--mhqv-gap: 22px;
	--mhqv-radius: 18px;
	--mhqv-speed: 1;
	position: relative;
	isolation: isolate;
	padding: 72px 0 80px;
	box-sizing: border-box;
	color: var(--mhqv-dark);
}
.mhqv-section *,
.mhqv-section *::before,
.mhqv-section *::after { box-sizing: border-box; }

.mhqv-inner {
	position: relative;
	z-index: 2;
	max-width: 1240px;
	margin: 0 auto;
	padding: 0 16px;
}

/* ---------- Heading ---------- */
.mhqv-head { text-align: center; margin: 0 auto 44px; max-width: 760px; }
.mhqv-eyebrow {
	display: inline-flex; align-items: center; gap: 10px;
	font-size: 12px; font-weight: 700; letter-spacing: .22em; text-transform: uppercase;
	color: var(--mhqv-accent);
	margin-bottom: 12px;
}
.mhqv-eyebrow i { width: 26px; height: 2px; background: currentColor; border-radius: 2px; display: block; }
.mhqv-heading {
	margin: 0 !important;
	font-size: clamp(28px, 4vw, 46px) !important;
	line-height: 1.12 !important;
	font-weight: 800 !important;
	color: var(--mhqv-dark) !important;
	letter-spacing: -.01em;
	text-wrap: balance;
}
.mhqv-sub { margin: 14px 0 0; font-size: 17px; opacity: .72; }

/* ---------- Grids ---------- */
.mhqv-grid {
	display: grid;
	gap: var(--mhqv-gap);
}
.mhqv-grid + .mhqv-grid { margin-top: calc(var(--mhqv-gap) * 1.6); }
.mhqv-grid--vertical   { grid-template-columns: repeat(var(--mhqv-vd), minmax(0, 1fr)); }
.mhqv-grid--horizontal { grid-template-columns: repeat(var(--mhqv-hd), minmax(0, 1fr)); }
.mhqv-grid--horizontal.is-single { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin-left: auto; margin-right: auto; }

@media (max-width: 1024px) {
	.mhqv-grid--vertical   { grid-template-columns: repeat(var(--mhqv-vt), minmax(0, 1fr)); }
	.mhqv-grid--horizontal { grid-template-columns: repeat(var(--mhqv-ht), minmax(0, 1fr)); }
	.mhqv-section { padding: 56px 0 64px; }
}
@media (max-width: 767px) {
	.mhqv-grid--vertical   { grid-template-columns: repeat(var(--mhqv-vm), minmax(0, 1fr)); }
	.mhqv-grid--horizontal { grid-template-columns: repeat(var(--mhqv-hm), minmax(0, 1fr)); }
	.mhqv-grid--vertical { max-width: 420px; margin-left: auto; margin-right: auto; }
	.mhqv-head { margin-bottom: 30px; }
	.mhqv-section { padding: 44px 0 52px; }
}

/* ---------- Card ---------- */
.mhqv-card { position: relative; min-width: 0; }
.mhqv-frame {
	position: relative;
	border-radius: var(--mhqv-radius);
	overflow: hidden;
	background: var(--mhqv-dark);
	box-shadow: 0 1px 0 rgba(255,255,255,.6) inset, 0 14px 34px -14px rgba(16, 22, 60, .45), 0 2px 6px rgba(16, 22, 60, .08);
	transition: transform .45s cubic-bezier(.2,.8,.2,1), box-shadow .45s;
	transform: translateZ(0);
}
.mhqv-card--vertical   .mhqv-frame { aspect-ratio: 9 / 16; }
.mhqv-card--horizontal .mhqv-frame { aspect-ratio: 16 / 9; }

/* gold glow border on hover */
.mhqv-frame::after {
	content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
	border: 2px solid transparent;
	transition: border-color .4s, box-shadow .4s;
}
.mhqv-card:hover .mhqv-frame,
.mhqv-card:focus-within .mhqv-frame {
	transform: translateY(-8px);
	box-shadow: 0 26px 50px -18px rgba(16, 22, 60, .55), 0 0 0 6px color-mix(in srgb, var(--mhqv-accent) 18%, transparent);
}
.mhqv-card:hover .mhqv-frame::after,
.mhqv-card:focus-within .mhqv-frame::after { border-color: var(--mhqv-accent); }
.mhqv-card.is-playing .mhqv-frame { transform: none; }

.mhqv-trigger {
	all: unset;
	position: absolute; inset: 0;
	display: block; cursor: pointer;
	width: 100%; height: 100%;
}
.mhqv-trigger:focus-visible { outline: 3px solid var(--mhqv-accent); outline-offset: -3px; border-radius: inherit; }

.mhqv-thumb {
	position: absolute; inset: 0;
	width: 100% !important; height: 100% !important; max-width: none !important;
	object-fit: cover; display: block;
	transition: transform .9s cubic-bezier(.2,.8,.2,1), filter .5s;
	margin: 0 !important; border-radius: 0 !important;
}
.mhqv-card:hover .mhqv-thumb { transform: scale(1.07); }

.mhqv-shade {
	position: absolute; inset: 0;
	background:
		linear-gradient(180deg, rgba(10,14,40,0) 45%, rgba(10,14,40,.82) 100%),
		linear-gradient(0deg, rgba(10,14,40,.12), rgba(10,14,40,.12));
	transition: opacity .4s;
}

.mhqv-play {
	position: absolute; left: 50%; top: 50%;
	width: 64px; height: 64px; margin: -32px 0 0 -32px;
	border-radius: 50%;
	background: var(--mhqv-accent);
	display: grid; place-items: center;
	box-shadow: 0 10px 26px -6px rgba(0,0,0,.45);
	transition: transform .4s cubic-bezier(.2,.8,.2,1), background .3s;
}
.mhqv-play::before,
.mhqv-play::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid var(--mhqv-accent);
	animation: mhqv-pulse 2.4s cubic-bezier(.2,.6,.3,1) infinite;
}
.mhqv-play::after { animation-delay: 1.2s; }
.mhqv-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 3px; position: relative; z-index: 1; }
.mhqv-card:hover .mhqv-play { transform: scale(1.14); background: var(--mhqv-dark); }
.mhqv-card--horizontal .mhqv-play { width: 78px; height: 78px; margin: -39px 0 0 -39px; }
.mhqv-card--horizontal .mhqv-play svg { width: 30px; height: 30px; }

@keyframes mhqv-pulse {
	0%   { transform: scale(1);   opacity: .85; }
	100% { transform: scale(1.9); opacity: 0; }
}

.mhqv-title {
	position: absolute; left: 0; right: 0; bottom: 0;
	padding: 16px 16px 15px;
	color: #fff; font-weight: 700; font-size: 15px; line-height: 1.3;
	text-shadow: 0 1px 8px rgba(0,0,0,.35);
	transform: translateY(0);
	transition: transform .4s;
}
.mhqv-title::before {
	content: ""; display: block; width: 26px; height: 3px; border-radius: 3px;
	background: var(--mhqv-accent); margin-bottom: 8px;
	transition: width .4s;
}
.mhqv-card:hover .mhqv-title::before { width: 48px; }
.mhqv-card--horizontal .mhqv-title { font-size: 18px; padding: 22px 24px; }

/* playing inline */
.mhqv-frame .mhqv-player {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block;
	background: #000;
}
video.mhqv-player { object-fit: contain; }
video.mhqv-thumb { pointer-events: none; background: var(--mhqv-dark); }

/* Instagram card without its own thumbnail */
.mhqv-thumb--ig {
	display: block;
	background:
		radial-gradient(circle at 25% 110%, #fdf497 0%, #fdf497 6%, #fd5949 42%, #d6249f 62%, #285aeb 92%);
}
.mhqv-thumb--ig::after {
	content: ""; position: absolute; inset: 0;
	background-image: radial-gradient(rgba(255,255,255,.18) 1.2px, transparent 1.5px);
	background-size: 18px 18px;
}
/* Platform icon (icon only) */
.mhqv-src {
	position: absolute; top: 12px; left: 12px; z-index: 1;
	display: grid; place-items: center;
	width: 34px; height: 34px; border-radius: 50%;
	background: rgba(10,14,40,.5); color: #fff;
	-webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
	box-shadow: 0 4px 12px -4px rgba(0,0,0,.4);
}
.mhqv-src svg { width: 18px; height: 18px; display: block; }
.mhqv-src--youtube { --mhqv-src-bg: #e62117; background: #e62117; }
.mhqv-src--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); }
.mhqv-card--horizontal .mhqv-src { top: 16px; left: 16px; width: 38px; height: 38px; }

/* ---------- Reveal on scroll ---------- */
.mhqv-js .mhqv-reveal {
	opacity: 0;
	transform: translateY(28px);
	transition: opacity .7s ease, transform .8s cubic-bezier(.2,.8,.2,1);
	transition-delay: calc(min(var(--i, 0), 8) * 70ms);
}
.mhqv-js .mhqv-reveal.is-in { opacity: 1; transform: none; }

/* ---------- Moving background ---------- */
.mhqv-bg {
	position: absolute; z-index: 0;
	top: 0; bottom: 0; left: 0; right: 0;
	overflow: hidden;
	background: var(--mhqv-bg);
	pointer-events: none;
}
.mhqv-section.is-full .mhqv-bg {
	left: 50%; right: auto;
	width: 100vw;
	transform: translateX(-50%);
}
html.mhqv-clip, html.mhqv-clip body { overflow-x: clip; }

.mhqv-blob {
	position: absolute; border-radius: 50%;
	filter: blur(60px);
	opacity: .55;
	will-change: transform;
}
.mhqv-blob--1 {
	width: 46vmax; height: 46vmax; left: -12vmax; top: -16vmax;
	background: radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--mhqv-accent) 70%, #fff), transparent 65%);
	animation: mhqv-drift1 calc(26s * var(--mhqv-speed)) ease-in-out infinite alternate;
}
.mhqv-blob--2 {
	width: 40vmax; height: 40vmax; right: -14vmax; top: 20%;
	background: radial-gradient(circle at 60% 40%, color-mix(in srgb, var(--mhqv-dark) 45%, #fff), transparent 65%);
	opacity: .42;
	animation: mhqv-drift2 calc(30s * var(--mhqv-speed)) ease-in-out infinite alternate;
}
.mhqv-blob--3 {
	width: 34vmax; height: 34vmax; left: 30%; bottom: -18vmax;
	background: radial-gradient(circle, color-mix(in srgb, var(--mhqv-accent) 55%, #fff), transparent 65%);
	opacity: .45;
	animation: mhqv-drift3 calc(22s * var(--mhqv-speed)) ease-in-out infinite alternate;
}
@keyframes mhqv-drift1 { to { transform: translate(18vw, 14vh) scale(1.15); } }
@keyframes mhqv-drift2 { to { transform: translate(-16vw, -10vh) scale(1.2); } }
@keyframes mhqv-drift3 { to { transform: translate(-14vw, -12vh) scale(.9); } }

.mhqv-grid-dots {
	position: absolute; inset: -40px;
	background-image: radial-gradient(color-mix(in srgb, var(--mhqv-dark) 22%, transparent) 1.4px, transparent 1.6px);
	background-size: 26px 26px;
	-webkit-mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
	        mask-image: radial-gradient(ellipse at center, #000 20%, transparent 75%);
	opacity: .55;
	animation: mhqv-dots calc(18s * var(--mhqv-speed)) linear infinite;
}
@keyframes mhqv-dots { to { transform: translate(26px, 26px); } }

.mhqv-beam {
	position: absolute; top: -20%; bottom: -20%; width: 30%; left: -40%;
	background: linear-gradient(100deg, transparent, color-mix(in srgb, var(--mhqv-accent) 22%, transparent), transparent);
	transform: skewX(-18deg);
	animation: mhqv-beam calc(11s * var(--mhqv-speed)) ease-in-out infinite;
}
@keyframes mhqv-beam {
	0%   { left: -40%; }
	60%  { left: 120%; }
	100% { left: 120%; }
}

/* floating shapes */
.mhqv-shape {
	position: absolute;
	width: var(--s); height: var(--s);
	--c: var(--mhqv-accent);
	animation: mhqv-float calc(var(--d) * var(--mhqv-speed)) ease-in-out infinite;
	animation-delay: var(--dl);
	opacity: .85;
}
.mhqv-shape.is-d { --c: var(--mhqv-dark); opacity: .6; }

.mhqv-shape--ring   { border: 3px solid var(--c); border-radius: 50%; }
.mhqv-shape--square { border: 3px solid var(--c); border-radius: 6px; }
.mhqv-shape--dot    { background: var(--c); border-radius: 50%; }
.mhqv-shape--plus::before,
.mhqv-shape--plus::after {
	content: ""; position: absolute; left: 50%; top: 50%;
	background: var(--c); border-radius: 3px;
	transform: translate(-50%, -50%);
}
.mhqv-shape--plus::before { width: 100%; height: 4px; }
.mhqv-shape--plus::after  { width: 4px; height: 100%; }
.mhqv-shape--play {
	width: 0; height: 0;
	border-style: solid;
	border-width: calc(var(--s) / 2) 0 calc(var(--s) / 2) calc(var(--s) * .86);
	border-color: transparent transparent transparent var(--c);
	filter: drop-shadow(0 4px 8px rgba(0,0,0,.08));
}
.mhqv-shape--film {
	height: calc(var(--s) * .72);
	border: 3px solid var(--c); border-radius: 7px;
}
.mhqv-shape--film::before,
.mhqv-shape--film::after {
	content: ""; position: absolute; left: 4px; right: 4px; height: 3px;
	background: repeating-linear-gradient(90deg, var(--c) 0 4px, transparent 4px 8px);
}
.mhqv-shape--film::before { top: 3px; }
.mhqv-shape--film::after  { bottom: 3px; }

@keyframes mhqv-float {
	0%   { transform: translate(0, 0) rotate(0deg); }
	25%  { transform: translate(18px, -26px) rotate(45deg); }
	50%  { transform: translate(-10px, -48px) rotate(110deg); }
	75%  { transform: translate(-22px, -18px) rotate(160deg); }
	100% { transform: translate(0, 0) rotate(360deg); }
}
.mhqv-shape--play { animation-name: mhqv-float-noturn; }
@keyframes mhqv-float-noturn {
	0%, 100% { transform: translate(0, 0) scale(1); }
	50%      { transform: translate(14px, -38px) scale(1.15); }
}

@media (max-width: 767px) {
	.mhqv-shape { transform: scale(.7); }
	.mhqv-blob { filter: blur(40px); }
}

/* ---------- Popup ---------- */
.mhqv-modal {
	position: fixed; inset: 0; z-index: 999999;
	display: grid; place-items: center;
	padding: 24px;
	background: rgba(8, 11, 32, .82);
	-webkit-backdrop-filter: blur(8px);
	        backdrop-filter: blur(8px);
	opacity: 0; transition: opacity .3s;
}
.mhqv-modal.is-open { opacity: 1; }
.mhqv-modal__box {
	position: relative;
	width: min(1100px, 100%);
	aspect-ratio: 16 / 9;
	max-height: calc(100vh - 48px);
	border-radius: 16px; overflow: hidden; background: #000;
	box-shadow: 0 40px 80px -20px rgba(0,0,0,.6);
	transform: scale(.92); transition: transform .35s cubic-bezier(.2,.8,.2,1);
}
.mhqv-modal.is-open .mhqv-modal__box { transform: none; }
.mhqv-modal--vertical .mhqv-modal__box {
	width: auto; height: min(86vh, 860px); aspect-ratio: 9 / 16; max-width: 100%;
}
.mhqv-modal__box .mhqv-player { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; }
.mhqv-modal--instagram .mhqv-modal__box {
	width: min(420px, 100%); height: min(86vh, 780px); aspect-ratio: auto; background: #fff;
}
.mhqv-modal--instagram .mhqv-modal__box .mhqv-player { background: #fff; }
.mhqv-modal__close {
	all: unset;
	position: fixed; top: 18px; right: 18px; z-index: 2;
	width: 46px; height: 46px; border-radius: 50%;
	background: #fff; color: #111; cursor: pointer;
	display: grid; place-items: center;
	font: 700 26px/1 system-ui, sans-serif;
	box-shadow: 0 6px 20px rgba(0,0,0,.3);
	transition: transform .25s, background .25s;
}
.mhqv-modal__close:hover { transform: rotate(90deg); background: #ffd76a; }
.mhqv-modal__close:focus-visible { outline: 3px solid #ffd76a; outline-offset: 3px; }
html.mhqv-lock { overflow: hidden; }

.mhqv-admin-empty {
	text-align: center; padding: 24px; border: 2px dashed var(--mhqv-accent);
	border-radius: 14px; background: rgba(255,255,255,.8);
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mhqv-blob, .mhqv-shape, .mhqv-grid-dots, .mhqv-beam,
	.mhqv-play::before, .mhqv-play::after { animation: none !important; }
	.mhqv-js .mhqv-reveal { opacity: 1; transform: none; transition: none; }
}

.mhqv-section [hidden] { display: none !important; }

/* ==========================================================
   Swipe slider (mobile, and tablet when switched on)
   ========================================================== */
.mhqv-grid { position: relative; }

.mhqv-nav { display: none; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; }
.mhqv-nav.is-on { display: flex; }
.mhqv-nav + .mhqv-grid { margin-top: calc(var(--mhqv-gap) * 1.4); }

.mhqv-arrow {
	all: unset; box-sizing: border-box;
	display: grid; place-items: center;
	width: 42px; height: 42px; border-radius: 50%;
	background: #fff; color: var(--mhqv-dark); cursor: pointer;
	border: 1px solid color-mix(in srgb, var(--mhqv-dark) 14%, transparent);
	box-shadow: 0 6px 16px -6px rgba(16,22,60,.35);
	transition: transform .2s, background .2s, color .2s, opacity .2s;
}
.mhqv-arrow svg { width: 20px; height: 20px; }
@media (hover: hover) {
	.mhqv-arrow:hover:not(:disabled) { background: var(--mhqv-accent); color: #fff; transform: scale(1.06); }
}
.mhqv-arrow:active:not(:disabled) { background: var(--mhqv-accent); color: #fff; }
.mhqv-arrow:focus-visible { outline: 3px solid var(--mhqv-accent); outline-offset: 2px; }
.mhqv-arrow:disabled { opacity: .35; cursor: default; box-shadow: none; }

.mhqv-dots { display: flex; align-items: center; gap: 7px; }
.mhqv-dot {
	all: unset; box-sizing: border-box; cursor: pointer;
	width: 8px; height: 8px; border-radius: 99px;
	background: color-mix(in srgb, var(--mhqv-dark) 22%, transparent);
	transition: width .3s, background .3s;
}
.mhqv-dot.is-active { width: 24px; background: var(--mhqv-accent); }
.mhqv-dot:focus-visible { outline: 2px solid var(--mhqv-accent); outline-offset: 3px; }
.mhqv-count { min-width: 56px; text-align: center; font-weight: 800; font-size: 14px; color: var(--mhqv-dark); letter-spacing: .04em; }

@media (min-width: 768px) and (max-width: 1024px) {
	.mhqv-section.is-slider-t .mhqv-grid.has-many {
		display: flex; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scrollbar-width: none;
		gap: var(--mhqv-gap);
		margin-left: -16px; margin-right: -16px;
		padding: 12px 16px 10px; scroll-padding: 0 16px;
		max-width: none;
	}
	.mhqv-section.is-slider-t .mhqv-grid.has-many::-webkit-scrollbar { display: none; }
	.mhqv-section.is-slider-t .mhqv-grid--vertical.has-many > .mhqv-card { flex: 0 0 40%; scroll-snap-align: center; }
	.mhqv-section.is-slider-t .mhqv-grid--horizontal.has-many > .mhqv-card { flex: 0 0 72%; scroll-snap-align: center; }
}
@media (max-width: 767px) {
	.mhqv-section.is-slider-m .mhqv-grid.has-many {
		display: flex; overflow-x: auto; overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory; scrollbar-width: none;
		gap: 14px;
		margin-left: -16px; margin-right: -16px;
		padding: 12px 16px 10px; scroll-padding: 0 16px;
		max-width: none;
	}
	.mhqv-section.is-slider-m .mhqv-grid.has-many::-webkit-scrollbar { display: none; }
	.mhqv-section.is-slider-m .mhqv-grid--vertical.has-many > .mhqv-card { flex: 0 0 74%; scroll-snap-align: center; }
	.mhqv-section.is-slider-m .mhqv-grid--horizontal.has-many > .mhqv-card { flex: 0 0 86%; scroll-snap-align: center; }
}
/* cards beside the current one are slightly smaller, so the swipe feels alive */
.mhqv-grid.is-sliding > .mhqv-card { transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s; }
.mhqv-grid.is-sliding > .mhqv-card.is-in:not(.is-current) { transform: scale(.93); opacity: .7; }
.mhqv-grid.is-sliding > .mhqv-card:hover .mhqv-frame { transform: none; }
@media (prefers-reduced-motion: reduce) {
	.mhqv-grid.is-sliding > .mhqv-card { transition: none; }
	.mhqv-grid.is-sliding > .mhqv-card.is-in:not(.is-current) { transform: none; }
}

/* Live update: newly added video pops in */
.mhqv-card.is-new .mhqv-frame { animation: mhqv-pop .7s cubic-bezier(.2,.8,.2,1) both; }
.mhqv-card.is-new .mhqv-frame::after { animation: mhqv-ring 1.8s ease-out both; }
@keyframes mhqv-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes mhqv-ring { 0% { border-color: var(--mhqv-accent); } 70% { border-color: var(--mhqv-accent); } 100% { border-color: transparent; } }
@media (prefers-reduced-motion: reduce) { .mhqv-card.is-new .mhqv-frame, .mhqv-card.is-new .mhqv-frame::after { animation: none; } }