/* Amplitudes are intentional: motion must read on a small screen too. */
.login-scene[class*="variant-"] .logo-scene svg{animation:none;opacity:.92;transform-origin:50% 50%}
.login-scene[class*="variant-"] .logo-scene path{stroke-opacity:.8}
.login-scene .stripe{transform-box:view-box;transform-origin:50% 50%}

/* 1 — one continuous, unbroken floating gesture. */
.login-scene.variant-1 .logo-scene svg{animation:atelier-float 7s cubic-bezier(.45,0,.55,1) infinite}
@keyframes atelier-float{
  0%,100%{transform:translateY(12px) rotate(-2deg)}
  50%{transform:translateY(-12px) rotate(2deg)}
}

/* 2 — the outer ribbons open symmetrically, then reunite. */
.login-scene.variant-2 .stripe{animation:atelier-fan 8s cubic-bezier(.4,0,.3,1) infinite}
.login-scene.variant-2 .stripe:nth-child(1){--fan-y:-5px;--fan-x:2px;--fan-angle:-3deg}
.login-scene.variant-2 .stripe:nth-child(2){--fan-y:0px;--fan-x:-2px;--fan-angle:0deg}
.login-scene.variant-2 .stripe:nth-child(3){--fan-y:5px;--fan-x:2px;--fan-angle:3deg}
@keyframes atelier-fan{
  0%,12%,88%,100%{transform:translate(0,0) rotate(0deg)}
  38%,62%{transform:translate(var(--fan-x),var(--fan-y)) rotate(var(--fan-angle))}
}

/* 3 — a faint original remains while the full contours are drawn. */
.login-scene.variant-3 .contour-base path{stroke-opacity:.25}
.login-scene.variant-3 .stripe path{stroke-dasharray:100 100;animation:atelier-signature 8s cubic-bezier(.45,0,.25,1) infinite;animation-delay:-1.3s}
.login-scene.variant-3 .stripe:nth-last-child(2) path{animation-delay:-.65s}
.login-scene.variant-3 .stripe:nth-last-child(1) path{animation-delay:0s}
@keyframes atelier-signature{
  0%,6%{stroke-dashoffset:100;opacity:.2}
  40%,66%{stroke-dashoffset:0;opacity:1}
  92%,100%{stroke-dashoffset:-100;opacity:.2}
}

/* 4 — a spatial turn of the flat mark, without a WebGL scene. */
.login-scene.variant-4 .logo-scene svg{animation:atelier-orbit 8s cubic-bezier(.45,0,.55,1) infinite}
@keyframes atelier-orbit{
  0%,100%{transform:perspective(700px) rotateY(-24deg) rotateX(9deg) rotateZ(-3deg)}
  50%{transform:perspective(700px) rotateY(24deg) rotateX(-9deg) rotateZ(3deg)}
}

/* 5 — staggered horizontal currents preserve the vertical order. */
.login-scene.variant-5 .stripe{animation:atelier-current 7s cubic-bezier(.45,0,.55,1) infinite}
.login-scene.variant-5 .stripe:nth-child(1){--current-y:-.8px;animation-delay:0s}
.login-scene.variant-5 .stripe:nth-child(2){--current-y:0px;animation-delay:-1.15s}
.login-scene.variant-5 .stripe:nth-child(3){--current-y:.8px;animation-delay:-2.3s}
@keyframes atelier-current{
  0%,100%{transform:translate(-5px,var(--current-y)) scaleX(.97)}
  50%{transform:translate(5px,var(--current-y)) scaleX(1.03)}
}

.motion-paused .login-scene[class*="variant-"] .logo-scene svg,
.motion-paused .login-scene[class*="variant-"] .stripe,
.motion-paused .login-scene[class*="variant-"] .stripe path{animation-play-state:paused}

@media(prefers-reduced-motion:reduce){
  .login-scene[class*="variant-"] .logo-scene svg,
  .login-scene[class*="variant-"] .stripe,
  .login-scene[class*="variant-"] .stripe path{animation:none!important;transform:none!important;opacity:1!important}
  .login-scene.variant-3 .stripe path{stroke-dasharray:none;stroke-dashoffset:0}
}