.eventbind-bridge {
  --bridge-gap: clamp(88px, 16vw, 144px);
  box-sizing: border-box;
  min-height: 100svh;
  width: 100%;
  display: grid;
  place-items: center;
  padding: 28px 20px;
  background: #fff;
  color: #26104f;
  font-family: 'Plus Jakarta Sans', Arial, sans-serif;
  text-align: center;
  overflow: hidden;
}
.eventbind-bridge *, .eventbind-bridge *::before, .eventbind-bridge *::after { box-sizing: border-box; }
.bridge-content { width: min(100%, 460px); }
.bridge-motion { position: relative; width: min(100%, 360px); height: 118px; margin: 0 auto 25px; }
.bridge-logo { position: absolute; top: 11px; left: 50%; display: grid; place-items: center; width: 96px; height: 96px; margin-left: -48px; transform-origin: center; will-change: transform, opacity; }
.bridge-logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.bridge-logo-tech { transform: translateX(calc(-1 * var(--bridge-gap))); }
.bridge-logo-event { transform: translateX(var(--bridge-gap)); }
.bridge-arrow { position: absolute; top: 49px; left: 50%; width: 72px; height: 20px; transform: translateX(-50%); color: #6328e8; }
.bridge-arrow svg { display: block; width: 100%; height: 100%; overflow: visible; animation: bridge-arrow-travel 1.45s linear infinite; }
.bridge-logout .bridge-arrow svg { transform: scaleX(-1); animation-name: bridge-arrow-travel-reverse; }
.bridge-arrow-line { stroke: #d5c2ff; stroke-width: 2; stroke-linecap: round; }
.bridge-arrow-head { stroke: #6328e8; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.bridge-status { min-height: 27px; margin: 0; color: #594b6b; font-family: 'Plus Jakarta Sans', Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.65; letter-spacing: .01em; }
.bridge-retry { display: inline-block; margin-top: 14px; color: #6328e8; font-size: 15px; font-weight: 600; }
.bridge-retry[hidden] { display: none; }
.eventbind-bridge.is-entering .bridge-logo-tech { animation: bridge-tech-enter .82s cubic-bezier(.2,.76,.2,1) both; }
.eventbind-bridge.is-entering .bridge-logo-event { animation: bridge-event-enter .82s cubic-bezier(.2,.76,.2,1) both; }
.eventbind-bridge.is-entering .bridge-arrow { animation: bridge-arrow-enter .42s .12s both; }
.eventbind-bridge.is-complete .bridge-logo-tech { animation: bridge-tech-complete .8s cubic-bezier(.22,.74,.25,1) both; }
.eventbind-bridge.is-complete .bridge-logo-event { animation: bridge-event-complete .8s cubic-bezier(.22,.74,.25,1) both; }
.eventbind-bridge.is-complete .bridge-arrow { animation: bridge-arrow-exit .28s both; }
.eventbind-bridge.is-complete .bridge-status { animation: bridge-status-exit .28s both; }
@keyframes bridge-tech-enter { from { transform: translateX(0) rotate(0); } to { transform: translateX(calc(-1 * var(--bridge-gap))) rotate(-360deg); } }
@keyframes bridge-event-enter { from { opacity: 0; transform: translateX(calc(var(--bridge-gap) + 90px)) rotate(90deg); } to { opacity: 1; transform: translateX(var(--bridge-gap)) rotate(0); } }
@keyframes bridge-arrow-enter { from { opacity: 0; transform: translate(-50%, 7px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes bridge-arrow-travel { 0% { transform: translateX(-27px); opacity: 0; } 12% { opacity: 1; } 68% { transform: translateX(24px); opacity: 1; } 84%, 100% { transform: translateX(36px); opacity: 0; } }
@keyframes bridge-arrow-travel-reverse { 0% { transform: translateX(27px) scaleX(-1); opacity: 0; } 12% { opacity: 1; } 68% { transform: translateX(-24px) scaleX(-1); opacity: 1; } 84%, 100% { transform: translateX(-36px) scaleX(-1); opacity: 0; } }
@keyframes bridge-tech-complete { 0% { opacity: 1; transform: translateX(calc(-1 * var(--bridge-gap))) rotate(0); } 72% { opacity: .45; } 100% { opacity: 0; transform: translateX(0) rotate(360deg); } }
@keyframes bridge-event-complete { from { transform: translateX(var(--bridge-gap)) rotate(0); } to { transform: translateX(0) rotate(-360deg); } }
@keyframes bridge-arrow-exit { to { opacity: 0; } }
@keyframes bridge-status-exit { to { opacity: 0; transform: translateY(7px); } }
@media (max-width: 480px) { .eventbind-bridge { --bridge-gap: clamp(82px, 22vw, 108px); } .bridge-motion { width: min(100%, 310px); } .bridge-logo { width: 76px; height: 76px; margin-left: -38px; top: 16px; } .bridge-arrow { top: 45px; width: 54px; } }
@media (prefers-reduced-motion: reduce) { .eventbind-bridge * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; } .bridge-arrow svg { animation: none !important; } }