/* Avatar frames won with boss cards (js/avatar-frame.js). The frame wraps
   the usual avatar container (.af-face); --size (px) is set by the script.
   Only transform and opacity are animated: never a filter or a gradient.
   No CSS filter at all (blur, drop-shadow, url): on Android tablets they
   left trails while scrolling and garbage in lists. Glows are box-shadows,
   painted once. */

.af {
	--radius: var(--r-3);
	--ring: 4px;
	--edge: calc(-1 * var(--ring) - 2px);
	--edge-radius: calc(var(--radius) + var(--ring) + 2px);
	--light: var(--c1), var(--c2), var(--c3), var(--c2), var(--c1);
	/* Halo colours: top left, top right, bottom right, bottom left. */
	--h1: var(--c1);
	--h2: var(--c2);
	--h3: var(--c3);
	--h4: var(--c2);
	--turn: 3s;
	position: relative;
	isolation: isolate;
	display: inline-block;
	flex: none;
	vertical-align: middle;
	line-height: 0;
	border-radius: var(--radius);
}

.af.is-round {
	--radius: 50%;
	--edge-radius: 50%;
}

.af.is-small {
	--ring: 3px;
}

/* The frame replaces the drop shadow of the container (preview, duel face). */
.af > .af-face {
	position: relative;
	z-index: 2;
	display: block;
	margin: 0;
	box-shadow: none;
}

.af-light,
.af-halo,
.af-glow,
.af-aura,
.fx-compass {
	position: absolute;
	pointer-events: none;
	border-radius: var(--edge-radius);
}

/* ---------- S: still ring in the boss colours ---------- */

.af.f-S > .af-face {
	box-shadow: 0 0 0 var(--ring) var(--c1), 0 0 0 calc(var(--ring) + 2px) var(--line);
}

/* ---------- Turning light (SS, rainbow SSS, Tsuki, Pythagore) ----------
   The gradient is painted once; only its layer turns. */

.af-light {
	z-index: 1;
	inset: var(--edge);
	overflow: hidden;
}

.af-light i {
	position: absolute;
	inset: -25%;
	background: conic-gradient(var(--light));
	animation: af-turn var(--turn) linear infinite;
	will-change: transform;
}

/* The blurred light around the frame: four tinted shadows, one per corner. */
.af-halo {
	--o: calc(var(--size) / 30);
	--b: calc(var(--size) / 7);
	z-index: 0;
	inset: var(--edge);
	box-shadow:
		calc(-1 * var(--o)) calc(-1 * var(--o)) var(--b) var(--h1),
		var(--o) calc(-1 * var(--o)) var(--b) var(--h2),
		var(--o) var(--o) var(--b) var(--h3),
		calc(-1 * var(--o)) var(--o) var(--b) var(--h4);
	opacity: 0.75;
	animation: af-pulse 1.5s ease-in-out infinite alternate;
	will-change: opacity;
}

@keyframes af-turn {
	to {
		transform: rotate(1turn);
	}
}

@keyframes af-turn-back {
	to {
		transform: rotate(-1turn);
	}
}

@keyframes af-pulse {
	to {
		opacity: 0.4;
	}
}

.af.is-rainbow {
	--light: #ffcf33, #ff3d7f, #b14dff, #19b7f0, #2fd67b, #ffcf33;
	--h1: #ffcf33;
	--h2: #ff3d7f;
	--h3: #19b7f0;
	--h4: #2fd67b;
}

/* ---------- Particles around the frame ----------
   .fx-p is a face-sized box moved to its point (--x, --y in % of the size)
   and turned so that "up" points outward; its content is centred on it. */

.fx {
	position: absolute;
	inset: 0;
	z-index: 3;
	pointer-events: none;
}

.fx.fx-under {
	z-index: 1;
}

.fx-p {
	position: absolute;
	inset: 0;
	transform: translate(var(--x), var(--y)) rotate(var(--rot));
}

.fx-p > i {
	position: absolute;
	display: block;
}

.af .fx svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Bent borders (lightning, frost) are SVG images drawn once by
   js/avatar-frame.js, with --pad (its PAD) of room around the border box.
   Never a CSS filter: many of them made tablet GPUs draw garbage. */

.af-bolt,
.fx-ice {
	--pad: 12px;
	position: absolute;
	z-index: 3;
	top: var(--at);
	left: var(--at);
	width: calc(100% - 2 * var(--at));
	height: calc(100% - 2 * var(--at));
	max-width: none;
	pointer-events: none;
	user-select: none;
}

/* ---------- SSS lightning (Raiko, Sora) ----------
   Four still versions of the bent border, shown in turn. */

.af-bolt {
	--at: calc(var(--edge) - 1px - var(--pad));
	opacity: 0;
	animation: af-cycle 0.48s linear infinite;
	animation-delay: calc(var(--i) * -0.12s);
	will-change: opacity;
}

.af-bolt.b0 { --i: 0; }
.af-bolt.b1 { --i: 1; }
.af-bolt.b2 { --i: 2; }
.af-bolt.b3 { --i: 3; }

@keyframes af-cycle {
	0%,
	24.9% {
		opacity: 1;
	}
	25%,
	100% {
		opacity: 0;
	}
}

.af-glow {
	z-index: 3;
	inset: calc(var(--edge) - 1px);
	box-shadow: 0 0 4px 1px var(--bolt-light), inset 0 0 4px 1px var(--bolt-light);
	opacity: 0.8;
}

.af-aura {
	z-index: 0;
	inset: var(--edge);
	box-shadow: 0 0 calc(var(--size) / 7) calc(var(--size) / 30) var(--bolt);
	opacity: 0.55;
	animation: af-flicker 1.6s steps(1) infinite;
	will-change: opacity;
}

@keyframes af-flicker {
	0%,
	100% {
		opacity: 0.55;
	}
	12% {
		opacity: 0.9;
	}
	16% {
		opacity: 0.4;
	}
	52% {
		opacity: 0.75;
	}
	58% {
		opacity: 0.5;
	}
}

/* Dark band under the lightning, so it reads on light themes too. */
.af.fx-bolt > .af-face {
	box-shadow: 0 0 0 calc(var(--ring) + 5px) #1d1a2b, 0 0 0 calc(var(--ring) + 7px) var(--line);
}

/* ---------- SSS frost (Yuki) ---------- */

.af.fx-frost {
	--bolt: #7fb2ff;
}

.af.fx-frost > .af-face {
	box-shadow: 0 0 0 var(--ring) #e9f6ff, 0 0 0 calc(var(--ring) + 2px) #5b8dff, 0 0 0 calc(var(--ring) + 4px) var(--line);
}

.fx-ice {
	--at: calc(var(--edge) - 2px - var(--pad));
}

.af.fx-frost .af-aura {
	animation: af-breathe 2.4s ease-in-out infinite alternate;
}

@keyframes af-breathe {
	from {
		opacity: 0.35;
	}
	to {
		opacity: 0.7;
	}
}

.fx-flake > i {
	width: 15%;
	height: 15%;
	left: 42.5%;
	top: 42.5%;
	animation: fx-twinkle 2.4s ease-in-out infinite;
	animation-delay: var(--d);
	will-change: transform, opacity;
}

@keyframes fx-twinkle {
	0%,
	100% {
		opacity: 0.2;
		transform: scale(0.5) rotate(0deg);
	}
	50% {
		opacity: 1;
		transform: scale(1) rotate(60deg);
	}
}

/* ---------- SSS moon (Tsuki) ---------- */

.af.fx-moon {
	--light: #ffffff, #d9ccff, #8e7cff, #d9ccff, #ffffff;
	--h1: #ffffff;
	--h2: #d9ccff;
	--h3: #8e7cff;
	--h4: #d9ccff;
	--turn: 9s;
}

.fx-crescent {
	position: absolute;
	width: 30%;
	height: 30%;
	right: -12%;
	top: -12%;
	border-radius: 50%;
	background: radial-gradient(closest-side, #fff4c2 30%, transparent);
	animation: fx-bob 3s ease-in-out infinite alternate;
	will-change: transform;
}

.af.is-round .fx-crescent {
	right: -4%;
	top: -4%;
}

@keyframes fx-bob {
	to {
		transform: translateY(calc(var(--size) * -0.03)) rotate(-8deg);
	}
}

.fx-star > i {
	width: 11%;
	height: 11%;
	left: 44.5%;
	top: 44.5%;
	animation: fx-blink 1.8s ease-in-out infinite;
	animation-delay: var(--d);
	will-change: transform, opacity;
}

@keyframes fx-blink {
	0%,
	100% {
		opacity: 0;
		transform: scale(0.3);
	}
	40%,
	60% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ---------- SSS dragon flames (Ryuga) ----------
   Each tongue has its own height (--h), so the ring never looks even. */

.af.fx-fire {
	--bolt: #ff5a1f;
}

.af.fx-fire > .af-face {
	box-shadow: 0 0 0 var(--ring) #3a0d1a, 0 0 0 calc(var(--ring) + 2px) #ffcf33, 0 0 0 calc(var(--ring) + 4px) var(--line);
}

.af.fx-fire .af-aura {
	animation: af-breathe 0.9s ease-in-out infinite alternate;
}

.fx-flame > i {
	width: 17%;
	height: calc(22% * var(--h));
	left: 41.5%;
	bottom: 50%;
	transform-origin: 50% 100%;
	animation: fx-lick 0.7s ease-in-out infinite alternate;
	animation-delay: var(--d);
	will-change: transform, opacity;
}

@keyframes fx-lick {
	from {
		opacity: 0.8;
		transform: scale(0.85, 0.5);
	}
	to {
		opacity: 1;
		transform: scale(1, 1.1);
	}
}

/* ---------- SSS gold geometry (Pythagore) ---------- */

.af.fx-gold {
	--light: #9a6510, #ffe08a, #c8901f, #fff6d1, #b97c12, #ffe9a6, #9a6510;
	--h1: #ffe08a;
	--h2: #c8901f;
	--h3: #ffe9a6;
	--h4: #b97c12;
	--turn: 6s;
	--bolt: #ffcf33;
}

.fx-compass {
	z-index: 0;
	inset: calc(var(--edge) - var(--size) * 0.09);
	border: 2px dashed #d39a2a;
	border-radius: 50%;
	animation: af-turn-back 30s linear infinite;
	will-change: transform;
}

.fx-orbit {
	animation: af-turn 18s linear infinite;
	will-change: transform;
}

.fx-shape > i {
	width: 15%;
	height: 15%;
	left: 42.5%;
	top: 42.5%;
	animation: af-turn-back 6s linear infinite;
	animation-delay: var(--d);
	will-change: transform;
}

/* ---------- Still version: lists, other frames, less motion ---------- */

.af.is-frozen,
.af.is-frozen * {
	animation: none !important;
	will-change: auto !important;
}

.af.is-frozen .af-bolt.b0 {
	opacity: 1;
}

.af.is-frozen .fx-star > i,
.af.is-frozen .fx-flake > i {
	opacity: 0.9;
	transform: none;
}

@media (prefers-reduced-motion: reduce) {
	.af,
	.af * {
		animation: none !important;
		will-change: auto !important;
	}

	.af-bolt.b0 {
		opacity: 1;
	}

	.fx-star > i,
	.fx-flake > i {
		opacity: 0.9;
		transform: none;
	}
}