/* =====================================
  Scroll Scale Animation
===================================== */
.scale-universe{
height:400vh;
position:relative;
}

.scale-stage{
position:sticky;
top:0;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
overflow:hidden;
}

.scale-layer{
position:absolute;
text-align:center;
opacity:0;
transform:scale(3);
transition:all 1.2s ease;
}

.scale-layer.active{
opacity:1;
transform:scale(1);
}

/* 図形 */

.circle{
border-radius:50%;
margin:auto;
background:rgba(120,150,200,0.5);
}

/* サイズ */

.cell{
width:240px;
height:240px;
}

.bacterium{
width:70px;
height:70px;
}

.virus{
width:18px;
height:18px;
}

/* RNA */

.rna{
width:120px;
height:6px;
background:linear-gradient(
90deg,
transparent,
#7fa3d5,
transparent
);
border-radius:3px;
}

/* ラベル */

.scale-layer p{
margin-top:20px;
font-size:18px;
color:#394b63;
}

.scale-layer span{
font-size:12px;
opacity:.7;
}

/* スケールバー */

.scale-indicator{
position:fixed;
bottom:30px;
right:30px;
font-size:12px;
color:#777;
}

.scale-bar{
height:2px;
background:#777;
margin-bottom:4px;
transition:width .8s ease;
}

.scale-text{
font-size:11px;
}

/* =====================================
   Size Animation
===================================== */

.virus-size-animation {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
}

.virus-size-animation .cell {
  width: 200px !important;
  height: 200px !important;
  background: rgba(180, 200, 230, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: transform 1.2s ease, opacity 1.2s ease;
}

.virus-size-animation .virus {
  width: 20px !important;
  height: 20px !important;
  background: rgba(120, 150, 200, 0.6);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: scale(0.6);
  transition: transform 1.2s ease, opacity 1.2s ease;
}