/* QRT Connect sign-in decoration, shared visually with QRT Business Hub. */
  .ambient-stage { position: fixed; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
  .login-card { position: relative; z-index: 1; }
  .silk { position: absolute; width: 100vmax; height: 80vmax; border-radius: 50%; }
  .silk-one {
    left: -48vmax; top: -44vmax;
    background: radial-gradient(ellipse, rgba(153,48,72,.38), rgba(103,31,54,.12) 42%, transparent 68%);
    animation: silkFlow 18s ease-in-out infinite alternate;
  }
  .silk-two {
    right: -48vmax; bottom: -44vmax;
    background: radial-gradient(ellipse, rgba(177,115,59,.21), rgba(104,36,55,.18) 38%, transparent 68%);
    animation: silkFlow 22s ease-in-out -9s infinite alternate-reverse;
  }
  .ornament { position: absolute; width: clamp(280px, 42vw, 680px); aspect-ratio: 1;
              border: 1px solid rgba(232,206,116,.18); border-radius: 50%;
              animation: ornamentTurn 48s linear infinite; }
  .ornament::before, .ornament::after { content: ''; position: absolute; inset: 12%;
    border: 1px solid rgba(232,206,116,.12); border-radius: 34%; transform: rotate(35deg); }
  .ornament::after { inset: 24%; transform: rotate(-25deg); }
  .ornament-one { left: -18%; top: -20%; }
  .ornament-two { right: -18%; bottom: -24%; animation-direction: reverse; }
  .petal { position: absolute; width: 8px; height: 14px; border-radius: 2px 10px;
    border: 1px solid rgba(232,206,116,.45); opacity: 0;
    animation: petalDrift 14s ease-in-out infinite; }
  @keyframes silkFlow { from { transform: translate3d(-3%, -2%, 0) rotate(-12deg); }
                       to { transform: translate3d(12%, 10%, 0) rotate(14deg); } }
  @keyframes ornamentTurn { to { transform: rotate(360deg); } }
  @keyframes petalDrift {
    0%,100% { opacity: 0; transform: translate3d(0, 32px, 0) rotate(0deg); }
    20%,75% { opacity: .65; }
    90% { opacity: 0; transform: translate3d(30px, -110px, 0) rotate(140deg); }
  }
  .login-card { animation: cardIn .85s cubic-bezier(.2,.7,.2,1) .15s both; }
  /* Two gold trails follow the actual rounded border at every card size. */
  .card-orbit { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4;
                pointer-events: none; overflow: visible; }
  .card-orbit rect { x: 2px; y: 2px; width: calc(100% - 4px); height: calc(100% - 4px);
    rx: 24px; fill: none; stroke: #ffe49a; stroke-width: 2;
    stroke-dasharray: 10 90; stroke-linecap: round;
    animation: borderOrbit 9s linear infinite; }
  .card-orbit .orbit-soft { stroke: #d3a747; stroke-width: 4; opacity: .28;
    stroke-dasharray: 17 83; animation-delay: -4.5s; }
  @keyframes borderOrbit { to { stroke-dashoffset: -100; } }
  .ring::before { content: ''; position: absolute; inset: -12px; border-radius: 50%;
    border: 1px dashed rgba(232,206,116,.34); pointer-events: none;
    animation: ornamentTurn 20s linear infinite; }
  .ring.is-working::before, .ring.is-fail::before, .ring.is-done::before { animation: none; opacity: .25; }

  .ring:not(.is-working):not(.is-fail) #ringIcon { animation: connectLockFloat 5s ease-in-out infinite; }
  .lc-form > * { animation: connectRise .55s ease both; }
  .lc-form > :nth-child(2) { animation-delay: .08s; }
  .lc-form > :nth-child(3) { animation-delay: .14s; }
  .lc-form > :nth-child(n+4) { animation-delay: .20s; }
  .btn-gold { position: relative; overflow: hidden; }
  .btn-gold::after { content: ''; position: absolute; inset: 0; pointer-events: none;
    background: linear-gradient(110deg, transparent 25%, rgba(255,255,255,.3) 50%, transparent 75%);
    transform: translateX(-110%); }
  .btn-gold:hover:not(:disabled)::after { transform: translateX(110%); transition: transform .65s ease; }
  @keyframes cardIn { from { opacity: 0; transform: translateY(22px) scale(.985); } to { opacity: 1; transform: none; } }
  @keyframes connectRise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  @keyframes connectLockFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  @media (max-width: 767.98px) {
    .ornament-one { left: -55%; top: -12%; }
    .ornament-two { right: -55%; bottom: -12%; }
  }
  @media (prefers-reduced-motion: reduce) {
    .ambient-stage *, .login-card, .card-orbit rect, .lc-form > *, .ring::before, #ringIcon {
      animation: none !important;
    }
    .btn-gold::after { transition: none !important; }
  }

  .lc-form > img { animation: none; }