/* AAW Dial Animation — Direction C dial, extracted as-is and scoped to the widget wrapper */

.aaw-dial-animation-wrapper,
.aaw-dial-animation-wrapper *{margin:0;padding:0;box-sizing:border-box;}
.aaw-dial-animation-wrapper{background:transparent;}

/* ---- container the dial lives in (Direction C stage) ---- */
.aaw-dial-animation-wrapper .stage{
  width:100%;
  aspect-ratio:1/1;
  container-type:inline-size;
  position:relative;
  overflow:hidden;
  background:none;
  /* Fallback in case a theme/page-builder context collapses width (e.g. the
     stage sits inside a 0-width flex/grid column) so the widget never
     silently renders at 0x0 on the frontend. Ignored once aspect-ratio
     has room to apply. */
  min-height:120px;
}

/* ---- label text, centered directly under the logo/center plate ----
   The center plate is at (396,418) with r=112 inside the 532x532 viewBox
   that's mapped 1:1 onto this square stage, so the plate's bottom edge
   sits at ~70.7% down the stage. Positioning the text a little past that
   keeps it clear of the plate/logo instead of overlapping it. */
.aaw-dial-animation-wrapper .aaw-dial-animation-text{
  position:absolute;
  left:50%;
  top:76%;
  transform:translateX(-50%);
  width:60%;
  text-align:center;
  font-family:'IBM Plex Mono',monospace;
  font-size:1.1cqw;
  letter-spacing:0.2em;
  text-transform:uppercase;
  color:#67718A;
}

/* ---- animation classes (required) ---- */
.aaw-dial-animation-wrapper .spin{transform-box:fill-box;transform-origin:center;animation:aaw-dial-spin 46s linear infinite;}
.aaw-dial-animation-wrapper .spinrev{transform-box:fill-box;transform-origin:center;animation:aaw-dial-spin 34s linear infinite reverse;}
.aaw-dial-animation-wrapper .spinfast{transform-box:fill-box;transform-origin:center;animation:aaw-dial-spin 18s linear infinite;}
.aaw-dial-animation-wrapper .breathe{animation:aaw-dial-breathe 6s ease-in-out infinite;}
@keyframes aaw-dial-spin{to{transform:rotate(360deg)}}
@keyframes aaw-dial-breathe{0%,100%{opacity:0.45}50%{opacity:0.9}}

/* each ring/dial rotates around the dial's own center (396,418 in the 1280x800 viewBox) */
.aaw-dial-animation-wrapper .dial{transform-box:view-box;transform-origin:396px 418px;}
.aaw-dial-animation-wrapper .d1{animation:aaw-dial-introcw 1.8s cubic-bezier(.16,1,.3,1) both, aaw-dial-spin 64s linear 1.8s infinite;}
.aaw-dial-animation-wrapper .d2{animation:aaw-dial-introccw 1.8s cubic-bezier(.16,1,.3,1) both, aaw-dial-spinccw 44s linear 1.8s infinite;}
.aaw-dial-animation-wrapper .d3{animation:aaw-dial-introcw2 2s cubic-bezier(.16,1,.3,1) both, aaw-dial-spin 28s linear 2s infinite;}

@keyframes aaw-dial-spinccw{to{transform:rotate(-360deg)}}
@keyframes aaw-dial-introcw{from{transform:rotate(-165deg);opacity:0}to{transform:rotate(0);opacity:1}}
@keyframes aaw-dial-introccw{from{transform:rotate(165deg);opacity:0}to{transform:rotate(0);opacity:1}}
@keyframes aaw-dial-introcw2{from{transform:rotate(-225deg);opacity:0}to{transform:rotate(0);opacity:1}}

@media (prefers-reduced-motion:reduce){
  .aaw-dial-animation-wrapper .spin,
  .aaw-dial-animation-wrapper .spinrev,
  .aaw-dial-animation-wrapper .spinfast,
  .aaw-dial-animation-wrapper .breathe,
  .aaw-dial-animation-wrapper .dial,
  .aaw-dial-animation-wrapper .d1,
  .aaw-dial-animation-wrapper .d2,
  .aaw-dial-animation-wrapper .d3{animation:none;opacity:1;transform:none}
}