/* ===============================
   Banner – shared stacking
   =============================== */
.page-banner { position: relative; overflow: hidden; }
.banner-gradient-overlay { position: absolute; inset: 0; z-index: 2; }
.page-banner .container { position: relative; z-index: 10; }

/* ===============================
   Image-column circles (style-1 & style-3)
   =============================== */
.banner-media-image { position: relative; overflow: visible; }
.banner-image-circles { position: absolute; z-index: 0; pointer-events: none; }
.banner-image-circles svg { width: 100%; height: 100%; display: block; }

/* Animated rotating dash effect for circles */
.banner-image-circles circle {
animation: rotateDashes 20s linear infinite;
}
@keyframes rotateDashes {
  from {
  stroke-dashoffset: 0;
  }
  to {
  stroke-dashoffset: 100;
  }
}

.banner-image-circles.circle-style-1 {
  width: 120%;
  height: 120%;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.banner-image-circles.circle-style-3 {
  width: 140%;
  height: 140%;
  top: 50%;
  left: 52%;
  transform: translate(-50%, -50%);
}

.banner-media-image .banner-image { position: relative; z-index: 1; }

/* ===============================
   STYLE-2: edge-anchored (banner level)
   =============================== */
.banner-image-circles.circle-style-2 { display: none !important; }

.banner-edge-circles {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

.edge-circle { position: absolute; }
.edge-circle svg { width: 100%; height: 100%; display: block; }

/* Animated rotating dash effect for edge circles */
.edge-circle circle {
animation: rotateDashes 10s linear infinite;
}

/* Left edge circle - taller aspect ratio (250x520) */
.edge-circle.edge-left {
  width: 250px;
  height: 520px;
  left: 0;
  top: 19%;
  transform: translateY(-50%);
}

/* Right edge circle - square (685x685) */
.edge-circle.edge-right {
  width: 550px;
  height: 550px;
  right: 213px;          
  top: 77%;
  transform: translateY(-50%);
}

/* Responsive tweaks */
@media (max-width: 991px) {
  .edge-circle.edge-left  { width: 200px; height: 416px; }
  .edge-circle.edge-right { width: 420px; height: 420px; right: -100px; }
}

@media (max-width: 767px) {
  .edge-circle.edge-left  { width: 150px; height: 312px; }
  .edge-circle.edge-right { width: 320px; height: 320px; right: -80px; }
}

/* Respect user's motion preferences */
@media (prefers-reduced-motion: reduce) {
  .banner-image-circles circle,
  .edge-circle circle {
    animation: none !important;
  }
}