/* Raw Elements: a small brass focus assembly, composed from CSS planes.
   Fixed footprint, decorative only. Nothing intercepts a pointer or gains focus. */
.raw-focus-heading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.65rem, 1.6vw, 1.25rem);
  max-width: 100%;
}
.raw-focus-heading > .eyebrow {
  margin: 0;
  min-width: 0;
  text-align: left;
}
.raw-focus-accent {
  --raw-focus-size: 138px;
  --raw-focus-dark: #10251d;
  position: relative;
  display: block;
  flex: 0 0 var(--raw-focus-size);
  width: var(--raw-focus-size);
  height: var(--raw-focus-size);
  perspective: 540px;
  pointer-events: none;
  user-select: none;
  isolation: isolate;
}
.raw-focus-object {
  position: absolute;
  inset: 10%;
  display: block;
  transform-style: preserve-3d;
  transform: rotateX(48deg) rotateY(-22deg) rotateZ(-18deg);
  animation: raw-focus-drift 26s ease-in-out infinite;
}
.raw-focus-object > span {
  position: absolute;
  display: block;
  border-radius: 50%;
  backface-visibility: visible;
}
.raw-focus-ring {
  inset: 0;
  background: conic-gradient(
    from 28deg,
    #6b5634 0deg,
    #c3a46a 48deg,
    #eddbac 78deg,
    #897044 122deg,
    #b89b62 190deg,
    #eedeb9 225deg,
    #9f824e 274deg,
    #5e4d31 321deg,
    #6b5634 360deg
  );
  -webkit-mask-image: radial-gradient(closest-side, transparent 0 74%, #000 75% 96%, transparent 97%);
  mask-image: radial-gradient(closest-side, transparent 0 74%, #000 75% 96%, transparent 97%);
}
.raw-focus-ring--rear {
  transform: translateZ(-17px);
  opacity: 0.48;
}
.raw-focus-ring--middle {
  inset: 2%;
  transform: translateZ(-5px);
  opacity: 0.8;
}
.raw-focus-ring--front {
  inset: 3%;
  transform: translateZ(13px);
  -webkit-mask-image: radial-gradient(closest-side, transparent 0 71%, #000 72% 93%, transparent 94%);
  mask-image: radial-gradient(closest-side, transparent 0 71%, #000 72% 93%, transparent 94%);
}
.raw-focus-ticks {
  inset: -2%;
  transform: translateZ(4px);
  opacity: 0.63;
  background: repeating-conic-gradient(from 3deg, #c3a46a 0deg 1deg, transparent 1deg 15deg);
  -webkit-mask-image: radial-gradient(closest-side, transparent 0 88%, #000 89% 98%, transparent 99%);
  mask-image: radial-gradient(closest-side, transparent 0 88%, #000 89% 98%, transparent 99%);
}
.raw-focus-blades {
  inset: 21%;
  transform: translateZ(10px) rotateZ(15deg);
  background: repeating-conic-gradient(
    from 30deg,
    #9e824f 0deg,
    #c3a46a 3deg,
    #69583b 4deg,
    #594b34 59deg,
    #9e824f 60deg
  );
  opacity: 0.9;
  box-shadow: 0 0 0 1px rgba(237, 219, 172, 0.3);
}
.raw-focus-opening {
  inset: 36%;
  transform: translateZ(10.5px) rotateZ(15deg);
  border-radius: 0 !important;
  clip-path: polygon(25% 0, 75% 0, 100% 50%, 75% 100%, 25% 100%, 0 50%);
  background: var(--raw-focus-dark);
}
.raw-focus-marker {
  top: -1%;
  left: calc(50% - 1px);
  width: 2px;
  height: 10%;
  border-radius: 1px !important;
  transform: translateZ(14px);
  background: #e6d2a3;
  opacity: 0.8;
}
@keyframes raw-focus-drift {
  0%, 100% { transform: rotateX(48deg) rotateY(-22deg) rotateZ(-18deg); }
  50% { transform: rotateX(38deg) rotateY(15deg) rotateZ(-7deg); }
}
/* Reading or interacting near the accent never adds motion. */
.raw-focus-heading:hover .raw-focus-object,
.raw-focus-heading:focus-within .raw-focus-object {
  animation-play-state: paused;
}
@media (max-width: 700px) {
  .raw-focus-accent { --raw-focus-size: 94px; perspective: 420px; }
  .raw-focus-ring--rear { transform: translateZ(-12px); }
  .raw-focus-ring--middle { transform: translateZ(-4px); }
  .raw-focus-ring--front { transform: translateZ(9px); }
  .raw-focus-ticks { transform: translateZ(3px); }
  .raw-focus-blades { transform: translateZ(7px) rotateZ(15deg); }
  .raw-focus-opening { transform: translateZ(7.5px) rotateZ(15deg); }
  .raw-focus-marker { transform: translateZ(10px); }
}
@media (prefers-reduced-motion: reduce) {
  .raw-focus-object { animation: none; }
}
@media (forced-colors: active) {
  .raw-focus-accent { display: none; }
}
@supports not (transform-style: preserve-3d) {
  .raw-focus-object { animation: none; transform: rotate(-18deg); }
}