/* Section 00: the engraved medal. One SVG plate drawn flat (no perspective, no 3D turn, so hairlines and
   lettering stay crisp); motion is CSS inside the SVG so pause and reduced motion apply through the page rules. */
#sd-brand-visual{grid-area:visual;position:relative;display:grid;place-items:center;justify-items:end;width:100%;height:clamp(360px,36vw,500px);margin:0 auto}
#sd-brand-visual .mh-tilt{position:relative;width:min(460px,92%);aspect-ratio:1}
/* A gradient shadow element instead of a filter: filters rasterise the whole plate and soften it. */
#sd-brand-visual .mh-shadow{position:absolute;inset:6% -4% -8% 8%;border-radius:50%;background:radial-gradient(closest-side,rgba(41,39,35,.22),rgba(41,39,35,.08) 70%,rgba(41,39,35,0))}
#sd-brand-visual .mh-medal{--mh-swing:14s;position:relative;width:100%;height:100%;animation:mh-enter .9s cubic-bezier(.2,.7,.2,1) both}
#sd-brand-visual .mh-coin,#sd-brand-visual .mh-face{position:relative;width:100%;height:100%}
#sd-brand-visual .mh{display:block;width:100%;height:100%;overflow:visible}
#sd-brand-visual .mh text{text-rendering:geometricPrecision}
/* The coin rocks on its own axis as a slow in-plane foreshortening of the whole plate. */
#sd-brand-visual .mh-plate,#sd-brand-visual .mh-lathe,#sd-brand-visual .mh-reed,#sd-brand-visual .mh-rays{transform-origin:280px 280px}
#sd-brand-visual[data-renderer="svg"] .mh-plate{animation:mh-rock var(--mh-swing) ease-in-out infinite}
#sd-brand-visual .mh-lathe{animation:mh-turn 150s linear infinite}
#sd-brand-visual .mh-reed{animation:mh-turn 320s linear infinite reverse}
#sd-brand-visual .mh-rays{animation:mh-turn 600s linear infinite}
#sd-brand-visual .mh-ray{stroke-width:.55;stroke-opacity:.85;stroke-dasharray:52 80;animation:mh-ripple 9s ease-in-out infinite;animation-delay:calc(var(--i) * -50ms)}
#sd-brand-visual .mh-ray-short{stroke-width:.5;stroke-opacity:.6;stroke-dasharray:28 60;animation:mh-ripple-short 9s ease-in-out infinite;animation-delay:calc(var(--i) * -100ms - 4.5s)}
#sd-brand-visual[data-motion="paused"] *{animation-play-state:paused}
@keyframes mh-enter{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@keyframes mh-rock{0%,100%{transform:scaleX(.955)}50%{transform:scaleX(1)}}
@keyframes mh-turn{to{transform:rotate(360deg)}}
@keyframes mh-ripple{0%,100%{stroke-dashoffset:0;stroke-opacity:.85}50%{stroke-dashoffset:14;stroke-opacity:.45}}
@keyframes mh-ripple-short{0%,100%{stroke-dashoffset:0;stroke-opacity:.6}50%{stroke-dashoffset:9;stroke-opacity:.3}}
@media(max-width:760px){#sd-brand-visual{height:380px;margin-block:10px 0;justify-items:center}}
@media(max-width:480px){#sd-brand-visual{height:330px}#sd-brand-visual .mh-tilt{width:min(300px,90%)}}
@media print{#sd-brand-visual .mh-plate,#sd-brand-visual .mh-medal{animation:none}#sd-brand-visual .mh-shadow{display:none}}