/* CloudCaive — navigation-direction logo spin
   Pairs with nav-spin.js. The element carrying data-nav-spin receives
   .spin-cw (forward) or .spin-ccw (back) for one animation cycle. */

[data-nav-spin] {
  display: inline-block;          /* transforms need a box */
  transform-origin: 50% 50%;
  backface-visibility: hidden;    /* avoids sub-pixel shimmer mid-spin */
}

@keyframes cc-spin-cw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes cc-spin-ccw {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-360deg); }
}

.spin-cw {
  animation: cc-spin-cw 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.spin-ccw {
  animation: cc-spin-ccw 500ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

/* ------------------------------------------------------------------
   Optional variant for the isometric cube mark: a Y-axis turn often
   reads better than a flat wheel-spin for isometric artwork. To use,
   swap the animation names above for these and put `perspective`
   on the logo's parent (e.g. the .brand link):

     .brand { perspective: 600px; }

@keyframes cc-spin-cw {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(360deg); }
}
@keyframes cc-spin-ccw {
  from { transform: rotateY(0deg); }
  to   { transform: rotateY(-360deg); }
}
------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .spin-cw,
  .spin-ccw {
    animation: none;
  }
}