/* =========================================================
   Hero artwork — animated orbital composition
   Used inside .hero > .hero-art
   ========================================================= */
.hero-art {
  position: absolute; inset: 0; z-index: 1; pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.hero-art .orbit {
  width: clamp(540px, 70vw, 920px);
  height: clamp(540px, 70vw, 920px);
  color: var(--color-border-strong);
  position: absolute;
  right: -8%;
  top: 50%; transform: translateY(-50%);
  opacity: 0.9;
}
:root[data-theme="dark"] .hero-art .orbit { color: var(--color-border-strong); opacity: 0.7; }

.hero-art .orbit-ring { transform-origin: center; }
.hero-art .orbit-ring.r1 { animation: orbit-pulse 9s ease-in-out infinite; }
.hero-art .orbit-ring.r2 { animation: orbit-pulse 11s ease-in-out infinite reverse; }
.hero-art .orbit-ring.r3 { animation: orbit-pulse 7s ease-in-out infinite; }
.hero-art .orbit-ring.r4 { animation: orbit-pulse 13s ease-in-out infinite reverse; }

.hero-art .orbit-rot { transform-origin: center; transform-box: fill-box; }
.hero-art .orbit-rot.a { animation: orbit-rot 26s linear infinite; transform-origin: 0 0; }
.hero-art .orbit-rot.b { animation: orbit-rot 19s linear infinite reverse; transform-origin: 0 0; }
.hero-art .orbit-rot.c { animation: orbit-rot 14s linear infinite; transform-origin: 0 0; }
.hero-art .orbit-rot.d { animation: orbit-rot 9s linear infinite reverse; transform-origin: 0 0; }

.hero-art .dot { fill: var(--color-text); }
.hero-art .dot.accent { fill: var(--color-accent); }
.hero-art .core { fill: var(--color-accent); }

@keyframes orbit-rot {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes orbit-pulse {
  0%, 100% { opacity: 0.85; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(1.015); }
}

/* Tweak: hero artwork variants */
:root[data-hero-art="type"] .hero-art .orbit { display: none; }
:root[data-hero-art="type"] .hero-wordmark { font-size: clamp(220px, 36vw, 620px); opacity: 1; color: var(--color-surface-2); }
:root[data-theme="dark"][data-hero-art="type"] .hero-wordmark { color: var(--color-surface); opacity: 0.9; }

:root[data-hero-art="grid"] .hero-art .orbit { color: transparent; }
:root[data-hero-art="grid"] .hero-art::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in srgb, var(--color-border-strong) 60%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in srgb, var(--color-border-strong) 60%, transparent) 1px, transparent 1px);
  background-size: 48px 48px;
  mask-image: radial-gradient(ellipse at 70% 50%, black 25%, transparent 70%);
  -webkit-mask-image: radial-gradient(ellipse at 70% 50%, black 25%, transparent 70%);
  opacity: 0.6;
}
:root[data-hero-art="grid"] .hero-art::after {
  content: ""; position: absolute;
  right: 8%; top: 50%; transform: translateY(-50%);
  width: clamp(180px, 22vw, 320px); height: clamp(180px, 22vw, 320px);
  background: var(--color-accent); border-radius: 999px;
  opacity: 0.95;
}

:root[data-hero-art="rule"] .hero-art .orbit { display: none; }
:root[data-hero-art="rule"] .hero-art::before {
  content: ""; position: absolute; inset: 0;
  background:
    repeating-linear-gradient(to right, transparent 0, transparent 95px, color-mix(in srgb, var(--color-border-strong) 50%, transparent) 95px, color-mix(in srgb, var(--color-border-strong) 50%, transparent) 96px),
    repeating-linear-gradient(to bottom, transparent 0, transparent 95px, color-mix(in srgb, var(--color-border-strong) 50%, transparent) 95px, color-mix(in srgb, var(--color-border-strong) 50%, transparent) 96px);
  mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 30%, black 70%, transparent 100%);
  opacity: 0.5;
}
:root[data-hero-art="rule"] .hero-art::after {
  content: ""; position: absolute;
  right: 10%; top: 50%; transform: translateY(-50%) rotate(-12deg);
  width: clamp(220px, 26vw, 380px); height: 1px;
  background: var(--color-accent);
  box-shadow:
    0 -40px 0 var(--color-text),
    0 -80px 0 var(--color-text),
    0 40px 0 var(--color-text),
    0 80px 0 var(--color-text);
  opacity: 0.6;
}

@media (prefers-reduced-motion: reduce) {
  .hero-art .orbit-ring, .hero-art .orbit-rot { animation: none !important; }
}