/* === Animated Intelibs tower->logo lockup (ported from the Intelibs MST app) ===
   A radio tower draws itself, then converges/blooms into the Intelibs circular mark
   (blue + lime) with signal waves and the "Intelibs" wordmark. Tower lines are #2dd4bf
   — the same teal as FiberOSP's accent. Used in the header, the login card and a
   one-time load splash. */
.ib-anim{overflow:visible;display:block}
.ib-anim .ibx-leg{fill:none;stroke:#2dd4bf;stroke-width:3.6;stroke-linecap:round;stroke-dasharray:130;stroke-dashoffset:130}
.ib-anim .ibx-br{stroke:#1e9e84;stroke-width:1.9;stroke-linecap:round;opacity:0}
.ib-anim .ibx-ant{stroke:#2dd4bf;stroke-width:2.6;stroke-linecap:round;fill:none;opacity:0}
.ib-anim .ibx-antbox{fill:#1e9e84;opacity:0}
.ib-anim .ibx-ground{stroke:#1e9e84;stroke-width:2.8;stroke-linecap:round;opacity:0}
.ib-anim .ibx-cBlue{fill:#0060A8}
.ib-anim .ibx-cLime{fill:#9CCC30}
.ib-anim .ibx-circs{opacity:0;transform-box:view-box;transform-origin:100px 108px}
.ib-anim .ibx-istem,.ib-anim .ibx-idot{fill:#FCFEEE;opacity:0;transform-box:view-box;transform-origin:100px 108px}
.ib-anim .ibx-beaconGlow{fill:#bdffe6;opacity:0;transform-box:view-box;transform-origin:100px 51px}
.ib-anim .ibx-legs{transform-box:view-box;transform-origin:100px 108px}
.ib-anim .ibx-wave{fill:none;stroke:#2dd4bf;stroke-width:7.14;stroke-linecap:round;opacity:0;transform-box:view-box;transform-origin:104px 84px}
.ib-anim .ibx-wordmark{opacity:0;transform-box:view-box;transform-origin:100px 214px;font-family:'Syne','DM Sans',sans-serif;font-weight:700;font-size:40px;fill:#dff6ff;letter-spacing:-1px}

.ib-anim.ibx-go .ibx-ground{animation:ibx-gIn .4s .15s both, ibx-gOut .5s 3.6s both}
.ib-anim.ibx-go .ibx-leg{animation:ibx-draw 1s .35s both, ibx-converge .7s 3.55s both}
.ib-anim.ibx-go .ibx-br{animation:ibx-popIn .4s var(--bin,1.1s) both, ibx-flyOut .9s var(--bout,3.6s) both}
.ib-anim.ibx-go .ibx-ant{animation:ibx-antIn .45s 1.15s both, ibx-antOut .6s 3.65s both}
.ib-anim.ibx-go .ibx-antbox{animation:ibx-antIn .45s 1.25s both, ibx-antOut .6s 3.65s both}
.ib-anim.ibx-go .ibx-beaconGlow{animation:ibx-beacon 1.2s 1.3s 2, ibx-gOut .4s 3.85s both}
.ib-anim.ibx-go .ibx-cBlueG{animation:ibx-bloom .75s 3.55s both}
.ib-anim.ibx-go .ibx-cLimeG{animation:ibx-bloom .75s 3.72s both}
.ib-anim.ibx-go .ibx-idot{animation:ibx-dot .8s 3.85s both}
.ib-anim.ibx-go .ibx-istem{animation:ibx-iPop .65s 3.98s both}
.ib-anim.ibx-go .ibx-wave{animation:ibx-wavePulse 2.2s 1.45s infinite, ibx-waveColor .8s 3.9s both}
.ib-anim.ibx-go .ibx-wordmark{animation:ibx-word .7s 4.5s both}
.ib-anim.ibx-go .ibx-breathe{animation:ibx-breathe 3.6s 5.1s infinite}

.ib-anim.ibx-go .ibx-br:nth-of-type(1){--bin:1.00s;--bout:3.95s}
.ib-anim.ibx-go .ibx-br:nth-of-type(2){--bin:1.05s;--bout:3.60s}
.ib-anim.ibx-go .ibx-br:nth-of-type(3){--bin:1.10s;--bout:3.82s}
.ib-anim.ibx-go .ibx-br:nth-of-type(4){--bin:1.15s;--bout:3.55s}
.ib-anim.ibx-go .ibx-br:nth-of-type(5){--bin:1.20s;--bout:4.02s}
.ib-anim.ibx-go .ibx-br:nth-of-type(6){--bin:1.25s;--bout:3.66s}
.ib-anim.ibx-go .ibx-br:nth-of-type(7){--bin:1.30s;--bout:3.88s}
.ib-anim.ibx-go .ibx-br:nth-of-type(8){--bin:1.35s;--bout:3.58s}
.ib-anim.ibx-go .ibx-br:nth-of-type(9){--bin:1.40s;--bout:4.05s}
.ib-anim.ibx-go .ibx-br:nth-of-type(10){--bin:1.45s;--bout:3.70s}
.ib-anim.ibx-go .ibx-br:nth-of-type(11){--bin:1.10s;--bout:3.92s}
.ib-anim.ibx-go .ibx-br:nth-of-type(12){--bin:1.15s;--bout:3.63s}
.ib-anim.ibx-go .ibx-br:nth-of-type(13){--bin:1.02s;--bout:3.78s}
.ib-anim.ibx-go .ibx-br:nth-of-type(14){--bin:1.08s;--bout:3.52s}
.ib-anim.ibx-go .ibx-br:nth-of-type(15){--bin:1.18s;--bout:4.00s}
.ib-anim.ibx-go .ibx-br:nth-of-type(16){--bin:1.24s;--bout:3.68s}
.ib-anim.ibx-go .ibx-br:nth-of-type(17){--bin:1.32s;--bout:3.85s}
.ib-anim.ibx-go .ibx-br:nth-of-type(18){--bin:1.38s;--bout:3.57s}
.ib-anim.ibx-go .ibx-br:nth-of-type(19){--bin:1.44s;--bout:3.98s}

@keyframes ibx-draw{from{stroke-dashoffset:130}to{stroke-dashoffset:0}}
@keyframes ibx-converge{from{transform:scaleX(1);opacity:1}to{transform:scaleX(.1);opacity:0}}
@keyframes ibx-gIn{from{opacity:0}to{opacity:.85}}
@keyframes ibx-gOut{to{opacity:0}}
@keyframes ibx-popIn{from{opacity:0}to{opacity:.92}}
@keyframes ibx-flyOut{from{opacity:.92;transform:translate(0,0) rotate(0)}to{opacity:0;transform:translate(var(--dx),var(--dy)) rotate(var(--r))}}
@keyframes ibx-antIn{from{opacity:0}to{opacity:1}}
@keyframes ibx-antOut{to{opacity:0;transform:translateY(-12px) scale(.6)}}
@keyframes ibx-beacon{0%,100%{opacity:0;transform:scale(.6)}50%{opacity:.9;transform:scale(1.35)}}
@keyframes ibx-bloom{0%{opacity:0;transform:scale(.12)}55%{opacity:1}74%{transform:scale(1.05)}100%{opacity:1;transform:scale(1)}}
@keyframes ibx-iPop{0%{opacity:0;transform:scale(.4)}65%{opacity:1;transform:scale(1.13)}100%{opacity:1;transform:scale(1)}}
@keyframes ibx-dot{0%{opacity:0;transform:translateY(-31px) scale(.65)}35%{opacity:1}72%{transform:translateY(3px) scale(1.1)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ibx-wavePulse{0%{opacity:.12;transform:scale(.82)}24%{opacity:1;transform:scale(1)}54%{opacity:1;transform:scale(1)}100%{opacity:.12;transform:scale(.82)}}
@keyframes ibx-waveColor{from{stroke:#2dd4bf}to{stroke:#9CCC30}}
@keyframes ibx-word{0%{opacity:0;transform:translateY(10px) scale(.94)}60%{opacity:1}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes ibx-breathe{0%,100%{filter:drop-shadow(0 0 2px rgba(156,204,48,.35))}50%{filter:drop-shadow(0 0 9px rgba(156,204,48,.75))}}

/* ── placement: FiberOSP header brand + login card + load splash ──
   overflow:hidden clips the fly-out braces + glow to the logo box so the mark never
   spills into the rail/LAYERS below it. */
.brand.ib-brand{cursor:pointer;gap:9px;overflow:hidden}
.brand.ib-brand .ib-anim{height:34px;width:auto;flex:0 0 auto;overflow:hidden}
.brand .brand-txt{display:inline-flex;flex-direction:column;line-height:1.12;white-space:nowrap}
.brand .brand-txt small{margin-left:0}
.login-brand .ib-anim{height:44px;width:auto;flex:0 0 auto;overflow:hidden}

#ib-splash{position:fixed;inset:0;z-index:4000;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(130% 130% at 50% 34%,#0b1822,#04080c);
  transition:opacity .6s ease;cursor:default}
#ib-splash .ib-anim{width:min(56vmin,300px);height:auto}
#ib-splash .ib-skip{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);
  font-family:'DM Sans',sans-serif;font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;
  color:#5e8472;opacity:.7}
#ib-splash.ib-done{opacity:0;pointer-events:none}

@media (prefers-reduced-motion:reduce){
  .ib-anim *{animation:none!important}
  .ib-anim .ibx-leg,.ib-anim .ibx-br,.ib-anim .ibx-ant,.ib-anim .ibx-antbox,.ib-anim .ibx-ground,.ib-anim .ibx-beaconGlow{opacity:0}
  .ib-anim .ibx-circs,.ib-anim .ibx-istem,.ib-anim .ibx-idot,.ib-anim .ibx-wave,.ib-anim .ibx-wordmark{opacity:1!important;transform:none!important}
  .ib-anim .ibx-wave{stroke:#9CCC30}
  #ib-splash{display:none}
}