/* ============================================================
   SEAKT-Komponenten — Live-Score-Orb (+ Section-Split-Layout)
   Port aus „seakt-orb.html". Scoped unter .orb / .features-split.
   Lokale --seakt-*/--ink-Aliase auf design-tokens.css gemappt,
   Fonts auf Brand-Stack (Outfit/Inter/JetBrains Mono).
   ============================================================ */
@property --orb-progress { syntax: '<number>'; initial-value: 0; inherits: false; }
@property --orb-head-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }
@property --aura-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

/* ── #features 2-Spalten-Split (Orb links, Dimension-Cards rechts) ── */
.features-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.08fr);
  gap: 56px;
  align-items: start;          /* Cards laufen, Orb bleibt sticky */
  margin-top: 8px;
}
.features-split__orb {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 22px;
  position: sticky;
  top: 14vh;                   /* schwebt neben den Cards mit */
  align-self: start;
}
/* rechte Spalte: Cards vertikal gestapelt → Scroll-Höhe pro Buchstabe */
.features-split .seakt-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
@media (max-width: 1023px) {
  .features-split { grid-template-columns: 1fr; gap: 40px; }
  .features-split__orb { order: -1; position: static; top: auto; }
  .features-split .seakt-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
}

/* ════════════════ ORB ════════════════ */
.orb {
  --seakt-s: var(--color-s);
  --seakt-e: var(--color-e);
  --seakt-a: var(--color-a);
  --seakt-k: var(--color-k);
  --seakt-t: var(--color-t);
  --ink: var(--ink-primary);

  position: relative;
  width: 480px;
  height: 480px;
  max-width: calc(100vw - 40px);
  aspect-ratio: 1 / 1;
}
/* Luminöser Brand-Glow-Halo hinter dem Orb → „Pop" vor dem Section-BG */
.orb::after {
  content: '';
  position: absolute;
  inset: -14%;
  border-radius: 50%;
  z-index: -1;
  pointer-events: none;
  background: radial-gradient(circle at 50% 48%,
    rgba(139, 92, 246, 0.26) 0%,
    rgba(255, 61, 129, 0.14) 42%,
    rgba(91, 233, 220, 0.06) 62%,
    transparent 74%);
  filter: blur(34px);
  animation: orb-halo-breathe 6s ease-in-out infinite;
}
@keyframes orb-halo-breathe {
  0%, 100% { opacity: 0.8; transform: scale(0.98); }
  50%      { opacity: 1;   transform: scale(1.03); }
}

.orb__progress { position: absolute; inset: 2.5%; width: 95%; height: 95%; pointer-events: none; z-index: 1; filter: drop-shadow(0 0 18px rgba(91, 143, 249, 0.22)); }
.orb__progress-track { fill: none; stroke: rgba(240, 238, 230, 0.10); stroke-width: 1; stroke-dasharray: 1.4 3; }
.orb__progress-arc {
  fill: none; stroke: url(#orb-progress-grad); stroke-width: 2.2; stroke-linecap: round;
  --c: 295.31; --orb-progress: 0;
  stroke-dasharray: var(--c);
  stroke-dashoffset: calc(var(--c) * (1 - var(--orb-progress)));
  transition: --orb-progress 0.8s cubic-bezier(0.16, 1, 0.3, 1);
}
/* Default (Mobile / kein Scroll-Sync): Arc füllt auf Score-Niveau. Desktop
   überschreibt --orb-progress/--orb-head-angle inline per Scroll (JS). */
.orb.is-loaded .orb__progress-arc { --orb-progress: 0.89; }
.orb__progress-head { fill: #FFFFFF; transform-origin: 50px 50px; transform: rotate(var(--orb-head-angle, 0deg)); transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1); filter: drop-shadow(0 0 6px rgba(139, 92, 246, 0.85)); }
.orb.is-loaded .orb__progress-head { --orb-head-angle: 320.4deg; }

/* Aktiver Dimension-Node (per Scroll auf Card-Höhe) */
.orb__node.is-active { transform: scale(1.14); border-color: rgba(var(--dim-rgb), 0.7); box-shadow: 0 14px 38px rgba(var(--dim-rgb), 0.42), 0 0 20px rgba(var(--dim-rgb), 0.32); }
.orb__node.is-active::before { opacity: 0.95; }
.orb__node.is-active .orb__node-letter { text-shadow: 0 0 20px rgba(var(--dim-rgb), 0.85); }

.orb__ring { position: absolute; border-radius: 50%; pointer-events: none; }
.orb__ring--1 { inset: 0; border: 1px solid rgba(240, 238, 230, 0.18); animation: orb-spin 60s linear infinite; }
.orb__ring--2 { inset: 14%; border: 1px solid rgba(91, 143, 249, 0.20); animation: orb-spin 45s linear infinite reverse; }
.orb__ring--3 { inset: 28%; border: 1px solid rgba(139, 92, 246, 0.18); animation: orb-spin 30s linear infinite; }
.orb__ring-tick { position: absolute; top: -3px; left: calc(50% - 3px); width: 6px; height: 6px; border-radius: 50%; }
.orb__ring--1 .orb__ring-tick { background: rgba(240, 238, 230, 0.85); box-shadow: 0 0 12px rgba(240, 238, 230, 0.45); }
.orb__ring--2 .orb__ring-tick { background: var(--seakt-e); box-shadow: 0 0 14px rgba(91, 143, 249, 0.65); }
.orb__ring--3 .orb__ring-tick { background: var(--seakt-a); box-shadow: 0 0 14px rgba(139, 92, 246, 0.65); }

.orb__core-rotate { position: absolute; inset: 38%; pointer-events: none; animation: orb-spin 12s linear infinite; }
.orb__core-pulse { position: absolute; inset: 0; animation: orb-pulse 4s ease-in-out infinite; }
.orb__core { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--seakt-s), var(--seakt-e), var(--seakt-a), var(--seakt-k), var(--seakt-t), var(--seakt-s)); filter: blur(22px); opacity: 0.66; }
/* etwas ruhigerer, edlerer Puls (weniger Throb) */
@keyframes orb-pulse { 0%, 100% { transform: scale(1.00); opacity: 0.90; } 50% { transform: scale(1.09); opacity: 1.00; } }

.orb__center { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 5; pointer-events: none; }
.orb__score {
  display: inline-flex; align-items: baseline; justify-content: center; gap: 0;
  /* gleiche Display-Schrift wie die Site-Headlines (Outfit) */
  font-family: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 800; letter-spacing: -0.03em; line-height: 0.9;
  /* hellere Brand-Töne + Glow → riesige, gut sichtbare Zahl */
  background: linear-gradient(135deg, #FF5C9D 0%, #D08BE8 48%, #A78BFA 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  filter:
    drop-shadow(0 3px 18px rgba(255, 61, 129, 0.50))
    drop-shadow(0 0 42px rgba(167, 139, 250, 0.34));
}
/* Responsiv: ~220px auf 1440px-Desktop, skaliert sauber für andere Viewports */
.orb__score-value { font-size: clamp(110px, 15vw, 240px); font-variant-numeric: tabular-nums; }
.orb__score-pct { font-size: clamp(48px, 6.5vw, 104px); font-weight: 700; opacity: 0.85; margin-left: 2px; }
.orb__score-max { margin-top: 14px; font: 600 14px/1 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); }

.orb-status-pill {
  display: inline-flex; align-items: center; gap: 9px; padding: 9px 18px 9px 14px; border-radius: var(--radius-pill);
  background: rgba(91, 233, 220, 0.06); border: 1px solid rgba(91, 233, 220, 0.28); color: var(--seakt-s);
  font: 600 12.5px/1 var(--font-sans); letter-spacing: -0.005em;
  box-shadow: 0 6px 22px rgba(91, 233, 220, 0.14), inset 0 0 18px rgba(91, 233, 220, 0.06);
}
.orb-status-pill__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--seakt-s); box-shadow: 0 0 10px var(--seakt-s); animation: orb-live-pulse 2.4s ease-in-out infinite; }
@keyframes orb-live-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } }

.orb__node {
  position: absolute; width: 52px; height: 52px; border-radius: 14px;
  background: rgba(240, 238, 230, 0.04); border: 1px solid rgba(240, 238, 230, 0.18);
  backdrop-filter: blur(12px) saturate(160%); -webkit-backdrop-filter: blur(12px) saturate(160%);
  display: grid; place-items: center; cursor: default; z-index: 10; isolation: isolate;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 14px rgba(var(--dim-rgb), 0.12);
  opacity: 0; transform: scale(0.80);
  animation: orb-node-reveal .55s var(--ease-apple) var(--reveal-delay, 0ms) forwards;
  transition: transform .35s var(--ease-apple), border-color .3s var(--ease-apple), box-shadow .35s var(--ease-apple);
}
.orb__node::before { content: ''; position: absolute; inset: -3px; border-radius: 17px; background: conic-gradient(from 0deg, var(--seakt-s), var(--seakt-e), var(--seakt-a), var(--seakt-k), var(--seakt-t), var(--seakt-s)); z-index: -1; opacity: 0; filter: blur(0.4px); transition: opacity .3s var(--ease-apple); }
.orb__node:hover::before,
.orb__node.is-cross::before { opacity: 0.85; }
.orb__node:hover,
.orb__node.is-cross { transform: scale(1.06); border-color: rgba(var(--dim-rgb), 0.55); box-shadow: 0 12px 32px rgba(var(--dim-rgb), 0.30), 0 4px 12px rgba(0, 0, 0, 0.40); }
.orb__node-clip { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; display: grid; place-items: center; }
.orb__node-shimmer { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.22) 50%, transparent 65%); transform: translateX(-120%); animation: orb-tile-shimmer 5s ease-in-out infinite var(--shim-delay, 0s); mix-blend-mode: overlay; }
.orb__node-aura { position: absolute; inset: -6px; border-radius: 50%; background: conic-gradient(from var(--aura-angle, 0deg), rgba(var(--dim-rgb), 0.32), rgba(var(--dim-rgb), 0.05) 30%, rgba(var(--dim-rgb), 0.32) 70%, rgba(var(--dim-rgb), 0.05)); filter: blur(8px); opacity: 0.45; pointer-events: none; z-index: -1; animation: orb-tile-aura 12s linear infinite var(--aura-delay, 0s); }
@keyframes orb-tile-shimmer { 0% { transform: translateX(-120%); } 55%, 100% { transform: translateX(120%); } }
@keyframes orb-tile-aura { to { --aura-angle: 360deg; } }
.orb__node-letter { font-family: var(--font-display); font-weight: 800; font-size: 20px; letter-spacing: -0.03em; color: var(--dim); line-height: 1; text-shadow: 0 0 14px rgba(var(--dim-rgb), 0.45); position: relative; z-index: 2; }

.orb__node--s { top: 4%;     left: calc(50% - 26px); --reveal-delay:   0ms; --shim-delay:   0s; --aura-delay:   0s; }
.orb__node--e { top: 30%;    right: -2%;             --reveal-delay:  80ms; --shim-delay: -1.0s; --aura-delay: -2.4s; }
.orb__node--a { bottom: 12%; right: 10%;             --reveal-delay: 160ms; --shim-delay: -2.0s; --aura-delay: -4.8s; }
.orb__node--k { bottom: 12%; left:  10%;             --reveal-delay: 240ms; --shim-delay: -3.0s; --aura-delay: -7.2s; }
.orb__node--t { top: 30%;    left:  -2%;             --reveal-delay: 320ms; --shim-delay: -4.0s; --aura-delay: -9.6s; }
@keyframes orb-node-reveal { to { opacity: 1; transform: scale(1); } }
@keyframes orb-spin { to { transform: rotate(360deg); } }

.orb-legend { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-faint); }
.orb-legend span { display: inline-flex; align-items: center; gap: 6px; }
.orb-legend i { width: 8px; height: 8px; border-radius: 50%; display: inline-block; box-shadow: 0 0 8px currentColor; }

@media (max-width: 1023px) {
  .orb__score-value { font-size: clamp(88px, 12vw, 160px); }
  .orb__score-pct { font-size: clamp(40px, 5.5vw, 72px); }
}
@media (max-width: 640px) {
  .orb__score-value { font-size: clamp(72px, 18vw, 110px); }
  .orb__score-pct { font-size: clamp(34px, 8vw, 50px); }
  .orb-legend { font-size: 9.5px; gap: 12px; }
}

@media (prefers-reduced-motion: reduce) {
  .orb__ring, .orb__core-rotate, .orb__core-pulse, .orb__node,
  .orb__node-shimmer, .orb__node-aura, .orb-status-pill__dot { animation: none; }
  .orb__node { opacity: 1; transform: scale(1); }
  .orb__progress-arc, .orb__progress-head { transition: none; }
}