/*
  Hero designer shapes. Shared by the site (templates/_includes/heroDesign.twig)
  and the CMS editor (modules/fields/HeroDesign.php), drawn by hero.js.
  Transforms and opacity only, still for visitors who prefer reduced motion.
*/
.g17h{position:absolute;inset:0;overflow:hidden;pointer-events:none;isolation:isolate}
.g17h__bg{position:absolute;inset:0}
.g17h__stage{position:absolute;left:50%;top:50%;width:100%;aspect-ratio:2/1;transform:translate(-50%,-50%)}
@supports (width:1cqh){.g17h{container-type:size}.g17h__stage{width:max(100cqw,200cqh)}}

.g17h-s{position:absolute;aspect-ratio:1}
.g17h-t,.g17h-m{position:absolute;inset:0}
.g17h-s svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}

/* Motion */
.g17h-m-spin{animation:g17h-spin var(--dur,90s) linear infinite}
.g17h-m-pulse{animation:g17h-pulse 7s ease-in-out infinite}
.g17h-m-drift{animation:g17h-drift var(--dur,30s) ease-in-out infinite alternate}
.g17h-rev{animation-direction:reverse}
.g17h-arc{fill:none}
.g17h-m-draw .g17h-arc{stroke-dasharray:0 100}
.g17h-m-draw.is-in .g17h-arc{animation:g17h-draw 2.2s cubic-bezier(.65,0,.35,1) forwards}
.g17h-m-draw.is-in .g17h-arc:nth-child(2){animation-delay:.12s}
.g17h-m-draw.is-in .g17h-arc:nth-child(3){animation-delay:.24s}
.g17h-m-draw.is-in .g17h-arc:nth-child(4){animation-delay:.36s}
.g17h-m-draw.is-in .g17h-arc:nth-child(5){animation-delay:.48s}
.g17h-m-draw.is-in{animation:g17h-spin 90s linear 2.2s infinite}
@keyframes g17h-spin{to{transform:rotate(360deg)}}
@keyframes g17h-pulse{0%,100%{transform:scale(.96);opacity:.8}50%{transform:scale(1.04);opacity:1}}
@keyframes g17h-draw{to{stroke-dasharray:var(--dash)}}
@keyframes g17h-drift{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(var(--tx,8%),var(--ty,-6%),0) scale(1.12)}100%{transform:translate3d(calc(var(--tx,8%) * -.6),calc(var(--ty,-6%) * -.8),0) scale(.94)}}

/* Orbit: rings with travelling dots */
.g17h-ring{fill:none;stroke-width:1.2;vector-effect:non-scaling-stroke}
.g17h-orbit{transform-box:view-box;transform-origin:50% 50%;animation:g17h-spin var(--dur,60s) linear infinite}

/* Ripple */
.g17h-ripple{fill:none;stroke-width:1.6;vector-effect:non-scaling-stroke;transform-box:fill-box;transform-origin:center;opacity:0;animation:g17h-ripple 12s cubic-bezier(.2,.6,.35,1) infinite}
@keyframes g17h-ripple{0%{transform:scale(.15);opacity:0}12%{opacity:.6}100%{transform:scale(1);opacity:0}}

/* Glow */
.g17h-glow{position:absolute;inset:0;border-radius:50%;filter:blur(60px);will-change:transform}

/* Dot field, a soft edged patch with a light sweeping across it */
.g17h-dots{position:absolute;inset:0;-webkit-mask-image:radial-gradient(closest-side,#000 55%,transparent);mask-image:radial-gradient(closest-side,#000 55%,transparent)}
.g17h-dots i{position:absolute;inset:0;background-image:radial-gradient(circle,var(--c) 1.4px,transparent 1.6px);background-size:26px 26px;background-position:center}
.g17h-dots i:first-child{opacity:.24}
.g17h-dots i+i{background-image:radial-gradient(circle,var(--c) 1.6px,transparent 1.9px);opacity:.95;-webkit-mask-image:radial-gradient(circle at var(--mx,30%) var(--my,40%),#000 0,transparent 26%);mask-image:radial-gradient(circle at var(--mx,30%) var(--my,40%),#000 0,transparent 26%)}
.g17h-m-sweep i+i{animation:g17h-sweep 18s ease-in-out infinite alternate}
@property --mx{syntax:'<percentage>';inherits:false;initial-value:30%}
@property --my{syntax:'<percentage>';inherits:false;initial-value:40%}
@keyframes g17h-sweep{0%{--mx:18%;--my:30%}35%{--mx:52%;--my:62%}70%{--mx:78%;--my:34%}100%{--mx:88%;--my:70%}}

/* Halo, a light running round a ring with a soft glow inside */
.g17h-halo{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,transparent 0deg,var(--c) 40deg,transparent 110deg,transparent 360deg);-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 2px),#000 calc(100% - 1.5px));animation:g17h-spin 14s linear infinite}
.g17h-halo-core{position:absolute;inset:-12%;border-radius:50%;filter:blur(10px);animation:g17h-breathe 9s ease-in-out infinite}
@keyframes g17h-breathe{0%,100%{opacity:.55;transform:scale(.96)}50%{opacity:.9;transform:scale(1.04)}}

/* Still shapes, paused editors and reduced motion */
.g17h-still,.g17h-still *,.g17h-frozen .g17h-s,.g17h-frozen .g17h-s *{animation:none!important}
.g17h-still .g17h-arc,.g17h-frozen .g17h-arc{stroke-dasharray:var(--dash)!important}
.g17h-still .g17h-ripple,.g17h-frozen .g17h-ripple{opacity:.28;transform:scale(var(--s,.5))}
.g17h-paused .g17h-s,.g17h-paused .g17h-s *{animation-play-state:paused!important}
@media (prefers-reduced-motion:reduce){.g17h-s,.g17h-s *{animation:none!important}.g17h-s .g17h-arc{stroke-dasharray:var(--dash)!important}.g17h-s .g17h-ripple{opacity:.28;transform:scale(var(--s,.5))}}
@media print{.g17h{display:none}}