/* ------------------------------------------------------------------
   Theodor Health – animated feature graphics (KI-Analyse, Teilen,
   Im Zeitverlauf verfolgen). Injected after Framer hydration.
------------------------------------------------------------------ */
:root{
  --ca-acc:#ff4d4d;      /* heart accent  */
  --ca-ok:#3dd68c;       /* verified green */
  --ca-line:#ffffff;
  --ca-dim:rgba(255,255,255,.55);
  --ca-faint:rgba(255,255,255,.14);
}
.clone-anim{position:absolute;pointer-events:none;z-index:5;contain:layout paint}
.clone-anim svg{display:block;width:100%;height:auto;overflow:visible}

/* KI-Analyse: fill the existing visual area, hide the static rings */
.clone-anim.ca-ki{inset:0;display:grid;place-items:center;padding:6%}
.clone-anim.ca-ki svg{max-width:380px;max-height:100%}
.ca-host > *:not(.clone-anim){opacity:0!important;transition:opacity .5s ease}

/* Teilen / Zeitverlauf: floating glass widget over the icon */
.clone-anim.ca-glass{
  left:50%;top:50%;transform:translate(-50%,-50%);
  width:78%;max-width:330px;padding:16px 16px 14px;
  background:rgba(17,19,19,.55);
  -webkit-backdrop-filter:blur(13px) saturate(120%);
  backdrop-filter:blur(13px) saturate(120%);
  border:1px solid rgba(255,255,255,.13);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.07);
  animation:ca-bob 6s ease-in-out infinite;
}
@keyframes ca-bob{0%,100%{transform:translate(-50%,calc(-50% - 5px))}50%{transform:translate(-50%,calc(-50% + 5px))}}

/* shared drawing helpers */
.ca-draw{stroke-dasharray:var(--len,400);stroke-dashoffset:var(--len,400);animation:ca-draw var(--dur,3s) ease forwards infinite;animation-delay:var(--d,0s)}
@keyframes ca-draw{0%{stroke-dashoffset:var(--len,400)}45%,100%{stroke-dashoffset:0}}

/* ---- KI-Analyse ---- */
.ca-sonar{transform-box:fill-box;transform-origin:center;animation:ca-sonar 3.2s ease-out infinite}
.ca-sonar.s2{animation-delay:1.05s}
.ca-sonar.s3{animation-delay:2.1s}
@keyframes ca-sonar{0%{transform:scale(.32);opacity:0}12%{opacity:.7}100%{transform:scale(1.25);opacity:0}}
.ca-sweep{transform-box:view-box;transform-origin:160px 160px;animation:ca-spin 4.5s linear infinite}
@keyframes ca-spin{to{transform:rotate(360deg)}}
.ca-glow{transform-box:fill-box;transform-origin:center;animation:ca-glow 2.4s ease-in-out infinite}
@keyframes ca-glow{0%,100%{opacity:.25;transform:scale(.9)}50%{opacity:.6;transform:scale(1.08)}}
.ca-beat{stroke-dasharray:120;animation:ca-beat 2.4s linear infinite}
@keyframes ca-beat{0%{stroke-dashoffset:120}55%,100%{stroke-dashoffset:-120}}
.ca-chip{opacity:0;transform-box:fill-box;transform-origin:center;animation:ca-chip 4.8s ease-in-out infinite}
.ca-chip.c1{animation-delay:.2s}.ca-chip.c2{animation-delay:1.6s}.ca-chip.c3{animation-delay:3s}
@keyframes ca-chip{0%{opacity:0;transform:translateY(6px) scale(.92)}10%,26%{opacity:1;transform:translateY(0) scale(1)}40%,100%{opacity:0;transform:translateY(-4px) scale(.96)}}
.ca-core-h{transform-box:fill-box;transform-origin:center;animation:ca-pulse 1.5s ease-in-out infinite}
@keyframes ca-pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.14)}}

/* ---- Teilen ---- */
.ca-tap{transform-box:fill-box;transform-origin:center;animation:ca-tap 3.6s ease-out infinite}
@keyframes ca-tap{0%{transform:scale(.2);opacity:.8}30%,100%{transform:scale(1.8);opacity:0}}
.ca-path{stroke-dasharray:6 6;animation:ca-flow 1s linear infinite}
@keyframes ca-flow{to{stroke-dashoffset:-12}}
.ca-token{offset-path:path("M88 90 C 150 42, 198 42, 242 74");offset-rotate:0deg;animation:ca-token 3.6s ease-in-out infinite}
@keyframes ca-token{0%{offset-distance:0%;opacity:0}10%{opacity:1}55%{offset-distance:100%;opacity:1}65%,100%{offset-distance:100%;opacity:0}}
.ca-check{stroke-dasharray:34;stroke-dashoffset:34;animation:ca-check 3.6s ease-out infinite}
@keyframes ca-check{0%,58%{stroke-dashoffset:34}70%,100%{stroke-dashoffset:0}}
.ca-okring{transform-box:fill-box;transform-origin:center;animation:ca-okring 3.6s ease-out infinite}
@keyframes ca-okring{0%,58%{opacity:0;transform:scale(.6)}70%{opacity:1;transform:scale(1.12)}80%,100%{opacity:1;transform:scale(1)}}
.ca-doc{transform-box:fill-box;transform-origin:center;animation:ca-doclift 3.6s ease-in-out infinite}
@keyframes ca-doclift{0%,8%{transform:translateY(0)}16%{transform:translateY(-3px)}24%,100%{transform:translateY(0)}}

/* ---- Im Zeitverlauf ---- */
.ca-area{opacity:0;animation:ca-area 6s ease forwards infinite}
@keyframes ca-area{0%{opacity:0}40%{opacity:1}90%{opacity:1}100%{opacity:0}}
.ca-pt{transform-box:fill-box;transform-origin:center;opacity:0;animation:ca-pt 6s ease forwards infinite}
.ca-pt.p1{animation-delay:.4s}.ca-pt.p2{animation-delay:.9s}.ca-pt.p3{animation-delay:1.4s}
.ca-pt.p4{animation-delay:1.9s}.ca-pt.p5{animation-delay:2.4s}.ca-pt.p6{animation-delay:2.9s}
@keyframes ca-pt{0%{opacity:0;transform:scale(0)}8%{opacity:1;transform:scale(1.3)}14%,90%{opacity:1;transform:scale(1)}100%{opacity:0}}
.ca-last{transform-box:fill-box;transform-origin:center;animation:ca-last 1.6s ease-in-out infinite}
@keyframes ca-last{0%,100%{transform:scale(.85);opacity:.85}50%{transform:scale(1.35);opacity:1}}
.ca-tag{opacity:0;transform-box:fill-box;transform-origin:center;animation:ca-tag 6s ease forwards infinite}
@keyframes ca-tag{0%,40%{opacity:0;transform:translateY(4px)}50%,90%{opacity:1;transform:translateY(0)}100%{opacity:0}}
.ca-label{font:600 13px/1 "Google Sans Flex","Inter",system-ui,sans-serif;fill:#fff;letter-spacing:.2px}
.ca-sub{font:500 9.5px/1 "Google Sans Flex","Inter",system-ui,sans-serif;fill:rgba(255,255,255,.6)}

/* ---- Team LinkedIn badge ---- */
.cf-li{position:absolute;top:12px;right:12px;z-index:9;width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;border-radius:9px;
  background:#0A66C2;box-shadow:0 4px 14px rgba(0,0,0,.35);
  pointer-events:auto;text-decoration:none;transition:transform .15s ease,filter .15s ease}
.cf-li:hover{transform:translateY(-2px);filter:brightness(1.12)}
.cf-li:focus-visible{outline:2px solid #fff;outline-offset:2px}

@media (prefers-reduced-motion: reduce){
  .clone-anim *{animation:none!important}
  .ca-draw,.ca-check{stroke-dashoffset:0!important}
  .ca-pt,.ca-area,.ca-tag,.ca-chip{opacity:1!important}
}