/* ==========================================================================
   Consolidated Circular Hero Photo & Orbiting Text Styles
   ========================================================================== */

/* Shared border glow animation */
@keyframes hos-borderGlow {
  0%, 100% {
    box-shadow: 0 0 0 1px rgba(196, 130, 90, .18), 
                0 0 0 10px rgba(245, 237, 228, .92), 
                0 0 0 11px rgba(196, 130, 90, .12), 
                0 32px 72px rgba(44, 26, 14, .18);
  }
  50% {
    box-shadow: 0 0 0 1px rgba(196, 130, 90, .3), 
                0 0 0 10px rgba(245, 237, 228, .98), 
                0 0 0 11px rgba(196, 130, 90, .22), 
                0 40px 90px rgba(196, 130, 90, .15);
  }
}

/* Shared spin animation */
@keyframes hos-arcSpin {
  to { transform: rotate(360deg); }
}

/* 1. Shared wrappers: height must be auto so it wraps the photo + gem + caption nicely without squishing */
.hos-wrap .photo-wrap,
.hos-about-container .ah-wrap,
.hos-work-with-me-container .wm-photo-wrap {
  --hero-circle: clamp(220px, 42vw, 360px);
  position: relative;
  width: var(--hero-circle) !important;
  height: auto !important;      /* Let it flow naturally */
  margin-inline: auto;          /* keeps it centred in its column */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 2. The photo circle itself: a perfect circle sized to --hero-circle */
.hos-wrap .photo-circle,
.hos-about-container .ah-circle,
.hos-work-with-me-container .wm-circle {
  width: var(--hero-circle) !important;
  height: var(--hero-circle) !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
  animation: hos-borderGlow 5s ease-in-out infinite !important;
}

.hos-wrap .photo-circle img,
.hos-about-container .ah-circle img,
.hos-work-with-me-container .wm-circle img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center top !important;
  border-radius: 50% !important;
  display: block !important;
}

/* 3. Size and center the orbiting text ring relative to the photo circle's center */
.hos-wrap .arc-svg,
.hos-about-container .ah-arc-svg,
.hos-work-with-me-container .wm-arc-svg {
  position: absolute !important;
  top: calc(var(--hero-circle) / 2) !important; /* Center of the photo circle */
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: calc(var(--hero-circle) * 1.3) !important; /* Perfect concentric ratio */
  height: calc(var(--hero-circle) * 1.3) !important;
  pointer-events: none !important;
  overflow: visible !important;
  display: block !important;
}

.hos-wrap .arc-svg svg,
.hos-about-container .ah-arc-svg svg,
.hos-work-with-me-container .wm-arc-svg svg {
  width: 100% !important;
  height: 100% !important;
  overflow: visible !important;
}

/* 4. Rotate animation for SVG groups/elements */
.hos-wrap .arc-svg {
  transform-origin: center center !important;
  animation: hos-arcSpin 60s linear infinite !important;
}

.hos-about-container .ah-arc-group,
.hos-work-with-me-container .wm-arc-group {
  transform-origin: 270px 270px !important;
  animation: hos-arcSpin 60s linear infinite !important;
}

/* 5. Stop the text wrapping onto two lines */
.hos-wrap .arc-svg text,
.hos-about-container .ah-arc-svg text,
.hos-work-with-me-container .wm-arc-svg text,
.hos-wrap .arc-svg textPath,
.hos-about-container .ah-arc-svg textPath,
.hos-work-with-me-container .wm-arc-svg textPath {
  white-space: nowrap !important;
}

/* 6. Accessibility: respect reduced-motion */
@media (prefers-reduced-motion: reduce) {
  .hos-wrap .arc-svg,
  .hos-about-container .ah-arc-group,
  .hos-work-with-me-container .wm-arc-group {
    animation: none !important;   /* hold the text still, no spin */
  }
}