/* =========================================================================
   Animated global HRIS profile.

   Three screenshots of the same screen, one per profile tab. Each is drawn
   twice: the shell — the frame with the content panel cut away — and the
   panel on its own. On a tab change the shells cross-fade (only the tab row
   differs between them, so nothing else visibly moves) and the incoming
   panel slides up into place.

   The panel is everything right of x 1147 and below y 485 on the 2000 x 1125
   artwork: 57.35% across, 43.1% down.
   ========================================================================= */

.ngh {
	width: 100%;
}

.ngh__stage {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	overflow: hidden;
	border-radius: 12px;
	background: #f8f6f3;
}

.ngh__frame,
.ngh__frame img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.ngh__frame img {
	display: block;
	object-fit: cover;
}

/* The frame minus its panel. */
.ngh__shell {
	clip-path: polygon(0 0, 100% 0, 100% 43.1%, 57.35% 43.1%, 57.35% 100%, 0 100%);
	opacity: 0;
	transition: opacity 420ms ease;
}

/* The panel alone, waiting a little low until its tab is chosen. */
.ngh__panel {
	clip-path: inset(43.1% 0 0 57.35%);
	opacity: 0;
	transform: translateY(1.6%);
	transition: opacity 380ms ease, transform 620ms cubic-bezier(0.22, 1, 0.36, 1);
}

.ngh__frame.is-on .ngh__shell {
	opacity: 1;
}

.ngh__frame.is-on .ngh__panel {
	opacity: 1;
	transform: none;
	transition-delay: 90ms, 90ms;
}

/* The outgoing panel lifts away rather than simply vanishing. */
.ngh__frame.is-off .ngh__panel {
	opacity: 0;
	transform: translateY(-0.8%);
	transition: opacity 260ms ease, transform 260ms ease;
}

/* The incoming frame sits above the outgoing one while they cross. */
.ngh__frame.is-on {
	z-index: 1;
}

/* ------------------------------------------------------------ The cursor */

.ngh__cursor {
	position: absolute;
	z-index: 3;
	left: 0;
	top: 0;
	width: 1.9%;
	height: auto;
	margin: -0.15% 0 0 -0.45%;
	fill: #13131a;
	stroke: #fff;
	stroke-width: 1.4;
	stroke-linejoin: round;
	filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, 0.25));
	opacity: 0;
	transition:
		left 760ms cubic-bezier(0.45, 0, 0.2, 1),
		top 760ms cubic-bezier(0.45, 0, 0.2, 1),
		opacity 300ms ease,
		transform 140ms ease;
	will-change: left, top, transform;
}

.ngh__cursor.is-shown {
	opacity: 1;
}

.ngh__cursor.is-pressed {
	transform: scale(0.86);
}

/* The click, as a ring that opens and fades where the tip lands. */
.ngh__ripple {
	position: absolute;
	z-index: 2;
	left: 0;
	top: 0;
	width: 3.2%;
	aspect-ratio: 1;
	margin: -1.6% 0 0 -1.6%;
	border: 2px solid rgba(42, 123, 228, 0.55);
	border-radius: 50%;
	opacity: 0;
	transform: scale(0.3);
	pointer-events: none;
}

.ngh__ripple.is-on {
	animation: ngh-ripple 520ms ease-out;
}

@keyframes ngh-ripple {
	0%   { opacity: 0.9; transform: scale(0.3); }
	100% { opacity: 0;   transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
	.ngh__shell,
	.ngh__panel,
	.ngh__cursor { transition: none; }
	.ngh__cursor,
	.ngh__ripple { display: none; }
}