/* HD League activity illustrations (HDL_Art). Motion only when the visitor allows it;
   league.js pauses SMIL for reduced motion and pauses every scene while it is off screen. */
.hdl-art { display: block; width: 100%; height: 100%; }
.hdl-art .a { transform-box: fill-box; }
.hdl-art .a-pop { opacity: 0; }
.hdl-art.is-paused, .hdl-art.is-paused * { animation-play-state: paused !important; }
@media (prefers-reduced-motion: no-preference) {
	.hdl-art .a-sway { animation: hdlSway 3.2s ease-in-out infinite; transform-origin: 50% 0; }
	.hdl-art .a-sway-slow { animation: hdlSway 6s ease-in-out infinite; transform-origin: 50% 100%; }
	.hdl-art .a-swing { animation: hdlSwing 2.6s ease-in-out infinite; transform-origin: 50% 0; }
	.hdl-art .a-glow { animation: hdlGlow 3s ease-in-out infinite; }
	.hdl-art .a-bob { animation: hdlBob 3s ease-in-out infinite; }
	.hdl-art .a-drift { animation: hdlDrift 16s ease-in-out infinite alternate; }
	.hdl-art .a-blink { animation: hdlBlink 1s steps(1) infinite; }
	.hdl-art .a-wobble { animation: hdlWobble 5s ease-in-out infinite; transform-origin: 50% 0; }
	.hdl-art .a-twinkle { animation: hdlTwinkle 2.6s ease-in-out infinite; }
	.hdl-art .a-burst { animation: hdlBurst 3.3s ease-out infinite; transform-origin: 50% 50%; }
	.hdl-art .a-flag { animation: hdlFlag 1.4s ease-in-out infinite; transform-origin: 0 50%; }
	.hdl-art .a-rise { animation: hdlRise 9s ease-in-out infinite alternate; }
	.hdl-art .a-march { animation: hdlMarch 1.2s linear infinite; }
	.hdl-art .a-spot { animation: hdlSpot 7s ease-in-out infinite; transform-origin: 50% 0; }
	.hdl-art .a-sparkle { animation: hdlSparkle 2.8s ease-in-out infinite; transform-origin: 50% 50%; }
	.hdl-art .a-spin { animation: hdlSpin 24s linear infinite; transform-origin: 50% 50%; }
	.hdl-art .a-spin-fast { animation: hdlSpin 1.2s linear infinite; transform-origin: 50% 50%; }
	.hdl-art .a-pop { animation: hdlPop 4.8s ease-out infinite backwards; transform-origin: 30% 100%; }
	.hdl-art .a-snow { animation: hdlSnow 9s linear infinite; }
	.hdl-art .a-pulse { animation: hdlPulse 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
}
@keyframes hdlSway { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes hdlSwing { 0%, 100% { transform: rotate(-12deg); } 50% { transform: rotate(12deg); } }
@keyframes hdlGlow { 0%, 100% { opacity: .55; } 50% { opacity: 1; } }
@keyframes hdlBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes hdlDrift { from { transform: translateX(-26px); } to { transform: translateX(34px); } }
@keyframes hdlBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes hdlWobble { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(3deg); } }
@keyframes hdlTwinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
@keyframes hdlBurst { 0% { transform: scale(.15); opacity: 0; } 12% { opacity: 1; } 55% { transform: scale(1); opacity: .95; } 75%, 100% { transform: scale(1.1); opacity: 0; } }
@keyframes hdlFlag { 0%, 100% { transform: skewY(-8deg) scaleX(1); } 50% { transform: skewY(7deg) scaleX(.86); } }
@keyframes hdlRise { from { transform: translateY(24px); } to { transform: translateY(-10px); } }
@keyframes hdlMarch { to { stroke-dashoffset: -20; } }
@keyframes hdlSpot { 0%, 100% { transform: rotate(-7deg); } 50% { transform: rotate(7deg); } }
@keyframes hdlSparkle { 0%, 100% { transform: scale(.3); opacity: 0; } 50% { transform: scale(1); opacity: 1; } }
@keyframes hdlSpin { to { transform: rotate(360deg); } }
@keyframes hdlPop { 0% { transform: scale(0); opacity: 0; } 6% { transform: scale(1.1); opacity: 1; } 10%, 30% { transform: scale(1); opacity: 1; } 36%, 100% { transform: scale(.7); opacity: 0; } }
@keyframes hdlSnow { from { transform: translate(0, -40px); } to { transform: translate(-30px, 400px); } }
@keyframes hdlPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.08); } }

/* [hdl_activities] gallery */
.hdl-artgal { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 0; padding: 0; list-style: none; }
.hdl-artgal__item figure { margin: 0; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: 0 1px 2px rgba(0, 27, 68, .06), 0 14px 30px -18px rgba(0, 27, 68, .35); transition: transform .4s cubic-bezier(.16, 1, .3, 1), box-shadow .4s; }
.hdl-artgal__item img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; background: color-mix(in srgb, var(--pc, #136fa5) 18%, #eef2f6); }
.hdl-artgal__item figcaption { display: flex; gap: 8px; align-items: center; padding: 10px 14px 12px; font-weight: 600; font-size: 15px; color: #001b44; }
.hdl-artgal__item figcaption svg { color: var(--pc, #136fa5); }
@media (hover: hover) { .hdl-artgal__item figure:hover { transform: translateY(-4px); box-shadow: 0 2px 4px rgba(0, 27, 68, .06), 0 24px 44px -20px rgba(0, 27, 68, .45); } }