/* ---------- Keyframes ---------- */
@keyframes jh-floaty {
	0%, 100% { transform: translateY(0) rotate(-3deg); }
	50% { transform: translateY(-14px) rotate(-1deg); }
}
@keyframes jh-floaty2 {
	0%, 100% { transform: translateY(0) rotate(4deg); }
	50% { transform: translateY(-18px) rotate(2deg); }
}
@keyframes jh-marq {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}

/* ---------- Global overlay elements (inserted by site.js) ---------- */
.jh-progress-bar {
	position: fixed;
	top: 0;
	left: 0;
	height: 3px;
	width: 0;
	background: var(--hi);
	z-index: 200;
	pointer-events: none;
	box-shadow: 0 0 18px rgba(15, 191, 143, .7);
}

.jh-grain-overlay {
	position: fixed;
	inset: 0;
	z-index: 150;
	pointer-events: none;
	opacity: .045;
	mix-blend-mode: overlay;
	background-repeat: repeat;
	background-size: 180px 180px;
}

.jh-cursor-ring {
	position: fixed;
	top: 0;
	left: 0;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	border: 1.5px solid var(--hi);
	z-index: 190;
	pointer-events: none;
	opacity: 0;
	transform: translate(-50%, -50%);
	transition: width .3s, height .3s, background .3s, opacity .3s;
	mix-blend-mode: difference;
}
.jh-cursor-ring.is-active {
	width: 58px;
	height: 58px;
	background: rgba(15, 191, 143, .22);
}

/* Hide cursor ring / disable hover-only affordances on touch */
@media (hover: none) {
	.jh-cursor-ring { display: none !important; }
}

/* ---------- Sticky nav scroll-shrink state (site.js toggles .is-scrolled) ---------- */
.jh-header {
	transition: padding .35s cubic-bezier(.2, .7, .2, 1), background-color .35s cubic-bezier(.2, .7, .2, 1);
}
.jh-header.is-scrolled {
	padding-top: 9px !important;
	padding-bottom: 9px !important;
	background-color: rgba(14, 14, 16, .94) !important;
}

/* ---------- Hero ruler ticks (60-tick strip simulated with a repeating gradient) ---------- */
.jh-hero-ticks {
	background-image: repeating-linear-gradient(
		to right,
		rgba(11, 11, 13, .55) 0,
		rgba(11, 11, 13, .55) 1px,
		transparent 1px,
		transparent calc(100% / 60)
	);
	background-position: bottom;
	background-repeat: repeat-x;
	background-size: 100% 9px;
}

/* ---------- Reel section: hard-stop gradient background ---------- */
.jh-reel-section {
	background: linear-gradient(180deg, var(--accent) 0 34%, var(--ink) 34% 100%);
}

/* ---------- Floating showreel stills ---------- */
.jh-float-l { animation: jh-floaty 7s ease-in-out infinite; }
.jh-float-r { animation: jh-floaty2 8s ease-in-out infinite; }

/* ---------- Marquee ---------- */
.jh-marquee {
	animation: jh-marq 26s linear infinite;
}
.jh-marquee:hover {
	animation-play-state: paused;
}
.jh-marquee-item {
	white-space: nowrap;
}

/* ---------- Shorts wall gradient scrims ---------- */
.jh-short-scrim {
	background: linear-gradient(to top, rgba(11, 11, 13, .9), transparent);
}

/* ---------- Services grid: cell inverts to accent fill on hover ---------- */
.jh-service-cell {
	transition: background-color .3s;
}
.jh-service-cell:hover {
	background-color: var(--accent) !important;
}
.jh-service-cell:hover * {
	color: #0B0B0D !important;
}

/* ---------- Filter pill active state (client-side "All" toggle has no JS wiring yet; static state only) ---------- */
.jh-filter-pill.is-active {
	background-color: var(--accent);
	color: #0B0B0D;
}

/* ---------- Reduced motion: kill everything JS animates ---------- */
@media (prefers-reduced-motion: reduce) {
	.jh-float-l, .jh-float-r, .jh-marquee {
		animation: none !important;
	}
	.jh-cursor-ring { display: none !important; }
}