/* ═══════════════════════════════════════════════════════════════════════════
   ResultOS – SVG / CSS Animation Library
   Alle Animationen sind pure CSS + SMIL SVG, kein externes JS
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── Animationscontainer ─────────────────────────────────────────────────── */
.anim-wrap {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 260px;
    background: transparent;
    border-radius: inherit;
    overflow: hidden;
    position: relative;
}

.anim-svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* ─── Theme-aware SVG Farben ──────────────────────────────────────────────── */
.anim-svg .an-bg-card   { fill: rgba(255,255,255,0.9); }
.anim-svg .an-bg-canvas { fill: transparent; }
.anim-svg .an-primary   { fill: var(--clr-primary-600); }
.anim-svg .an-primary-s { stroke: var(--clr-primary-600); fill: none; }
.anim-svg .an-primary-lt{ fill: var(--clr-primary-100); }
.anim-svg .an-primary-lt-s { stroke: var(--clr-primary-200); fill: none; }
.anim-svg .an-muted     { fill: var(--clr-gray-300); }
.anim-svg .an-muted-s   { stroke: var(--clr-gray-300); fill: none; }
.anim-svg .an-border    { stroke: var(--clr-primary-200); fill: none; }
.anim-svg .an-text      { fill: var(--clr-gray-700); }
.anim-svg .an-text-sm   { fill: var(--clr-gray-500); }
.anim-svg .an-green     { fill: #22c55e; }
.anim-svg .an-green-s   { stroke: #22c55e; fill: none; }
.anim-svg .an-warn      { fill: #f59e0b; }
.anim-svg .an-packet    { fill: var(--clr-primary-500); }
.anim-svg .an-packet-2  { fill: var(--clr-primary-300); }
.anim-svg .an-node-bg   { fill: white; stroke: var(--clr-primary-200); stroke-width: 1.5; }
.anim-svg .an-conn      { stroke: var(--clr-primary-200); fill: none; stroke-width: 1.5; }
.anim-svg .an-conn-active { stroke: var(--clr-primary-400); fill: none; stroke-width: 1.5;
                             stroke-dasharray: 5 4; }
.anim-svg .an-halo      { fill: var(--clr-primary-400); }
.anim-svg .an-shield-bg { fill: var(--clr-primary-50); stroke: var(--clr-primary-300); stroke-width: 1.5; }
.anim-svg .an-cloud-body{ fill: var(--clr-primary-100); stroke: var(--clr-primary-300); stroke-width: 1.5; }
.anim-svg .an-file-bg   { fill: white; stroke: var(--clr-primary-300); stroke-width: 1; }
.anim-svg .an-neural-bg { fill: rgba(99,102,241,0.08); }

html.dark .anim-svg .an-bg-card    { fill: rgba(31,41,55,0.9); }
html.dark .anim-svg .an-primary    { fill: var(--clr-primary-400); }
html.dark .anim-svg .an-primary-s  { stroke: var(--clr-primary-400); }
html.dark .anim-svg .an-primary-lt { fill: rgba(99,102,241,0.15); }
html.dark .anim-svg .an-primary-lt-s { stroke: rgba(99,102,241,0.3); }
html.dark .anim-svg .an-muted      { fill: var(--clr-gray-600); }
html.dark .anim-svg .an-muted-s    { stroke: var(--clr-gray-600); }
html.dark .anim-svg .an-border     { stroke: rgba(99,102,241,0.25); }
html.dark .anim-svg .an-text       { fill: var(--clr-gray-200); }
html.dark .anim-svg .an-text-sm    { fill: var(--clr-gray-400); }
html.dark .anim-svg .an-packet     { fill: var(--clr-primary-400); }
html.dark .anim-svg .an-packet-2   { fill: var(--clr-primary-600); }
html.dark .anim-svg .an-node-bg    { fill: var(--clr-gray-800); stroke: rgba(99,102,241,0.3); }
html.dark .anim-svg .an-conn       { stroke: rgba(99,102,241,0.2); }
html.dark .anim-svg .an-conn-active{ stroke: rgba(99,102,241,0.5); }
html.dark .anim-svg .an-halo       { fill: var(--clr-primary-500); }
html.dark .anim-svg .an-shield-bg  { fill: rgba(99,102,241,0.12); stroke: rgba(99,102,241,0.3); }
html.dark .anim-svg .an-cloud-body { fill: rgba(99,102,241,0.15); stroke: rgba(99,102,241,0.35); }
html.dark .anim-svg .an-file-bg    { fill: var(--clr-gray-800); stroke: rgba(99,102,241,0.3); }
html.dark .anim-svg .an-neural-bg  { fill: rgba(99,102,241,0.06); }

/* ─── Keyframes: Netzwerk ─────────────────────────────────────────────────── */
@keyframes halo {
    0%   { r: 16; opacity: 0.6; }
    100% { r: 36; opacity: 0; }
}

@keyframes halo-sm {
    0%   { r: 10; opacity: 0.5; }
    100% { r: 22; opacity: 0; }
}

@keyframes connDash {
    to { stroke-dashoffset: -18; }
}

@keyframes nodeOnline {
    0%, 100% { opacity: 1; r: 3.5; }
    50%       { opacity: 0.4; r: 4.5; }
}

@keyframes nodeOnlineFast {
    0%, 100% { opacity: 1; }
    30%       { opacity: 0.3; }
}

@keyframes floatUp {
    0%   { transform: translateY(0px);  }
    50%  { transform: translateY(-8px); }
    100% { transform: translateY(0px);  }
}

@keyframes floatSlow {
    0%   { transform: translateY(0px);  }
    50%  { transform: translateY(-5px); }
    100% { transform: translateY(0px);  }
}

/* ─── Keyframes: Cloud / Shield ──────────────────────────────────────────── */
@keyframes cloudPulse {
    0%, 100% { transform: scale(1);    opacity: 1;   }
    50%       { transform: scale(1.03); opacity: 0.9; }
}

@keyframes fileRiseA {
    0%   { transform: translate(0px,  0px);  opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(-20px, -70px); opacity: 0; }
}

@keyframes fileRiseB {
    0%   { transform: translate(0px, 0px);  opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(0px, -75px);  opacity: 0; }
}

@keyframes fileRiseC {
    0%   { transform: translate(0px, 0px);  opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: 1; }
    100% { transform: translate(22px, -70px); opacity: 0; }
}

@keyframes shieldCheck {
    0%,40%  { stroke-dashoffset: 30; opacity: 0; }
    60%,100%{ stroke-dashoffset: 0;  opacity: 1; }
}

@keyframes lockShackle {
    0%,30%  { transform: translateY(-5px); }
    50%,100%{ transform: translateY(0); }
}

@keyframes orbitA {
    from { transform: rotate(0deg)   translateX(62px) rotate(0deg); }
    to   { transform: rotate(360deg) translateX(62px) rotate(-360deg); }
}

@keyframes orbitB {
    from { transform: rotate(120deg) translateX(62px) rotate(-120deg); }
    to   { transform: rotate(480deg) translateX(62px) rotate(-480deg); }
}

@keyframes orbitC {
    from { transform: rotate(240deg) translateX(62px) rotate(-240deg); }
    to   { transform: rotate(600deg) translateX(62px) rotate(-600deg); }
}

@keyframes uploadArrow {
    0%,100%{ transform: translateY(0);   opacity: 0.5; }
    50%    { transform: translateY(-6px); opacity: 1;   }
}

@keyframes scanLine {
    0%   { transform: translateY(-90px); opacity: 0; }
    10%  { opacity: 0.6; }
    90%  { opacity: 0.6; }
    100% { transform: translateY(90px);  opacity: 0; }
}

@keyframes binaryFade {
    0%,100%{ opacity: 0.05; }
    50%    { opacity: 0.15; }
}

/* ─── Keyframes: KI / Neuronales Netz ────────────────────────────────────── */
@keyframes neuronFire {
    0%,100%{ opacity: 0.25; r: 5; }
    50%    { opacity: 1;    r: 7; }
}

@keyframes neuronFireLate {
    0%,60%  { opacity: 0.2; r: 5; }
    80%     { opacity: 1;   r: 7; }
    100%    { opacity: 0.2; r: 5; }
}

@keyframes synapse {
    0%   { stroke-dashoffset: 40; opacity: 0; }
    20%  { opacity: 0.7; }
    80%  { opacity: 0.7; }
    100% { stroke-dashoffset: 0;  opacity: 0; }
}

@keyframes synapseRev {
    0%   { stroke-dashoffset: 0;   opacity: 0; }
    20%  { opacity: 0.5; }
    80%  { opacity: 0.5; }
    100% { stroke-dashoffset: -40; opacity: 0; }
}

@keyframes brainGlow {
    0%,100%{ opacity: 0.08; }
    50%    { opacity: 0.18; }
}

@keyframes labelAppear {
    0%,70% { opacity: 0; transform: translateX(8px); }
    85%    { opacity: 1; transform: translateX(0);   }
    100%   { opacity: 1; }
}

/* ─── Keyframes: Terminal / Code ──────────────────────────────────────────── */
@keyframes blink {
    0%,100%{ opacity: 1; }
    50%    { opacity: 0; }
}

@keyframes typeLine {
    from { clip-path: inset(0 100% 0 0); }
    to   { clip-path: inset(0 0% 0 0); }
}

@keyframes termFadeIn {
    from { opacity: 0; transform: translateY(4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ─── Utility: reduced motion ────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .anim-svg * { animation-duration: 0.01ms !important; }
}