/* Every mark keeps its three original outlines and a 2.5s / 24 bpm cycle. */
.login-scene.heartbeat-scene.variant-6 .logo-scene svg,
.login-scene.heartbeat-scene.variant-7 .logo-scene svg,
.login-scene.heartbeat-scene.variant-14 .logo-scene svg{animation:heartbeat-double-scale 2.5s cubic-bezier(.32,0,.2,1) infinite}
.login-scene.heartbeat-scene.variant-6 .logo-scene svg{--main-x:1.10;--main-y:1.10;--settle-x:1.006;--settle-y:1.006;--second-x:1.05;--second-y:1.05}
.login-scene.heartbeat-scene.variant-7 .logo-scene svg{--main-x:1.12;--main-y:1.04;--settle-x:1.008;--settle-y:1.002;--second-x:1.06;--second-y:1.02}
.login-scene.heartbeat-scene.variant-14 .logo-scene svg{transform-origin:20% 50%;--main-x:1.10;--main-y:1.10;--settle-x:1.006;--settle-y:1.006;--second-x:1.05;--second-y:1.05}
@keyframes heartbeat-double-scale{
  0%,45%,100%{transform:scale(1)}
  8%{transform:scale(var(--main-x),var(--main-y))}
  14%{transform:scale(var(--settle-x),var(--settle-y))}
  27%{transform:scale(var(--second-x),var(--second-y))}
  34%{transform:scale(1.002)}
}

/* 8 — contour weight carries the two beats. */
.login-scene.heartbeat-scene.variant-8 .logo-scene path{animation:heartbeat-contour 2.5s cubic-bezier(.32,0,.2,1) infinite}
@keyframes heartbeat-contour{
  0%,45%,100%{stroke-width:1.7px;stroke-opacity:.8}
  8%{stroke-width:2.8px;stroke-opacity:1}
  14%{stroke-width:1.8px;stroke-opacity:.82}
  27%{stroke-width:2.25px;stroke-opacity:.94}
  34%{stroke-width:1.72px;stroke-opacity:.8}
}

/* 9 — the impulse travels stripe by stripe. */
.login-scene.heartbeat-scene.variant-9 .stripe{animation:heartbeat-ripple 2.5s cubic-bezier(.32,0,.2,1) infinite}
.login-scene.heartbeat-scene.variant-9 .stripe:nth-child(1){animation-delay:0s}
.login-scene.heartbeat-scene.variant-9 .stripe:nth-child(2){animation-delay:80ms}
.login-scene.heartbeat-scene.variant-9 .stripe:nth-child(3){animation-delay:160ms}
@keyframes heartbeat-ripple{
  0%,45%,100%{transform:scale(1)}
  8%{transform:scale(1.07)}
  14%{transform:scale(1.004)}
  27%{transform:scale(1.035)}
  34%{transform:scale(1.002)}
}

/* 10 — a small fan opens from the upper and lower outlines. */
.login-scene.heartbeat-scene.variant-10 .logo-scene svg{animation:heartbeat-fan-mark 2.5s cubic-bezier(.32,0,.2,1) infinite}
.login-scene.heartbeat-scene.variant-10 .stripe{animation:heartbeat-fan-stripe 2.5s cubic-bezier(.32,0,.2,1) infinite}
.login-scene.heartbeat-scene.variant-10 .stripe:nth-child(1){--fan-shift:-2.5px;--fan-settle:-1.125px}
.login-scene.heartbeat-scene.variant-10 .stripe:nth-child(2){--fan-shift:0px;--fan-settle:0px}
.login-scene.heartbeat-scene.variant-10 .stripe:nth-child(3){--fan-shift:2.5px;--fan-settle:1.125px}
@keyframes heartbeat-fan-mark{
  0%,45%,100%{transform:scale(1)}
  8%{transform:scale(1.045)}
  14%{transform:scale(1.004)}
  27%{transform:scale(1.022)}
  34%{transform:scale(1.002)}
}
@keyframes heartbeat-fan-stripe{
  0%,45%,100%{transform:translateY(0)}
  8%{transform:translateY(var(--fan-shift))}
  14%{transform:translateY(0)}
  27%{transform:translateY(var(--fan-settle))}
  34%{transform:translateY(0)}
}

/* 11 — the whole mark lifts with the primary beat. */
.login-scene.heartbeat-scene.variant-11 .logo-scene svg{animation:heartbeat-lift 2.5s cubic-bezier(.32,0,.2,1) infinite}
@keyframes heartbeat-lift{
  0%,45%,100%{transform:translateY(0) scale(1)}
  8%{transform:translateY(-8px) scale(1.08)}
  14%{transform:translateY(-.5px) scale(1.004)}
  27%{transform:translateY(-3px) scale(1.04)}
  34%{transform:translateY(0) scale(1.002)}
}

/* 12 — a restrained elastic recoil settles before the second beat. */
.login-scene.heartbeat-scene.variant-12 .logo-scene svg{animation:heartbeat-release 2.5s cubic-bezier(.28,.75,.25,1) infinite}
@keyframes heartbeat-release{
  0%,45%,100%{transform:scale(1)}
  8%{transform:scale(1.095)}
  13%{transform:scale(.995)}
  19%{transform:scale(1.008)}
  23%{transform:scale(1)}
  27%{transform:scale(1.05)}
  31%{transform:scale(.998)}
  37%{transform:scale(1.004)}
  41%{transform:scale(1)}
}

/* 13 — a shallow CSS perspective adds a quiet sense of depth. */
.login-scene.heartbeat-scene.variant-13 .logo-scene svg{animation:heartbeat-depth 2.5s cubic-bezier(.32,0,.2,1) infinite}
@keyframes heartbeat-depth{
  0%,45%,100%{transform:perspective(700px) rotateY(0deg) scale(1)}
  8%{transform:perspective(700px) rotateY(12deg) scale(1.09)}
  14%{transform:perspective(700px) rotateY(0deg) scale(1.004)}
  27%{transform:perspective(700px) rotateY(6deg) scale(1.045)}
  34%{transform:perspective(700px) rotateY(0deg) scale(1.002)}
}

/* 15 — a wider, cinematic primary expansion. */
.login-scene.heartbeat-scene.variant-15 .logo-scene svg{animation:heartbeat-cinematic 2.5s cubic-bezier(.32,0,.2,1) infinite}
@keyframes heartbeat-cinematic{
  0%,45%,100%{transform:translateY(0) scale(1)}
  8%{transform:translateY(-3px) scale(1.13)}
  14%{transform:translateY(0) scale(1.005)}
  27%{transform:translateY(-1.5px) scale(1.065)}
  34%{transform:translateY(0) scale(1.002)}
}

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

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