.animated-brand-logo { position:relative;display:grid;place-items:center;flex:none; }
.animated-brand-router { position:relative;width:100%;height:100%;filter:drop-shadow(0 8px 22px rgba(81,66,214,.24)); }
.animated-brand-animation { width:100%;height:100%; }
.animated-brand-social-emissions { position:absolute;inset:0;z-index:1;overflow:visible;pointer-events:none; }
.animated-brand-social-particle { position:absolute;left:calc(50% - 15px);top:35%;width:30px;height:30px;display:grid;place-items:center;border:1px solid color-mix(in srgb,var(--social-color) 38%,rgba(255,255,255,.36));border-radius:10px;background:linear-gradient(145deg,rgba(255,255,255,.17),rgba(24,20,43,.78));color:var(--social-color);font-size:15px;box-shadow:0 5px 16px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.14);opacity:0;animation:brand-social-broadcast 8s cubic-bezier(.16,.82,.24,1) calc(var(--social-delay) + 1.4s) infinite both; }
.animated-brand-led-left { animation:brand-antenna-left 9s linear infinite both; }
.animated-brand-led-right { animation:brand-antenna-right 9s linear infinite both; }
.animated-brand-wordmark { position:absolute;z-index:2;top:50%;left:50%;display:flex;align-items:baseline;gap:4px;direction:ltr;white-space:nowrap;transform:translate(-50%,-50%);font-family:'Readex Pro','Segoe UI',Arial,sans-serif;font-size:clamp(21px,6vw,32px);line-height:1; }
.animated-brand-wordmark>span { display:flex;align-items:baseline; }
.animated-brand-letter { display:inline-block;opacity:0;transform:translateY(11px) rotateX(-38deg) scale(.82);filter:blur(4px);animation:brand-letter-arrive .46s cubic-bezier(.18,.78,.24,1) both; }
.animated-brand-sony { color:#fff;font-family:'Readex Pro','Segoe UI',Arial,sans-serif;font-weight:700;letter-spacing:.005em; }
.animated-brand-wifi { color:#7952ff;font-family:'Readex Pro','Segoe UI',Arial,sans-serif;font-weight:700;letter-spacing:.015em;text-shadow:0 0 12px rgba(121,82,255,.22); }
.animated-brand-wifi .animated-brand-letter { animation:brand-wifi-wave 9s cubic-bezier(.18,.78,.24,1) var(--wifi-delay) infinite both; }
.animated-brand-net { margin-left:8px;color:#fff;font-family:Arial,sans-serif;font-size:.38em;font-weight:800;letter-spacing:.06em; }
.animated-brand-logo--login { width:min(390px,100%);height:min(390px,100%); }
.animated-brand-logo--login .animated-brand-router { animation:login-router-land 1.15s cubic-bezier(.2,.75,.25,1) both,login-router-social-shake 8s ease-in-out 1.4s infinite; }
.animated-brand-logo--login .animated-brand-animation { transform-origin:50% 40%;animation:login-router-idle 12s ease-in-out 1.15s infinite; }
@keyframes login-router-land {
  0% { opacity:0;transform:translate(7.9%,-140px) rotate(-7deg) scale(.86); }
  62% { opacity:1;transform:translate(7.9%,7px) rotate(1deg) scale(1.025); }
  78% { transform:translate(7.9%,-4px) rotate(-.4deg) scale(.995); }
  90% { transform:translate(7.9%,2px) rotate(0) scale(1); }
  100% { opacity:1;transform:translate(7.9%,0) rotate(0) scale(1); }
}
@keyframes login-router-social-shake {
  0%,5%,13%,100% { translate:0 0; }
  6% { translate:-7px 1px; }
  7% { translate:7px -1px; }
  8% { translate:-5px 0; }
  9% { translate:5px 0; }
  10% { translate:-2px 0; }
  11% { translate:2px 0; }
  12% { translate:0 0; }
}
@keyframes login-router-idle {
  0%,79%,100% { transform:rotate(0); }
  81% { transform:rotate(-1.5deg); }
  83% { transform:rotate(1.2deg); }
  85% { transform:rotate(-.6deg); }
  87% { transform:rotate(0); }
}
.animated-brand-logo--login.is-error-shaking .animated-brand-animation { animation:login-router-error-shake 1.1s cubic-bezier(.36,.07,.19,.97) both; }
.animated-brand-logo--login.is-error-shaking .animated-brand-led-left,.animated-brand-logo--login.is-error-shaking .animated-brand-led-right { animation:login-router-error-flash 1.1s steps(1,end) both; }
@keyframes login-router-error-shake {
  0%,100% { transform:translateX(0) rotate(0) scale(1); }
  10% { transform:translateX(-24px) rotate(-14deg) scale(1.08); }
  20% { transform:translateX(22px) rotate(12deg) scale(1.04); }
  30% { transform:translateX(-20px) rotate(-11deg); }
  40% { transform:translateX(18px) rotate(10deg); }
  50% { transform:translateX(-15px) rotate(-8deg); }
  60% { transform:translateX(12px) rotate(6deg); }
  70% { transform:translateX(-9px) rotate(-5deg); }
  80% { transform:translateX(6px) rotate(3deg); }
  90% { transform:translateX(-2px) rotate(-1deg); }
}
@keyframes login-router-error-flash {
  0%,100% { opacity:.24;filter:brightness(.8); }
  12%,36%,60%,84% { opacity:1;filter:brightness(1.6) drop-shadow(0 0 9px rgba(73,242,175,.95)); }
  24%,48%,72% { opacity:.2;filter:brightness(.7); }
}
@keyframes brand-social-broadcast {
  0%,4% { opacity:0;transform:translate(0,0) scale(.3) rotate(0); }
  6% { opacity:.95;transform:translate(0,0) scale(.82) rotate(0); }
  17% { opacity:1;transform:translate(var(--social-dx),var(--social-dy)) scale(1) rotate(var(--social-rotate)); }
  21% { opacity:.82;transform:translate(var(--social-dx),var(--social-dy)) scale(.96) rotate(var(--social-rotate)); }
  25%,100% { opacity:0;transform:translate(var(--social-dx),var(--social-dy)) scale(.68) rotate(var(--social-rotate)); }
}
.animated-brand-logo--panel { width:clamp(190px,22vw,230px);height:98px; }
.animated-brand-logo--panel .animated-brand-router { width:150px;height:116px;position:absolute;left:50%;top:-24px;transform:translateX(-50%); }
.animated-brand-logo--panel .animated-brand-animation { transform:scale(2);transform-origin:50% 0; }
.animated-brand-logo--panel .animated-brand-wordmark { top:auto;bottom:2px;gap:3px;font-size:clamp(15px,1.6vw,19px);transform:translateX(-50%); }
.animated-brand-logo--panel .animated-brand-sony { color:var(--nx-text,#fff); }
.animated-brand-logo--panel .animated-brand-wifi { color:var(--nx-purple,#7952ff); }
.animated-brand-logo--panel .animated-brand-net { color:var(--nx-muted,#b5bac1); }
.animated-brand-logo--loader { width:264px;height:228px; }
.animated-brand-logo--loader .animated-brand-router { width:100%;height:100%;transform:translate(7.9%,47%);filter:drop-shadow(0 12px 30px rgba(81,66,214,.28)); }
.animated-brand-loader-led-1,.animated-brand-loader-led-2,.animated-brand-loader-led-3 { filter:grayscale(1) brightness(.65);opacity:.28;animation:brand-loader-led-step 2.2s ease-in-out infinite; }
.animated-brand-loader-led-2 { animation-delay:.55s; }
.animated-brand-loader-led-3 { animation-delay:1.1s; }
@keyframes brand-letter-arrive { 0% { opacity:0;transform:translateY(11px) rotateX(-38deg) scale(.82);filter:blur(4px); } 72% { opacity:1;transform:translateY(-2px) rotateX(7deg) scale(1.08);filter:blur(0); } 100% { opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:blur(0); } }
@keyframes brand-wifi-wave { 0%,5% { opacity:0;transform:translate(var(--wifi-origin-x),-64px) scale(.58);filter:blur(4px); } 12% { opacity:1;transform:translate(0,-4px) scale(1.16);filter:blur(0); } 16% { transform:translate(0,7px) scale(.88); } 20% { transform:translate(0,-5px) scale(1.08); } 24% { transform:translate(0,2px) scale(.97); } 28%,68% { opacity:1;transform:translate(0,0) scale(1);filter:blur(0); } 74%,100% { opacity:0;transform:translate(calc(var(--wifi-origin-x) * .55),-16px) scale(.7);filter:blur(2px); } }
@keyframes brand-antenna-left { 0%,6%,9%,15% { opacity:1;box-shadow:0 0 7px 3px rgba(73,242,175,.95); } 7%,8%,16%,100% { opacity:.24;box-shadow:0 0 0 rgba(73,242,175,0); } }
@keyframes brand-antenna-right { 18%,24%,27%,33% { opacity:1;box-shadow:0 0 7px 3px rgba(73,242,175,.95); } 0%,17%,25%,26%,34%,100% { opacity:.24;box-shadow:0 0 0 rgba(73,242,175,0); } }
@keyframes brand-loader-led-step { 0%,16% { filter:grayscale(0) brightness(1.3) drop-shadow(0 0 5px rgba(50,223,138,.95));opacity:1; } 22%,100% { filter:grayscale(1) brightness(.65);opacity:.28; } }
@media(prefers-reduced-motion:reduce) { .animated-brand-letter { animation:none;filter:none;opacity:1;transform:none; }.animated-brand-social-emissions { display:none; }.animated-brand-logo--login .animated-brand-router { animation:none;transform:translateX(7.9%); }.animated-brand-logo--login .animated-brand-animation,.animated-brand-logo--login.is-error-shaking .animated-brand-animation { animation:none!important;transform:none!important; }.animated-brand-logo--login.is-error-shaking .animated-brand-led-left,.animated-brand-logo--login.is-error-shaking .animated-brand-led-right { animation:none!important; }.animated-brand-led-left,.animated-brand-led-right { animation:none;opacity:.24!important; }.animated-brand-loader-led-1,.animated-brand-loader-led-2,.animated-brand-loader-led-3 { animation:none;filter:grayscale(1) brightness(.65);opacity:.45; } }
@media(max-width:760px) { .animated-brand-logo--login { width:min(260px,80vw);height:min(260px,80vw); } }
@media(max-width:430px) { .animated-brand-logo--login { width:min(210px,82vw);height:min(210px,82vw); } }

/* Lift the panel router without moving the wordmark. */
.animated-brand-logo--panel .animated-brand-router { top:-32px; }

.animated-brand-logo--panel>.rust-network-devices{inset:auto;left:50%;top:-32px;width:300px;height:232px;transform:translateX(-50%);z-index:1;pointer-events:none}
.animated-brand-logo--panel>.animated-brand-social-emissions{inset:auto;left:50%;top:-32px;width:300px;height:232px;transform:translateX(-50%);pointer-events:none}
.animated-brand-logo--panel .animated-brand-social-particle{width:14px;height:14px;left:calc(50% - 7px);top:38%;border-radius:5px;animation-name:panel-social-broadcast;box-shadow:0 2px 7px #0002}
.animated-brand-logo--panel .animated-brand-social-particle svg{width:10px;height:10px}
@keyframes panel-social-broadcast{0%,4%{opacity:0;transform:scale(.3)}6%{opacity:.95;transform:scale(.82)}17%,21%{opacity:1;transform:translate(calc(var(--social-dx)*.45),calc(var(--social-dy)*.45)) rotate(var(--social-rotate))}25%,100%{opacity:0;transform:translate(calc(var(--social-dx)*.45),calc(var(--social-dy)*.45)) scale(.68)}}
@media(prefers-reduced-motion:reduce){.animated-brand-logo--panel>.animated-brand-social-emissions{display:none}}

.panel-device-packet{opacity:0;pointer-events:none;color:var(--packet-color);transform:translate(var(--packet-from-x),var(--packet-from-y));animation:panel-packet-delivery 12s linear infinite both;filter:drop-shadow(0 0 3px var(--packet-color))}
@keyframes panel-packet-delivery{
0%{opacity:0;transform:translate(var(--packet-from-x),var(--packet-from-y)) scale(.25)}
1.5%{opacity:1;transform:translate(var(--packet-from-x),var(--packet-from-y)) scale(.9)}
5%{opacity:1;transform:translate(var(--packet-mid-x),var(--packet-mid-y)) scale(1)}
9%{opacity:1;transform:translate(var(--packet-to-x),var(--packet-to-y)) scale(.75)}
11%,100%{opacity:0;transform:translate(var(--packet-to-x),var(--packet-to-y)) scale(.05)}
}
@media(prefers-reduced-motion:reduce){.panel-device-packet{display:none}}

/* Animate only the vector body; keep the SVG viewport and layout stable. */
.animated-brand-router .rust-router-character{display:block;transform-box:border-box;shape-rendering:geometricPrecision;translate:none;rotate:none}
.router-throw-body{transform-box:fill-box;transform-origin:50% 70%;animation:router-packet-throw-body 12s ease-in-out 2.4s infinite}
@keyframes router-packet-throw-body{
 0%,3%,33.333%,36.333%,66.667%,69.667%,100%{transform:translate(0,0) rotate(0deg)}
 .5%,1.5%,33.833%,34.833%,67.167%,68.167%{transform:translate(-6px,1px) rotate(-6deg)}
 1%,2%,34.333%,35.333%,67.667%,68.667%{transform:translate(7px,-2px) rotate(7deg)}
 2.5%,35.833%,69.167%{transform:translate(-3px,0) rotate(-3deg)}
}
.animated-brand-logo--panel .animated-brand-router{filter:none}
@media(prefers-reduced-motion:reduce){.router-throw-body{animation:none!important;transform:none!important}}