/*
	Onboarding animations

	Entrance and interaction motion for the candidate onboarding journey -
	signup, the privacy policy prompt, and every step of the credentials
	dashboard through to notification preferences.

	This file is loaded site-wide from the html-head partial, after
	style_v1.css so the focus styles below win, and before welcome.css.
	Everything is scoped to one of three roots so no other page is touched:

		.welcome           the signup / login / reset password layout
		.credentials       every step of the credentials dashboard
		.onboarding-panel  standalone steps outside the two above

	Motion is deliberately short (under 350ms) and low-amplitude - it should
	read as polish rather than as an effect. It is all switched off under
	prefers-reduced-motion at the bottom of the file.

	Entrances use animation-fill-mode: backwards, not both. Both is the more
	obvious choice, but it holds the final keyframe forever, and animation
	declarations outrank author rules in the cascade - so a filled-forwards
	"transform: none" silently beats any :hover transform on the same element.
	Backwards still holds the opening frame through the stagger delay (which
	is what stops the flash of un-animated content) without that clamp.
*/

:root {
	--motion-ease: cubic-bezier(0.22, 1, 0.36, 1);
	--motion-fast: 160ms;
	--motion-base: 300ms;
	--motion-slow: 520ms;
}

@keyframes gl-rise {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: none; }
}

@keyframes gl-fade {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes gl-settle {
	from { opacity: 0; transform: translateY(12px) scale(0.97); }
	to { opacity: 1; transform: none; }
}

@keyframes gl-slide-from-left {
	from { opacity: 0; transform: translateX(-10px); }
	to { opacity: 1; transform: none; }
}

@keyframes gl-grow-bar {
	from { transform: scaleY(0); }
	to { transform: scaleY(1); }
}

@keyframes gl-float {
	0%, 100% { transform: translateY(0px); }
	50% { transform: translateY(-4px); }
}

@keyframes gl-breathe {
	0%, 100% { opacity: 1; }
	50% { opacity: 0.6; }
}

/* =========================================================
   Signup, login and password reset
   ========================================================= */

.welcome .content > *:not(img) {
	animation: gl-rise var(--motion-base) var(--motion-ease) backwards;
}

.welcome .content > *:not(img):nth-child(1) { animation-delay: 0ms; }
.welcome .content > *:not(img):nth-child(2) { animation-delay: 60ms; }
.welcome .content > *:not(img):nth-child(3) { animation-delay: 120ms; }
.welcome .content > *:not(img):nth-child(n+4) { animation-delay: 180ms; }

/* The illustration settles in, then keeps a slow drift so the page never
   feels completely static while the form is being filled in. It's held out
   of the cascade above so the per-child delays can't overwrite the hand-off
   between the two animations. */
.welcome .content > img {
	animation:
		gl-settle var(--motion-slow) var(--motion-ease) backwards,
		gl-float 7s ease-in-out 620ms infinite;
}

/* The form holds still and cascades its own fields. */
.welcome .content > .main {
	animation: none;
	opacity: 1;
}

.welcome .main > * {
	animation: gl-rise var(--motion-base) var(--motion-ease) 120ms backwards;
}

.welcome .main > *:nth-child(2) { animation-delay: 165ms; }
.welcome .main > *:nth-child(3) { animation-delay: 210ms; }
.welcome .main > *:nth-child(4) { animation-delay: 255ms; }
.welcome .main > *:nth-child(5) { animation-delay: 300ms; }
.welcome .main > *:nth-child(6) { animation-delay: 345ms; }
.welcome .main > *:nth-child(7) { animation-delay: 390ms; }
.welcome .main > *:nth-child(8) { animation-delay: 435ms; }
.welcome .main > *:nth-child(9) { animation-delay: 480ms; }
.welcome .main > *:nth-child(n+10) { animation-delay: 525ms; }

/* Validation messages are written in by script, so the element only starts
   matching :not(:empty) at the moment there's something to say. */
.welcome .main .error:not(:empty) {
	animation: gl-rise var(--motion-base) var(--motion-ease) backwards;
}

.welcome .main input,
.welcome .main .cta {
	transition:
		background-color var(--motion-fast) ease,
		border-color var(--motion-fast) ease,
		box-shadow var(--motion-base) var(--motion-ease),
		transform var(--motion-fast) var(--motion-ease);
}

.welcome .main input:hover:not(:focus) {
	border-color: rgba(0, 0, 0, 0.35);
}

/* A soft ring rather than a thicker border, which would shift the text
   inside the field by a pixel on focus. */
.welcome .main input:focus {
	outline: none !important;
	border: 1px solid rgb(172, 116, 255);
	box-shadow: 0px 0px 0px 3px rgba(172, 116, 255, 0.18);
}

.welcome .main .cta:hover:not(:disabled) {
	background-color: rgb(158, 96, 252);
	border-color: rgb(158, 96, 252);
	box-shadow: 0px 8px 20px rgba(172, 116, 255, 0.35);
	transform: translateY(-1px);
}

.welcome .main .cta:active:not(:disabled) {
	box-shadow: 0px 2px 8px rgba(172, 116, 255, 0.3);
	transform: translateY(0px);
	transition-duration: 60ms;
}

.welcome .main .cta:focus-visible {
	outline: none;
	box-shadow: 0px 0px 0px 3px rgba(172, 116, 255, 0.35);
}

/* The submit button is disabled by script the moment the form is posted, so
   this doubles as the "working on it" state. */
.welcome .main .cta:disabled {
	cursor: progress;
	animation: gl-breathe 1.4s ease-in-out infinite;
}

.welcome .main a,
.welcome .footnotes a {
	transition: color var(--motion-fast) ease, opacity var(--motion-fast) ease;
}

.welcome .main a:hover,
.welcome .footnotes a:hover {
	opacity: 0.7;
}

/* =========================================================
   Credential steps - page entrance
   ========================================================= */

/* Each step's main column arrives as a short cascade rather than a hard
   snap, so moving between steps feels continuous. */
.credentials .content > *,
.onboarding-panel > * {
	animation: gl-rise var(--motion-base) var(--motion-ease) backwards;
}

.credentials .content > *:nth-child(1),
.onboarding-panel > *:nth-child(1) { animation-delay: 0ms; }
.credentials .content > *:nth-child(2),
.onboarding-panel > *:nth-child(2) { animation-delay: 45ms; }
.credentials .content > *:nth-child(3),
.onboarding-panel > *:nth-child(3) { animation-delay: 90ms; }
.credentials .content > *:nth-child(4),
.onboarding-panel > *:nth-child(4) { animation-delay: 135ms; }
.credentials .content > *:nth-child(n+5),
.onboarding-panel > *:nth-child(n+5) { animation-delay: 180ms; }

/* Forms and illustration blocks carry the bulk of each step, so they hold
   still and cascade their own children instead of sliding in as one slab
   (which would double up the translate on everything inside). */
.credentials .content > form,
.credentials .content > .image-container,
.onboarding-panel > form {
	animation: none;
	opacity: 1;
}

.credentials .content > form > *,
.credentials .content > .image-container > *,
.onboarding-panel > form > * {
	animation: gl-rise var(--motion-base) var(--motion-ease) 180ms backwards;
}

.credentials .content > form > *:nth-child(2),
.credentials .content > .image-container > *:nth-child(2),
.onboarding-panel > form > *:nth-child(2) { animation-delay: 220ms; }
.credentials .content > form > *:nth-child(3),
.credentials .content > .image-container > *:nth-child(3),
.onboarding-panel > form > *:nth-child(3) { animation-delay: 260ms; }
.credentials .content > form > *:nth-child(4),
.credentials .content > .image-container > *:nth-child(4),
.onboarding-panel > form > *:nth-child(4) { animation-delay: 300ms; }
.credentials .content > form > *:nth-child(5),
.credentials .content > .image-container > *:nth-child(5),
.onboarding-panel > form > *:nth-child(5) { animation-delay: 340ms; }
.credentials .content > form > *:nth-child(6),
.credentials .content > .image-container > *:nth-child(6),
.onboarding-panel > form > *:nth-child(6) { animation-delay: 380ms; }
.credentials .content > form > *:nth-child(7),
.credentials .content > .image-container > *:nth-child(7),
.onboarding-panel > form > *:nth-child(7) { animation-delay: 420ms; }
.credentials .content > form > *:nth-child(8),
.credentials .content > .image-container > *:nth-child(8),
.onboarding-panel > form > *:nth-child(8) { animation-delay: 460ms; }
.credentials .content > form > *:nth-child(n+9),
.credentials .content > .image-container > *:nth-child(n+9),
.onboarding-panel > form > *:nth-child(n+9) { animation-delay: 500ms; }

/* Illustrations get a slightly longer scale-in - they're the first thing
   the eye lands on. */
.credentials .content .image-container > img,
.onboarding-panel > img {
	animation-name: gl-settle;
	animation-duration: var(--motion-slow);
}

.credentials .content-container {
	scroll-behavior: smooth;
}

/* =========================================================
   Credential steps - sidebar
   ========================================================= */

.credentials .sidebar .sidebar-toggle {
	animation: gl-fade var(--motion-base) var(--motion-ease) backwards;
}

.credentials .sidebar .section {
	animation: gl-slide-from-left var(--motion-base) var(--motion-ease) backwards;
}

.credentials .sidebar .section:nth-child(2) { animation-delay: 40ms; }
.credentials .sidebar .section:nth-child(3) { animation-delay: 80ms; }
.credentials .sidebar .section:nth-child(4) { animation-delay: 120ms; }
.credentials .sidebar .section:nth-child(n+5) { animation-delay: 160ms; }

.credentials .sidebar a {
	position: relative;
	transition:
		background-color var(--motion-fast) ease,
		color var(--motion-fast) ease,
		transform var(--motion-fast) var(--motion-ease);
}

.credentials .sidebar a:hover {
	transform: translateX(3px);
}

.credentials .sidebar a sl-icon {
	transition: transform var(--motion-base) var(--motion-ease);
}

.credentials .sidebar a:hover sl-icon {
	transform: scale(1.12);
}

/* An accent bar wipes in beside the step you're on, so progress through the
   journey is legible at a glance. */
.credentials .sidebar a.active::before {
	content: "";
	position: absolute;
	left: 0px;
	top: 4px;
	bottom: 4px;
	width: 3px;
	border-radius: 0px 2px 2px 0px;
	background-color: rgb(172, 116, 255);
	transform-origin: center;
	animation: gl-grow-bar var(--motion-slow) var(--motion-ease) 120ms backwards;
}

.credentials .sidebar a.active.complete::before,
.credentials .sidebar a.active[data-status="complete"]::before {
	background-color: rgb(0, 180, 0);
}

.credentials .sidebar a.active[data-status="pending"]::before {
	background-color: rgb(255, 180, 42);
}

.credentials .sidebar a.active[data-status="rejected"]::before {
	background-color: rgb(254, 92, 92);
}

/* =========================================================
   Credential steps - inputs
   ========================================================= */

.credentials input,
.credentials select,
.credentials textarea,
.credentials .chosen-container-single .chosen-single,
.credentials .select2-container--default .select2-selection--single {
	transition:
		border-color var(--motion-fast) ease,
		box-shadow var(--motion-base) var(--motion-ease);
}

.credentials input:hover:not(:focus):not([type="checkbox"]),
.credentials select:hover:not(:focus),
.credentials textarea:hover:not(:focus) {
	border-color: rgba(0, 0, 0, 0.35);
}

/* A soft ring rather than a thicker border: the border width can't grow
   without nudging the text inside the field by a pixel. */
.credentials input:focus,
.credentials select:focus,
.credentials textarea:focus {
	outline: none !important;
	border: 1px solid rgb(172, 116, 255);
	box-shadow: 0px 0px 0px 3px rgba(172, 116, 255, 0.18);
}

/* =========================================================
   Credential steps - calls to action
   ========================================================= */

.credentials .cta,
.credentials .call-to-action,
.onboarding-panel .call-to-action {
	transition:
		background-color var(--motion-fast) ease,
		box-shadow var(--motion-base) var(--motion-ease),
		transform var(--motion-fast) var(--motion-ease);
}

.credentials .cta:hover:not(:disabled),
.credentials .call-to-action:hover:not(:disabled),
.onboarding-panel .call-to-action:hover:not(:disabled) {
	background-color: rgb(158, 96, 252);
	box-shadow: 0px 6px 16px rgba(172, 116, 255, 0.35);
	transform: translateY(-1px);
}

.credentials .cta:active:not(:disabled),
.credentials .call-to-action:active:not(:disabled),
.onboarding-panel .call-to-action:active:not(:disabled) {
	box-shadow: 0px 2px 6px rgba(172, 116, 255, 0.3);
	transform: translateY(0px);
	transition-duration: 60ms;
}

.credentials .cta:focus-visible,
.credentials .call-to-action:focus-visible,
.onboarding-panel .call-to-action:focus-visible {
	outline: none;
	box-shadow: 0px 0px 0px 3px rgba(172, 116, 255, 0.35);
}

.credentials .cta sl-icon,
.credentials .call-to-action sl-icon,
.onboarding-panel .call-to-action sl-icon {
	transition: transform var(--motion-base) var(--motion-ease);
}

.credentials .cta:hover:not(:disabled) sl-icon,
.credentials .call-to-action:hover:not(:disabled) sl-icon,
.onboarding-panel .call-to-action:hover:not(:disabled) sl-icon {
	transform: translateX(-2px);
}

/* =========================================================
   Accessibility

   Scoped to the same three roots as everything above, so this file never
   silently disables motion on pages it isn't otherwise responsible for.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {
	.welcome, .welcome *, .welcome *::before, .welcome *::after,
	.credentials, .credentials *, .credentials *::before, .credentials *::after,
	.onboarding-panel, .onboarding-panel *, .onboarding-panel *::before, .onboarding-panel *::after {
		animation-duration: 0.01ms !important;
		animation-delay: 0ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}