/* RExelerate / Acceleration mark
   The four faces use the geometry of assets/logo-negativ.svg. This component
   is decorative and self-contained; copy and call-to-action layout stay intact. */
.brand-motion-hero { isolation:isolate; }
.brand-motion-hero::after { display:none; }
.brand-motion-hero > .wrap { position:relative; z-index:1; }
.brand-motion {
  --motion-duration:10s;
  position:absolute; z-index:0; pointer-events:none; user-select:none;
  top:-38px; right:max(-145px,calc((100vw - 1220px)/2 - 165px));
  width:clamp(600px,56vw,800px); height:660px; overflow:hidden;
  opacity:1; contain:layout paint;
  -webkit-mask-image:linear-gradient(90deg,transparent 1%,#000 26%);
  mask-image:linear-gradient(90deg,transparent 1%,#000 26%);
}
/* A complete static brand shape exists before JavaScript, with no request,
   delayed layout, or animation. Enhancement replaces only the decoration. */
.brand-motion::before {
  content:""; position:absolute; inset:0;
  background:radial-gradient(ellipse at 65% 47%,rgba(255,92,26,.16),transparent 56%);
}
.brand-motion:not(.is-enhanced)::after {
  content:""; position:absolute; inset:0;
  background:center / 100% 100% no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 660'%3E%3Cdefs%3E%3ClinearGradient id='o' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop stop-color='%23cc3709'/%3E%3Cstop offset='.48' stop-color='%23FF5C1A'/%3E%3Cstop offset='1' stop-color='%23ffc18b'/%3E%3C/linearGradient%3E%3ClinearGradient id='m' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop stop-color='%23c8d9e3'/%3E%3Cstop offset='.6' stop-color='%238ca4b7'/%3E%3Cstop offset='1' stop-color='%2320394e'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate(186 112) scale(3.5)'%3E%3Cg transform='translate(6 7)' fill='%23332927'%3E%3Cpath d='M3.94 20.06 42.04 58.16 58.16 42.04 20.06 3.94Z M61.84 77.96 99.94 116.06 116.06 99.94 77.96 61.84Z M20.06 116.06 99.57 36.56 83.44 20.43 3.94 99.94Z M109.7 10.3 109.83 46.82 73.18 10.17Z'/%3E%3C/g%3E%3Cpath fill='url(%23m)' d='M3.94 20.06 42.04 58.16 58.16 42.04 20.06 3.94Z M61.84 77.96 99.94 116.06 116.06 99.94 77.96 61.84Z'/%3E%3Cpath fill='url(%23o)' d='M20.06 116.06 99.57 36.56 83.44 20.43 3.94 99.94Z M109.7 10.3 109.83 46.82 73.18 10.17Z'/%3E%3C/g%3E%3C/svg%3E");
}
.brand-motion-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.brand-motion-sculpture { transform-origin:405px 330px; animation:rxl-sculpture var(--motion-duration) cubic-bezier(.45,0,.55,1) infinite; }
.brand-motion-echo { transform-origin:400px 335px; animation:rxl-echo var(--motion-duration) cubic-bezier(.45,0,.55,1) infinite; }
.brand-motion-glint { animation:rxl-glint 8s cubic-bezier(.3,0,.3,1) infinite; }
.brand-motion-streak { animation:rxl-streak 5.8s cubic-bezier(.36,.02,.28,1) infinite; }
.brand-motion-streak--two { animation-delay:-2s; animation-duration:7s; }
.brand-motion-streak--three { animation-delay:-4.4s; animation-duration:8.2s; }
.brand-motion-sculpture,.brand-motion-echo,.brand-motion-glint,.brand-motion-streak { animation-play-state:paused; }
.brand-motion[data-motion-state="running"] .brand-motion-sculpture,
.brand-motion[data-motion-state="running"] .brand-motion-echo,
.brand-motion[data-motion-state="running"] .brand-motion-glint,
.brand-motion[data-motion-state="running"] .brand-motion-streak { animation-play-state:running; }
@keyframes rxl-sculpture {
  0%,100% { transform:translate3d(0,5px,0) rotate(-2deg); }
  50% { transform:translate3d(7px,-9px,0) rotate(1.5deg); }
}
@keyframes rxl-echo {
  0%,100% { transform:translate3d(-4px,8px,0); opacity:.22; }
  50% { transform:translate3d(6px,-5px,0); opacity:.38; }
}
@keyframes rxl-glint {
  0%,14% { transform:translate3d(-250px,160px,0); opacity:0; }
  24% { opacity:.46; }
  58% { opacity:.23; }
  72%,100% { transform:translate3d(490px,-270px,0); opacity:0; }
}
@keyframes rxl-streak {
  0% { transform:translate3d(-130px,130px,0); opacity:0; }
  16% { opacity:.78; }
  60% { opacity:.58; }
  82%,100% { transform:translate3d(380px,-380px,0); opacity:0; }
}
.brand-motion-toggle {
  position:absolute; right:var(--pad,32px); bottom:108px;
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  min-height:44px; padding:10px 13px; border:1px solid rgba(192,208,220,.25);
  border-radius:999px; background:#0c1b2ad9; color:#c5d3df;
  font:500 .75rem/1.4 var(--ff,system-ui,sans-serif); cursor:pointer;
}
.brand-motion-toggle[hidden] { display:none; }
.brand-motion-toggle:hover { background:#162c3f; color:#fff; border-color:#c3d3df; }
.brand-motion-toggle:focus-visible { outline:2px solid #ffab7c; outline-offset:4px; }
.brand-motion-toggle-icon { display:block; position:relative; width:10px; height:11px; flex:none; }
.brand-motion-toggle-icon::before,.brand-motion-toggle-icon::after {
  content:""; position:absolute; top:0; height:11px; width:3px; background:currentColor;
}
.brand-motion-toggle-icon::before { left:0; }
.brand-motion-toggle-icon::after { right:0; }
.brand-motion-toggle[aria-pressed="true"] .brand-motion-toggle-icon::before {
  width:0; height:0; border-top:6px solid transparent; border-bottom:6px solid transparent;
  border-left:9px solid currentColor; background:none;
}
.brand-motion-toggle[aria-pressed="true"] .brand-motion-toggle-icon::after { display:none; }
@media (max-width:1100px) and (min-width:761px) {
  .brand-motion { right:-170px; opacity:.28;
    -webkit-mask-image:linear-gradient(90deg,transparent 12%,rgba(0,0,0,.45) 48%,#000 88%);
    mask-image:linear-gradient(90deg,transparent 12%,rgba(0,0,0,.45) 48%,#000 88%);
  }
}
@media (max-width:760px) {
  .brand-motion { --motion-duration:14s; top:-44px; right:-225px; width:540px; height:530px; opacity:.4;
    -webkit-mask-image:linear-gradient(90deg,transparent 12%,rgba(0,0,0,.45) 48%,#000 82%);
    mask-image:linear-gradient(90deg,transparent 12%,rgba(0,0,0,.45) 48%,#000 82%);
  }
  .brand-motion-sculpture { animation-name:rxl-sculpture-mobile; }
  .brand-motion-echo { display:none; }
  .brand-motion-streak { animation-duration:9s; }

}
/* Keep the control in flow on tablet as well: enlarged text must never meet
   the independent hero-bottom link. Decoration sizing still changes at 760px. */
@media (max-width:1100px) {
  .brand-motion-toggle { position:relative; right:auto; bottom:auto; margin-top:18px; }
  /* Reserve the control before enhancement to avoid shifting later sections. */
  .brand-motion-toggle[hidden] { display:inline-flex!important; visibility:hidden; }
  .brand-motion-hero .hero-bottom { margin-top:24px; }
}
@keyframes rxl-sculpture-mobile {
  0%,100% { transform:translate3d(0,3px,0) rotate(-1deg); }
  50% { transform:translate3d(3px,-5px,0) rotate(1deg); }
}
@media (prefers-reduced-motion:reduce) {
  .brand-motion *, .brand-motion *::before, .brand-motion *::after { animation:none!important; transition:none!important; }
  .brand-motion-glint,.brand-motion-streak { display:none; }
  .brand-motion-sculpture,.brand-motion-echo { transform:none; }
  .brand-motion-toggle,.brand-motion-toggle[hidden] { display:none!important; }
}
@media print { .brand-motion,.brand-motion-toggle { display:none!important; } }