/* HD Membership: the animated teaser illustrations (HDMB_Styles::illustration). Pure SVG + CSS. */
.hdmb-ill { display: block; width: 100%; height: auto; overflow: visible; --ill-navy: #0b3a6e; --ill-accent: #ff6b4a; }
.hdmb-ill * { transform-box: fill-box; }
.hdmb-ill .pg { fill: #fff; stroke: #dfe5ec; stroke-width: 1.2; filter: drop-shadow(0 6px 10px rgba(0, 27, 68, .08)); }
.hdmb-ill .hl { fill: var(--ill-navy); }
.hdmb-ill .hl2 { fill: #9fb1c6; }
.hdmb-ill .ph { fill: #dcebf7; }
.hdmb-ill .mt { fill: var(--ill-navy); opacity: .28; }
.hdmb-ill .ln { fill: #d5dde7; }
.hdmb-ill .cd { fill: #fff; stroke: #dfe5ec; stroke-width: 1; filter: drop-shadow(0 6px 12px rgba(0, 27, 68, .16)); }
.hdmb-ill .ct { fill: var(--ill-navy); }
.hdmb-ill .cs { fill: #b9c5d3; }
.hdmb-ill .cb { fill: var(--ill-accent); }
.hdmb-ill .veil { fill: #fff; opacity: .86; }
.hdmb-ill .dim { fill: #001b44; opacity: 0; }
.hdmb-ill .glass { fill: rgba(255, 255, 255, .55); stroke: rgba(255, 255, 255, .9); }
.hdmb-ill .frost .ln { filter: blur(1.6px); fill: #b9c6d6; }
.hdmb-ill .in { fill: #f4f7fa; stroke: #c8d3df; }
.hdmb-ill .caret { fill: var(--ill-navy); }
.hdmb-ill .grab { fill: #c8d3df; }
.hdmb-ill .ring0 { fill: none; stroke: #e3eaf1; stroke-width: 4; }
.hdmb-ill .ring { fill: none; stroke: var(--ill-accent); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 75.4; stroke-dashoffset: 0; }
.hdmb-ill .lockbig rect { fill: var(--ill-navy); }
.hdmb-ill .lockbig path { fill: none; stroke: var(--ill-navy); stroke-width: 4; stroke-linecap: round; }
.hdmb-ill .dots circle { fill: #e3eaf1; stroke: #c8d3df; stroke-width: 1; }

/* Motion: every illustration loops gently; hover (or a selected card) plays it faster. */
@media (prefers-reduced-motion: no-preference) {
	.hdmb-ill .card { animation: hdmbI-rise 4.8s cubic-bezier(.16, 1, .3, 1) infinite; }
	.hdmb-ill .cb { animation: hdmbI-pulse 4.8s ease-in-out infinite; transform-origin: center; }
	.hdmb-ill--fade .ln { animation: hdmbI-type 4.8s ease-out infinite; transform-origin: left center; }
	.hdmb-ill--fade .ln:nth-of-type(2) { animation-delay: .1s; } .hdmb-ill--fade .ln:nth-of-type(3) { animation-delay: .2s; }
	.hdmb-ill--fade .fadeov { animation: hdmbI-fadein 4.8s ease infinite; }
	.hdmb-ill--meter .d1 { animation: hdmbI-dot 4.8s ease infinite; }
	.hdmb-ill--meter .d2 { animation: hdmbI-dot 4.8s ease .5s infinite; }
	.hdmb-ill--meter .d3 { animation: hdmbI-dot 4.8s ease 1s infinite; }
	.hdmb-ill--meter .veil { animation: hdmbI-veil 4.8s ease infinite; }
	.hdmb-ill--meter .card.late { animation: hdmbI-late 4.8s cubic-bezier(.16, 1, .3, 1) infinite; }
	.hdmb-ill--register .caret { animation: hdmbI-blink 1s steps(1) infinite; }
	.hdmb-ill--register .in { animation: hdmbI-focus 4.8s ease infinite; }
	.hdmb-ill--frost .glass { animation: hdmbI-shine 4.8s ease-in-out infinite; }
	.hdmb-ill--frost .frost { animation: hdmbI-drift 6s ease-in-out infinite alternate; }
	.hdmb-ill--sheet .dim { animation: hdmbI-dim 4.8s ease infinite; }
	.hdmb-ill--sheet .slide { animation: hdmbI-sheet 4.8s cubic-bezier(.16, 1, .3, 1) infinite; }
	.hdmb-ill--hard .lockbig { animation: hdmbI-wiggle 4.8s ease-in-out infinite; transform-origin: center; }
	.hdmb-ill--countdown .ring { animation: hdmbI-ring 4.8s linear infinite; }
	.hdmb-stylecard:hover .hdmb-ill *, .hdmb-gallery__card:hover .hdmb-ill * { animation-duration: 2.6s; }
}
@keyframes hdmbI-rise { 0%, 8% { transform: translateY(14px); opacity: 0; } 22%, 88% { transform: none; opacity: 1; } 100% { transform: none; opacity: 0; } }
@keyframes hdmbI-pulse { 0%, 40%, 60%, 100% { transform: none; } 50% { transform: scale(1.12); } }
@keyframes hdmbI-type { 0% { transform: scaleX(0); } 18% { transform: scaleX(1); } 100% { transform: scaleX(1); } }
@keyframes hdmbI-fadein { 0%, 10% { opacity: 0; } 26%, 100% { opacity: 1; } }
@keyframes hdmbI-dot { 0%, 10% { fill: #e3eaf1; } 18%, 92% { fill: var(--ill-accent); } 100% { fill: #e3eaf1; } }
@keyframes hdmbI-veil { 0%, 40% { opacity: 0; } 52%, 92% { opacity: .86; } 100% { opacity: 0; } }
@keyframes hdmbI-late { 0%, 44% { transform: translateY(20px); opacity: 0; } 58%, 90% { transform: none; opacity: 1; } 100% { opacity: 0; } }
@keyframes hdmbI-blink { 50% { opacity: 0; } }
@keyframes hdmbI-focus { 0%, 30% { stroke: #c8d3df; } 40%, 90% { stroke: var(--ill-navy); } }
@keyframes hdmbI-shine { 0%, 100% { fill: rgba(255, 255, 255, .5); } 50% { fill: rgba(255, 255, 255, .72); } }
@keyframes hdmbI-drift { from { transform: translateY(0); } to { transform: translateY(-3px); } }
@keyframes hdmbI-dim { 0%, 20% { opacity: 0; } 34%, 90% { opacity: .35; } 100% { opacity: 0; } }
@keyframes hdmbI-sheet { 0%, 20% { transform: translateY(70px); } 36%, 90% { transform: none; } 100% { transform: translateY(70px); } }
@keyframes hdmbI-wiggle { 0%, 30%, 50%, 100% { transform: none; } 36% { transform: rotate(-9deg); } 42% { transform: rotate(8deg); } 46% { transform: rotate(-4deg); } }
@keyframes hdmbI-ring { from { stroke-dashoffset: 0; } to { stroke-dashoffset: 75.4; } }