/* Responsive variable mapping (desktop/tablet/mobile) */
.arrg-wrapper{
  --arrg-center-size: var(--arrg-center-size-d);
}
.arrg-item{
  --x: var(--x-d);
  --y: var(--y-d);
  --arrg-ring-size: var(--arrg-ring-size-d);
}

@media (max-width: 1024px){
  .arrg-wrapper{ --arrg-center-size: var(--arrg-center-size-t); }
  .arrg-item{
    --x: var(--x-t);
    --y: var(--y-t);
    --arrg-ring-size: var(--arrg-ring-size-t);
  }
}
@media (max-width: 767px){
  .arrg-wrapper{ --arrg-center-size: var(--arrg-center-size-m); }
  .arrg-item{
    --x: var(--x-m);
    --y: var(--y-m);
    --arrg-ring-size: var(--arrg-ring-size-m);
  }
}


.arrg-wrapper, .arrg-wrapper * { box-sizing: border-box; }

.arrg-wrapper {
  position: relative;
  width: 420px;
  height: 420px;
  margin: 60px auto;
}

.arrg-link { display: block; width: 100%; height: 100%; }

.arrg-circle {
  width: 100%;
  height: 100%;
  border-radius: 9999px;
  overflow: hidden;
  background: transparent;
}

.arrg-circle img {
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover;
  display: block;
  clip-path: circle(50% at 50% 50%);
}

/* Center: translate stays on .arrg-center, rotation applied to inner .arrg-center-rot */
.arrg-center {
  position: absolute;
  top: 50%;
  left: 50%;
  width: var(--arrg-center-size, 160px);
  height: var(--arrg-center-size, 160px);
  transform: translate(-50%, -50%);
  transition: transform .3s ease, box-shadow .3s ease;
  z-index: 10;
}
.arrg-center:hover {
  transform: translate(-50%, -50%) scale(var(--arrg-hover-center, 1.08));}

.arrg-center-rot { width: 100%; height: 100%; }

/* Center caption shows ONLY on hover */
.arrg-center-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0,0,0,0.6);
  color: #fff;
  text-align: center;
  font-size: 14px;
  padding: 6px 8px;
  z-index: 2;

  opacity: 0;
  transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none; /* keep center clickable */
}
.arrg-center:hover .arrg-center-caption {
  opacity: 1;
  transform: translateY(0);
}

/* Ring container rotates without overwriting item translate transforms */
.arrg-ring {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  transform: translate(-50%, -50%);
  z-index: 1;
}

.arrg-item {
  position: absolute;
  width: var(--arrg-ring-size, 70px);
  height: var(--arrg-ring-size, 70px);
  transform: translate(-50%, -50%) translate(var(--x), var(--y));
  transition: transform .3s ease, box-shadow .3s ease;
}
.arrg-item:hover {
  transform: translate(-50%, -50%) translate(var(--x), var(--y)) scale(var(--arrg-hover-ring, 1.08));z-index: 5;
}
.arrg-item .arrg-link { cursor: pointer; }

/* Hover label */
.arrg-label {
  display: none;
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0,0,0,0.85);
  color: #fff;
  padding: 4px 8px;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
  pointer-events: none;
}
.arrg-item:hover .arrg-label { display: block; }

/* Rotation classes */
.arrg-rotating {
  animation: arrg-rotate var(--spin-speed, 60s) linear infinite;
}
.arrg-rotating.ccw { animation-direction: reverse; }

/* Apply rotation with translate preserved for ring containers */
.arrg-ring.arrg-rotating {
  animation-name: arrg-orbit;
}

@keyframes arrg-orbit {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}
@keyframes arrg-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

/* Pause on hover (pauses both ring orbits and center rotation) */
.arrg-wrapper.arrg-pause-hover:hover .arrg-rotating {
  animation-play-state: paused;
}

/* Responsive */
@media (max-width: 768px) {
  .arrg-wrapper { width: 320px; height: 320px; margin: 40px auto; }
}

/* Bring hovered items above all rings + center (uses script.js to toggle classes) */
.arrg-ring.arrg-active {
  z-index: 50;
}
.arrg-item.arrg-active-item {
  z-index: 999;
}
.arrg-center:hover {
  z-index: 1000;
}

/* Remove square hover background; clip only the image circle */
.arrg-item,
.arrg-center,
.arrg-img,
.arrg-link {
  background: transparent !important;
}

/* Keep the image perfectly circular */
.arrg-circle {
  border-radius: 9999px !important;
  overflow: hidden !important;
  background: transparent !important;
}

/* Apply hover shadow to the circle, not the square container */
.arrg-item:hover .arrg-circle,
.arrg-center:hover .arrg-circle {
  box-shadow: 0 12px 28px rgba(0,0,0,0.28);
}

/* Ensure captions below image are not clipped */
.arrg-item,
.arrg-center {
  overflow: visible;
}

/* ARRG_HOVER_ZINDEX_FIX: ensure hovered item is above all rings/center (works across stacking contexts) */
.arrg-wrapper { position: relative; }

/* Ensure rings and center can participate in z-index stacking */
.arrg-ring { position: absolute; z-index: 10; }
.arrg-center { position: absolute; z-index: 20; }

/* When hovering any ring item, bump its ring container above everything */
.arrg-ring.arrg-ring-hover { z-index: 99999 !important; }
.arrg-center.arrg-center-hover { z-index: 99999 !important; }

/* Also bump the hovered element itself */
.arrg-item.arrg-item-hover,
.arrg-center.arrg-center-hover { z-index: 99999 !important; }

/* ARRG_HOVER_TOP_CSSONLY: raise hovered ring/center above all others (no JS needed) */
.arrg-ring:hover { z-index: 999999 !important; }
.arrg-item:hover { z-index: 999999 !important; }
.arrg-center:hover { z-index: 999999 !important; }