/* ==========================================================================
   EV Charge — Scroll to Top
   Nothing here animates on its own. The glow and the spark are one-shot,
   triggered by hover and by the press, so a page left alone is idle.
   ========================================================================== */

.evct {
	--evct-ring: 2.6px;

	position: fixed;
	z-index: 9990;
	bottom: var(--evct-offset, 28px);
	display: grid;
	place-items: center;
	width: var(--evct-size, 52px);
	height: var(--evct-size, 52px);
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: radial-gradient(120% 120% at 30% 20%, #10212e, #060d14 70%);
	color: #fff;
	cursor: pointer;
	isolation: isolate;
	opacity: 0;
	transform: translateY(14px) scale(.9);
	pointer-events: none;
	visibility: hidden;
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--evct-primary, #27aae1) 26%, transparent),
		0 10px 26px -10px rgba(4, 12, 20, .7);
	transition:
		opacity .34s cubic-bezier(.16, 1, .3, 1),
		transform .34s cubic-bezier(.16, 1, .3, 1),
		visibility 0s linear .34s,
		box-shadow .3s ease;
}

.evct--right { right: var(--evct-offset, 28px); }
.evct--left  { left:  var(--evct-offset, 28px); }

.evct.is-in {
	opacity: 1;
	transform: none;
	pointer-events: auto;
	visibility: visible;
	transition-delay: 0s;
}

.evct:hover,
.evct:focus-visible {
	box-shadow:
		0 0 0 1px color-mix(in srgb, var(--evct-primary, #27aae1) 60%, transparent),
		0 0 22px -2px color-mix(in srgb, var(--evct-primary, #27aae1) 45%, transparent),
		0 12px 30px -12px rgba(4, 12, 20, .8);
}

.evct:focus-visible {
	outline: 2px solid var(--evct-primary, #27aae1);
	outline-offset: 3px;
}

.evct:active { transform: scale(.94); }

/* -- the charge ring ------------------------------------------------------ */

.evct__ring {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	transform: rotate(-90deg);
	overflow: visible;
}

.evct__track,
.evct__fill {
	fill: none;
	stroke-width: var(--evct-ring);
}

.evct__track { stroke: rgba(255, 255, 255, .13); }

.evct__fill {
	stroke: var(--evct-primary, #27aae1);
	stroke-linecap: round;
	stroke-dasharray: 100;
	/* Set from the script as the page scrolls: 100 is empty, 0 is full. */
	stroke-dashoffset: 100;
	filter: drop-shadow(0 0 3px color-mix(in srgb, var(--evct-primary, #27aae1) 55%, transparent));
}

/* -- arrow, with a bolt behind it ---------------------------------------- */

.evct__glyph {
	position: relative;
	display: grid;
	place-items: center;
	width: 46%;
	height: 46%;
}

.evct__arrow,
.evct__bolt {
	grid-area: 1 / 1;
	width: 100%;
	height: 100%;
}

.evct__arrow {
	transition: transform .3s cubic-bezier(.16, 1, .3, 1), opacity .2s ease;
}

.evct__bolt {
	fill: var(--evct-primary, #27aae1);
	opacity: 0;
	transform: scale(.7);
	transition: opacity .2s ease, transform .3s cubic-bezier(.16, 1, .3, 1);
}

/* The arrow lifts out and the bolt takes its place. */
.evct:hover .evct__arrow,
.evct:focus-visible .evct__arrow {
	transform: translateY(-120%);
	opacity: 0;
}

.evct:hover .evct__bolt,
.evct:focus-visible .evct__bolt {
	opacity: 1;
	transform: none;
}

/* -- the surge when it is pressed ---------------------------------------- */

.evct__sparks {
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.evct__sparks i {
	position: absolute;
	left: 50%;
	bottom: 26%;
	width: 3px;
	height: 3px;
	border-radius: 50%;
	background: var(--evct-primary, #27aae1);
	opacity: 0;
}

.evct.is-charging .evct__sparks i {
	animation: evct-spark .62s cubic-bezier(.16, 1, .3, 1) forwards;
}

.evct.is-charging .evct__sparks i:nth-child(1) { --evct-x: -9px;  animation-delay: 0s; }
.evct.is-charging .evct__sparks i:nth-child(2) { --evct-x: 2px;   animation-delay: .06s; }
.evct.is-charging .evct__sparks i:nth-child(3) { --evct-x: 10px;  animation-delay: .12s; }

.evct.is-charging .evct__fill {
	animation: evct-surge .62s ease-out;
}

.evct.is-charging .evct__bolt {
	animation: evct-flash .5s ease-out;
}

@keyframes evct-spark {
	0%   { opacity: 0; transform: translate(-50%, 0) scale(.6); }
	22%  { opacity: 1; }
	100% { opacity: 0; transform: translate(calc(-50% + var(--evct-x, 0)), -34px) scale(.3); }
}

@keyframes evct-surge {
	0%   { stroke-width: var(--evct-ring); opacity: 1; }
	45%  { stroke-width: calc(var(--evct-ring) * 1.9); opacity: .55; }
	100% { stroke-width: var(--evct-ring); opacity: 1; }
}

@keyframes evct-flash {
	0%   { filter: none; }
	35%  { filter: drop-shadow(0 0 7px var(--evct-primary, #27aae1)); }
	100% { filter: none; }
}

/* -- tooltip -------------------------------------------------------------- */

.evct__tip {
	position: absolute;
	top: 50%;
	white-space: nowrap;
	padding: 7px 12px;
	border-radius: 8px;
	background: #0a1721;
	color: #eaf3fa;
	font: 600 12px/1 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	letter-spacing: .01em;
	opacity: 0;
	pointer-events: none;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 8px 18px -10px rgba(0, 0, 0, .8);
	transition: opacity .2s ease, transform .28s cubic-bezier(.16, 1, .3, 1);
}

.evct--right .evct__tip { right: calc(100% + 12px); transform: translate(6px, -50%); }
.evct--left  .evct__tip { left:  calc(100% + 12px); transform: translate(-6px, -50%); }

.evct:hover .evct__tip,
.evct:focus-visible .evct__tip {
	opacity: 1;
	transform: translate(0, -50%);
}

/* -- smaller screens ------------------------------------------------------ */

@media (max-width: 640px) {
	.evct {
		--evct-ring: 2.2px;
		width: calc(var(--evct-size, 52px) * .86);
		height: calc(var(--evct-size, 52px) * .86);
		bottom: max(16px, calc(var(--evct-offset, 28px) * .7));
	}

	.evct--right { right: max(16px, calc(var(--evct-offset, 28px) * .7)); }
	.evct--left  { left:  max(16px, calc(var(--evct-offset, 28px) * .7)); }

	/* A tooltip needs a pointer to hover with. */
	.evct__tip { display: none; }

	.evct--desktop { display: none; }
}

/* -- when the visitor asks for less motion -------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.evct,
	.evct__arrow,
	.evct__bolt,
	.evct__tip {
		transition-duration: .001ms;
	}

	.evct.is-charging .evct__sparks i,
	.evct.is-charging .evct__fill,
	.evct.is-charging .evct__bolt {
		animation: none;
	}
}

@media print {
	.evct { display: none !important; }
}