/* ============================================================
   AIOOS — motion-net layer: the "signal network" system
   The hero's voice-packet language continues down the page:
   header→cards branch lines (Kanäle), a through-line with a
   traveling packet (Ablauf), a live signal sweep (Stats),
   a rotating aura rim on the popular plan, editorial quote marks.
   All decorative, additive, reduced-motion safe.
   ============================================================ */

/* ---- shared net drawing ---- */
.net-branch, .net-line{position:absolute; pointer-events:none; overflow:visible}
.net-branch path, .net-line path, .net-pulse path{fill:none; stroke-linecap:round}
.net-branch .g1, .net-line .g1{stroke:rgba(45,108,246,.20); stroke-width:1.5px}
.net-branch .p1, .net-line .p1{stroke:#2D6CF6; stroke-width:2.6px; opacity:0}

/* ---- Kanäle: the header signal branches into the three channel cards ---- */
.chan-grid{position:relative}
.chan-grid .net-branch{left:0; top:-56px; width:100%; height:54px}
.chan-grid .chan{position:relative; z-index:1}

/* ---- Ablauf: one line runs through the three steps (ghosts through the glass) ---- */
.steps{position:relative}
.steps .net-line{left:0; top:0; width:100%; height:100%}
.steps .step{position:relative; z-index:1}

/* ---- draw-in + packets (persistent .net-live gates the run) ---- */
@media (prefers-reduced-motion:no-preference){
  .net-branch .g1, .net-line .g1{stroke-dasharray:100 100; stroke-dashoffset:100}
  .net-live .net-branch .g1, .net-live .net-line .g1{animation:netDraw 1.1s cubic-bezier(.6,0,.2,1) forwards}
  .net-live .net-branch .g1:nth-of-type(2){animation-delay:.14s}
  .net-live .net-branch .g1:nth-of-type(3){animation-delay:.28s}
  .net-live .net-branch .p1, .net-live .net-line .p1{opacity:1; stroke-dasharray:3.5 96.5; stroke-dashoffset:100;
    animation:netPacket 2.7s linear infinite; animation-delay:1.2s}
  .net-live .net-branch .p1:nth-of-type(5){animation-duration:3.1s; animation-delay:1.9s}
  .net-live .net-branch .p1:nth-of-type(6){animation-duration:2.5s; animation-delay:1.5s}
  .net-live .net-line .p1{animation-duration:4.2s}
}
@keyframes netDraw{to{stroke-dashoffset:0}}
@keyframes netPacket{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ---- Stats: a live signal sweeps across the dark band (voice heartbeat) ---- */
.stats .net-pulse{position:absolute; left:0; right:0; top:0; height:100%; width:100%; pointer-events:none; z-index:0; opacity:.85}
.stats .net-pulse path{stroke:rgba(130,190,255,.34); stroke-width:1.6px}
@media (prefers-reduced-motion:no-preference){
  .net-live.stats .net-pulse path, .stats.net-live .net-pulse path{stroke-dasharray:16 84; stroke-dashoffset:100;
    animation:netSweep 7s linear infinite}
}
@keyframes netSweep{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}

/* ---- Preise: rotating light rim around the popular plan (only where ring-masking works) ---- */
@property --rimA{syntax:'<angle>'; initial-value:0deg; inherits:false}
.price.best{overflow:visible}
@supports ((-webkit-mask-composite:xor) and (-webkit-mask-image:linear-gradient(#000,#000))) or (mask-composite:exclude){
  .price.best::before{content:''; position:absolute; inset:-4px; border-radius:26px; z-index:-1; pointer-events:none;
    padding:4px;
    background:conic-gradient(from var(--rimA), transparent 0deg 30deg, rgba(94,234,212,.85) 90deg, rgba(96,177,255,.95) 150deg, transparent 215deg 360deg);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite:exclude;
    filter:blur(3px)}
  @media (prefers-reduced-motion:no-preference){
    .price.best::before{animation:rimSpin 7s linear infinite}
  }
}
@keyframes rimSpin{to{--rimA:360deg}}

/* ---- Stimmen: editorial serif quotation watermark ---- */
.quote::before{content:'„'; position:absolute; right:20px; top:-18px; z-index:0; pointer-events:none;
  font-family:'Instrument Serif',Georgia,serif; font-size:150px; line-height:1; color:#2D6CF6; opacity:.08}

@media (max-width:980px){
  .chan-grid .net-branch, .steps .net-line, .stats .net-pulse{display:none}
}

/* ---- Live-Demo: broadcast rings — the theater quietly transmits ---- */
#demo .container{position:relative}
#demo .demo-shell{position:relative; z-index:1}
#demo .container::before, #demo .container::after{content:''; position:absolute; left:50%; top:58%;
  width:min(1100px,94%); aspect-ratio:2.55/1; transform:translate(-50%,-50%);
  border:1.5px solid rgba(45,108,246,.32); border-radius:50%; pointer-events:none; opacity:0; z-index:0}
@media (prefers-reduced-motion:no-preference){
  #demo .container::before{animation:ringPulse 6.5s ease-out infinite}
  #demo .container::after{animation:ringPulse 6.5s ease-out 3.25s infinite}
}
@keyframes ringPulse{0%{opacity:0; transform:translate(-50%,-50%) scale(.86)}
  28%{opacity:.55}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.1)}}

/* ---- ZUX: a spark migrates from the old dashboard to the AIOOS way ---- */
@media (min-width:981px) and (prefers-reduced-motion:no-preference){
  .zux-grid{position:relative}
  .zux-grid::after{content:''; position:absolute; left:50%; top:52%; width:10px; height:10px; margin:-5px 0 0 -5px;
    border-radius:50%; background:radial-gradient(circle at 35% 35%, #7DE9FF, #2D6CF6);
    box-shadow:0 0 14px rgba(34,211,238,.85); opacity:0; pointer-events:none; z-index:2;
    animation:zuxHop 3.4s ease-in-out infinite}
}
@keyframes zuxHop{0%,12%{opacity:0; transform:translateX(-52px) scale(.55)}
  30%{opacity:1; transform:translateX(-20px) scale(1)}
  70%{opacity:1; transform:translateX(20px) scale(1)}
  88%,100%{opacity:0; transform:translateX(52px) scale(.55)}}

/* ---- CTA band: floating brand-wave watermark ---- */
.cta-band .cta-mark{position:absolute; right:-52px; bottom:-48px; width:400px; opacity:.09; z-index:0; pointer-events:none}
.cta-band .cta-mark svg{display:block; width:100%; height:auto}
@media (prefers-reduced-motion:no-preference){
  .cta-band .cta-mark{animation:markFloat 11s ease-in-out infinite}
}
@keyframes markFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(-1.4deg)}}
@media (max-width:980px){ .cta-band .cta-mark{width:240px; right:-40px; bottom:-36px} }

/* ---- CTA band redesign v3: liquid-glass finale (light) ---- */
.cta-band{
  color:var(--ink);
  background:
    radial-gradient(760px 420px at 78% -10%, rgba(34,211,238,.30), transparent 58%),
    radial-gradient(680px 440px at 12% 112%, rgba(124,92,252,.26), transparent 60%),
    radial-gradient(900px 560px at 50% 120%, rgba(45,108,246,.30), transparent 64%),
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(240,247,255,.88));
  border:1px solid rgba(255,255,255,.85);
  box-shadow:0 60px 110px -48px rgba(20,60,150,.5), inset 0 1px 0 rgba(255,255,255,.9);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.cta-band::before{background:radial-gradient(circle, rgba(45,108,246,.16), transparent 62%)}
.cta-band::after{background:radial-gradient(circle, rgba(124,92,252,.2), transparent 62%)}
.cta-band p{color:var(--mut)}
.cta-band h2 .g2{background:linear-gradient(95deg,#2D6CF6,#14B8A6 70%,#0FA98F);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}

/* channel chips become colored liquid-glass tokens */
.cta-band .cta-chip{border-color:rgba(255,255,255,.9);
  box-shadow:0 18px 36px -14px rgba(20,60,150,.45), inset 0 1px 0 rgba(255,255,255,.5)}
.cta-band .cta-chip.c1{background:linear-gradient(150deg,#2D6CF6,#1452C6)}
.cta-band .cta-chip.c2{background:linear-gradient(150deg,#22D3EE,#0E9CBF)}
.cta-band .cta-chip.c3{background:linear-gradient(150deg,#25D366,#128C7E)}

/* chips/mark must stay absolute above the drifting light */
.cta-band .cta-chip{position:absolute; z-index:1}
.cta-band .cta-mark{position:absolute; z-index:0}

/* primary button flips to ink so it pops on glass */
.cta-band .cta-white{background:var(--ink); color:#fff; white-space:nowrap;
  box-shadow:0 24px 44px -18px rgba(10,18,34,.55)}
.cta-band .cta-ghost{border-color:rgba(10,18,34,.22); color:var(--ink)}
.cta-band .cta-ghost:hover{background:rgba(10,18,34,.05)}

/* wave horizon in brand blues, packets in deep cyan */
.cta-band .cta-mark{right:-70px; bottom:-80px; width:600px; opacity:1;
  filter:drop-shadow(0 6px 16px rgba(45,108,246,.18))}
.cta-band .cta-mark .wv path:nth-child(1){stroke:rgba(45,108,246,.30)}
.cta-band .cta-mark .wv path:nth-child(2){stroke:rgba(45,108,246,.26)}
.cta-band .cta-mark .wv path:nth-child(3){stroke:rgba(34,174,239,.24)}
.cta-band .cta-mark .wv path:nth-child(4){stroke:rgba(28,197,222,.22)}
.cta-band .cta-mark .wv path:nth-child(5){stroke:rgba(24,194,185,.20)}
.cta-band .cta-mark .wv path:nth-child(6){stroke:rgba(20,184,166,.18)}
.cta-band .cta-mark .pk path{stroke:#0E7DD8; stroke-width:2.4; stroke-linecap:round; opacity:0}
@media (prefers-reduced-motion:no-preference){
  .cta-band .cta-mark .pk path{opacity:.95; stroke-dasharray:3 97; stroke-dashoffset:100; animation:netPacket 3.8s linear infinite}
  .cta-band .cta-mark .pk path:nth-child(2){animation-duration:3s; animation-delay:1.4s; animation-direction:reverse}
  .cta-band .cta-mark .pk path:nth-child(3){animation-duration:4.2s; animation-delay:.7s}
  .cta-band .cta-mark .pk path:nth-child(4){animation-duration:3.2s; animation-delay:2s; animation-direction:reverse}
  .cta-band .cta-mark .pk path:nth-child(5){animation-duration:3.6s; animation-delay:1.1s}
  .cta-band .cta-mark .pk path:nth-child(6){animation-duration:2.9s; animation-delay:.3s; animation-direction:reverse}
}
@media (max-width:980px){ .cta-band .cta-mark{width:260px; right:-46px; bottom:-42px} }

/* ---- Trust label: quietly live ---- */
.trust .label{display:inline-flex; align-items:center; gap:9px}
.trust .label::before{content:''; width:7px; height:7px; border-radius:50%; background:#10B981; flex:0 0 auto}
@media (prefers-reduced-motion:no-preference){
  .trust .label::before{animation:livePing 2.6s cubic-bezier(.3,.6,.4,1) infinite}
}
@keyframes livePing{0%{box-shadow:0 0 0 0 rgba(16,185,129,.42)}70%{box-shadow:0 0 0 9px rgba(16,185,129,0)}100%{box-shadow:0 0 0 0 rgba(16,185,129,0)}}
@media print{
  .net-branch, .net-line, .net-pulse, .price.best::before, .cta-band .cta-mark, #demo .container::before, #demo .container::after{display:none}
}