/* Verdemar spinner — a monoline mark that morphs through a six-glyph cycle
   (nautical -> Dia de los Muertos). Framework-agnostic: just CSS + markup.
   Colour: strokes use currentColor (set via `color`); the teal high-water
   accent is fixed at #12B5AC. Use --dark on dark surfaces, --light on light. */

.vm-spinner{
  position:relative;
  display:inline-block;
  width:36px;               /* recommended 32-40px; override inline or here */
  height:36px;
  color:#FAFAF7;            /* ink; overridden by the modifiers below */
  vertical-align:middle;
}
.vm-spinner--dark{ color:#FAFAF7; }   /* on navy / dark surfaces */
.vm-spinner--light{ color:#1B2A41; }  /* on light / off-white surfaces */

.vm-spinner__frame{
  position:absolute; inset:0;
  transform-origin:50% 50%;
  animation:vm-spin 5.4s ease-in-out infinite;   /* 6 glyphs x 0.9s */
}
.vm-spinner__frame svg{ width:100%; height:100%; display:block; }
.vm-spinner__frame:nth-child(1){ animation-delay:0s; }
.vm-spinner__frame:nth-child(2){ animation-delay:-0.9s; }
.vm-spinner__frame:nth-child(3){ animation-delay:-1.8s; }
.vm-spinner__frame:nth-child(4){ animation-delay:-2.7s; }
.vm-spinner__frame:nth-child(5){ animation-delay:-3.6s; }
.vm-spinner__frame:nth-child(6){ animation-delay:-4.5s; }

@keyframes vm-spin{
  0%   { opacity:1; transform:scale(1) rotate(0deg); }
  12%  { opacity:1; transform:scale(1) rotate(0deg); }
  18%  { opacity:0; transform:scale(.7) rotate(16deg); }
  94%  { opacity:0; transform:scale(.7) rotate(-16deg); }
  100% { opacity:1; transform:scale(1) rotate(0deg); }
}

/* Accessibility: freeze to a single static mark for reduced-motion users. */
@media (prefers-reduced-motion: reduce){
  .vm-spinner__frame{ animation:none; opacity:0; }
  .vm-spinner__frame:first-child{ opacity:1; }
}