/*
 * Mockups: a solar flare on the header's Flare link (row D).
 * The link sits on the Sun's pale face, so every effect is drawn in the
 * Sun's own golds and oranges behind dark text (C turns the text white
 * inside a dark sunspot). Each effect livens up on hover.
 *
 *   <a class="FX-Link FX-A">Flare<i class="FX-...">...</i></a>
 */

.FX-Link {
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	padding: 0 13px;
	color: #1d1530;
	font: 700 15px/1 Montserrat, sans-serif;
	text-decoration: none;
}
.FX-Link > i {
	position: absolute;
	z-index: -1;
	display: block;
	font-style: normal;
	pointer-events: none;
}
@keyframes fx-spin { to { transform: rotate(360deg); } }

/* A · Prominence loops: golden arches of plasma flow over an active region. */
.FX-A .FX-Glow {
	left: 50%;
	top: 50%;
	width: 96px;
	height: 56px;
	margin: -28px 0 0 -48px;
	border-radius: 50%;
	background: radial-gradient(closest-side, rgba(255, 176, 64, 0.8), rgba(255, 122, 26, 0.4) 55%, rgba(255, 122, 26, 0) 100%);
	animation: fx-flicker 3.2s ease-in-out infinite;
}
@keyframes fx-flicker { 0%, 100% { opacity: 0.75; } 30% { opacity: 1; } 55% { opacity: 0.85; } 70% { opacity: 0.95; } }
.FX-A .FX-Loops {
	left: 50%;
	top: 50%;
	width: 104px;
	height: 52px;
	margin: -30px 0 0 -52px;
}
.FX-A .FX-Loops svg { display: block; width: 100%; height: 100%; overflow: visible; }
/* Each loop is a soft continuous arch with brighter plasma flowing along it. */
.FX-A .FX-Loops g {
	transform-box: fill-box;
	transform-origin: 50% 100%;
	animation: fx-breathe 5s ease-in-out infinite;
}
.FX-A .FX-Loops .FX-G2 { animation-duration: 4.2s; animation-delay: -1.4s; }
.FX-A .FX-Loops .FX-G3 { animation-duration: 3.6s; animation-delay: -2.2s; }
.FX-A .FX-Loops path { fill: none; stroke-linecap: round; }
.FX-A .FX-Base { stroke-width: 3.2; opacity: 0.45; }
.FX-A .FX-Flow {
	stroke-width: 2.1;
	stroke-dasharray: 12 18;
	filter: drop-shadow(0 0 2.5px rgba(255, 140, 30, 0.95));
	animation: fx-flow 1.6s linear infinite;
}
.FX-A .FX-G2 .FX-Base { stroke-width: 2.4; }
.FX-A .FX-G2 .FX-Flow { stroke-width: 1.6; animation-duration: 1.2s; }
.FX-A .FX-G3 .FX-Base { stroke-width: 1.9; }
.FX-A .FX-G3 .FX-Flow { stroke-width: 1.2; animation-duration: 1s; animation-direction: reverse; }
@keyframes fx-flow { to { stroke-dashoffset: -60; } }
@keyframes fx-breathe { 0%, 100% { transform: scaleY(0.92); } 50% { transform: scaleY(1.08); } }
.FX-A:hover .FX-Glow { animation-duration: 1.2s; }
.FX-A:hover .FX-Flow { animation-duration: 0.7s; }
.FX-A:hover .FX-G2 .FX-Flow { animation-duration: 0.55s; }
.FX-A:hover .FX-G3 .FX-Flow { animation-duration: 0.45s; }

/* B · Flare burst: a hot core with slowly turning rays that erupts every few seconds. */
.FX-B .FX-Rays {
	left: 50%;
	top: 50%;
	width: 132px;
	height: 132px;
	margin: -66px 0 0 -66px;
	border-radius: 50%;
	background: repeating-conic-gradient(from 0deg, rgba(255, 160, 40, 0.7) 0deg 2.5deg, rgba(255, 160, 40, 0) 2.5deg 22.5deg);
	-webkit-mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0) 100%);
	mask: radial-gradient(closest-side, #000 18%, rgba(0, 0, 0, 0) 100%);
	animation: fx-spin 26s linear infinite;
}
.FX-B .FX-Core {
	left: 50%;
	top: 50%;
	width: 88px;
	height: 60px;
	margin: -30px 0 0 -44px;
	border-radius: 50%;
	background: radial-gradient(closest-side, #fffbe8 0%, #ffd76e 30%, rgba(255, 138, 30, 0.6) 58%, rgba(255, 138, 30, 0) 100%);
	animation: fx-erupt 6s ease-in-out infinite;
}
.FX-B .FX-Streak {
	left: 50%;
	top: 50%;
	width: 240px;
	height: 2px;
	margin: -1px 0 0 -120px;
	background: linear-gradient(90deg, rgba(255, 200, 90, 0), rgba(255, 214, 120, 0.95) 50%, rgba(255, 200, 90, 0));
	animation: fx-streak 6s ease-in-out infinite;
}
@keyframes fx-erupt { 0%, 68%, 100% { transform: scale(1); opacity: 0.85; } 76% { transform: scale(1.5); opacity: 1; } 88% { transform: scale(1.08); opacity: 0.92; } }
@keyframes fx-streak { 0%, 70%, 100% { opacity: 0; transform: scaleX(0.3); } 76% { opacity: 1; transform: scaleX(1); } 90% { opacity: 0; transform: scaleX(1.25); } }
.FX-B:hover .FX-Core { animation: fx-erupt-now 1.2s ease-out infinite; }
.FX-B:hover .FX-Streak { animation: fx-streak-now 1.2s ease-out infinite; }
@keyframes fx-erupt-now { 0% { transform: scale(1); } 35% { transform: scale(1.5); } 100% { transform: scale(1.1); } }
@keyframes fx-streak-now { 0% { opacity: 0; transform: scaleX(0.3); } 35% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1.25); } }

/* C · Sunspot: the word sits in a dark sunspot whose rim flares. */
.FX-C { color: #fff6ea; }
.FX-C .FX-Spot {
	left: 50%;
	top: 50%;
	width: 94px;
	height: 48px;
	margin: -24px 0 0 -47px;
	border-radius: 50%;
	background:
		radial-gradient(closest-side, #170703 0%, #2a0f05 40%, rgba(42, 15, 5, 0) 46%),
		repeating-conic-gradient(from 0deg, #6e2d0d 0deg 3.5deg, #9a4718 3.5deg 8deg);
	-webkit-mask: radial-gradient(closest-side, #000 70%, rgba(0, 0, 0, 0) 100%);
	mask: radial-gradient(closest-side, #000 70%, rgba(0, 0, 0, 0) 100%);
}
.FX-C .FX-RimWrap {
	left: 50%;
	top: 50%;
	width: 108px;
	height: 108px;
	margin: -54px 0 0 -54px;
	transform: scaleY(0.52);
}
.FX-C .FX-Rim {
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: conic-gradient(from 0deg, rgba(255, 236, 160, 0) 0deg 268deg, rgba(255, 246, 190, 1) 305deg, rgba(255, 170, 50, 0.95) 325deg, rgba(255, 236, 160, 0) 340deg);
	-webkit-mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) 66%, #000 73%, #000 84%, rgba(0, 0, 0, 0) 91%);
	mask: radial-gradient(closest-side, rgba(0, 0, 0, 0) 66%, #000 73%, #000 84%, rgba(0, 0, 0, 0) 91%);
	filter: drop-shadow(0 0 3px rgba(255, 200, 90, 0.9));
	animation: fx-spin 5s linear infinite, fx-rim 5s ease-in-out infinite;
}
@keyframes fx-rim { 0%, 100% { opacity: 0.35; } 45% { opacity: 1; } 60% { opacity: 0.6; } }
.FX-C:hover .FX-Rim { animation-duration: 1.4s, 1.4s; }

/* D · Corona ring: a pill with a turning ring of fire and rising embers. */
@property --fx-angle { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
.FX-D {
	min-height: 36px;
	margin: 0 4px;
	padding: 0 17px;
	border: 2px solid transparent;
	border-radius: 999px;
	background:
		linear-gradient(#fff7ec, #fff7ec) padding-box,
		conic-gradient(from var(--fx-angle), #ff7a1a, #ffd36b, #ff3d00, #ffb347, #ff7a1a) border-box;
	box-shadow: 0 0 12px rgba(255, 122, 26, 0.55);
	animation: fx-ring 4s linear infinite;
}
@keyframes fx-ring { to { --fx-angle: 360deg; } }
.FX-D .FX-Ember {
	bottom: 70%;
	width: 4px;
	height: 4px;
	border-radius: 50%;
	background: #ffb347;
	box-shadow: 0 0 6px #ff7a1a;
	opacity: 0;
	animation: fx-ember 2.8s ease-out infinite;
}
.FX-D .FX-Ember1 { left: 24%; }
.FX-D .FX-Ember2 { left: 52%; animation-delay: 0.9s; }
.FX-D .FX-Ember3 { left: 74%; animation-delay: 1.8s; }
@keyframes fx-ember { 0% { opacity: 0; transform: translate(0, 0) scale(1); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(-3px, -26px) scale(0.4); } }
.FX-D:hover { animation-duration: 1.4s; box-shadow: 0 0 20px rgba(255, 122, 26, 0.8); }
/* On the Flare page itself the pill fills with warm light instead of an underline. */
.FX-D.FX-Current {
	background:
		linear-gradient(#ffe1b3, #ffe1b3) padding-box,
		conic-gradient(from var(--fx-angle), #ff7a1a, #ffd36b, #ff3d00, #ffb347, #ff7a1a) border-box;
}
/* Phones: a slimmer pill so the four links still fit on one row at 320px. */
@media (max-width: 480px) {
	.FX-D { min-height: 30px; margin: 0; padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
	.FX-Link,
	.FX-Link * { animation: none !important; }
}

/* D · Corona ring, turned by the compositor. The ring used to turn by animating
   --fx-angle inside a conic-gradient border, which made the browser restyle and
   repaint the link on every frame of every page (the header is on all of them).
   Now the same gradient spins on its own layer with a transform, which the
   browser runs off the main thread: same colours, centre, speed and hover speed.
   The link needs <span class="FX-Ring" aria-hidden="true"></span> inside it. */
.FX-D,
.FX-D.FX-Current {
	background: none;
	animation: none;
}
.FX-D > .FX-Ring {
	position: absolute;
	inset: -2px; /* the border box: the link's border is 2px */
	z-index: -3;
	border-radius: inherit;
	overflow: hidden;
	pointer-events: none;
}
.FX-D > .FX-Ring::before {
	content: "";
	position: absolute;
	left: 50%;
	top: 50%;
	width: 150%; /* wider than the pill's diagonal, so no corner shows as it turns */
	aspect-ratio: 1;
	background: conic-gradient(#ff7a1a, #ffd36b, #ff3d00, #ffb347, #ff7a1a);
	transform: translate(-50%, -50%) rotate(0deg);
	animation: fx-ring-turn 4s linear infinite;
}
.FX-D:hover > .FX-Ring::before { animation-duration: 1.4s; }
/* The fill inside the ring (the padding box). */
.FX-D::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	border-radius: inherit;
	background: #fff7ec;
	pointer-events: none;
}
.FX-D.FX-Current::after { background: #ffe1b3; }
@keyframes fx-ring-turn { to { transform: translate(-50%, -50%) rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
	.FX-D > .FX-Ring::before { animation: none; }
}